Vue: Pass vite aliases imports to vue-docgen-api

code/builders/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';
 

code/builders/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<string, string> = {};
+  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;
+}

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}`);

code/frameworks/vue-vite/src/preset.ts

@@ -22,7 +22,7 @@ export const core: PresetProperty<'core'> = async (config, options) => {
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   return mergeConfig(config, {
-    plugins: [vueDocgen()],
+    plugins: [vueDocgen(config)],
     resolve: {
       alias: {
         vue: 'vue/dist/vue.esm.js',

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}`);

code/frameworks/vue3-vite/src/preset.ts

@@ -23,7 +23,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
   }
 
   // Add docgen plugin
-  plugins.push(vueDocgen());
+  plugins.push(vueDocgen(config));
 
   return mergeConfig(config, {
     plugins,