@storybook/builder-vite 10.4.0-alpha.1 → 10.4.0-alpha.11

package/dist/_node-chunks/{chunk-DB754EL6.js → chunk-3XWGCUQ5.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_xphn8pkhax from 'node:url';
-import CJS_COMPAT_NODE_PATH_xphn8pkhax from 'node:path';
-import CJS_COMPAT_NODE_MODULE_xphn8pkhax from "node:module";
+import CJS_COMPAT_NODE_URL_944xwbp7518 from 'node:url';
+import CJS_COMPAT_NODE_PATH_944xwbp7518 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_944xwbp7518 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_xphn8pkhax.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_xphn8pkhax.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_xphn8pkhax.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_944xwbp7518.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_944xwbp7518.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_944xwbp7518.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -425,7 +425,10 @@ function generateProjectAnnotationsCodeFromPreviews(options) {
   `.trim();
 }
 function hash(value) {
-  return value.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  let acc = 5381;
+  for (let i = 0; i < value.length; i++)
+    acc = (acc << 5) + acc + value.charCodeAt(i) >>> 0;
+  return acc;
 }
 
 // src/virtual-file-names.ts
@@ -519,9 +522,12 @@ var ENTRY_PATH = "/vite-inject-mocker-entry.js", viteInjectMockerRuntime = (opti
         });
       });
     },
-    resolveId(source) {
-      if (source === ENTRY_PATH)
-        return mockerRuntimePath;
+    resolveId: {
+      filter: { id: /\/vite-inject-mocker-entry\.js/ },
+      handler(source) {
+        if (source === ENTRY_PATH)
+          return mockerRuntimePath;
+      }
     },
     transformIndexHtml(html) {
       let headTag = html.match(/<head[^>]*>/);
@@ -624,14 +630,17 @@ function viteMockPlugin(options) {
     },
     {
       name: "storybook:mock-loader-preview",
-      transform(code, id) {
-        if (id === normalizedPreviewConfigPath)
-          try {
-            return rewriteSbMockImportCalls(code);
-          } catch (e) {
-            return logger.debug(`Could not transform sb.mock(import(...)) calls in ${id}: ${e}`), null;
-          }
-        return null;
+      transform: {
+        filter: { id: normalizedPreviewConfigPath },
+        handler(code, id) {
+          if (id === normalizedPreviewConfigPath)
+            try {
+              return rewriteSbMockImportCalls(code);
+            } catch (e) {
+              return logger.debug(`Could not transform sb.mock(import(...)) calls in ${id}: ${e}`), null;
+            }
+          return null;
+        }
       }
     }
   ];

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Options, Builder } from 'storybook/internal/types';
-import { InlineConfig, UserConfig, PluginOption } from 'vite';
+import { Builder, Options } from 'storybook/internal/types';
+import { UserConfig, InlineConfig, PluginOption } from 'vite';
 
 type ViteStats = {
     toJson: () => any;
@@ -24,8 +24,9 @@ declare const withoutVitePlugins: <TPlugin>(plugins: TPlugin[] | undefined, name
 declare function hasVitePlugins(plugins: PluginOption[], names: string[]): Promise<boolean>;
 
 declare function bail(): Promise<void>;
+declare const onModuleGraphChange: NonNullable<Builder<Options>['onModuleGraphChange']>;
 declare const start: ViteBuilder['start'];
 declare const build: ViteBuilder['build'];
 declare const corePresets: string[];
 
-export { type BuilderOptions, type StorybookConfigVite, type ViteBuilder, type ViteFinal, bail, build, corePresets, hasVitePlugins, start, withoutVitePlugins };
+export { type BuilderOptions, type StorybookConfigVite, type ViteBuilder, type ViteFinal, bail, build, corePresets, hasVitePlugins, onModuleGraphChange, start, withoutVitePlugins };

package/dist/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_xphn8pkhax from 'node:url';
-import CJS_COMPAT_NODE_PATH_xphn8pkhax from 'node:path';
-import CJS_COMPAT_NODE_MODULE_xphn8pkhax from "node:module";
+import CJS_COMPAT_NODE_URL_944xwbp7518 from 'node:url';
+import CJS_COMPAT_NODE_PATH_944xwbp7518 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_944xwbp7518 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_xphn8pkhax.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_xphn8pkhax.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_xphn8pkhax.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_944xwbp7518.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_944xwbp7518.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_944xwbp7518.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -24,7 +24,7 @@ import {
   normalize,
   relative,
   viteCorePlugins
-} from "./_node-chunks/chunk-DB754EL6.js";
+} from "./_node-chunks/chunk-3XWGCUQ5.js";
 
 // ../../../node_modules/picocolors/picocolors.js
 var require_picocolors = __commonJS({
@@ -93,6 +93,7 @@ var require_picocolors = __commonJS({
 // src/index.ts
 import { readFile } from "node:fs/promises";
 import { fileURLToPath as fileURLToPath3 } from "node:url";
+import { logger as logger3 } from "storybook/internal/node-logger";
 import { NoStatsForViteDevError } from "storybook/internal/server-errors";
 
 // src/build.ts
@@ -1151,40 +1152,46 @@ var wordRegex = /\w/, Mappings = class {
 
 // src/plugins/inject-export-order-plugin.ts
 async function injectExportOrderPlugin() {
-  let { createFilter } = await import("vite"), filter = createFilter([/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]);
+  let { createFilter } = await import("vite"), include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/], filter = createFilter(include);
   return {
     name: "storybook:inject-export-order-plugin",
     // This should only run after the typescript has been transpiled
     enforce: "post",
-    async transform(code, id) {
-      if (!filter(id))
-        return;
-      let [, exports] = await parse(code), exportNames = exports.map((e) => code.substring(e.s, e.e));
-      if (exportNames.includes("__namedExportsOrder"))
-        return;
-      let s = new MagicString(code), orderedExports = exportNames.filter((e) => e !== "default");
-      return s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`), {
-        code: s.toString(),
-        map: s.generateMap({ hires: !0, source: id })
-      };
+    transform: {
+      filter: { id: include },
+      async handler(code, id) {
+        if (!filter(id))
+          return;
+        let [, exports] = await parse(code), exportNames = exports.map((e) => code.substring(e.s, e.e));
+        if (exportNames.includes("__namedExportsOrder"))
+          return;
+        let s = new MagicString(code), orderedExports = exportNames.filter((e) => e !== "default");
+        return s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`), {
+          code: s.toString(),
+          map: s.generateMap({ hires: !0, source: id })
+        };
+      }
     }
   };
 }
 
 // src/plugins/strip-story-hmr-boundaries.ts
 async function stripStoryHMRBoundary() {
-  let { createFilter } = await import("vite"), filter = createFilter(/\.stories\.(tsx?|jsx?|svelte|vue)$/);
+  let { createFilter } = await import("vite"), include = /\.stories\.(tsx?|jsx?|svelte|vue)$/, filter = createFilter(include);
   return {
     name: "storybook:strip-hmr-boundary-plugin",
     enforce: "post",
-    async transform(src, id) {
-      if (!filter(id))
-        return;
-      let s = new MagicString(src);
-      return s.replace(/import\.meta\.hot\.accept\w*/, "(function hmrBoundaryNoop(){})"), {
-        code: s.toString(),
-        map: s.generateMap({ hires: !0, source: id })
-      };
+    transform: {
+      filter: { id: include },
+      async handler(src, id) {
+        if (!filter(id))
+          return;
+        let s = new MagicString(src);
+        return s.replace(/import\.meta\.hot\.accept\w*/, "(function hmrBoundaryNoop(){})"), {
+          code: s.toString(),
+          map: s.generateMap({ hires: !0, source: id })
+        };
+      }
     }
   };
 }
@@ -1356,7 +1363,7 @@ var escapeKeys = (key) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), defau
 async function storybookExternalGlobalsPlugin(options) {
   let build3 = await options.presets.apply("build"), externals = globalsNameReferenceMap;
   build3?.test?.disableBlocks && (externals["@storybook/addon-docs/blocks"] = "__STORYBOOK_BLOCKS_EMPTY_MODULE__"), await init;
-  let { mergeAlias } = await import("vite");
+  let { mergeAlias } = await import("vite"), globalsList = Object.keys(externals), globalsCodeFilter = new RegExp(globalsList.map(escapeKeys).join("|"));
   return {
     name: "storybook:external-globals-plugin",
     enforce: "post",
@@ -1381,21 +1388,23 @@ async function storybookExternalGlobalsPlugin(options) {
       };
     },
     // Replace imports with variables destructured from global scope
-    async transform(code, id) {
-      let globalsList = Object.keys(externals);
-      if (globalsList.every((glob) => !code.includes(glob)))
-        return;
-      let [imports] = parse(code), src = new MagicString(code);
-      return imports.forEach(({ n: path, ss: startPosition, se: endPosition }) => {
-        let packageName = path;
-        if (packageName && globalsList.includes(packageName)) {
-          let importStatement = src.slice(startPosition, endPosition), transformedImport = rewriteImport(importStatement, externals, packageName);
-          src.update(startPosition, endPosition, transformedImport);
-        }
-      }), {
-        code: src.toString(),
-        map: null
-      };
+    transform: {
+      filter: { code: globalsCodeFilter },
+      async handler(code, id) {
+        if (globalsList.every((glob) => !code.includes(glob)))
+          return;
+        let [imports] = parse(code), src = new MagicString(code);
+        return imports.forEach(({ n: path, ss: startPosition, se: endPosition }) => {
+          let packageName = path;
+          if (packageName && globalsList.includes(packageName)) {
+            let importStatement = src.slice(startPosition, endPosition), transformedImport = rewriteImport(importStatement, externals, packageName);
+            src.update(startPosition, endPosition, transformedImport);
+          }
+        }), {
+          code: src.toString(),
+          map: null
+        };
+      }
     }
   };
 }
@@ -1533,6 +1542,43 @@ async function createViteServer(options, devServer) {
   return finalConfig.customLogger ??= await createViteLogger(), createServer(finalConfig);
 }
 
+// src/utils/build-module-graph.ts
+function buildModuleGraph(fileToModulesMap) {
+  let moduleGraph = /* @__PURE__ */ new Map(), moduleNodeMap = /* @__PURE__ */ new WeakMap(), getModuleFileFromMap = (viteModuleNode) => {
+    for (let [filePath, viteModuleSet] of fileToModulesMap.entries())
+      if (viteModuleSet.has(viteModuleNode))
+        return filePath;
+  }, getOrCreateModuleNode = (viteModuleNode, fallbackFile) => {
+    let file = viteModuleNode.file ?? fallbackFile;
+    if (!file)
+      return;
+    let existingNode = moduleNodeMap.get(viteModuleNode);
+    if (existingNode)
+      return existingNode;
+    let moduleNode = {
+      file,
+      type: viteModuleNode.type,
+      importers: /* @__PURE__ */ new Set(),
+      importedModules: /* @__PURE__ */ new Set()
+    };
+    moduleNodeMap.set(viteModuleNode, moduleNode);
+    let moduleSet = moduleGraph.get(file) ?? /* @__PURE__ */ new Set();
+    return moduleSet.add(moduleNode), moduleGraph.set(file, moduleSet), moduleNode;
+  };
+  return fileToModulesMap.forEach((viteModuleSet, filePath) => {
+    viteModuleSet.forEach((viteModuleNode) => {
+      let moduleNode = getOrCreateModuleNode(viteModuleNode, filePath);
+      moduleNode && (viteModuleNode.importers.forEach((importer) => {
+        let importerNode = getOrCreateModuleNode(importer) ?? getOrCreateModuleNode(importer, getModuleFileFromMap(importer));
+        importerNode && moduleNode.importers.add(importerNode);
+      }), viteModuleNode.importedModules.forEach((importedModule) => {
+        let importedModuleNode = getOrCreateModuleNode(importedModule) ?? getOrCreateModuleNode(importedModule, getModuleFileFromMap(importedModule));
+        importedModuleNode && moduleNode.importedModules.add(importedModuleNode);
+      }));
+    });
+  }), moduleGraph;
+}
+
 // src/index.ts
 function iframeHandler(options, server2) {
   return async (req, res) => {
@@ -1545,16 +1591,77 @@ function iframeHandler(options, server2) {
     res.setHeader("Content-Type", "text/html"), res.statusCode = 200, res.write(transformed), res.end();
   };
 }
-var server;
+var server, lastBuilderOptions, listeners = /* @__PURE__ */ new Set(), debounce, watcherChangeHandler, waitForModuleGraph, moduleGraphTrackingStarted = !1;
+function clearModuleGraphPolling() {
+  waitForModuleGraph && (clearInterval(waitForModuleGraph), waitForModuleGraph = void 0);
+}
+function notifyListeners(moduleGraph) {
+  listeners.forEach((listener) => {
+    listener({ type: "moduleGraph", moduleGraph });
+  });
+}
+function notifyListenersOfStartupFailure(event) {
+  listeners.forEach((listener) => {
+    listener(event);
+  });
+}
 async function bail() {
-  return server?.close();
+  return watcherChangeHandler && (server?.watcher.off("all", watcherChangeHandler), watcherChangeHandler = void 0), clearModuleGraphPolling(), debounce && (clearTimeout(debounce), debounce = void 0), moduleGraphTrackingStarted = !1, lastBuilderOptions = void 0, listeners.clear(), server?.close();
 }
-var start = async ({
+function startModuleGraphTracking() {
+  moduleGraphTrackingStarted || listeners.size === 0 || !server || !lastBuilderOptions || (moduleGraphTrackingStarted = !0, watcherChangeHandler = () => {
+    clearTimeout(debounce), debounce = setTimeout(() => {
+      notifyListeners(buildModuleGraph(server.moduleGraph.fileToModulesMap));
+    }, 100);
+  }, startChangeDetection(lastBuilderOptions).catch((error) => {
+    clearModuleGraphPolling(), logger3.error("Failed to initialize Vite change detection"), logger3.error(error instanceof Error ? error : String(error)), notifyListenersOfStartupFailure({
+      type: "error",
+      error: error instanceof Error ? error : new Error(String(error))
+    });
+  }));
+}
+var onModuleGraphChange = (cb) => (listeners.add(cb), startModuleGraphTracking(), () => {
+  listeners.delete(cb);
+}), startChangeDetection = async (options) => {
+  let startTime = process.hrtime(), storyIndex = await (await options.presets.apply("storyIndexGenerator")).getIndex(), importPaths = new Set(Object.values(storyIndex.entries).map((entry) => entry.importPath));
+  await Promise.all(Array.from(importPaths, (importPath) => server.warmupRequest(importPath))), waitForModuleGraph = setInterval(() => {
+    (async () => {
+      try {
+        if (!watcherChangeHandler) {
+          clearModuleGraphPolling();
+          return;
+        }
+        if (process.hrtime(startTime)[0] > 30) {
+          clearModuleGraphPolling();
+          let error = new Error(
+            "Timed out while waiting for the Vite module graph to initialize"
+          );
+          logger3.error("Failed to complete Vite change detection startup"), logger3.error(error), notifyListenersOfStartupFailure({
+            type: "unavailable",
+            reason: error.message,
+            error
+          });
+          return;
+        }
+        if (server.moduleGraph.fileToModulesMap.size > 0) {
+          if (clearModuleGraphPolling(), await server.waitForRequestsIdle(), !watcherChangeHandler)
+            return;
+          server.watcher.on("all", watcherChangeHandler), watcherChangeHandler();
+        }
+      } catch (error) {
+        clearModuleGraphPolling(), logger3.error("Failed to complete Vite change detection startup"), logger3.error(error instanceof Error ? error : String(error)), notifyListenersOfStartupFailure({
+          type: "error",
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+      }
+    })();
+  }, 1e3);
+}, start = async ({
   startTime,
   options,
   router,
   server: devServer
-}) => (server = await createViteServer(options, devServer), router.get("/iframe.html", iframeHandler(options, server)), router.use(server.middlewares), {
+}) => (lastBuilderOptions = options, server = await createViteServer(options, devServer), router.get("/iframe.html", iframeHandler(options, server)), router.use(server.middlewares), startModuleGraphTracking(), {
   bail,
   stats: {
     toJson: () => {
@@ -1568,6 +1675,7 @@ export {
   build2 as build,
   corePresets,
   hasVitePlugins,
+  onModuleGraphChange,
   start,
   withoutVitePlugins
 };

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_xphn8pkhax from 'node:url';
-import CJS_COMPAT_NODE_PATH_xphn8pkhax from 'node:path';
-import CJS_COMPAT_NODE_MODULE_xphn8pkhax from "node:module";
+import CJS_COMPAT_NODE_URL_944xwbp7518 from 'node:url';
+import CJS_COMPAT_NODE_PATH_944xwbp7518 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_944xwbp7518 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_xphn8pkhax.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_xphn8pkhax.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_xphn8pkhax.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_944xwbp7518.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_944xwbp7518.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_944xwbp7518.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -12,7 +12,7 @@ var require = CJS_COMPAT_NODE_MODULE_xphn8pkhax.createRequire(import.meta.url);
 import {
   optimizeViteDeps,
   viteCorePlugins
-} from "./_node-chunks/chunk-DB754EL6.js";
+} from "./_node-chunks/chunk-3XWGCUQ5.js";
 export {
   optimizeViteDeps,
   viteCorePlugins

package/input/iframe.html

@@ -70,10 +70,10 @@
         if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
           const message = `Failed to load the Storybook preview file 'vite-app.js':
 
-It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
-Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.
+      It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
+      Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.
 
-See:`;
+      See:`;
           const docs = [
             'https://storybook.js.org/docs/api/cli-options#dev',
             'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
@@ -85,7 +85,7 @@ See:`;
             `<p style="color: red; max-width: 70ch">${message.replaceAll(
               '\n',
               '<br/>'
-            )}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}<ul></p>`;
+            )}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}</ul></p>`;
           return;
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "10.4.0-alpha.1",
+  "version": "10.4.0-alpha.11",
   "description": "A Storybook builder to dev and build with Vite",
   "keywords": [
     "storybook",
@@ -47,7 +47,7 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@storybook/csf-plugin": "10.4.0-alpha.1",
+    "@storybook/csf-plugin": "10.4.0-alpha.11",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -62,7 +62,7 @@
     "vite": "^7.0.4"
   },
   "peerDependencies": {
-    "storybook": "^10.4.0-alpha.1",
+    "storybook": "^10.4.0-alpha.11",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "publishConfig": {