@storybook/builder-vite 0.1.22 → 0.1.23

package/README.md

@@ -1,23 +1,27 @@
 # Storybook builder for Vite
 
-Requirements:
-
-- Vite 2.5 or newer
+Build your stories with [vite](https://vitejs.dev/) for fast startup times and near-instant HMR.
 
-Have a look at the GitHub issues for known bugs. If you find any new bugs,
-feel free to create an issue or send a pull request!
+## Project has been renamed
 
-## More maintainers needed!
+This project has moved from `storybook-builder-vite` to `@storybook/builder-vite` as part of a larger effort to improve Vite support in Storybook. To automatically migrate your existing project, you can run
 
-The Vite builder cannot build itself.
-Are you willing to contribute?
+```bash
+npx sb@next automigrate
+```
 
-https://github.com/storybookjs/builder-vite/issues/11
+To manually migrate:
 
-Please read the [How to contribute](/CONTRIBUTING.md) guide.
+1. Remove `storybook-builder-vite` from your `package.json` dependencies
+2. Install `@storybook/builder-vite`
+3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
 
 ### Installation
 
+Requirements:
+
+- Vite 2.5 or newer
+
 ```bash
 npm install @storybook/builder-vite --save-dev
 ```
@@ -28,12 +32,20 @@ or
 yarn add --dev @storybook/builder-vite
 ```
 
+or
+
+```bash
+pnpm add --save-dev @storybook/builder-vite
+```
+
+Note: when using `pnpm`, you may need to enable [shamefully-hoist](https://pnpm.io/npmrc#shamefully-hoist), until https://github.com/storybookjs/builder-vite/issues/55 can be fixed.
+
 ### Usage
 
 In your `main.js` configuration file,
 set `core: { builder: "@storybook/builder-vite" }`.
 
-> For autoreload of stories to work, they need to have `.stories.tsx` file suffix.
+> For autoreload of react stories to work, they need to have a `.stories.tsx` or `.stories.jsx` file suffix.
 > See also [#53](https://github.com/storybookjs/builder-vite/pull/53)
 
 The builder supports both development mode in Storybook, and building a static production version.
@@ -92,29 +104,37 @@ The builder will by default enable Vite's [server.fs.strict](https://vitejs.dev/
 option, for increased security. The default project `root` is set to the parent directory of the
 storybook configuration directory. This can be overridden in viteFinal.
 
-### Getting started with React, Vite and Storybook (on a new project)
+### Getting started with Vite and Storybook (on a new project)
+
+See https://vitejs.dev/guide/#scaffolding-your-first-vite-project,
 
 ```
-npm init @vitejs/app vite-react-app --template react && cd vite-react-app
-npm install # or yarn
-npx sb@next init --builder @storybook/builder-vite && npm run storybook
+npm create vite@latest # follow the prompts
+npx sb init --builder @storybook/builder-vite && npm run storybook
 ```
 
 ## Known issues
 
-- HMR: saving a story file does not hot-module-reload. In svelte, the page is not reloaded either (https://github.com/storybookjs/builder-vite/issues/209). HMR should work when saving component files.
-- Prebundling: Vite restarts if it detects new dependencies which it did not know about and needs to pre-bundle. This breaks within storybook, with confusing error messages. If you see a message in your terminal like `[vite] new dependencies found:`, please add those dependencies to your `optimizeDeps.include` in `viteFinal`. E.g. `config.optimizeDeps.include = [...(config.optimizeDeps?.include ?? []), "storybook-dark-mode"],`.
-- MDX pages are broken when emotion 11 is installed: Adding the configuration [here](https://github.com/storybookjs/builder-vite/issues/219#issuecomment-1023666193) should fix this.
+- HMR: saving a story file does not hot-module-reload, a full reload happens instead. HMR works correctly when saving component files.
+- Prebundling: Vite restarts if it detects new dependencies which it did not know about and needs to pre-bundle. This breaks within storybook, with confusing error messages. If you see a message in your terminal like `[vite] new dependencies found:`, please add those dependencies to your `optimizeDeps.include` in `viteFinal`. E.g. `config.optimizeDeps.include = [...(config.optimizeDeps?.include ?? []), "storybook-dark-mode"],`. Vite 2.9.0 may improve this behavior.
 
 ## Contributing
 
-Contributions are welcome!
+The Vite builder cannot build itself.
+Are you willing to contribute?
+
+https://github.com/storybookjs/builder-vite/issues/11
+
+Have a look at the GitHub issues for known bugs. If you find any new bugs,
+feel free to create an issue or send a pull request!
+
+Please read the [How to contribute](/CONTRIBUTING.md) guide.
 
 ### About this codebase
 
 The code is a monorepo with the core `@storybook/builder-vite` package,
-and examples (like `packages/example-react`) to test the builder implementation with.
+and examples (like `examples/react`) to test the builder implementation.
 
-Similar to the main storybook monorepo, you need yarn , because the project is organized as yarn workspaces.
+Similar to the main storybook monorepo, you need yarn to develop this builder, because the project is organized as yarn workspaces.
 This lets you write new code in the core builder package, and instantly use them from
 the example packages.

package/code-generator-plugin.ts

@@ -5,14 +5,14 @@ import { generateIframeScriptCode } from './codegen-iframe-script';
 import { generateModernIframeScriptCode } from './codegen-modern-iframe-script';
 import { generateImportFnScriptCode } from './codegen-importfn-script';
 import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from './codegen-entries';
+import { generateAddonSetupCode } from './codegen-set-addon-channel';
 
 import type { Plugin } from 'vite';
 import type { ExtendedOptions } from './types';
 
+import { virtualAddonSetupFile, virtualFileId, virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
+
 export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
-  const virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';
-  const virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';
-  const virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';
   const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');
   let iframeId: string;
 
@@ -61,6 +61,8 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         return virtualStoriesFile;
       } else if (source === virtualPreviewFile) {
         return virtualPreviewFile;
+      } else if (source === virtualAddonSetupFile) {
+        return virtualAddonSetupFile;
       }
     },
     async load(id) {
@@ -73,18 +75,19 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         }
       }
 
+      if (id === virtualAddonSetupFile) {
+        return generateAddonSetupCode();
+      }
+
       if (id === virtualPreviewFile && !storyStoreV7) {
         return generatePreviewEntryCode(options);
       }
 
       if (id === virtualFileId) {
         if (storyStoreV7) {
-          return generateModernIframeScriptCode(options, { storiesFilename: virtualStoriesFile });
+          return generateModernIframeScriptCode(options);
         } else {
-          return generateIframeScriptCode(options, {
-            storiesFilename: virtualStoriesFile,
-            previewFilename: virtualPreviewFile,
-          });
+          return generateIframeScriptCode(options);
         }
       }
 

package/codegen-iframe-script.ts

@@ -1,16 +1,9 @@
 import { normalizePath } from 'vite';
+import { virtualPreviewFile, virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
 
 import type { ExtendedOptions } from './types';
 
-interface GenerateIframeScriptCodeOptions {
-  storiesFilename: string;
-  previewFilename: string;
-}
-
-export async function generateIframeScriptCode(
-  options: ExtendedOptions,
-  { storiesFilename, previewFilename }: GenerateIframeScriptCodeOptions
-) {
+export async function generateIframeScriptCode(options: ExtendedOptions) {
   const { presets } = options;
 
   const presetEntries = await presets.apply('config', [], options);
@@ -25,6 +18,7 @@ export async function generateIframeScriptCode(
   /** @todo Inline variable and remove `noinspection` */
   // language=JavaScript
   const code = `
+    import '${virtualAddonSetupFile}';
     import {
       addDecorator,
       addParameters,
@@ -34,9 +28,9 @@ export async function generateIframeScriptCode(
     } from '@storybook/client-api';
     import { logger } from '@storybook/client-logger';
     ${absoluteFilesToImport(configEntries, 'config')}
-    import * as preview from '${previewFilename}';
+    import * as preview from '${virtualPreviewFile}';
     // This import should occur after the config imports above
-    import { configStories } from '${storiesFilename}';
+    import { configStories } from '${virtualStoriesFile}';
 
     const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
 

package/codegen-modern-iframe-script.ts

@@ -1,16 +1,9 @@
 import { loadPreviewOrConfigFile } from '@storybook/core-common';
 import { normalizePath } from 'vite';
-
+import { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
 import type { ExtendedOptions } from './types';
 
-interface GenerateModernIframeScriptCodeOptions {
-  storiesFilename: string;
-}
-
-export async function generateModernIframeScriptCode(
-  options: ExtendedOptions,
-  { storiesFilename }: GenerateModernIframeScriptCodeOptions
-) {
+export async function generateModernIframeScriptCode(options: ExtendedOptions) {
   const { presets, configDir } = options;
 
   const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });
@@ -28,43 +21,26 @@ export async function generateModernIframeScriptCode(
    */
   // language=JavaScript
   const code = `
-    import global from 'global';
-
     import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
     import { ClientApi } from '@storybook/client-api';
-    import { addons } from '@storybook/addons';
-    import createPostMessageChannel from '@storybook/channel-postmessage';
-    import createWebSocketChannel from '@storybook/channel-websocket';
-
-    import { importFn } from '${storiesFilename}';
-
-    const { SERVER_CHANNEL_URL } = global;
+    import '${virtualAddonSetupFile}';
+    import { importFn } from '${virtualStoriesFile}';
 
     const getProjectAnnotations = async () =>
       composeConfigs(await Promise.all([${configEntries
         .map((configEntry) => `import('${configEntry}')`)
         .join(',\n')}]));
 
-    const channel = createPostMessageChannel({ page: 'preview' });
-    addons.setChannel(channel);
-
-    if (SERVER_CHANNEL_URL) {
-      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
-      addons.setServerChannel(serverChannel);
-      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
-    }
-
     const preview = new PreviewWeb();
 
     window.__STORYBOOK_PREVIEW__ = preview;
     window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
     window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
 
     preview.initialize({ importFn, getProjectAnnotations });
 
     if (import.meta.hot) {
-        import.meta.hot.accept('${storiesFilename}', (newModule) => {
+        import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
 
         // importFn has changed so we need to patch the new one in
         preview.onStoriesChanged({ importFn: newModule.importFn });

package/codegen-set-addon-channel.ts

@@ -0,0 +1,19 @@
+export function generateAddonSetupCode() {
+  return `
+    import global from 'global';
+    import createPostMessageChannel from '@storybook/channel-postmessage';
+    import createWebSocketChannel from '@storybook/channel-websocket';
+    import { addons } from '@storybook/addons';
+
+    const channel = createPostMessageChannel({ page: 'preview' });
+    addons.setChannel(channel);
+    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+
+    const { SERVER_CHANNEL_URL } = global;
+    if (SERVER_CHANNEL_URL) {
+      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
+      addons.setServerChannel(serverChannel);
+      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+    }
+  `.trim();
+}

package/dist/code-generator-plugin.js

@@ -27,10 +27,9 @@ const codegen_iframe_script_1 = require("./codegen-iframe-script");
 const codegen_modern_iframe_script_1 = require("./codegen-modern-iframe-script");
 const codegen_importfn_script_1 = require("./codegen-importfn-script");
 const codegen_entries_1 = require("./codegen-entries");
+const codegen_set_addon_channel_1 = require("./codegen-set-addon-channel");
+const virtual_file_names_1 = require("./virtual-file-names");
 function codeGeneratorPlugin(options) {
-    const virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';
-    const virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';
-    const virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';
     const iframePath = path.resolve(__dirname, '..', 'input', 'iframe.html');
     let iframeId;
     // noinspection JSUnusedGlobalSymbols
@@ -42,11 +41,11 @@ function codeGeneratorPlugin(options) {
             // (this might be a little too aggressive?)
             server.watcher.on('change', (_e) => {
                 const { moduleGraph } = server;
-                const appModule = moduleGraph.getModuleById(virtualFileId);
+                const appModule = moduleGraph.getModuleById(virtual_file_names_1.virtualFileId);
                 if (appModule) {
                     server.moduleGraph.invalidateModule(appModule);
                 }
-                const storiesModule = moduleGraph.getModuleById(virtualStoriesFile);
+                const storiesModule = moduleGraph.getModuleById(virtual_file_names_1.virtualStoriesFile);
                 if (storiesModule) {
                     server.moduleGraph.invalidateModule(storiesModule);
                 }
@@ -70,23 +69,26 @@ function codeGeneratorPlugin(options) {
             iframeId = `${config.root}/iframe.html`;
         },
         resolveId(source) {
-            if (source === virtualFileId) {
-                return virtualFileId;
+            if (source === virtual_file_names_1.virtualFileId) {
+                return virtual_file_names_1.virtualFileId;
             }
             else if (source === iframePath) {
                 return iframeId;
             }
-            else if (source === virtualStoriesFile) {
-                return virtualStoriesFile;
+            else if (source === virtual_file_names_1.virtualStoriesFile) {
+                return virtual_file_names_1.virtualStoriesFile;
             }
-            else if (source === virtualPreviewFile) {
-                return virtualPreviewFile;
+            else if (source === virtual_file_names_1.virtualPreviewFile) {
+                return virtual_file_names_1.virtualPreviewFile;
+            }
+            else if (source === virtual_file_names_1.virtualAddonSetupFile) {
+                return virtual_file_names_1.virtualAddonSetupFile;
             }
         },
         async load(id) {
             var _a;
             const storyStoreV7 = (_a = options.features) === null || _a === void 0 ? void 0 : _a.storyStoreV7;
-            if (id === virtualStoriesFile) {
+            if (id === virtual_file_names_1.virtualStoriesFile) {
                 if (storyStoreV7) {
                     return (0, codegen_importfn_script_1.generateImportFnScriptCode)(options);
                 }
@@ -94,18 +96,18 @@ function codeGeneratorPlugin(options) {
                     return (0, codegen_entries_1.generateVirtualStoryEntryCode)(options);
                 }
             }
-            if (id === virtualPreviewFile && !storyStoreV7) {
+            if (id === virtual_file_names_1.virtualAddonSetupFile) {
+                return (0, codegen_set_addon_channel_1.generateAddonSetupCode)();
+            }
+            if (id === virtual_file_names_1.virtualPreviewFile && !storyStoreV7) {
                 return (0, codegen_entries_1.generatePreviewEntryCode)(options);
             }
-            if (id === virtualFileId) {
+            if (id === virtual_file_names_1.virtualFileId) {
                 if (storyStoreV7) {
-                    return (0, codegen_modern_iframe_script_1.generateModernIframeScriptCode)(options, { storiesFilename: virtualStoriesFile });
+                    return (0, codegen_modern_iframe_script_1.generateModernIframeScriptCode)(options);
                 }
                 else {
-                    return (0, codegen_iframe_script_1.generateIframeScriptCode)(options, {
-                        storiesFilename: virtualStoriesFile,
-                        previewFilename: virtualPreviewFile,
-                    });
+                    return (0, codegen_iframe_script_1.generateIframeScriptCode)(options);
                 }
             }
             if (id === iframeId) {

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

@@ -1 +1 @@
-{"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';\n\nimport type { Plugin } from 'vite';\nimport type { ExtendedOptions } from './types';\n\nexport function codeGeneratorPlugin(options: ExtendedOptions): Plugin {\n  const virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';\n  const virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';\n  const virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';\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      }\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 === virtualPreviewFile && !storyStoreV7) {\n        return generatePreviewEntryCode(options);\n      }\n\n      if (id === virtualFileId) {\n        if (storyStoreV7) {\n          return generateModernIframeScriptCode(options, { storiesFilename: virtualStoriesFile });\n        } else {\n          return generateIframeScriptCode(options, {\n            storiesFilename: virtualStoriesFile,\n            previewFilename: virtualPreviewFile,\n          });\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\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"]}

package/dist/codegen-iframe-script.d.ts

@@ -1,7 +1,2 @@
 import type { ExtendedOptions } from './types';
-interface GenerateIframeScriptCodeOptions {
-    storiesFilename: string;
-    previewFilename: string;
-}
-export declare function generateIframeScriptCode(options: ExtendedOptions, { storiesFilename, previewFilename }: GenerateIframeScriptCodeOptions): Promise<string>;
-export {};
+export declare function generateIframeScriptCode(options: ExtendedOptions): Promise<string>;

package/dist/codegen-iframe-script.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateIframeScriptCode = void 0;
 const vite_1 = require("vite");
-async function generateIframeScriptCode(options, { storiesFilename, previewFilename }) {
+const virtual_file_names_1 = require("./virtual-file-names");
+async function generateIframeScriptCode(options) {
     const { presets } = options;
     const presetEntries = await presets.apply('config', [], options);
     const configEntries = [...presetEntries].filter(Boolean);
@@ -12,6 +13,7 @@ async function generateIframeScriptCode(options, { storiesFilename, previewFilen
     /** @todo Inline variable and remove `noinspection` */
     // language=JavaScript
     const code = `
+    import '${virtual_file_names_1.virtualAddonSetupFile}';
     import {
       addDecorator,
       addParameters,
@@ -21,9 +23,9 @@ async function generateIframeScriptCode(options, { storiesFilename, previewFilen
     } from '@storybook/client-api';
     import { logger } from '@storybook/client-logger';
     ${absoluteFilesToImport(configEntries, 'config')}
-    import * as preview from '${previewFilename}';
+    import * as preview from '${virtual_file_names_1.virtualPreviewFile}';
     // This import should occur after the config imports above
-    import { configStories } from '${storiesFilename}';
+    import { configStories } from '${virtual_file_names_1.virtualStoriesFile}';
 
     const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
 

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;AAS9B,KAAK,UAAU,wBAAwB,CAC5C,OAAwB,EACxB,EAAE,eAAe,EAAE,eAAe,EAAmC;IAErE,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;;;;;;;;;MAST,qBAAqB,CAAC,aAAa,EAAE,QAAQ,CAAC;gCACpB,eAAe;;qCAEV,eAAe;;uBAE7B,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;AAnFD,4DAmFC","sourcesContent":["import { normalizePath } from 'vite';\n\nimport type { ExtendedOptions } from './types';\n\ninterface GenerateIframeScriptCodeOptions {\n  storiesFilename: string;\n  previewFilename: string;\n}\n\nexport async function generateIframeScriptCode(\n  options: ExtendedOptions,\n  { storiesFilename, previewFilename }: GenerateIframeScriptCodeOptions\n) {\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 {\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 '${previewFilename}';\n    // This import should occur after the config imports above\n    import { configStories } from '${storiesFilename}';\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,+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"]}

package/dist/codegen-modern-iframe-script.d.ts

@@ -1,6 +1,2 @@
 import type { ExtendedOptions } from './types';
-interface GenerateModernIframeScriptCodeOptions {
-    storiesFilename: string;
-}
-export declare function generateModernIframeScriptCode(options: ExtendedOptions, { storiesFilename }: GenerateModernIframeScriptCodeOptions): Promise<string>;
-export {};
+export declare function generateModernIframeScriptCode(options: ExtendedOptions): Promise<string>;

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

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateModernIframeScriptCode = void 0;
 const core_common_1 = require("@storybook/core-common");
 const vite_1 = require("vite");
-async function generateModernIframeScriptCode(options, { storiesFilename }) {
+const virtual_file_names_1 = require("./virtual-file-names");
+async function generateModernIframeScriptCode(options) {
     const { presets, configDir } = options;
     const previewOrConfigFile = (0, core_common_1.loadPreviewOrConfigFile)({ configDir });
     const presetEntries = await presets.apply('config', [], options);
@@ -19,43 +20,26 @@ async function generateModernIframeScriptCode(options, { storiesFilename }) {
      */
     // language=JavaScript
     const code = `
-    import global from 'global';
-
     import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
     import { ClientApi } from '@storybook/client-api';
-    import { addons } from '@storybook/addons';
-    import createPostMessageChannel from '@storybook/channel-postmessage';
-    import createWebSocketChannel from '@storybook/channel-websocket';
-
-    import { importFn } from '${storiesFilename}';
-
-    const { SERVER_CHANNEL_URL } = global;
+    import '${virtual_file_names_1.virtualAddonSetupFile}';
+    import { importFn } from '${virtual_file_names_1.virtualStoriesFile}';
 
     const getProjectAnnotations = async () =>
       composeConfigs(await Promise.all([${configEntries
         .map((configEntry) => `import('${configEntry}')`)
         .join(',\n')}]));
 
-    const channel = createPostMessageChannel({ page: 'preview' });
-    addons.setChannel(channel);
-
-    if (SERVER_CHANNEL_URL) {
-      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
-      addons.setServerChannel(serverChannel);
-      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
-    }
-
     const preview = new PreviewWeb();
 
     window.__STORYBOOK_PREVIEW__ = preview;
     window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
     window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
 
     preview.initialize({ importFn, getProjectAnnotations });
 
     if (import.meta.hot) {
-        import.meta.hot.accept('${storiesFilename}', (newModule) => {
+        import.meta.hot.accept('${virtual_file_names_1.virtualStoriesFile}', (newModule) => {
 
         // importFn has changed so we need to patch the new one in
         preview.onStoriesChanged({ importFn: newModule.importFn });

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

@@ -1 +1 @@
-{"version":3,"file":"codegen-modern-iframe-script.js","sourceRoot":"","sources":["../codegen-modern-iframe-script.ts"],"names":[],"mappings":";;;AAAA,wDAAiE;AACjE,+BAAqC;AAQ9B,KAAK,UAAU,8BAA8B,CAClD,OAAwB,EACxB,EAAE,eAAe,EAAyC;IAE1D,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,mBAAmB,GAAG,IAAA,qCAAuB,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,GAAG,aAAa,EAAE,mBAAmB,CAAC;SAC1D,MAAM,CAAC,OAAO,CAAC;SACf,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,QAAQ,IAAA,oBAAa,EAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAE9D,0CAA0C;IAC1C;;;;;OAKG;IACH,sBAAsB;IACtB,MAAM,IAAI,GAAG;;;;;;;;;gCASiB,eAAe;;;;;0CAKL,aAAa;SAC9C,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,WAAW,IAAI,CAAC;SAChD,IAAI,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;kCAqBc,eAAe;;;;;;+BAMlB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;;;;;;;KAOvD,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,IAAI,CAAC;AACd,CAAC;AAxED,wEAwEC","sourcesContent":["import { loadPreviewOrConfigFile } from '@storybook/core-common';\nimport { normalizePath } from 'vite';\n\nimport type { ExtendedOptions } from './types';\n\ninterface GenerateModernIframeScriptCodeOptions {\n  storiesFilename: string;\n}\n\nexport async function generateModernIframeScriptCode(\n  options: ExtendedOptions,\n  { storiesFilename }: GenerateModernIframeScriptCodeOptions\n) {\n  const { presets, configDir } = options;\n\n  const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });\n  const presetEntries = await presets.apply('config', [], options);\n  const configEntries = [...presetEntries, previewOrConfigFile]\n    .filter(Boolean)\n    .map((configEntry) => `/@fs/${normalizePath(configEntry)}`);\n\n  // noinspection UnnecessaryLocalVariableJS\n  /**\n   * This code is largely taken from https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars\n   * Some small tweaks were made to `getProjectAnnotations` (since `import()` needs to be resolved asynchronously)\n   * and the HMR implementation has been tweaked to work with Vite.\n   * @todo Inline variable and remove `noinspection`\n   */\n  // language=JavaScript\n  const code = `\n    import global from 'global';\n\n    import { composeConfigs, PreviewWeb } from '@storybook/preview-web';\n    import { ClientApi } from '@storybook/client-api';\n    import { addons } from '@storybook/addons';\n    import createPostMessageChannel from '@storybook/channel-postmessage';\n    import createWebSocketChannel from '@storybook/channel-websocket';\n\n    import { importFn } from '${storiesFilename}';\n\n    const { SERVER_CHANNEL_URL } = global;\n\n    const getProjectAnnotations = async () =>\n      composeConfigs(await Promise.all([${configEntries\n        .map((configEntry) => `import('${configEntry}')`)\n        .join(',\\n')}]));\n\n    const channel = createPostMessageChannel({ page: 'preview' });\n    addons.setChannel(channel);\n\n    if (SERVER_CHANNEL_URL) {\n      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });\n      addons.setServerChannel(serverChannel);\n      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;\n    }\n\n    const preview = new PreviewWeb();\n\n    window.__STORYBOOK_PREVIEW__ = preview;\n    window.__STORYBOOK_STORY_STORE__ = preview.storyStore;\n    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;\n    window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });\n\n    preview.initialize({ importFn, getProjectAnnotations });\n\n    if (import.meta.hot) {\n        import.meta.hot.accept('${storiesFilename}', (newModule) => {\n\n        // importFn has changed so we need to patch the new one in\n        preview.onStoriesChanged({ importFn: newModule.importFn });\n        });\n\n      import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => {\n        const newGetProjectAnnotations =  () => composeConfigs(newConfigEntries);\n\n        // getProjectAnnotations has changed so we need to patch the new one in\n        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });\n      });\n    }\n    `.trim();\n  return code;\n}\n"]}
+{"version":3,"file":"codegen-modern-iframe-script.js","sourceRoot":"","sources":["../codegen-modern-iframe-script.ts"],"names":[],"mappings":";;;AAAA,wDAAiE;AACjE,+BAAqC;AACrC,6DAAiF;AAG1E,KAAK,UAAU,8BAA8B,CAAC,OAAwB;IAC3E,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAEvC,MAAM,mBAAmB,GAAG,IAAA,qCAAuB,EAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,CAAC,GAAG,aAAa,EAAE,mBAAmB,CAAC;SAC1D,MAAM,CAAC,OAAO,CAAC;SACf,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,QAAQ,IAAA,oBAAa,EAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAE9D,0CAA0C;IAC1C;;;;;OAKG;IACH,sBAAsB;IACtB,MAAM,IAAI,GAAG;;;cAGD,0CAAqB;gCACH,uCAAkB;;;0CAGR,aAAa;SAC9C,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,WAAW,IAAI,CAAC;SAChD,IAAI,CAAC,KAAK,CAAC;;;;;;;;;;;kCAWc,uCAAkB;;;;;;+BAMrB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;;;;;;;KAOvD,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,IAAI,CAAC;AACd,CAAC;AApDD,wEAoDC","sourcesContent":["import { loadPreviewOrConfigFile } from '@storybook/core-common';\nimport { normalizePath } from 'vite';\nimport { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';\nimport type { ExtendedOptions } from './types';\n\nexport async function generateModernIframeScriptCode(options: ExtendedOptions) {\n  const { presets, configDir } = options;\n\n  const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });\n  const presetEntries = await presets.apply('config', [], options);\n  const configEntries = [...presetEntries, previewOrConfigFile]\n    .filter(Boolean)\n    .map((configEntry) => `/@fs/${normalizePath(configEntry)}`);\n\n  // noinspection UnnecessaryLocalVariableJS\n  /**\n   * This code is largely taken from https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars\n   * Some small tweaks were made to `getProjectAnnotations` (since `import()` needs to be resolved asynchronously)\n   * and the HMR implementation has been tweaked to work with Vite.\n   * @todo Inline variable and remove `noinspection`\n   */\n  // language=JavaScript\n  const code = `\n    import { composeConfigs, PreviewWeb } from '@storybook/preview-web';\n    import { ClientApi } from '@storybook/client-api';\n    import '${virtualAddonSetupFile}';\n    import { importFn } from '${virtualStoriesFile}';\n\n    const getProjectAnnotations = async () =>\n      composeConfigs(await Promise.all([${configEntries\n        .map((configEntry) => `import('${configEntry}')`)\n        .join(',\\n')}]));\n\n    const preview = new PreviewWeb();\n\n    window.__STORYBOOK_PREVIEW__ = preview;\n    window.__STORYBOOK_STORY_STORE__ = preview.storyStore;\n    window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });\n\n    preview.initialize({ importFn, getProjectAnnotations });\n\n    if (import.meta.hot) {\n        import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {\n\n        // importFn has changed so we need to patch the new one in\n        preview.onStoriesChanged({ importFn: newModule.importFn });\n        });\n\n      import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => {\n        const newGetProjectAnnotations =  () => composeConfigs(newConfigEntries);\n\n        // getProjectAnnotations has changed so we need to patch the new one in\n        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });\n      });\n    }\n    `.trim();\n  return code;\n}\n"]}

package/dist/codegen-set-addon-channel.d.ts

@@ -0,0 +1 @@
+export declare function generateAddonSetupCode(): string;

package/dist/codegen-set-addon-channel.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAddonSetupCode = void 0;
+function generateAddonSetupCode() {
+    return `
+    import global from 'global';
+    import createPostMessageChannel from '@storybook/channel-postmessage';
+    import createWebSocketChannel from '@storybook/channel-websocket';
+    import { addons } from '@storybook/addons';
+
+    const channel = createPostMessageChannel({ page: 'preview' });
+    addons.setChannel(channel);
+    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+
+    const { SERVER_CHANNEL_URL } = global;
+    if (SERVER_CHANNEL_URL) {
+      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
+      addons.setServerChannel(serverChannel);
+      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+    }
+  `.trim();
+}
+exports.generateAddonSetupCode = generateAddonSetupCode;
+//# sourceMappingURL=codegen-set-addon-channel.js.map

package/dist/codegen-set-addon-channel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codegen-set-addon-channel.js","sourceRoot":"","sources":["../codegen-set-addon-channel.ts"],"names":[],"mappings":";;;AAAA,SAAgB,sBAAsB;IACpC,OAAO;;;;;;;;;;;;;;;;GAgBN,CAAC,IAAI,EAAE,CAAC;AACX,CAAC;AAlBD,wDAkBC","sourcesContent":["export function generateAddonSetupCode() {\n  return `\n    import global from 'global';\n    import createPostMessageChannel from '@storybook/channel-postmessage';\n    import createWebSocketChannel from '@storybook/channel-websocket';\n    import { addons } from '@storybook/addons';\n\n    const channel = createPostMessageChannel({ page: 'preview' });\n    addons.setChannel(channel);\n    window.__STORYBOOK_ADDONS_CHANNEL__ = channel;\n\n    const { SERVER_CHANNEL_URL } = global;\n    if (SERVER_CHANNEL_URL) {\n      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });\n      addons.setServerChannel(serverChannel);\n      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;\n    }\n  `.trim();\n}\n"]}

package/dist/virtual-file-names.d.ts

@@ -0,0 +1,4 @@
+export declare const virtualFileId = "/virtual:/@storybook/builder-vite/vite-app.js";
+export declare const virtualStoriesFile = "/virtual:/@storybook/builder-vite/storybook-stories.js";
+export declare const virtualPreviewFile = "/virtual:/@storybook/builder-vite/preview-entry.js";
+export declare const virtualAddonSetupFile = "/virtual:/@storybook/builder-vite/setup-addons.js";

package/dist/virtual-file-names.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.virtualAddonSetupFile = exports.virtualPreviewFile = exports.virtualStoriesFile = exports.virtualFileId = void 0;
+exports.virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';
+exports.virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';
+exports.virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';
+exports.virtualAddonSetupFile = '/virtual:/@storybook/builder-vite/setup-addons.js';
+//# sourceMappingURL=virtual-file-names.js.map

package/dist/virtual-file-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-file-names.js","sourceRoot":"","sources":["../virtual-file-names.ts"],"names":[],"mappings":";;;AAAa,QAAA,aAAa,GAAG,+CAA+C,CAAC;AAChE,QAAA,kBAAkB,GAAG,wDAAwD,CAAC;AAC9E,QAAA,kBAAkB,GAAG,oDAAoD,CAAC;AAC1E,QAAA,qBAAqB,GAAG,mDAAmD,CAAC","sourcesContent":["export const virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';\nexport const virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';\nexport const virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';\nexport const virtualAddonSetupFile = '/virtual:/@storybook/builder-vite/setup-addons.js';\n"]}

package/input/iframe.html

@@ -31,7 +31,6 @@
     <!-- [BODY HTML SNIPPET HERE] -->
     <div id="root"></div>
     <div id="docs-root"></div>
-
     <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "An experimental plugin to run and build Storybooks with Vite",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/virtual-file-names.ts

@@ -0,0 +1,4 @@
+export const virtualFileId = '/virtual:/@storybook/builder-vite/vite-app.js';
+export const virtualStoriesFile = '/virtual:/@storybook/builder-vite/storybook-stories.js';
+export const virtualPreviewFile = '/virtual:/@storybook/builder-vite/preview-entry.js';
+export const virtualAddonSetupFile = '/virtual:/@storybook/builder-vite/setup-addons.js';