@storybook/builder-vite 10.4.0-alpha.9 → 10.4.0-beta.0

package/dist/_node-chunks/{chunk-24YCYCZ7.js → chunk-7UION4BZ.js}

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_4bsf84d8msn from 'node:url';
-import CJS_COMPAT_NODE_PATH_4bsf84d8msn from 'node:path';
-import CJS_COMPAT_NODE_MODULE_4bsf84d8msn from "node:module";
+import CJS_COMPAT_NODE_URL_k4rlwj4u8j7 from 'node:url';
+import CJS_COMPAT_NODE_PATH_k4rlwj4u8j7 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_4bsf84d8msn.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_4bsf84d8msn.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_4bsf84d8msn.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k4rlwj4u8j7.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k4rlwj4u8j7.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/index.d.ts

@@ -24,9 +24,14 @@ 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']>;
+/**
+ * Returns a {@link ChangeDetectionAdapter} bound to the Vite dev server created by `start()`.
+ *
+ * Throws if called before `start()` has resolved (i.e. before the Vite dev server exists).
+ */
+declare const changeDetectionAdapter: NonNullable<Builder<Options>['changeDetectionAdapter']>;
 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, onModuleGraphChange, start, withoutVitePlugins };
+export { type BuilderOptions, type StorybookConfigVite, type ViteBuilder, type ViteFinal, bail, build, changeDetectionAdapter, corePresets, hasVitePlugins, start, withoutVitePlugins };

package/dist/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_4bsf84d8msn from 'node:url';
-import CJS_COMPAT_NODE_PATH_4bsf84d8msn from 'node:path';
-import CJS_COMPAT_NODE_MODULE_4bsf84d8msn from "node:module";
+import CJS_COMPAT_NODE_URL_k4rlwj4u8j7 from 'node:url';
+import CJS_COMPAT_NODE_PATH_k4rlwj4u8j7 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_4bsf84d8msn.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_4bsf84d8msn.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_4bsf84d8msn.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k4rlwj4u8j7.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k4rlwj4u8j7.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7.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-24YCYCZ7.js";
+} from "./_node-chunks/chunk-7UION4BZ.js";
 
 // ../../../node_modules/picocolors/picocolors.js
 var require_picocolors = __commonJS({
@@ -93,7 +93,6 @@ 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
@@ -1520,6 +1519,41 @@ async function build(options) {
   )?.storybookGetStats();
 }
 
+// src/change-detection-adapter/index.ts
+import { logger as logger3 } from "storybook/internal/node-logger";
+function createViteChangeDetectionAdapter(server2) {
+  return {
+    /**
+     * Snapshots the Vite resolver configuration (aliases, conditions, root) once at
+     * adapter creation time. If `vite.config.ts` is modified while Storybook is
+     * running, this snapshot becomes stale and Storybook must be restarted to pick
+     * up the updated aliases.
+     *
+     * A future improvement would subscribe to Vite's HMR config-reload event and
+     * invalidate the resolver cache on config change.
+     */
+    async getResolveConfig() {
+      logger3.debug(
+        "Change detection: snapshotting Vite resolve config (restart required if vite.config.ts changes)"
+      );
+      let resolveOpts = server2.config.resolve, alias = resolveOpts?.alias, conditions = resolveOpts?.conditions;
+      return {
+        projectRoot: server2.config.root,
+        alias,
+        conditions
+      };
+    },
+    onFileChange(handler) {
+      let FORWARDED_EVENTS = /* @__PURE__ */ new Set(["add", "change", "unlink"]), isForwardedEvent = (name) => FORWARDED_EVENTS.has(name), onAll = (eventName, path) => {
+        isForwardedEvent(eventName) && handler({ kind: eventName, path: normalize(path) });
+      };
+      return server2.watcher.on("all", onAll), () => {
+        server2.watcher.off("all", onAll);
+      };
+    }
+  };
+}
+
 // src/vite-server.ts
 async function createViteServer(options, devServer) {
   let { presets } = options, commonCfg = await commonConfig(options, "development"), { allowedHosts } = await presets.apply("core", {}), config = {
@@ -1542,43 +1576,6 @@ 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) => {
@@ -1591,77 +1588,22 @@ function iframeHandler(options, server2) {
     res.setHeader("Content-Type", "text/html"), res.statusCode = 200, res.write(transformed), res.end();
   };
 }
-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);
-  });
-}
+var server;
 async function bail() {
-  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();
-}
-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))
-    });
-  }));
+  return server?.close();
 }
-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);
+var changeDetectionAdapter = () => {
+  if (!server)
+    throw new Error(
+      "builder-vite: changeDetectionAdapter() called before start(); the Vite dev server is not ready yet."
+    );
+  return createViteChangeDetectionAdapter(server);
 }, start = async ({
   startTime,
   options,
   router,
   server: devServer
-}) => (lastBuilderOptions = options, server = await createViteServer(options, devServer), router.get("/iframe.html", iframeHandler(options, server)), router.use(server.middlewares), startModuleGraphTracking(), {
+}) => (server = await createViteServer(options, devServer), router.get("/iframe.html", iframeHandler(options, server)), router.use(server.middlewares), {
   bail,
   stats: {
     toJson: () => {
@@ -1673,9 +1615,9 @@ var onModuleGraphChange = (cb) => (listeners.add(cb), startModuleGraphTracking()
 export {
   bail,
   build2 as build,
+  changeDetectionAdapter,
   corePresets,
   hasVitePlugins,
-  onModuleGraphChange,
   start,
   withoutVitePlugins
 };

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_4bsf84d8msn from 'node:url';
-import CJS_COMPAT_NODE_PATH_4bsf84d8msn from 'node:path';
-import CJS_COMPAT_NODE_MODULE_4bsf84d8msn from "node:module";
+import CJS_COMPAT_NODE_URL_k4rlwj4u8j7 from 'node:url';
+import CJS_COMPAT_NODE_PATH_k4rlwj4u8j7 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_4bsf84d8msn.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_4bsf84d8msn.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_4bsf84d8msn.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k4rlwj4u8j7.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k4rlwj4u8j7.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7.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_4bsf84d8msn.createRequire(import.meta.url);
 import {
   optimizeViteDeps,
   viteCorePlugins
-} from "./_node-chunks/chunk-24YCYCZ7.js";
+} from "./_node-chunks/chunk-7UION4BZ.js";
 export {
   optimizeViteDeps,
   viteCorePlugins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "10.4.0-alpha.9",
+  "version": "10.4.0-beta.0",
   "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.9",
+    "@storybook/csf-plugin": "10.4.0-beta.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -62,7 +62,7 @@
     "vite": "^7.0.4"
   },
   "peerDependencies": {
-    "storybook": "^10.4.0-alpha.9",
+    "storybook": "^10.4.0-beta.0",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "publishConfig": {