@storybook/builder-vite 0.1.23 → 0.1.26

package/README.md

@@ -21,6 +21,7 @@ To manually migrate:
 Requirements:
 
 - Vite 2.5 or newer
+- Storybook 6.4.0 or newer (for storybook 6.3, use `storybook-builder-vite@0.1.16)
 
 ```bash
 npm install @storybook/builder-vite --save-dev
@@ -58,13 +59,18 @@ In `.storybook/main.js` (or whatever your Storybook config file is named)
 you can override the Vite config:
 
 ```javascript
+// use `mergeConfig` to recursively merge Vite options
+const { mergeConfig } = require('vite');
+
 module.exports = {
   async viteFinal(config, { configType }) {
-    // customize the Vite config here
-    config.resolve.alias.foo = 'bar';
-
     // return the customized config
-    return config;
+    return mergeConfig(config, {
+      // customize the Vite config here
+      resolve: {
+        alias: { foo: 'bar' },
+      },
+    });
   },
   // ... other options here
 };

package/code-generator-plugin.ts

@@ -15,6 +15,7 @@ import { virtualAddonSetupFile, virtualFileId, virtualPreviewFile, virtualStorie
 export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
   const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');
   let iframeId: string;
+  let projRoot: string;
 
   // noinspection JSUnusedGlobalSymbols
   return {
@@ -50,6 +51,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
       }
     },
     configResolved(config) {
+      projRoot = config.root;
       iframeId = `${config.root}/iframe.html`;
     },
     resolveId(source) {
@@ -63,6 +65,14 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         return virtualPreviewFile;
       } else if (source === virtualAddonSetupFile) {
         return virtualAddonSetupFile;
+        // Avoid error in react < 18 projects
+      } else if (source === 'react-dom/client') {
+        try {
+          return require.resolve('react-dom/client', { paths: [projRoot] });
+        } catch (e) {
+          // This is not a react 18 project, need to stub out to avoid error
+          return path.resolve(__dirname, '..', 'input', 'react-dom-client-placeholder.js');
+        }
       }
     },
     async load(id) {

package/codegen-entries.ts

@@ -9,17 +9,14 @@ const absoluteFilesToImport = (files: string[], name: string) =>
   files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\n');
 
 export async function generateVirtualStoryEntryCode(options: ExtendedOptions) {
-  const { frameworkPath, framework } = options;
   const storyEntries = await listStories(options);
   const resolveMap = storyEntries.reduce<Record<string, string>>(
     (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
     {}
   );
   const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
-  const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
 
   return `
-    import { configure } from '${frameworkImportPath}';
     ${absoluteFilesToImport(storyEntries, 'story')}
 
     function loadable(key) {
@@ -31,7 +28,7 @@ export async function generateVirtualStoryEntryCode(options: ExtendedOptions) {
       resolve: (key) => (${JSON.stringify(resolveMap)}[key])
     });
 
-    export function configStories() {
+    export function configStories(configure) {
       configure(loadable, { hot: import.meta.hot }, false);
     }
   `.trim();

package/codegen-iframe-script.ts

@@ -1,16 +1,27 @@
+import path from 'path';
 import { normalizePath } from 'vite';
-import { virtualPreviewFile, virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
+import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
 
 import type { ExtendedOptions } from './types';
 
+// We need to convert from an absolute path, to a traditional node module import path,
+// so that vite can correctly pre-bundle/optimize
+function transformPath(absPath: string) {
+  const splits = absPath.split(`node_modules${path.sep}`);
+  // Return everything after the final "node_modules/"
+  const module = normalizePath(splits[splits.length - 1]);
+  return module;
+}
+
 export async function generateIframeScriptCode(options: ExtendedOptions) {
-  const { presets } = options;
+  const { presets, frameworkPath, framework } = options;
+  const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
 
   const presetEntries = await presets.apply('config', [], options);
   const configEntries = [...presetEntries].filter(Boolean);
 
   const absoluteFilesToImport = (files: string[], name: string) =>
-    files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\n');
+    files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformPath(el)}'`).join('\n');
 
   const importArray = (name: string, length: number) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);
 
@@ -18,7 +29,10 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
   /** @todo Inline variable and remove `noinspection` */
   // language=JavaScript
   const code = `
-    import '${virtualAddonSetupFile}';
+    // Ensure that the client API is initialized by the framework before any other iframe code
+    // is loaded. That way our client-apis can assume the existence of the API+store
+    import { configure } from '${frameworkImportPath}';
+
     import {
       addDecorator,
       addParameters,
@@ -29,7 +43,6 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
     import { logger } from '@storybook/client-logger';
     ${absoluteFilesToImport(configEntries, 'config')}
     import * as preview from '${virtualPreviewFile}';
-    // This import should occur after the config imports above
     import { configStories } from '${virtualStoriesFile}';
 
     const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
@@ -81,7 +94,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
     }
     */
 
-    configStories();
+    configStories(configure);
     `.trim();
   return code;
 }

package/dist/code-generator-plugin.js

@@ -32,6 +32,7 @@ const virtual_file_names_1 = require("./virtual-file-names");
 function codeGeneratorPlugin(options) {
     const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');
     let iframeId;
+    let projRoot;
     // noinspection JSUnusedGlobalSymbols
     return {
         name: 'storybook-vite-code-generator-plugin',
@@ -66,6 +67,7 @@ function codeGeneratorPlugin(options) {
             }
         },
         configResolved(config) {
+            projRoot = config.root;
             iframeId = `${config.root}/iframe.html`;
         },
         resolveId(source) {
@@ -83,6 +85,16 @@ function codeGeneratorPlugin(options) {
             }
             else if (source === virtual_file_names_1.virtualAddonSetupFile) {
                 return virtual_file_names_1.virtualAddonSetupFile;
+                // Avoid error in react < 18 projects
+            }
+            else if (source === 'react-dom/client') {
+                try {
+                    return require.resolve('react-dom/client', { paths: [projRoot] });
+                }
+                catch (e) {
+                    // This is not a react 18 project, need to stub out to avoid error
+                    return path.resolve(__dirname, '..', 'input', 'react-dom-client-placeholder.js');
+                }
             }
         },
         async load(id) {

package/dist/code-generator-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-generator-plugin.js","sourceRoot":"","sources":["../code-generator-plugin.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAyB;AACzB,2CAA6B;AAC7B,mEAA8D;AAC9D,mEAAmE;AACnE,iFAAgF;AAChF,uEAAuE;AACvE,uDAA4F;AAC5F,2EAAqE;AAKrE,6DAAoH;AAEpH,SAAgB,mBAAmB,CAAC,OAAwB;IAC1D,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;IACzE,IAAI,QAAgB,CAAC;IAErB,qCAAqC;IACrC,OAAO;QACL,IAAI,EAAE,sCAAsC;QAC5C,OAAO,EAAE,KAAK;QACd,eAAe,CAAC,MAAM;YACpB,gEAAgE;YAChE,2CAA2C;YAC3C,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBACjC,MAAM,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC;gBAC/B,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,kCAAa,CAAC,CAAC;gBAC3D,IAAI,SAAS,EAAE;oBACb,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;iBAChD;gBACD,MAAM,aAAa,GAAG,WAAW,CAAC,aAAa,CAAC,uCAAkB,CAAC,CAAC;gBACpE,IAAI,aAAa,EAAE;oBACjB,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;iBACpD;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE;YACxB,2EAA2E;YAC3E,iFAAiF;YACjF,sFAAsF;YACtF,kDAAkD;YAClD,IAAI,OAAO,KAAK,OAAO,EAAE;gBACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;oBACjB,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;iBACnB;gBACD,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG;oBAC3B,KAAK,EAAE,UAAU;iBAClB,CAAC;aACH;QACH,CAAC;QACD,cAAc,CAAC,MAAM;YACnB,QAAQ,GAAG,GAAG,MAAM,CAAC,IAAI,cAAc,CAAC;QAC1C,CAAC;QACD,SAAS,CAAC,MAAM;YACd,IAAI,MAAM,KAAK,kCAAa,EAAE;gBAC5B,OAAO,kCAAa,CAAC;aACtB;iBAAM,IAAI,MAAM,KAAK,UAAU,EAAE;gBAChC,OAAO,QAAQ,CAAC;aACjB;iBAAM,IAAI,MAAM,KAAK,uCAAkB,EAAE;gBACxC,OAAO,uCAAkB,CAAC;aAC3B;iBAAM,IAAI,MAAM,KAAK,uCAAkB,EAAE;gBACxC,OAAO,uCAAkB,CAAC;aAC3B;iBAAM,IAAI,MAAM,KAAK,0CAAqB,EAAE;gBAC3C,OAAO,0CAAqB,CAAC;aAC9B;QACH,CAAC;QACD,KAAK,CAAC,IAAI,CAAC,EAAE;;YACX,MAAM,YAAY,GAAG,MAAA,OAAO,CAAC,QAAQ,0CAAE,YAAY,CAAC;YACpD,IAAI,EAAE,KAAK,uCAAkB,EAAE;gBAC7B,IAAI,YAAY,EAAE;oBAChB,OAAO,IAAA,oDAA0B,EAAC,OAAO,CAAC,CAAC;iBAC5C;qBAAM;oBACL,OAAO,IAAA,+CAA6B,EAAC,OAAO,CAAC,CAAC;iBAC/C;aACF;YAED,IAAI,EAAE,KAAK,0CAAqB,EAAE;gBAChC,OAAO,IAAA,kDAAsB,GAAE,CAAC;aACjC;YAED,IAAI,EAAE,KAAK,uCAAkB,IAAI,CAAC,YAAY,EAAE;gBAC9C,OAAO,IAAA,0CAAwB,EAAC,OAAO,CAAC,CAAC;aAC1C;YAED,IAAI,EAAE,KAAK,kCAAa,EAAE;gBACxB,IAAI,YAAY,EAAE;oBAChB,OAAO,IAAA,6DAA8B,EAAC,OAAO,CAAC,CAAC;iBAChD;qBAAM;oBACL,OAAO,IAAA,gDAAwB,EAAC,OAAO,CAAC,CAAC;iBAC1C;aACF;YAED,IAAI,EAAE,KAAK,QAAQ,EAAE;gBACnB,OAAO,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;aACxF;QACH,CAAC;QACD,KAAK,CAAC,kBAAkB,CAAC,IAAI,EAAE,GAAG;YAChC,IAAI,GAAG,CAAC,IAAI,KAAK,cAAc,EAAE;gBAC/B,OAAO;aACR;YACD,OAAO,IAAA,2CAAmB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC5C,CAAC;KACF,CAAC;AACJ,CAAC;AA1FD,kDA0FC","sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\nimport { transformIframeHtml } from './transform-iframe-html';\nimport { generateIframeScriptCode } from './codegen-iframe-script';\nimport { generateModernIframeScriptCode } from './codegen-modern-iframe-script';\nimport { generateImportFnScriptCode } from './codegen-importfn-script';\nimport { generateVirtualStoryEntryCode, generatePreviewEntryCode } from './codegen-entries';\nimport { generateAddonSetupCode } from './codegen-set-addon-channel';\n\nimport type { Plugin } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nimport { virtualAddonSetupFile, virtualFileId, virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';\n\nexport function codeGeneratorPlugin(options: ExtendedOptions): Plugin {\n  const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');\n  let iframeId: string;\n\n  // noinspection JSUnusedGlobalSymbols\n  return {\n    name: 'storybook-vite-code-generator-plugin',\n    enforce: 'pre',\n    configureServer(server) {\n      // invalidate the whole vite-app.js script on every file change.\n      // (this might be a little too aggressive?)\n      server.watcher.on('change', (_e) => {\n        const { moduleGraph } = server;\n        const appModule = moduleGraph.getModuleById(virtualFileId);\n        if (appModule) {\n          server.moduleGraph.invalidateModule(appModule);\n        }\n        const storiesModule = moduleGraph.getModuleById(virtualStoriesFile);\n        if (storiesModule) {\n          server.moduleGraph.invalidateModule(storiesModule);\n        }\n      });\n    },\n    config(config, { command }) {\n      // If we are building the static distribution, add iframe.html as an entry.\n      // In development mode, it's not an entry - instead, we use an express middleware\n      // to serve iframe.html. The reason is that Vite's dev server (at the time of writing)\n      // does not support virtual files as entry points.\n      if (command === 'build') {\n        if (!config.build) {\n          config.build = {};\n        }\n        config.build.rollupOptions = {\n          input: iframePath,\n        };\n      }\n    },\n    configResolved(config) {\n      iframeId = `${config.root}/iframe.html`;\n    },\n    resolveId(source) {\n      if (source === virtualFileId) {\n        return virtualFileId;\n      } else if (source === iframePath) {\n        return iframeId;\n      } else if (source === virtualStoriesFile) {\n        return virtualStoriesFile;\n      } else if (source === virtualPreviewFile) {\n        return virtualPreviewFile;\n      } else if (source === virtualAddonSetupFile) {\n        return virtualAddonSetupFile;\n      }\n    },\n    async load(id) {\n      const storyStoreV7 = options.features?.storyStoreV7;\n      if (id === virtualStoriesFile) {\n        if (storyStoreV7) {\n          return generateImportFnScriptCode(options);\n        } else {\n          return generateVirtualStoryEntryCode(options);\n        }\n      }\n\n      if (id === virtualAddonSetupFile) {\n        return generateAddonSetupCode();\n      }\n\n      if (id === virtualPreviewFile && !storyStoreV7) {\n        return generatePreviewEntryCode(options);\n      }\n\n      if (id === virtualFileId) {\n        if (storyStoreV7) {\n          return generateModernIframeScriptCode(options);\n        } else {\n          return generateIframeScriptCode(options);\n        }\n      }\n\n      if (id === iframeId) {\n        return fs.readFileSync(path.resolve(__dirname, '..', 'input', 'iframe.html'), 'utf-8');\n      }\n    },\n    async transformIndexHtml(html, ctx) {\n      if (ctx.path !== '/iframe.html') {\n        return;\n      }\n      return transformIframeHtml(html, options);\n    },\n  };\n}\n"]}
+{"version":3,"file":"code-generator-plugin.js","sourceRoot":"","sources":["../code-generator-plugin.ts"],"names":[],"mappings":"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","sourcesContent":["import * as fs from 'fs';\nimport * as path from 'path';\nimport { transformIframeHtml } from './transform-iframe-html';\nimport { generateIframeScriptCode } from './codegen-iframe-script';\nimport { generateModernIframeScriptCode } from './codegen-modern-iframe-script';\nimport { generateImportFnScriptCode } from './codegen-importfn-script';\nimport { generateVirtualStoryEntryCode, generatePreviewEntryCode } from './codegen-entries';\nimport { generateAddonSetupCode } from './codegen-set-addon-channel';\n\nimport type { Plugin } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nimport { virtualAddonSetupFile, virtualFileId, virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';\n\nexport function codeGeneratorPlugin(options: ExtendedOptions): Plugin {\n  const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');\n  let iframeId: string;\n  let projRoot: string;\n\n  // noinspection JSUnusedGlobalSymbols\n  return {\n    name: 'storybook-vite-code-generator-plugin',\n    enforce: 'pre',\n    configureServer(server) {\n      // invalidate the whole vite-app.js script on every file change.\n      // (this might be a little too aggressive?)\n      server.watcher.on('change', (_e) => {\n        const { moduleGraph } = server;\n        const appModule = moduleGraph.getModuleById(virtualFileId);\n        if (appModule) {\n          server.moduleGraph.invalidateModule(appModule);\n        }\n        const storiesModule = moduleGraph.getModuleById(virtualStoriesFile);\n        if (storiesModule) {\n          server.moduleGraph.invalidateModule(storiesModule);\n        }\n      });\n    },\n    config(config, { command }) {\n      // If we are building the static distribution, add iframe.html as an entry.\n      // In development mode, it's not an entry - instead, we use an express middleware\n      // to serve iframe.html. The reason is that Vite's dev server (at the time of writing)\n      // does not support virtual files as entry points.\n      if (command === 'build') {\n        if (!config.build) {\n          config.build = {};\n        }\n        config.build.rollupOptions = {\n          input: iframePath,\n        };\n      }\n    },\n    configResolved(config) {\n      projRoot = config.root;\n      iframeId = `${config.root}/iframe.html`;\n    },\n    resolveId(source) {\n      if (source === virtualFileId) {\n        return virtualFileId;\n      } else if (source === iframePath) {\n        return iframeId;\n      } else if (source === virtualStoriesFile) {\n        return virtualStoriesFile;\n      } else if (source === virtualPreviewFile) {\n        return virtualPreviewFile;\n      } else if (source === virtualAddonSetupFile) {\n        return virtualAddonSetupFile;\n        // Avoid error in react < 18 projects\n      } else if (source === 'react-dom/client') {\n        try {\n          return require.resolve('react-dom/client', { paths: [projRoot] });\n        } catch (e) {\n          // This is not a react 18 project, need to stub out to avoid error\n          return path.resolve(__dirname, '..', 'input', 'react-dom-client-placeholder.js');\n        }\n      }\n    },\n    async load(id) {\n      const storyStoreV7 = options.features?.storyStoreV7;\n      if (id === virtualStoriesFile) {\n        if (storyStoreV7) {\n          return generateImportFnScriptCode(options);\n        } else {\n          return generateVirtualStoryEntryCode(options);\n        }\n      }\n\n      if (id === virtualAddonSetupFile) {\n        return generateAddonSetupCode();\n      }\n\n      if (id === virtualPreviewFile && !storyStoreV7) {\n        return generatePreviewEntryCode(options);\n      }\n\n      if (id === virtualFileId) {\n        if (storyStoreV7) {\n          return generateModernIframeScriptCode(options);\n        } else {\n          return generateIframeScriptCode(options);\n        }\n      }\n\n      if (id === iframeId) {\n        return fs.readFileSync(path.resolve(__dirname, '..', 'input', 'iframe.html'), 'utf-8');\n      }\n    },\n    async transformIndexHtml(html, ctx) {\n      if (ctx.path !== '/iframe.html') {\n        return;\n      }\n      return transformIframeHtml(html, options);\n    },\n  };\n}\n"]}

package/dist/codegen-entries.js

@@ -10,13 +10,10 @@ const vite_1 = require("vite");
 const list_stories_1 = require("./list-stories");
 const absoluteFilesToImport = (files, name) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${(0, vite_1.normalizePath)(el)}'`).join('\n');
 async function generateVirtualStoryEntryCode(options) {
-    const { frameworkPath, framework } = options;
     const storyEntries = await (0, list_stories_1.listStories)(options);
     const resolveMap = storyEntries.reduce((prev, entry) => ({ ...prev, [entry]: entry.replace((0, slash_1.default)(process.cwd()), '.') }), {});
     const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
-    const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
     return `
-    import { configure } from '${frameworkImportPath}';
     ${absoluteFilesToImport(storyEntries, 'story')}
 
     function loadable(key) {
@@ -28,7 +25,7 @@ async function generateVirtualStoryEntryCode(options) {
       resolve: (key) => (${JSON.stringify(resolveMap)}[key])
     });
 
-    export function configStories() {
+    export function configStories(configure) {
       configure(loadable, { hot: import.meta.hot }, false);
     }
   `.trim();

package/dist/codegen-entries.js.map

@@ -1 +1 @@
-{"version":3,"file":"codegen-entries.js","sourceRoot":"","sources":["../codegen-entries.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAEjE,kDAA0B;AAC1B,+BAAqC;AAErC,iDAA6C;AAE7C,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,IAAA,oBAAa,EAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEzG,KAAK,UAAU,6BAA6B,CAAC,OAAwB;IAC1E,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAM,IAAA,0BAAW,EAAC,OAAO,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CACpC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,IAAA,eAAK,EAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EACjF,EAAE,CACH,CAAC;IACF,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACjG,MAAM,mBAAmB,GAAG,aAAa,IAAI,cAAc,SAAS,EAAE,CAAC;IAEvE,OAAO;iCACwB,mBAAmB;MAC9C,qBAAqB,CAAC,YAAY,EAAE,OAAO,CAAC;;;gBAGlC,OAAO;;;;qBAIF,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;2BACjC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;;;;;GAMlD,CAAC,IAAI,EAAE,CAAC;AACX,CAAC;AA3BD,sEA2BC;AAEM,KAAK,UAAU,wBAAwB,CAAC,EAAE,SAAS,EAAW;IACnE,MAAM,WAAW,GAAG,IAAA,qCAAuB,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC3D,IAAI,CAAC,WAAW;QAAE,OAAO,EAAE,CAAC;IAE5B,OAAO,6BAA6B,IAAA,eAAK,EAAC,WAAW,CAAC;0BAC9B,CAAC;AAC3B,CAAC;AAND,4DAMC","sourcesContent":["import { loadPreviewOrConfigFile } from '@storybook/core-common';\nimport type { Options } from '@storybook/core-common';\nimport slash from 'slash';\nimport { normalizePath } from 'vite';\nimport type { ExtendedOptions } from './types';\nimport { listStories } from './list-stories';\n\nconst absoluteFilesToImport = (files: string[], name: string) =>\n  files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\\n');\n\nexport async function generateVirtualStoryEntryCode(options: ExtendedOptions) {\n  const { frameworkPath, framework } = options;\n  const storyEntries = await listStories(options);\n  const resolveMap = storyEntries.reduce<Record<string, string>>(\n    (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),\n    {}\n  );\n  const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');\n  const frameworkImportPath = frameworkPath || `@storybook/${framework}`;\n\n  return `\n    import { configure } from '${frameworkImportPath}';\n    ${absoluteFilesToImport(storyEntries, 'story')}\n\n    function loadable(key) {\n      return {${modules}}[key];\n    }\n    \n    Object.assign(loadable, {\n      keys: () => (${JSON.stringify(Object.keys(resolveMap))}),\n      resolve: (key) => (${JSON.stringify(resolveMap)}[key])\n    });\n\n    export function configStories() {\n      configure(loadable, { hot: import.meta.hot }, false);\n    }\n  `.trim();\n}\n\nexport async function generatePreviewEntryCode({ configDir }: Options) {\n  const previewFile = loadPreviewOrConfigFile({ configDir });\n  if (!previewFile) return '';\n\n  return `import * as preview from '${slash(previewFile)}';\n  export default preview;`;\n}\n"]}
+{"version":3,"file":"codegen-entries.js","sourceRoot":"","sources":["../codegen-entries.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAEjE,kDAA0B;AAC1B,+BAAqC;AAErC,iDAA6C;AAE7C,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,IAAA,oBAAa,EAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEzG,KAAK,UAAU,6BAA6B,CAAC,OAAwB;IAC1E,MAAM,YAAY,GAAG,MAAM,IAAA,0BAAW,EAAC,OAAO,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CACpC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,IAAA,eAAK,EAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,EACjF,EAAE,CACH,CAAC;IACF,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjG,OAAO;MACH,qBAAqB,CAAC,YAAY,EAAE,OAAO,CAAC;;;gBAGlC,OAAO;;;;qBAIF,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;2BACjC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;;;;;GAMlD,CAAC,IAAI,EAAE,CAAC;AACX,CAAC;AAxBD,sEAwBC;AAEM,KAAK,UAAU,wBAAwB,CAAC,EAAE,SAAS,EAAW;IACnE,MAAM,WAAW,GAAG,IAAA,qCAAuB,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAC3D,IAAI,CAAC,WAAW;QAAE,OAAO,EAAE,CAAC;IAE5B,OAAO,6BAA6B,IAAA,eAAK,EAAC,WAAW,CAAC;0BAC9B,CAAC;AAC3B,CAAC;AAND,4DAMC","sourcesContent":["import { loadPreviewOrConfigFile } from '@storybook/core-common';\nimport type { Options } from '@storybook/core-common';\nimport slash from 'slash';\nimport { normalizePath } from 'vite';\nimport type { ExtendedOptions } from './types';\nimport { listStories } from './list-stories';\n\nconst absoluteFilesToImport = (files: string[], name: string) =>\n  files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\\n');\n\nexport async function generateVirtualStoryEntryCode(options: ExtendedOptions) {\n  const storyEntries = await listStories(options);\n  const resolveMap = storyEntries.reduce<Record<string, string>>(\n    (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),\n    {}\n  );\n  const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');\n\n  return `\n    ${absoluteFilesToImport(storyEntries, 'story')}\n\n    function loadable(key) {\n      return {${modules}}[key];\n    }\n    \n    Object.assign(loadable, {\n      keys: () => (${JSON.stringify(Object.keys(resolveMap))}),\n      resolve: (key) => (${JSON.stringify(resolveMap)}[key])\n    });\n\n    export function configStories(configure) {\n      configure(loadable, { hot: import.meta.hot }, false);\n    }\n  `.trim();\n}\n\nexport async function generatePreviewEntryCode({ configDir }: Options) {\n  const previewFile = loadPreviewOrConfigFile({ configDir });\n  if (!previewFile) return '';\n\n  return `import * as preview from '${slash(previewFile)}';\n  export default preview;`;\n}\n"]}

package/dist/codegen-iframe-script.js

@@ -1,19 +1,35 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateIframeScriptCode = void 0;
+const path_1 = __importDefault(require("path"));
 const vite_1 = require("vite");
 const virtual_file_names_1 = require("./virtual-file-names");
+// We need to convert from an absolute path, to a traditional node module import path,
+// so that vite can correctly pre-bundle/optimize
+function transformPath(absPath) {
+    const splits = absPath.split(`node_modules${path_1.default.sep}`);
+    // Return everything after the final "node_modules/"
+    const module = (0, vite_1.normalizePath)(splits[splits.length - 1]);
+    return module;
+}
 async function generateIframeScriptCode(options) {
-    const { presets } = options;
+    const { presets, frameworkPath, framework } = options;
+    const frameworkImportPath = frameworkPath || `@storybook/${framework}`;
     const presetEntries = await presets.apply('config', [], options);
     const configEntries = [...presetEntries].filter(Boolean);
-    const absoluteFilesToImport = (files, name) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${(0, vite_1.normalizePath)(el)}'`).join('\n');
+    const absoluteFilesToImport = (files, name) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformPath(el)}'`).join('\n');
     const importArray = (name, length) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);
     // noinspection UnnecessaryLocalVariableJS
     /** @todo Inline variable and remove `noinspection` */
     // language=JavaScript
     const code = `
-    import '${virtual_file_names_1.virtualAddonSetupFile}';
+    // Ensure that the client API is initialized by the framework before any other iframe code
+    // is loaded. That way our client-apis can assume the existence of the API+store
+    import { configure } from '${frameworkImportPath}';
+
     import {
       addDecorator,
       addParameters,
@@ -24,7 +40,6 @@ async function generateIframeScriptCode(options) {
     import { logger } from '@storybook/client-logger';
     ${absoluteFilesToImport(configEntries, 'config')}
     import * as preview from '${virtual_file_names_1.virtualPreviewFile}';
-    // This import should occur after the config imports above
     import { configStories } from '${virtual_file_names_1.virtualStoriesFile}';
 
     const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
@@ -76,7 +91,7 @@ async function generateIframeScriptCode(options) {
     }
     */
 
-    configStories();
+    configStories(configure);
     `.trim();
     return code;
 }

package/dist/codegen-iframe-script.js.map

@@ -1 +1 @@
-{"version":3,"file":"codegen-iframe-script.js","sourceRoot":"","sources":["../codegen-iframe-script.ts"],"names":[],"mappings":";;;AAAA,+BAAqC;AACrC,6DAAqG;AAI9F,KAAK,UAAU,wBAAwB,CAAC,OAAwB;IACrE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAE5B,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,IAAA,oBAAa,EAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhH,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;IAE9G,0CAA0C;IAC1C,sDAAsD;IACtD,sBAAsB;IACtB,MAAM,IAAI,GAAG;cACD,0CAAqB;;;;;;;;;MAS7B,qBAAqB,CAAC,aAAa,EAAE,QAAQ,CAAC;gCACpB,uCAAkB;;qCAEb,uCAAkB;;uBAEhC,WAAW,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDjG,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,IAAI,CAAC;AACd,CAAC;AAjFD,4DAiFC","sourcesContent":["import { normalizePath } from 'vite';\nimport { virtualPreviewFile, virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';\n\nimport type { ExtendedOptions } from './types';\n\nexport async function generateIframeScriptCode(options: ExtendedOptions) {\n  const { presets } = options;\n\n  const presetEntries = await presets.apply('config', [], options);\n  const configEntries = [...presetEntries].filter(Boolean);\n\n  const absoluteFilesToImport = (files: string[], name: string) =>\n    files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`).join('\\n');\n\n  const importArray = (name: string, length: number) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);\n\n  // noinspection UnnecessaryLocalVariableJS\n  /** @todo Inline variable and remove `noinspection` */\n  // language=JavaScript\n  const code = `\n    import '${virtualAddonSetupFile}';\n    import {\n      addDecorator,\n      addParameters,\n      addLoader,\n      addArgTypesEnhancer,\n      addArgsEnhancer\n    } from '@storybook/client-api';\n    import { logger } from '@storybook/client-logger';\n    ${absoluteFilesToImport(configEntries, 'config')}\n    import * as preview from '${virtualPreviewFile}';\n    // This import should occur after the config imports above\n    import { configStories } from '${virtualStoriesFile}';\n\n    const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)\n\n    configs.forEach(config => {\n      Object.keys(config).forEach((key) => {\n        const value = config[key];\n        switch (key) {\n          case 'args':\n          case 'argTypes': {\n            return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));\n          }\n          case 'decorators': {\n            return value.forEach((decorator) => addDecorator(decorator, false));\n          }\n          case 'loaders': {\n            return value.forEach((loader) => addLoader(loader, false));\n          }\n          case 'parameters': {\n            return addParameters({ ...value }, false);\n          }\n          case 'argTypesEnhancers': {\n            return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));\n          }\n          case 'argsEnhancers': {\n            return value.forEach((enhancer) => addArgsEnhancer(enhancer))\n          }\n          case 'globals':\n          case 'globalTypes': {\n            const v = {};\n            v[key] = value;\n            return addParameters(v, false);\n          }\n          case 'decorateStory':\n          case 'renderToDOM': {\n            return null; // This key is not handled directly in v6 mode.\n          }\n          default: {\n            // eslint-disable-next-line prefer-template\n            return console.log(key + ' was not supported :( !');\n          }\n        }\n      });\n    })\n    \n    /* TODO: not quite sure what to do with this, to fix HMR\n    if (import.meta.hot) {\n        import.meta.hot.accept();    \n    }\n    */\n\n    configStories();\n    `.trim();\n  return code;\n}\n"]}
+{"version":3,"file":"codegen-iframe-script.js","sourceRoot":"","sources":["../codegen-iframe-script.ts"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AACxB,+BAAqC;AACrC,6DAA8E;AAI9E,sFAAsF;AACtF,iDAAiD;AACjD,SAAS,aAAa,CAAC,OAAe;IACpC,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,cAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACxD,oDAAoD;IACpD,MAAM,MAAM,GAAG,IAAA,oBAAa,EAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACxD,OAAO,MAAM,CAAC;AAChB,CAAC;AAEM,KAAK,UAAU,wBAAwB,CAAC,OAAwB;IACrE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IACtD,MAAM,mBAAmB,GAAG,aAAa,IAAI,cAAc,SAAS,EAAE,CAAC;IAEvE,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAEzD,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAE,IAAY,EAAE,EAAE,CAC9D,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;IAE9G,0CAA0C;IAC1C,sDAAsD;IACtD,sBAAsB;IACtB,MAAM,IAAI,GAAG;;;iCAGkB,mBAAmB;;;;;;;;;;MAU9C,qBAAqB,CAAC,aAAa,EAAE,QAAQ,CAAC;gCACpB,uCAAkB;qCACb,uCAAkB;;uBAEhC,WAAW,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDjG,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,IAAI,CAAC;AACd,CAAC;AApFD,4DAoFC","sourcesContent":["import path from 'path';\nimport { normalizePath } from 'vite';\nimport { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';\n\nimport type { ExtendedOptions } from './types';\n\n// We need to convert from an absolute path, to a traditional node module import path,\n// so that vite can correctly pre-bundle/optimize\nfunction transformPath(absPath: string) {\n  const splits = absPath.split(`node_modules${path.sep}`);\n  // Return everything after the final \"node_modules/\"\n  const module = normalizePath(splits[splits.length - 1]);\n  return module;\n}\n\nexport async function generateIframeScriptCode(options: ExtendedOptions) {\n  const { presets, frameworkPath, framework } = options;\n  const frameworkImportPath = frameworkPath || `@storybook/${framework}`;\n\n  const presetEntries = await presets.apply('config', [], options);\n  const configEntries = [...presetEntries].filter(Boolean);\n\n  const absoluteFilesToImport = (files: string[], name: string) =>\n    files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformPath(el)}'`).join('\\n');\n\n  const importArray = (name: string, length: number) => new Array(length).fill(0).map((_, i) => `${name}_${i}`);\n\n  // noinspection UnnecessaryLocalVariableJS\n  /** @todo Inline variable and remove `noinspection` */\n  // language=JavaScript\n  const code = `\n    // Ensure that the client API is initialized by the framework before any other iframe code\n    // is loaded. That way our client-apis can assume the existence of the API+store\n    import { configure } from '${frameworkImportPath}';\n\n    import {\n      addDecorator,\n      addParameters,\n      addLoader,\n      addArgTypesEnhancer,\n      addArgsEnhancer\n    } from '@storybook/client-api';\n    import { logger } from '@storybook/client-logger';\n    ${absoluteFilesToImport(configEntries, 'config')}\n    import * as preview from '${virtualPreviewFile}';\n    import { configStories } from '${virtualStoriesFile}';\n\n    const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)\n\n    configs.forEach(config => {\n      Object.keys(config).forEach((key) => {\n        const value = config[key];\n        switch (key) {\n          case 'args':\n          case 'argTypes': {\n            return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));\n          }\n          case 'decorators': {\n            return value.forEach((decorator) => addDecorator(decorator, false));\n          }\n          case 'loaders': {\n            return value.forEach((loader) => addLoader(loader, false));\n          }\n          case 'parameters': {\n            return addParameters({ ...value }, false);\n          }\n          case 'argTypesEnhancers': {\n            return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));\n          }\n          case 'argsEnhancers': {\n            return value.forEach((enhancer) => addArgsEnhancer(enhancer))\n          }\n          case 'globals':\n          case 'globalTypes': {\n            const v = {};\n            v[key] = value;\n            return addParameters(v, false);\n          }\n          case 'decorateStory':\n          case 'renderToDOM': {\n            return null; // This key is not handled directly in v6 mode.\n          }\n          default: {\n            // eslint-disable-next-line prefer-template\n            return console.log(key + ' was not supported :( !');\n          }\n        }\n      });\n    })\n    \n    /* TODO: not quite sure what to do with this, to fix HMR\n    if (import.meta.hot) {\n        import.meta.hot.accept();    \n    }\n    */\n\n    configStories(configure);\n    `.trim();\n  return code;\n}\n"]}

package/dist/optimizeDeps.d.ts

@@ -6,4 +6,5 @@ export declare function getOptimizeDeps(config: UserConfig & {
 }, options: ExtendedOptions): Promise<{
     entries: string[];
     include: string[];
+    exclude: string[];
 }>;

package/dist/optimizeDeps.js

@@ -18,31 +18,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOptimizeDeps = void 0;
 const path = __importStar(require("path"));
 const vite_1 = require("vite");
 const list_stories_1 = require("./list-stories");
+const semver_1 = __importDefault(require("semver"));
 const INCLUDE_CANDIDATES = [
     '@base2/pretty-print-object',
     '@emotion/core',
     '@emotion/is-prop-valid',
     '@emotion/styled',
     '@mdx-js/react',
-    '@storybook/addon-docs > acorn-jsx',
-    '@storybook/addon-docs',
-    '@storybook/addons',
-    '@storybook/channel-postmessage',
-    '@storybook/channel-websocket',
-    '@storybook/client-api',
-    '@storybook/client-logger',
-    '@storybook/core/client',
     '@storybook/csf',
-    '@storybook/preview-web',
-    '@storybook/react > acorn-jsx',
-    '@storybook/react',
-    '@storybook/svelte',
-    '@storybook/vue3',
     'acorn-jsx',
     'acorn-walk',
     'acorn',
@@ -82,6 +73,7 @@ const INCLUDE_CANDIDATES = [
     'prop-types',
     'qs',
     'react-dom',
+    'react-dom/client',
     'react-fast-compare',
     'react-is',
     'react-textarea-autosize',
@@ -116,6 +108,7 @@ const INCLUDE_CANDIDATES = [
  */
 const asyncFilter = async (arr, predicate) => Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));
 async function getOptimizeDeps(config, options) {
+    var _a;
     const { root } = config;
     const absoluteStories = await (0, list_stories_1.listStories)(options);
     const stories = absoluteStories.map((storyPath) => (0, vite_1.normalizePath)(path.relative(root, storyPath)));
@@ -124,13 +117,48 @@ async function getOptimizeDeps(config, options) {
     // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199
     const resolve = resolvedConfig.createResolver({ asSrc: false });
     const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
+    // We can exclude some packages which otherwise are optimized
+    const exclude = [
+        '@storybook/addon-docs',
+        '@storybook/client-api',
+        '@storybook/client-logger',
+        '@storybook/preview-web',
+        '@storybook/channel-postmessage',
+        '@storybook/channel-websocket',
+        '@storybook/addons',
+    ];
+    // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.
+    // TODO: narrow this down to just framework === 'react'.  But causes a vue dev start problem in this monorepo.
+    try {
+        require.resolve('react-dom/client', { paths: [config.root] });
+    }
+    catch (e) {
+        if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {
+            exclude.push('react-dom/client');
+        }
+    }
+    // Depending on the user's storybook version, we can also exclude the framework from prebundling
+    // See https://github.com/storybookjs/storybook/pull/17875
+    const { frameworkPath, framework } = options;
+    const frameworkPackageName = frameworkPath || `@storybook/${framework}`;
+    const sbVersion = (_a = (await Promise.resolve().then(() => __importStar(require(`${frameworkPackageName}/package.json`))))) === null || _a === void 0 ? void 0 : _a.version;
+    if (sbVersion && semver_1.default.gte(sbVersion, '6.5.0-alpha.58', { includePrerelease: true })) {
+        exclude.push(frameworkPackageName);
+    }
+    else {
+        include.push(frameworkPackageName);
+    }
     return {
         // We don't need to resolve the glob since vite supports globs for entries.
         entries: stories,
         // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
         // if we served it directly to the browser.
         include,
+        // In some cases we need to prevent deps from being pre-bundled
+        exclude,
     };
 }
 exports.getOptimizeDeps = getOptimizeDeps;
+// Refines an error received from 'catch' to be a NodeJS exception
+const isNodeError = (error) => error instanceof Error;
 //# sourceMappingURL=optimizeDeps.js.map

package/dist/optimizeDeps.js.map

@@ -1 +1 @@
-{"version":3,"file":"optimizeDeps.js","sourceRoot":"","sources":["../optimizeDeps.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA6B;AAC7B,+BAAgE;AAChE,iDAA6C;AAI7C,MAAM,kBAAkB,GAAG;IACzB,4BAA4B;IAC5B,eAAe;IACf,wBAAwB;IACxB,iBAAiB;IACjB,eAAe;IACf,mCAAmC;IACnC,uBAAuB;IACvB,mBAAmB;IACnB,gCAAgC;IAChC,8BAA8B;IAC9B,uBAAuB;IACvB,0BAA0B;IAC1B,wBAAwB;IACxB,gBAAgB;IAChB,wBAAwB;IACxB,8BAA8B;IAC9B,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,WAAW;IACX,YAAY;IACZ,OAAO;IACP,iBAAiB;IACjB,cAAc;IACd,UAAU;IACV,eAAe;IACf,kBAAkB;IAClB,UAAU;IACV,iBAAiB;IACjB,WAAW;IACX,YAAY;IACZ,iBAAiB;IACjB,QAAQ;IACR,WAAW;IACX,UAAU;IACV,WAAW;IACX,cAAc;IACd,kBAAkB;IAClB,mBAAmB;IACnB,sBAAsB;IACtB,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,aAAa;IACb,eAAe;IACf,kBAAkB;IAClB,iBAAiB;IACjB,aAAa;IACb,iBAAiB;IACjB,cAAc;IACd,mBAAmB;IACnB,UAAU;IACV,uBAAuB;IACvB,sBAAsB;IACtB,4BAA4B;IAC5B,YAAY;IACZ,IAAI;IACJ,WAAW;IACX,oBAAoB;IACpB,UAAU;IACV,yBAAyB;IACzB,OAAO;IACP,gBAAgB;IAChB,wBAAwB;IACxB,uBAAuB;IACvB,2BAA2B;IAC3B,6BAA6B;IAC7B,wBAAwB;IACxB,uBAAuB;IACvB,4BAA4B;IAC5B,0BAA0B;IAC1B,uBAAuB;IACvB,8BAA8B;IAC9B,wBAAwB;IACxB,gCAAgC;IAChC,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,qBAAqB;IACrB,UAAU;IACV,WAAW;IACX,SAAS;IACT,gBAAgB;IAChB,iBAAiB;IACjB,KAAK;IACL,SAAS;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,GAAG,KAAK,EAAE,GAAa,EAAE,SAA4C,EAAE,EAAE,CACxF,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAExF,KAAK,UAAU,eAAe,CACnC,MAAwD,EACxD,OAAwB;IAExB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC;IACxB,MAAM,eAAe,GAAG,MAAM,IAAA,0BAAW,EAAC,OAAO,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,IAAA,oBAAa,EAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAClG,MAAM,cAAc,GAAG,MAAM,IAAA,oBAAa,EAAC,MAAM,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;IAE3E,6FAA6F;IAC7F,uIAAuI;IACvI,MAAM,OAAO,GAAG,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,MAAM,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAEhG,OAAO;QACL,2EAA2E;QAC3E,OAAO,EAAE,OAAO;QAChB,oGAAoG;QACpG,2CAA2C;QAC3C,OAAO;KACR,CAAC;AACJ,CAAC;AArBD,0CAqBC","sourcesContent":["import * as path from 'path';\nimport { normalizePath, resolveConfig, UserConfig } from 'vite';\nimport { listStories } from './list-stories';\n\nimport type { ExtendedOptions } from './types';\n\nconst INCLUDE_CANDIDATES = [\n  '@base2/pretty-print-object',\n  '@emotion/core',\n  '@emotion/is-prop-valid',\n  '@emotion/styled',\n  '@mdx-js/react',\n  '@storybook/addon-docs > acorn-jsx',\n  '@storybook/addon-docs',\n  '@storybook/addons',\n  '@storybook/channel-postmessage',\n  '@storybook/channel-websocket',\n  '@storybook/client-api',\n  '@storybook/client-logger',\n  '@storybook/core/client',\n  '@storybook/csf',\n  '@storybook/preview-web',\n  '@storybook/react > acorn-jsx',\n  '@storybook/react',\n  '@storybook/svelte',\n  '@storybook/vue3',\n  'acorn-jsx',\n  'acorn-walk',\n  'acorn',\n  'airbnb-js-shims',\n  'ansi-to-html',\n  'axe-core',\n  'color-convert',\n  'deep-object-diff',\n  'doctrine',\n  'emotion-theming',\n  'escodegen',\n  'estraverse',\n  'fast-deep-equal',\n  'global',\n  'html-tags',\n  'isobject',\n  'jest-mock',\n  'loader-utils',\n  'lodash/cloneDeep',\n  'lodash/isFunction',\n  'lodash/isPlainObject',\n  'lodash/isString',\n  'lodash/mapKeys',\n  'lodash/mapValues',\n  'lodash/pick',\n  'lodash/pickBy',\n  'lodash/startCase',\n  'lodash/throttle',\n  'lodash/uniq',\n  'markdown-to-jsx',\n  'memoizerific',\n  'overlayscrollbars',\n  'polished',\n  'prettier/parser-babel',\n  'prettier/parser-flow',\n  'prettier/parser-typescript',\n  'prop-types',\n  'qs',\n  'react-dom',\n  'react-fast-compare',\n  'react-is',\n  'react-textarea-autosize',\n  'react',\n  'refractor/core',\n  'refractor/lang/bash.js',\n  'refractor/lang/css.js',\n  'refractor/lang/graphql.js',\n  'refractor/lang/js-extras.js',\n  'refractor/lang/json.js',\n  'refractor/lang/jsx.js',\n  'refractor/lang/markdown.js',\n  'refractor/lang/markup.js',\n  'refractor/lang/tsx.js',\n  'refractor/lang/typescript.js',\n  'refractor/lang/yaml.js',\n  'regenerator-runtime/runtime.js',\n  'slash',\n  'stable',\n  'store2',\n  'synchronous-promise',\n  'telejson',\n  'ts-dedent',\n  'unfetch',\n  'util-deprecate',\n  'uuid-browser/v4',\n  'vue',\n  'warning',\n];\n\n/**\n * Helper function which allows us to `filter` with an async predicate.  Uses Promise.all for performance.\n */\nconst asyncFilter = async (arr: string[], predicate: (val: string) => Promise<boolean>) =>\n  Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));\n\nexport async function getOptimizeDeps(\n  config: UserConfig & { configFile: false; root: string },\n  options: ExtendedOptions\n) {\n  const { root } = config;\n  const absoluteStories = await listStories(options);\n  const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));\n  const resolvedConfig = await resolveConfig(config, 'serve', 'development');\n\n  // This function converts ids which might include ` > ` to a real path, if it exists on disk.\n  // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199\n  const resolve = resolvedConfig.createResolver({ asSrc: false });\n  const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));\n\n  return {\n    // We don't need to resolve the glob since vite supports globs for entries.\n    entries: stories,\n    // We need Vite to precompile these dependencies, because they contain non-ESM code that would break\n    // if we served it directly to the browser.\n    include,\n  };\n}\n"]}
+{"version":3,"file":"optimizeDeps.js","sourceRoot":"","sources":["../optimizeDeps.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport { normalizePath, resolveConfig, UserConfig } from 'vite';\nimport { listStories } from './list-stories';\nimport semver from 'semver';\n\nimport type { ExtendedOptions } from './types';\n\nconst INCLUDE_CANDIDATES = [\n  '@base2/pretty-print-object',\n  '@emotion/core',\n  '@emotion/is-prop-valid',\n  '@emotion/styled',\n  '@mdx-js/react',\n  '@storybook/csf',\n  'acorn-jsx',\n  'acorn-walk',\n  'acorn',\n  'airbnb-js-shims',\n  'ansi-to-html',\n  'axe-core',\n  'color-convert',\n  'deep-object-diff',\n  'doctrine',\n  'emotion-theming',\n  'escodegen',\n  'estraverse',\n  'fast-deep-equal',\n  'global',\n  'html-tags',\n  'isobject',\n  'jest-mock',\n  'loader-utils',\n  'lodash/cloneDeep',\n  'lodash/isFunction',\n  'lodash/isPlainObject',\n  'lodash/isString',\n  'lodash/mapKeys',\n  'lodash/mapValues',\n  'lodash/pick',\n  'lodash/pickBy',\n  'lodash/startCase',\n  'lodash/throttle',\n  'lodash/uniq',\n  'markdown-to-jsx',\n  'memoizerific',\n  'overlayscrollbars',\n  'polished',\n  'prettier/parser-babel',\n  'prettier/parser-flow',\n  'prettier/parser-typescript',\n  'prop-types',\n  'qs',\n  'react-dom',\n  'react-dom/client',\n  'react-fast-compare',\n  'react-is',\n  'react-textarea-autosize',\n  'react',\n  'refractor/core',\n  'refractor/lang/bash.js',\n  'refractor/lang/css.js',\n  'refractor/lang/graphql.js',\n  'refractor/lang/js-extras.js',\n  'refractor/lang/json.js',\n  'refractor/lang/jsx.js',\n  'refractor/lang/markdown.js',\n  'refractor/lang/markup.js',\n  'refractor/lang/tsx.js',\n  'refractor/lang/typescript.js',\n  'refractor/lang/yaml.js',\n  'regenerator-runtime/runtime.js',\n  'slash',\n  'stable',\n  'store2',\n  'synchronous-promise',\n  'telejson',\n  'ts-dedent',\n  'unfetch',\n  'util-deprecate',\n  'uuid-browser/v4',\n  'vue',\n  'warning',\n];\n\n/**\n * Helper function which allows us to `filter` with an async predicate.  Uses Promise.all for performance.\n */\nconst asyncFilter = async (arr: string[], predicate: (val: string) => Promise<boolean>) =>\n  Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));\n\nexport async function getOptimizeDeps(\n  config: UserConfig & { configFile: false; root: string },\n  options: ExtendedOptions\n) {\n  const { root } = config;\n  const absoluteStories = await listStories(options);\n  const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));\n  const resolvedConfig = await resolveConfig(config, 'serve', 'development');\n\n  // This function converts ids which might include ` > ` to a real path, if it exists on disk.\n  // See https://github.com/vitejs/vite/blob/67d164392e8e9081dc3f0338c4b4b8eea6c5f7da/packages/vite/src/node/optimizer/index.ts#L182-L199\n  const resolve = resolvedConfig.createResolver({ asSrc: false });\n  const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));\n\n  // We can exclude some packages which otherwise are optimized\n  const exclude = [\n    '@storybook/addon-docs',\n    '@storybook/client-api',\n    '@storybook/client-logger',\n    '@storybook/preview-web',\n    '@storybook/channel-postmessage',\n    '@storybook/channel-websocket',\n    '@storybook/addons',\n  ];\n  // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.\n  // TODO: narrow this down to just framework === 'react'.  But causes a vue dev start problem in this monorepo.\n  try {\n    require.resolve('react-dom/client', { paths: [config.root] });\n  } catch (e) {\n    if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {\n      exclude.push('react-dom/client');\n    }\n  }\n  // Depending on the user's storybook version, we can also exclude the framework from prebundling\n  // See https://github.com/storybookjs/storybook/pull/17875\n  const { frameworkPath, framework } = options;\n  const frameworkPackageName = frameworkPath || `@storybook/${framework}`;\n  const sbVersion: string | undefined = (await import(`${frameworkPackageName}/package.json`))?.version;\n  if (sbVersion && semver.gte(sbVersion, '6.5.0-alpha.58', { includePrerelease: true })) {\n    exclude.push(frameworkPackageName);\n  } else {\n    include.push(frameworkPackageName);\n  }\n\n  return {\n    // We don't need to resolve the glob since vite supports globs for entries.\n    entries: stories,\n    // We need Vite to precompile these dependencies, because they contain non-ESM code that would break\n    // if we served it directly to the browser.\n    include,\n    // In some cases we need to prevent deps from being pre-bundled\n    exclude,\n  };\n}\n\n// Refines an error received from 'catch' to be a NodeJS exception\nconst isNodeError = (error: unknown): error is NodeJS.ErrnoException => error instanceof Error;\n"]}

package/dist/plugins/docgen-handlers/actualNameHandler.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This is heavily based on the react-docgen `displayNameHandler`
+ * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)
+ * but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name.
+ * This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName`
+ * and not the component's actual name.
+ *
+ * This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified
+ * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
+ */
+import type { NodePath } from 'ast-types/lib/node-path';
+import type { Importer } from 'react-docgen/dist/parse';
+import type Documentation from 'react-docgen/lib/Documentation';
+export default function actualNameHandler(documentation: Documentation, path: NodePath, importer: Importer): void;

package/dist/plugins/docgen-handlers/actualNameHandler.js

@@ -0,0 +1,43 @@
+"use strict";
+/**
+ * This is heavily based on the react-docgen `displayNameHandler`
+ * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)
+ * but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name.
+ * This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName`
+ * and not the component's actual name.
+ *
+ * This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified
+ * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const ast_types_1 = require("ast-types");
+const utils_1 = require("react-docgen/dist/utils");
+function actualNameHandler(documentation, path, importer) {
+    if (ast_types_1.namedTypes.ClassDeclaration.check(path.node) || ast_types_1.namedTypes.FunctionDeclaration.check(path.node)) {
+        documentation.set('actualName', (0, utils_1.getNameOrValue)(path.get('id')));
+    }
+    else if (ast_types_1.namedTypes.ArrowFunctionExpression.check(path.node) ||
+        ast_types_1.namedTypes.FunctionExpression.check(path.node) ||
+        (0, utils_1.isReactForwardRefCall)(path, importer)) {
+        let currentPath = path;
+        while (currentPath.parent) {
+            if (ast_types_1.namedTypes.VariableDeclarator.check(currentPath.parent.node)) {
+                documentation.set('actualName', (0, utils_1.getNameOrValue)(currentPath.parent.get('id')));
+                return;
+            }
+            else if (ast_types_1.namedTypes.AssignmentExpression.check(currentPath.parent.node)) {
+                const leftPath = currentPath.parent.get('left');
+                if (ast_types_1.namedTypes.Identifier.check(leftPath.node) || ast_types_1.namedTypes.Literal.check(leftPath.node)) {
+                    documentation.set('actualName', (0, utils_1.getNameOrValue)(leftPath));
+                    return;
+                }
+            }
+            currentPath = currentPath.parent;
+        }
+        // Could not find an actual name
+        documentation.set('actualName', '');
+    }
+    return;
+}
+exports.default = actualNameHandler;
+//# sourceMappingURL=actualNameHandler.js.map

package/dist/plugins/docgen-handlers/actualNameHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actualNameHandler.js","sourceRoot":"","sources":["../../../plugins/docgen-handlers/actualNameHandler.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;AAEH,yCAA4C;AAE5C,mDAAgF;AAMhF,SAAwB,iBAAiB,CAAC,aAA4B,EAAE,IAAc,EAAE,QAAkB;IACxG,IAAI,sBAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,sBAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QACjF,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,IAAA,sBAAc,EAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACjE;SAAM,IACL,sBAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAC1C,sBAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,IAAA,6BAAqB,EAAC,IAAI,EAAE,QAAQ,CAAC,EACrC;QACA,IAAI,WAAW,GAAG,IAAI,CAAC;QACvB,OAAO,WAAW,CAAC,MAAM,EAAE;YACzB,IAAI,sBAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;gBACvD,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,IAAA,sBAAc,EAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC9E,OAAO;aACR;iBAAM,IAAI,sBAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;gBAChE,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;gBAChD,IAAI,sBAAC,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,sBAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;oBACvE,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,IAAA,sBAAc,EAAC,QAAQ,CAAC,CAAC,CAAC;oBAC1D,OAAO;iBACR;aACF;YACD,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC;SAClC;QACD,gCAAgC;QAChC,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;KACrC;IACD,OAAO;AACT,CAAC;AA1BD,oCA0BC","sourcesContent":["/**\n * This is heavily based on the react-docgen `displayNameHandler`\n * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)\n * but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name.\n * This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName`\n * and not the component's actual name.\n *\n * This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified\n * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.\n */\n\nimport { namedTypes as t } from 'ast-types';\nimport type { NodePath } from 'ast-types/lib/node-path';\nimport { getNameOrValue, isReactForwardRefCall } from 'react-docgen/dist/utils';\n// import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/lib/utils';\nimport type { Importer } from 'react-docgen/dist/parse';\n// import type { Importer } from 'react-docgen/lib/parse';\nimport type Documentation from 'react-docgen/lib/Documentation';\n\nexport default function actualNameHandler(documentation: Documentation, path: NodePath, importer: Importer): void {\n  if (t.ClassDeclaration.check(path.node) || t.FunctionDeclaration.check(path.node)) {\n    documentation.set('actualName', getNameOrValue(path.get('id')));\n  } else if (\n    t.ArrowFunctionExpression.check(path.node) ||\n    t.FunctionExpression.check(path.node) ||\n    isReactForwardRefCall(path, importer)\n  ) {\n    let currentPath = path;\n    while (currentPath.parent) {\n      if (t.VariableDeclarator.check(currentPath.parent.node)) {\n        documentation.set('actualName', getNameOrValue(currentPath.parent.get('id')));\n        return;\n      } else if (t.AssignmentExpression.check(currentPath.parent.node)) {\n        const leftPath = currentPath.parent.get('left');\n        if (t.Identifier.check(leftPath.node) || t.Literal.check(leftPath.node)) {\n          documentation.set('actualName', getNameOrValue(leftPath));\n          return;\n        }\n      }\n      currentPath = currentPath.parent;\n    }\n    // Could not find an actual name\n    documentation.set('actualName', '');\n  }\n  return;\n}\n"]}

package/dist/plugins/react-docgen.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function reactDocgen(): Plugin;

package/dist/plugins/react-docgen.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactDocgen = void 0;
+const react_docgen_1 = require("react-docgen");
+const magic_string_1 = __importDefault(require("magic-string"));
+const actualNameHandler_1 = __importDefault(require("./docgen-handlers/actualNameHandler"));
+// TODO: None of these are able to be overridden, so `default` is aspirational here.
+const defaultHandlers = Object.values(react_docgen_1.handlers).map((handler) => handler);
+const defaultResolver = react_docgen_1.resolver.findAllExportedComponentDefinitions;
+const defaultImporter = react_docgen_1.importers.makeFsImporter();
+const handlers = [...defaultHandlers, actualNameHandler_1.default];
+function reactDocgen() {
+    return {
+        name: 'react-docgen',
+        enforce: 'pre',
+        async transform(src, id) {
+            // JSX syntax is only allowed in .tsx and .jsx, but components can technically be created without JSX
+            if (/\.(mjs|tsx?|jsx?)$/.test(id)) {
+                try {
+                    // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
+                    const docgenResults = (0, react_docgen_1.parse)(src, defaultResolver, handlers, { importer: defaultImporter, filename: id });
+                    const s = new magic_string_1.default(src);
+                    docgenResults.forEach((info) => {
+                        const { actualName, ...docgenInfo } = info;
+                        if (actualName) {
+                            const docNode = JSON.stringify(docgenInfo);
+                            s.append(`;${actualName}.__docgenInfo=${docNode}`);
+                        }
+                    });
+                    return {
+                        code: s.toString(),
+                        map: s.generateMap(),
+                    };
+                }
+                catch (e) {
+                    // Usually this is just an error from react-docgen that it couldn't find a component
+                    // Only uncomment for troubleshooting
+                    // console.error(e);
+                }
+            }
+        },
+    };
+}
+exports.reactDocgen = reactDocgen;
+//# sourceMappingURL=react-docgen.js.map

package/dist/plugins/react-docgen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-docgen.js","sourceRoot":"","sources":["../../plugins/react-docgen.ts"],"names":[],"mappings":";;;;;;AAAA,+CAKsB;AAEtB,gEAAuC;AAEvC,4FAAoE;AAIpE,oFAAoF;AACpF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAc,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC;AAChF,MAAM,eAAe,GAAG,uBAAc,CAAC,mCAAmC,CAAC;AAC3E,MAAM,eAAe,GAAG,wBAAe,CAAC,cAAc,EAAE,CAAC;AACzD,MAAM,QAAQ,GAAG,CAAC,GAAG,eAAe,EAAE,2BAAiB,CAAC,CAAC;AAEzD,SAAgB,WAAW;IACzB,OAAO;QACL,IAAI,EAAE,cAAc;QACpB,OAAO,EAAE,KAAK;QACd,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,EAAU;YACrC,qGAAqG;YACrG,IAAI,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACjC,IAAI;oBACF,yFAAyF;oBACzF,MAAM,aAAa,GAAG,IAAA,oBAAK,EAAC,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3F,CAAC;oBACb,MAAM,CAAC,GAAG,IAAI,sBAAW,CAAC,GAAG,CAAC,CAAC;oBAE/B,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;wBAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC;wBAC3C,IAAI,UAAU,EAAE;4BACd,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;4BAC3C,CAAC,CAAC,MAAM,CAAC,IAAI,UAAU,iBAAiB,OAAO,EAAE,CAAC,CAAC;yBACpD;oBACH,CAAC,CAAC,CAAC;oBAEH,OAAO;wBACL,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE;wBAClB,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE;qBACrB,CAAC;iBACH;gBAAC,OAAO,CAAC,EAAE;oBACV,oFAAoF;oBACpF,qCAAqC;oBACrC,oBAAoB;iBACrB;aACF;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAjCD,kCAiCC","sourcesContent":["import {\n  parse,\n  handlers as docgenHandlers,\n  resolver as docgenResolver,\n  importers as docgenImporters,\n} from 'react-docgen';\nimport type { DocumentationObject } from 'react-docgen/lib/Documentation';\nimport MagicString from 'magic-string';\nimport type { Plugin } from 'vite';\nimport actualNameHandler from './docgen-handlers/actualNameHandler';\n\ntype DocObj = DocumentationObject & { actualName: string };\n\n// TODO: None of these are able to be overridden, so `default` is aspirational here.\nconst defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);\nconst defaultResolver = docgenResolver.findAllExportedComponentDefinitions;\nconst defaultImporter = docgenImporters.makeFsImporter();\nconst handlers = [...defaultHandlers, actualNameHandler];\n\nexport function reactDocgen(): Plugin {\n  return {\n    name: 'react-docgen',\n    enforce: 'pre',\n    async transform(src: string, id: string) {\n      // JSX syntax is only allowed in .tsx and .jsx, but components can technically be created without JSX\n      if (/\\.(mjs|tsx?|jsx?)$/.test(id)) {\n        try {\n          // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.\n          const docgenResults = parse(src, defaultResolver, handlers, { importer: defaultImporter, filename: id }) as\n            | DocObj[];\n          const s = new MagicString(src);\n\n          docgenResults.forEach((info) => {\n            const { actualName, ...docgenInfo } = info;\n            if (actualName) {\n              const docNode = JSON.stringify(docgenInfo);\n              s.append(`;${actualName}.__docgenInfo=${docNode}`);\n            }\n          });\n\n          return {\n            code: s.toString(),\n            map: s.generateMap(),\n          };\n        } catch (e) {\n          // Usually this is just an error from react-docgen that it couldn't find a component\n          // Only uncomment for troubleshooting\n          // console.error(e);\n        }\n      }\n    },\n  };\n}\n"]}

package/dist/plugins/vue-docgen.d.ts

@@ -1,4 +1,2 @@
-export declare function vueDocgen(): {
-    name: string;
-    transform(src: string, id: string): Promise<string | undefined>;
-};
+import type { Plugin } from 'vite';
+export declare function vueDocgen(): Plugin;

package/dist/plugins/vue-docgen.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.vueDocgen = void 0;
 const vue_docgen_api_1 = require("vue-docgen-api");
+const magic_string_1 = __importDefault(require("magic-string"));
 function vueDocgen() {
     return {
         name: 'vue-docgen',
@@ -9,7 +13,12 @@ function vueDocgen() {
             if (/\.(vue)$/.test(id)) {
                 const metaData = await (0, vue_docgen_api_1.parse)(id);
                 const metaSource = JSON.stringify(metaData);
-                return `${src};_sfc_main.__docgenInfo = ${metaSource}`;
+                const s = new magic_string_1.default(src);
+                s.append(`;_sfc_main.__docgenInfo = ${metaSource}`);
+                return {
+                    code: s.toString(),
+                    map: s.generateMap(),
+                };
             }
         },
     };

package/dist/plugins/vue-docgen.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-docgen.js","sourceRoot":"","sources":["../../plugins/vue-docgen.ts"],"names":[],"mappings":";;;AAAA,mDAAuC;AAEvC,SAAgB,SAAS;IACvB,OAAO;QACL,IAAI,EAAE,YAAY;QAElB,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,EAAU;YACrC,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACvB,MAAM,QAAQ,GAAG,MAAM,IAAA,sBAAK,EAAC,EAAE,CAAC,CAAC;gBACjC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBAE5C,OAAO,GAAG,GAAG,6BAA6B,UAAU,EAAE,CAAC;aACxD;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAbD,8BAaC","sourcesContent":["import { parse } from 'vue-docgen-api';\n\nexport function vueDocgen() {\n  return {\n    name: 'vue-docgen',\n\n    async transform(src: string, id: string) {\n      if (/\\.(vue)$/.test(id)) {\n        const metaData = await parse(id);\n        const metaSource = JSON.stringify(metaData);\n\n        return `${src};_sfc_main.__docgenInfo = ${metaSource}`;\n      }\n    },\n  };\n}\n"]}
+{"version":3,"file":"vue-docgen.js","sourceRoot":"","sources":["../../plugins/vue-docgen.ts"],"names":[],"mappings":";;;;;;AAAA,mDAAuC;AAEvC,gEAAuC;AAEvC,SAAgB,SAAS;IACvB,OAAO;QACL,IAAI,EAAE,YAAY;QAElB,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,EAAU;YACrC,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACvB,MAAM,QAAQ,GAAG,MAAM,IAAA,sBAAK,EAAC,EAAE,CAAC,CAAC;gBACjC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;gBAC5C,MAAM,CAAC,GAAG,IAAI,sBAAW,CAAC,GAAG,CAAC,CAAC;gBAC/B,CAAC,CAAC,MAAM,CAAC,6BAA6B,UAAU,EAAE,CAAC,CAAC;gBAEpD,OAAO;oBACL,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE;oBAClB,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE;iBACrB,CAAC;aACH;QACH,CAAC;KACF,CAAC;AACJ,CAAC;AAlBD,8BAkBC","sourcesContent":["import { parse } from 'vue-docgen-api';\nimport type { Plugin } from 'vite';\nimport MagicString from 'magic-string';\n\nexport function vueDocgen(): Plugin {\n  return {\n    name: 'vue-docgen',\n\n    async transform(src: string, id: string) {\n      if (/\\.(vue)$/.test(id)) {\n        const metaData = await parse(id);\n        const metaSource = JSON.stringify(metaData);\n        const s = new MagicString(src);\n        s.append(`;_sfc_main.__docgenInfo = ${metaSource}`);\n\n        return {\n          code: s.toString(),\n          map: s.generateMap(),\n        };\n      }\n    },\n  };\n}\n"]}

package/dist/vite-config.d.ts

@@ -2,6 +2,7 @@ import { Plugin } from 'vite';
 import type { UserConfig } from 'vite';
 import type { ExtendedOptions } from './types';
 export declare type PluginConfigType = 'build' | 'development';
+export declare function readPackageJson(): Record<string, any> | false;
 export declare function commonConfig(options: ExtendedOptions, _type: PluginConfigType): Promise<UserConfig & {
     configFile: false;
     root: string;

package/dist/vite-config.js

@@ -18,15 +18,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pluginConfig = exports.commonConfig = void 0;
+exports.pluginConfig = exports.commonConfig = exports.readPackageJson = void 0;
 const path = __importStar(require("path"));
+const fs_1 = __importDefault(require("fs"));
 const envs_1 = require("./envs");
 const mock_core_js_1 = require("./mock-core-js");
 const code_generator_plugin_1 = require("./code-generator-plugin");
 const inject_export_order_plugin_1 = require("./inject-export-order-plugin");
 const mdx_plugin_1 = require("./mdx-plugin");
 const source_loader_plugin_1 = require("./source-loader-plugin");
+function readPackageJson() {
+    const packageJsonPath = path.resolve('package.json');
+    if (!fs_1.default.existsSync(packageJsonPath)) {
+        return false;
+    }
+    const jsonContent = fs_1.default.readFileSync(packageJsonPath, 'utf8');
+    return JSON.parse(jsonContent);
+}
+exports.readPackageJson = readPackageJson;
 // Vite config that is common to development and production mode
 async function commonConfig(options, _type) {
     const { framework } = options;
@@ -48,6 +61,7 @@ async function commonConfig(options, _type) {
 }
 exports.commonConfig = commonConfig;
 async function pluginConfig(options, _type) {
+    var _a, _b;
     const { framework, presets } = options;
     const svelteOptions = await presets.apply('svelteOptions', {}, options);
     const plugins = [
@@ -106,8 +120,8 @@ async function pluginConfig(options, _type) {
         const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply('typescript', {});
         let typescriptPresent;
         try {
-            require.resolve('typescript');
-            typescriptPresent = true;
+            const pkgJson = readPackageJson();
+            typescriptPresent = pkgJson && (((_a = pkgJson === null || pkgJson === void 0 ? void 0 : pkgJson.devDependencies) === null || _a === void 0 ? void 0 : _a.typescript) || ((_b = pkgJson === null || pkgJson === void 0 ? void 0 : pkgJson.dependencies) === null || _b === void 0 ? void 0 : _b.typescript));
         }
         catch (e) {
             typescriptPresent = false;
@@ -115,6 +129,11 @@ async function pluginConfig(options, _type) {
         if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {
             plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript').default(reactDocgenTypescriptOptions));
         }
+        else if (reactDocgen) {
+            const { reactDocgen } = await Promise.resolve().then(() => __importStar(require('./plugins/react-docgen')));
+            // Needs to run before the react plugin, so add to the front
+            plugins.unshift(reactDocgen());
+        }
     }
     if (framework === 'glimmerx') {
         const plugin = require('vite-plugin-glimmerx/index.cjs');

package/dist/vite-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"vite-config.js","sourceRoot":"","sources":["../vite-config.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport { Plugin } from 'vite';\nimport { allowedEnvPrefix as envPrefix } from './envs';\nimport { TypescriptConfig } from '@storybook/core-common';\nimport { mockCoreJs } from './mock-core-js';\nimport { codeGeneratorPlugin } from './code-generator-plugin';\nimport { injectExportOrderPlugin } from './inject-export-order-plugin';\nimport { mdxPlugin } from './mdx-plugin';\nimport { sourceLoaderPlugin } from './source-loader-plugin';\n\nimport type { UserConfig } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport type PluginConfigType = 'build' | 'development';\n\n// Vite config that is common to development and production mode\nexport async function commonConfig(\n  options: ExtendedOptions,\n  _type: PluginConfigType\n): Promise<UserConfig & { configFile: false; root: string }> {\n  const { framework } = options;\n\n  return {\n    configFile: false,\n    root: path.resolve(options.configDir, '..'),\n    cacheDir: 'node_modules/.vite-storybook',\n    envPrefix,\n    define: {},\n    resolve:\n      framework === 'vue3'\n        ? {\n            alias: {\n              vue: 'vue/dist/vue.esm-bundler.js',\n            },\n          }\n        : {},\n    plugins: await pluginConfig(options, _type),\n  };\n}\n\nexport async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {\n  const { framework, presets } = options;\n  const svelteOptions = await presets.apply('svelteOptions', {}, options);\n\n  const plugins = [\n    codeGeneratorPlugin(options),\n    mockCoreJs(),\n    sourceLoaderPlugin(),\n    mdxPlugin(),\n    injectExportOrderPlugin,\n  ] as Plugin[];\n  if (framework === 'vue' || framework === 'vue3') {\n    try {\n      const vuePlugin = require('@vitejs/plugin-vue');\n      plugins.push(vuePlugin());\n      const { vueDocgen } = await import('./plugins/vue-docgen');\n      plugins.push(vueDocgen());\n    } catch (err) {\n      if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n        throw new Error(\n          '@storybook/builder-vite requires @vitejs/plugin-vue to be installed ' +\n            'when using @storybook/vue or @storybook/vue3.' +\n            '  Please install it and start storybook again.'\n        );\n      }\n      throw err;\n    }\n  }\n  if (framework === 'svelte') {\n    try {\n      const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;\n      plugins.push(sveltePlugin(svelteOptions));\n    } catch (err) {\n      if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n        throw new Error(\n          '@storybook/builder-vite requires @sveltejs/vite-plugin-svelte to be installed' +\n            ' when using @storybook/svelte.' +\n            '  Please install it and start storybook again.'\n        );\n      }\n      throw err;\n    }\n\n    try {\n      const csfPlugin = require('./svelte/csf-plugin').default;\n      plugins.push(csfPlugin(svelteOptions));\n    } catch (err) {\n      if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n        throw new Error(\n          '@storybook/builder-vite requires @storybook/addon-svelte-csf to be installed when using @storybook/svelte.' +\n            '  Please install it and start storybook again.'\n        );\n      }\n      throw err;\n    }\n  }\n\n  if (framework === 'react') {\n    plugins.push(\n      require('@vitejs/plugin-react')({\n        // Do not treat story files as HMR boundaries, storybook itself needs to handle them.\n        exclude: [/\\.stories\\.([tj])sx?$/, /node_modules/],\n      })\n    );\n\n    const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply('typescript', {} as TypescriptConfig);\n\n    let typescriptPresent;\n\n    try {\n      require.resolve('typescript');\n      typescriptPresent = true;\n    } catch (e) {\n      typescriptPresent = false;\n    }\n\n    if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {\n      plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript').default(reactDocgenTypescriptOptions));\n    }\n  }\n\n  if (framework === 'glimmerx') {\n    const plugin = require('vite-plugin-glimmerx/index.cjs');\n    plugins.push(plugin.default());\n  }\n\n  return plugins;\n}\n"]}
+{"version":3,"file":"vite-config.js","sourceRoot":"","sources":["../vite-config.ts"],"names":[],"mappings":"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","sourcesContent":["import * as path from 'path';\nimport fs from 'fs';\nimport { Plugin } from 'vite';\nimport { allowedEnvPrefix as envPrefix } from './envs';\nimport { TypescriptConfig } from '@storybook/core-common';\nimport { mockCoreJs } from './mock-core-js';\nimport { codeGeneratorPlugin } from './code-generator-plugin';\nimport { injectExportOrderPlugin } from './inject-export-order-plugin';\nimport { mdxPlugin } from './mdx-plugin';\nimport { sourceLoaderPlugin } from './source-loader-plugin';\n\nimport type { UserConfig } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport type PluginConfigType = 'build' | 'development';\n\nexport function readPackageJson(): Record<string, any> | false {\n  const packageJsonPath = path.resolve('package.json');\n  if (!fs.existsSync(packageJsonPath)) {\n    return false;\n  }\n\n  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');\n  return JSON.parse(jsonContent);\n}\n\n// Vite config that is common to development and production mode\nexport async function commonConfig(\n  options: ExtendedOptions,\n  _type: PluginConfigType\n): Promise<UserConfig & { configFile: false; root: string }> {\n  const { framework } = options;\n\n  return {\n    configFile: false,\n    root: path.resolve(options.configDir, '..'),\n    cacheDir: 'node_modules/.vite-storybook',\n    envPrefix,\n    define: {},\n    resolve:\n      framework === 'vue3'\n        ? {\n            alias: {\n              vue: 'vue/dist/vue.esm-bundler.js',\n            },\n          }\n        : {},\n    plugins: await pluginConfig(options, _type),\n  };\n}\n\nexport async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {\n  const { framework, presets } = options;\n  const svelteOptions = await presets.apply('svelteOptions', {}, options);\n\n  const plugins = [\n    codeGeneratorPlugin(options),\n    mockCoreJs(),\n    sourceLoaderPlugin(),\n    mdxPlugin(),\n    injectExportOrderPlugin,\n  ] as Plugin[];\n  if (framework === 'vue' || framework === 'vue3') {\n    try {\n      const vuePlugin = require('@vitejs/plugin-vue');\n      plugins.push(vuePlugin());\n      const { vueDocgen } = await import('./plugins/vue-docgen');\n      plugins.push(vueDocgen());\n    } catch (err) {\n      if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n        throw new Error(\n          '@storybook/builder-vite requires @vitejs/plugin-vue to be installed ' +\n            'when using @storybook/vue or @storybook/vue3.' +\n            '  Please install it and start storybook again.'\n        );\n      }\n      throw err;\n    }\n  }\n  if (framework === 'svelte') {\n    try {\n      const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;\n      plugins.push(sveltePlugin(svelteOptions));\n    } catch (err) {\n      if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n        throw new Error(\n          '@storybook/builder-vite requires @sveltejs/vite-plugin-svelte to be installed' +\n            ' when using @storybook/svelte.' +\n            '  Please install it and start storybook again.'\n        );\n      }\n      throw err;\n    }\n\n    try {\n      const csfPlugin = require('./svelte/csf-plugin').default;\n      plugins.push(csfPlugin(svelteOptions));\n    } catch (err) {\n      if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {\n        throw new Error(\n          '@storybook/builder-vite requires @storybook/addon-svelte-csf to be installed when using @storybook/svelte.' +\n            '  Please install it and start storybook again.'\n        );\n      }\n      throw err;\n    }\n  }\n\n  if (framework === 'react') {\n    plugins.push(\n      require('@vitejs/plugin-react')({\n        // Do not treat story files as HMR boundaries, storybook itself needs to handle them.\n        exclude: [/\\.stories\\.([tj])sx?$/, /node_modules/],\n      })\n    );\n\n    const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply('typescript', {} as TypescriptConfig);\n\n    let typescriptPresent;\n\n    try {\n      const pkgJson = readPackageJson();\n      typescriptPresent = pkgJson && (pkgJson?.devDependencies?.typescript || pkgJson?.dependencies?.typescript);\n    } catch (e) {\n      typescriptPresent = false;\n    }\n\n    if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {\n      plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript').default(reactDocgenTypescriptOptions));\n    } else if (reactDocgen) {\n      const { reactDocgen } = await import('./plugins/react-docgen');\n      // Needs to run before the react plugin, so add to the front\n      plugins.unshift(reactDocgen());\n    }\n  }\n\n  if (framework === 'glimmerx') {\n    const plugin = require('vite-plugin-glimmerx/index.cjs');\n    plugins.push(plugin.default());\n  }\n\n  return plugins;\n}\n"]}

package/input/react-dom-client-placeholder.js

@@ -0,0 +1,3 @@
+// This file is to work around https://github.com/vitejs/vite/issues/6007
+// For react < 18 projects, where `react-dom/client` does not exist, yet is
+// conditionally imported by @storybook/react.

package/optimizeDeps.ts

@@ -1,6 +1,7 @@
 import * as path from 'path';
 import { normalizePath, resolveConfig, UserConfig } from 'vite';
 import { listStories } from './list-stories';
+import semver from 'semver';
 
 import type { ExtendedOptions } from './types';
 
@@ -10,20 +11,7 @@ const INCLUDE_CANDIDATES = [
   '@emotion/is-prop-valid',
   '@emotion/styled',
   '@mdx-js/react',
-  '@storybook/addon-docs > acorn-jsx',
-  '@storybook/addon-docs',
-  '@storybook/addons',
-  '@storybook/channel-postmessage',
-  '@storybook/channel-websocket',
-  '@storybook/client-api',
-  '@storybook/client-logger',
-  '@storybook/core/client',
   '@storybook/csf',
-  '@storybook/preview-web',
-  '@storybook/react > acorn-jsx',
-  '@storybook/react',
-  '@storybook/svelte',
-  '@storybook/vue3',
   'acorn-jsx',
   'acorn-walk',
   'acorn',
@@ -63,6 +51,7 @@ const INCLUDE_CANDIDATES = [
   'prop-types',
   'qs',
   'react-dom',
+  'react-dom/client',
   'react-fast-compare',
   'react-is',
   'react-textarea-autosize',
@@ -113,11 +102,46 @@ export async function getOptimizeDeps(
   const resolve = resolvedConfig.createResolver({ asSrc: false });
   const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
 
+  // We can exclude some packages which otherwise are optimized
+  const exclude = [
+    '@storybook/addon-docs',
+    '@storybook/client-api',
+    '@storybook/client-logger',
+    '@storybook/preview-web',
+    '@storybook/channel-postmessage',
+    '@storybook/channel-websocket',
+    '@storybook/addons',
+  ];
+  // This is necessary to support react < 18 with new versions of @storybook/react that support react 18.
+  // TODO: narrow this down to just framework === 'react'.  But causes a vue dev start problem in this monorepo.
+  try {
+    require.resolve('react-dom/client', { paths: [config.root] });
+  } catch (e) {
+    if (isNodeError(e) && e.code === 'MODULE_NOT_FOUND') {
+      exclude.push('react-dom/client');
+    }
+  }
+  // Depending on the user's storybook version, we can also exclude the framework from prebundling
+  // See https://github.com/storybookjs/storybook/pull/17875
+  const { frameworkPath, framework } = options;
+  const frameworkPackageName = frameworkPath || `@storybook/${framework}`;
+  const sbVersion: string | undefined = (await import(`${frameworkPackageName}/package.json`))?.version;
+  if (sbVersion && semver.gte(sbVersion, '6.5.0-alpha.58', { includePrerelease: true })) {
+    exclude.push(frameworkPackageName);
+  } else {
+    include.push(frameworkPackageName);
+  }
+
   return {
     // We don't need to resolve the glob since vite supports globs for entries.
     entries: stories,
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
     include,
+    // In some cases we need to prevent deps from being pre-bundled
+    exclude,
   };
 }
+
+// Refines an error received from 'catch' to be a NodeJS exception
+const isNodeError = (error: unknown): error is NodeJS.ErrnoException => error instanceof Error;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "0.1.23",
+  "version": "0.1.26",
   "description": "An experimental plugin to run and build Storybooks with Vite",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,19 +13,25 @@
   },
   "homepage": "https://github.com/storybookjs/builder-vite/#readme",
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.2",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.4",
     "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf-tools": "^6.3.3",
     "@storybook/source-loader": "^6.3.12",
     "@vitejs/plugin-react": "^1.0.8",
+    "ast-types": "^0.14.2",
     "es-module-lexer": "^0.9.3",
     "glob": "^7.2.0",
     "glob-promise": "^4.2.0",
+    "magic-string": "^0.26.1",
+    "react-docgen": "^6.0.0-alpha.0",
+    "semver": "^7.3.5",
     "slash": "^3.0.0",
     "vite-plugin-mdx": "^3.5.6"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
+    "@types/node": "^17.0.23",
+    "@types/semver": "^7.3.9",
     "vue-docgen-api": "^4.40.0"
   },
   "peerDependencies": {

package/plugins/docgen-handlers/actualNameHandler.ts

@@ -0,0 +1,46 @@
+/**
+ * This is heavily based on the react-docgen `displayNameHandler`
+ * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)
+ * but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name.
+ * This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName`
+ * and not the component's actual name.
+ *
+ * This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified
+ * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
+ */
+
+import { namedTypes as t } from 'ast-types';
+import type { NodePath } from 'ast-types/lib/node-path';
+import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/dist/utils';
+// import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/lib/utils';
+import type { Importer } from 'react-docgen/dist/parse';
+// import type { Importer } from 'react-docgen/lib/parse';
+import type Documentation from 'react-docgen/lib/Documentation';
+
+export default function actualNameHandler(documentation: Documentation, path: NodePath, importer: Importer): void {
+  if (t.ClassDeclaration.check(path.node) || t.FunctionDeclaration.check(path.node)) {
+    documentation.set('actualName', getNameOrValue(path.get('id')));
+  } else if (
+    t.ArrowFunctionExpression.check(path.node) ||
+    t.FunctionExpression.check(path.node) ||
+    isReactForwardRefCall(path, importer)
+  ) {
+    let currentPath = path;
+    while (currentPath.parent) {
+      if (t.VariableDeclarator.check(currentPath.parent.node)) {
+        documentation.set('actualName', getNameOrValue(currentPath.parent.get('id')));
+        return;
+      } else if (t.AssignmentExpression.check(currentPath.parent.node)) {
+        const leftPath = currentPath.parent.get('left');
+        if (t.Identifier.check(leftPath.node) || t.Literal.check(leftPath.node)) {
+          documentation.set('actualName', getNameOrValue(leftPath));
+          return;
+        }
+      }
+      currentPath = currentPath.parent;
+    }
+    // Could not find an actual name
+    documentation.set('actualName', '');
+  }
+  return;
+}

package/plugins/react-docgen.ts

@@ -0,0 +1,53 @@
+import {
+  parse,
+  handlers as docgenHandlers,
+  resolver as docgenResolver,
+  importers as docgenImporters,
+} from 'react-docgen';
+import type { DocumentationObject } from 'react-docgen/lib/Documentation';
+import MagicString from 'magic-string';
+import type { Plugin } from 'vite';
+import actualNameHandler from './docgen-handlers/actualNameHandler';
+
+type DocObj = DocumentationObject & { actualName: string };
+
+// TODO: None of these are able to be overridden, so `default` is aspirational here.
+const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
+const defaultResolver = docgenResolver.findAllExportedComponentDefinitions;
+const defaultImporter = docgenImporters.makeFsImporter();
+const handlers = [...defaultHandlers, actualNameHandler];
+
+export function reactDocgen(): Plugin {
+  return {
+    name: 'react-docgen',
+    enforce: 'pre',
+    async transform(src: string, id: string) {
+      // JSX syntax is only allowed in .tsx and .jsx, but components can technically be created without JSX
+      if (/\.(mjs|tsx?|jsx?)$/.test(id)) {
+        try {
+          // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
+          const docgenResults = parse(src, defaultResolver, handlers, { importer: defaultImporter, filename: id }) as
+            | DocObj[];
+          const s = new MagicString(src);
+
+          docgenResults.forEach((info) => {
+            const { actualName, ...docgenInfo } = info;
+            if (actualName) {
+              const docNode = JSON.stringify(docgenInfo);
+              s.append(`;${actualName}.__docgenInfo=${docNode}`);
+            }
+          });
+
+          return {
+            code: s.toString(),
+            map: s.generateMap(),
+          };
+        } catch (e) {
+          // Usually this is just an error from react-docgen that it couldn't find a component
+          // Only uncomment for troubleshooting
+          // console.error(e);
+        }
+      }
+    },
+  };
+}

package/plugins/vue-docgen.ts

@@ -1,6 +1,8 @@
 import { parse } from 'vue-docgen-api';
+import type { Plugin } from 'vite';
+import MagicString from 'magic-string';
 
-export function vueDocgen() {
+export function vueDocgen(): Plugin {
   return {
     name: 'vue-docgen',
 
@@ -8,8 +10,13 @@ export function vueDocgen() {
       if (/\.(vue)$/.test(id)) {
         const metaData = await parse(id);
         const metaSource = JSON.stringify(metaData);
+        const s = new MagicString(src);
+        s.append(`;_sfc_main.__docgenInfo = ${metaSource}`);
 
-        return `${src};_sfc_main.__docgenInfo = ${metaSource}`;
+        return {
+          code: s.toString(),
+          map: s.generateMap(),
+        };
       }
     },
   };

package/types/react-docgen.d.ts

@@ -0,0 +1,22 @@
+// TODO: delete this stub file once a new alpha of react-docgen is released (will include ts types).
+
+declare module 'react-docgen' {
+  declare const parse;
+  declare const handlers;
+  declare const resolver;
+  declare const importers;
+}
+
+declare module 'react-docgen/lib/Documentation' {
+  export type DocumentationObject = Record<string, any>;
+  export default Documentation;
+}
+
+declare module 'react-docgen/dist/utils' {
+  declare const getNameOrValue;
+  declare const isReactForwardRefCall;
+}
+
+declare module 'react-docgen/dist/parse' {
+  declare type Importer = any;
+}

package/vite-config.ts

@@ -1,4 +1,5 @@
 import * as path from 'path';
+import fs from 'fs';
 import { Plugin } from 'vite';
 import { allowedEnvPrefix as envPrefix } from './envs';
 import { TypescriptConfig } from '@storybook/core-common';
@@ -13,6 +14,16 @@ import type { ExtendedOptions } from './types';
 
 export type PluginConfigType = 'build' | 'development';
 
+export function readPackageJson(): Record<string, any> | false {
+  const packageJsonPath = path.resolve('package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    return false;
+  }
+
+  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+  return JSON.parse(jsonContent);
+}
+
 // Vite config that is common to development and production mode
 export async function commonConfig(
   options: ExtendedOptions,
@@ -108,14 +119,18 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
     let typescriptPresent;
 
     try {
-      require.resolve('typescript');
-      typescriptPresent = true;
+      const pkgJson = readPackageJson();
+      typescriptPresent = pkgJson && (pkgJson?.devDependencies?.typescript || pkgJson?.dependencies?.typescript);
     } catch (e) {
       typescriptPresent = false;
     }
 
     if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {
       plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript').default(reactDocgenTypescriptOptions));
+    } else if (reactDocgen) {
+      const { reactDocgen } = await import('./plugins/react-docgen');
+      // Needs to run before the react plugin, so add to the front
+      plugins.unshift(reactDocgen());
     }
   }