From f88590fededfff790809bdb925fa1aac4dd50c1b Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Mon, 17 Apr 2023 00:05:43 -0300 Subject: [PATCH] fix: pass vite alias paths to vue-docgen-api --- .../vue-vite/src/plugins/vue-docgen.ts | 10 ++++-- code/frameworks/vue-vite/src/preset.ts | 2 +- .../vue3-vite/src/plugins/vue-docgen.ts | 10 ++++-- code/frameworks/vue3-vite/src/preset.ts | 2 +- code/lib/builder-vite/src/index.ts | 1 + .../builder-vite/src/utils/resolve-alias.ts | 35 +++++++++++++++++++ 6 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 code/lib/builder-vite/src/utils/resolve-alias.ts diff --git a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts index e80ca52d60c2..33215031532c 100644 --- a/code/frameworks/vue-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue-vite/src/plugins/vue-docgen.ts @@ -1,9 +1,10 @@ import { parse } from 'vue-docgen-api'; -import type { PluginOption } from 'vite'; +import type { PluginOption, InlineConfig } from 'vite'; import { createFilter } from 'vite'; import MagicString from 'magic-string'; +import { resolveAlias } from '@storybook/builder-vite'; -export function vueDocgen(): PluginOption { +export function vueDocgen(config: InlineConfig): PluginOption { const include = /\.(vue)$/; const filter = createFilter(include); @@ -13,7 +14,10 @@ export function vueDocgen(): PluginOption { async transform(src: string, id: string) { if (!filter(id)) return undefined; - const metaData = await parse(id); + const alias = resolveAlias(config); + const metaData = await parse(id, { + alias, + }); const metaSource = JSON.stringify(metaData); const s = new MagicString(src); s.append(`;__component__.exports.__docgenInfo = ${metaSource}`); diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index f047581dd797..3379c70ab261 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -26,7 +26,7 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async ( export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { return mergeConfig(config, { - plugins: [vueDocgen()], + plugins: [vueDocgen(config)], resolve: { alias: { vue: 'vue/dist/vue.esm.js', diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts index 6bed6a1fed98..28353c6aeac6 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts @@ -1,9 +1,10 @@ import { parse } from 'vue-docgen-api'; -import type { PluginOption } from 'vite'; +import type { PluginOption, InlineConfig } from 'vite'; import { createFilter } from 'vite'; import MagicString from 'magic-string'; +import { resolveAlias } from '@storybook/builder-vite'; -export function vueDocgen(): PluginOption { +export function vueDocgen(config: InlineConfig): PluginOption { const include = /\.(vue)$/; const filter = createFilter(include); @@ -13,7 +14,10 @@ export function vueDocgen(): PluginOption { async transform(src: string, id: string) { if (!filter(id)) return undefined; - const metaData = await parse(id); + const alias = resolveAlias(config); + const metaData = await parse(id, { + alias, + }); const metaSource = JSON.stringify(metaData); const s = new MagicString(src); s.append(`;_sfc_main.__docgenInfo = ${metaSource}`); diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index 7af3f31056e7..62168081d579 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -19,7 +19,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets } // Add docgen plugin - plugins.push(vueDocgen()); + plugins.push(vueDocgen(config)); return mergeConfig(config, { plugins, diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts index 36393ec3c190..d184b162b10a 100644 --- a/code/lib/builder-vite/src/index.ts +++ b/code/lib/builder-vite/src/index.ts @@ -13,6 +13,7 @@ import type { ViteBuilder, StorybookConfigVite } from './types'; export { withoutVitePlugins } from './utils/without-vite-plugins'; export { hasVitePlugins } from './utils/has-vite-plugins'; +export { resolveAlias } from './utils/resolve-alias'; export * from './types'; diff --git a/code/lib/builder-vite/src/utils/resolve-alias.ts b/code/lib/builder-vite/src/utils/resolve-alias.ts new file mode 100644 index 000000000000..f1eb2a48251f --- /dev/null +++ b/code/lib/builder-vite/src/utils/resolve-alias.ts @@ -0,0 +1,35 @@ +import path from 'path'; +import fs from 'fs'; +import type { InlineConfig } from 'vite'; + +function resolveReplacementPath(replacement: string, root?: string) { + const isAbsolutePath = path.isAbsolute(replacement); + + if (isAbsolutePath && !fs.existsSync(replacement) && root) { + const possiblePath = path.join(root, replacement); + if(fs.existsSync(possiblePath)) return possiblePath; + } + + return replacement; +} + +/** + * Resolve the alias from the vite config when the replacement path is relate to the root of vite server to generate an absolute path relate to the system + * @example { '@': '/src' } => { '@': '/home/projects/vue3-vite/src' } + */ +export function resolveAlias(config: InlineConfig) { + const resolvedAlias: Record = {}; + const alias = config.resolve?.alias || {}; + + if (Array.isArray(alias)) { + alias.forEach((item) => { + resolvedAlias[item.find] = resolveReplacementPath(item.replacement, config.root); + }); + } else { + Object.entries(alias).forEach(([find, replacement]) => { + resolvedAlias[find] = resolveReplacementPath(replacement, config.root); + }); + } + + return resolvedAlias; +}