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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,10 @@
1
- import CJS_COMPAT_NODE_URL_06axgbo8vy7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_06axgbo8vy7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_06axgbo8vy7 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_k4rlwj4u8j7 from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_k4rlwj4u8j7 from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7 from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_06axgbo8vy7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_06axgbo8vy7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_06axgbo8vy7.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_k4rlwj4u8j7.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_k4rlwj4u8j7.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
package/dist/index.d.ts CHANGED
@@ -24,9 +24,14 @@ declare const withoutVitePlugins: <TPlugin>(plugins: TPlugin[] | undefined, name
24
24
  declare function hasVitePlugins(plugins: PluginOption[], names: string[]): Promise<boolean>;
25
25
 
26
26
  declare function bail(): Promise<void>;
27
- declare const onModuleGraphChange: NonNullable<Builder<Options>['onModuleGraphChange']>;
27
+ /**
28
+ * Returns a {@link ChangeDetectionAdapter} bound to the Vite dev server created by `start()`.
29
+ *
30
+ * Throws if called before `start()` has resolved (i.e. before the Vite dev server exists).
31
+ */
32
+ declare const changeDetectionAdapter: NonNullable<Builder<Options>['changeDetectionAdapter']>;
28
33
  declare const start: ViteBuilder['start'];
29
34
  declare const build: ViteBuilder['build'];
30
35
  declare const corePresets: string[];
31
36
 
32
- export { type BuilderOptions, type StorybookConfigVite, type ViteBuilder, type ViteFinal, bail, build, corePresets, hasVitePlugins, onModuleGraphChange, start, withoutVitePlugins };
37
+ export { type BuilderOptions, type StorybookConfigVite, type ViteBuilder, type ViteFinal, bail, build, changeDetectionAdapter, corePresets, hasVitePlugins, start, withoutVitePlugins };
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import CJS_COMPAT_NODE_URL_06axgbo8vy7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_06axgbo8vy7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_06axgbo8vy7 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_k4rlwj4u8j7 from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_k4rlwj4u8j7 from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7 from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_06axgbo8vy7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_06axgbo8vy7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_06axgbo8vy7.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_k4rlwj4u8j7.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_k4rlwj4u8j7.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -24,7 +24,7 @@ import {
24
24
  normalize,
25
25
  relative,
26
26
  viteCorePlugins
27
- } from "./_node-chunks/chunk-MLH46CMH.js";
27
+ } from "./_node-chunks/chunk-7UION4BZ.js";
28
28
 
29
29
  // ../../../node_modules/picocolors/picocolors.js
30
30
  var require_picocolors = __commonJS({
@@ -93,11 +93,7 @@ var require_picocolors = __commonJS({
93
93
  // src/index.ts
94
94
  import { readFile } from "node:fs/promises";
95
95
  import { fileURLToPath as fileURLToPath3 } from "node:url";
96
- import { logger as logger3 } from "storybook/internal/node-logger";
97
- import {
98
- NoStatsForViteDevError,
99
- ViteModuleGraphSubscriptionError
100
- } from "storybook/internal/server-errors";
96
+ import { NoStatsForViteDevError } from "storybook/internal/server-errors";
101
97
 
102
98
  // src/build.ts
103
99
  import { logger as logger2 } from "storybook/internal/node-logger";
@@ -1523,6 +1519,41 @@ async function build(options) {
1523
1519
  )?.storybookGetStats();
1524
1520
  }
1525
1521
 
1522
+ // src/change-detection-adapter/index.ts
1523
+ import { logger as logger3 } from "storybook/internal/node-logger";
1524
+ function createViteChangeDetectionAdapter(server2) {
1525
+ return {
1526
+ /**
1527
+ * Snapshots the Vite resolver configuration (aliases, conditions, root) once at
1528
+ * adapter creation time. If `vite.config.ts` is modified while Storybook is
1529
+ * running, this snapshot becomes stale and Storybook must be restarted to pick
1530
+ * up the updated aliases.
1531
+ *
1532
+ * A future improvement would subscribe to Vite's HMR config-reload event and
1533
+ * invalidate the resolver cache on config change.
1534
+ */
1535
+ async getResolveConfig() {
1536
+ logger3.debug(
1537
+ "Change detection: snapshotting Vite resolve config (restart required if vite.config.ts changes)"
1538
+ );
1539
+ let resolveOpts = server2.config.resolve, alias = resolveOpts?.alias, conditions = resolveOpts?.conditions;
1540
+ return {
1541
+ projectRoot: server2.config.root,
1542
+ alias,
1543
+ conditions
1544
+ };
1545
+ },
1546
+ onFileChange(handler) {
1547
+ let FORWARDED_EVENTS = /* @__PURE__ */ new Set(["add", "change", "unlink"]), isForwardedEvent = (name) => FORWARDED_EVENTS.has(name), onAll = (eventName, path) => {
1548
+ isForwardedEvent(eventName) && handler({ kind: eventName, path: normalize(path) });
1549
+ };
1550
+ return server2.watcher.on("all", onAll), () => {
1551
+ server2.watcher.off("all", onAll);
1552
+ };
1553
+ }
1554
+ };
1555
+ }
1556
+
1526
1557
  // src/vite-server.ts
1527
1558
  async function createViteServer(options, devServer) {
1528
1559
  let { presets } = options, commonCfg = await commonConfig(options, "development"), { allowedHosts } = await presets.apply("core", {}), config = {
@@ -1545,43 +1576,6 @@ async function createViteServer(options, devServer) {
1545
1576
  return finalConfig.customLogger ??= await createViteLogger(), createServer(finalConfig);
1546
1577
  }
1547
1578
 
1548
- // src/utils/build-module-graph.ts
1549
- function buildModuleGraph(fileToModulesMap) {
1550
- let moduleGraph = /* @__PURE__ */ new Map(), moduleNodeMap = /* @__PURE__ */ new WeakMap(), getModuleFileFromMap = (viteModuleNode) => {
1551
- for (let [filePath, viteModuleSet] of fileToModulesMap.entries())
1552
- if (viteModuleSet.has(viteModuleNode))
1553
- return filePath;
1554
- }, getOrCreateModuleNode = (viteModuleNode, fallbackFile) => {
1555
- let file = viteModuleNode.file ?? fallbackFile;
1556
- if (!file)
1557
- return;
1558
- let existingNode = moduleNodeMap.get(viteModuleNode);
1559
- if (existingNode)
1560
- return existingNode;
1561
- let moduleNode = {
1562
- file,
1563
- type: viteModuleNode.type,
1564
- importers: /* @__PURE__ */ new Set(),
1565
- importedModules: /* @__PURE__ */ new Set()
1566
- };
1567
- moduleNodeMap.set(viteModuleNode, moduleNode);
1568
- let moduleSet = moduleGraph.get(file) ?? /* @__PURE__ */ new Set();
1569
- return moduleSet.add(moduleNode), moduleGraph.set(file, moduleSet), moduleNode;
1570
- };
1571
- return fileToModulesMap.forEach((viteModuleSet, filePath) => {
1572
- viteModuleSet.forEach((viteModuleNode) => {
1573
- let moduleNode = getOrCreateModuleNode(viteModuleNode, filePath);
1574
- moduleNode && (viteModuleNode.importers.forEach((importer) => {
1575
- let importerNode = getOrCreateModuleNode(importer) ?? getOrCreateModuleNode(importer, getModuleFileFromMap(importer));
1576
- importerNode && moduleNode.importers.add(importerNode);
1577
- }), viteModuleNode.importedModules.forEach((importedModule) => {
1578
- let importedModuleNode = getOrCreateModuleNode(importedModule) ?? getOrCreateModuleNode(importedModule, getModuleFileFromMap(importedModule));
1579
- importedModuleNode && moduleNode.importedModules.add(importedModuleNode);
1580
- }));
1581
- });
1582
- }), moduleGraph;
1583
- }
1584
-
1585
1579
  // src/index.ts
1586
1580
  function iframeHandler(options, server2) {
1587
1581
  return async (req, res) => {
@@ -1594,78 +1588,22 @@ function iframeHandler(options, server2) {
1594
1588
  res.setHeader("Content-Type", "text/html"), res.statusCode = 200, res.write(transformed), res.end();
1595
1589
  };
1596
1590
  }
1597
- var server, listeners = /* @__PURE__ */ new Set(), debounce, watcherChangeHandler, waitForModuleGraph, moduleGraphRegistrationClosed = !1;
1598
- function clearModuleGraphPolling() {
1599
- waitForModuleGraph && (clearInterval(waitForModuleGraph), waitForModuleGraph = void 0);
1600
- }
1601
- function notifyListeners(moduleGraph) {
1602
- listeners.forEach((listener) => {
1603
- listener({ type: "moduleGraph", moduleGraph });
1604
- });
1605
- }
1606
- function notifyListenersOfStartupFailure(event) {
1607
- listeners.forEach((listener) => {
1608
- listener(event);
1609
- });
1610
- }
1591
+ var server;
1611
1592
  async function bail() {
1612
- return watcherChangeHandler && (server?.watcher.off("all", watcherChangeHandler), watcherChangeHandler = void 0), clearModuleGraphPolling(), debounce && (clearTimeout(debounce), debounce = void 0), moduleGraphRegistrationClosed = !1, listeners.clear(), server?.close();
1593
+ return server?.close();
1613
1594
  }
1614
- var onModuleGraphChange = (cb) => {
1615
- if (moduleGraphRegistrationClosed)
1616
- throw new ViteModuleGraphSubscriptionError();
1617
- return listeners.add(cb), () => {
1618
- listeners.delete(cb);
1619
- };
1620
- }, startChangeDetection = async (options) => {
1621
- let startTime = process.hrtime(), storyIndex = await (await options.presets.apply("storyIndexGenerator")).getIndex(), importPaths = new Set(Object.values(storyIndex.entries).map((entry) => entry.importPath));
1622
- await Promise.all(Array.from(importPaths, (importPath) => server.warmupRequest(importPath))), waitForModuleGraph = setInterval(() => {
1623
- (async () => {
1624
- try {
1625
- if (!watcherChangeHandler) {
1626
- clearModuleGraphPolling();
1627
- return;
1628
- }
1629
- if (process.hrtime(startTime)[0] > 30) {
1630
- clearModuleGraphPolling();
1631
- let error = new Error(
1632
- "Timed out while waiting for the Vite module graph to initialize"
1633
- );
1634
- logger3.error("Failed to complete Vite change detection startup"), logger3.error(error), notifyListenersOfStartupFailure({
1635
- type: "unavailable",
1636
- reason: error.message,
1637
- error
1638
- });
1639
- return;
1640
- }
1641
- if (server.moduleGraph.fileToModulesMap.size > 0) {
1642
- if (clearModuleGraphPolling(), await server.waitForRequestsIdle(), !watcherChangeHandler)
1643
- return;
1644
- server.watcher.on("all", watcherChangeHandler), watcherChangeHandler();
1645
- }
1646
- } catch (error) {
1647
- clearModuleGraphPolling(), logger3.error("Failed to complete Vite change detection startup"), logger3.error(error instanceof Error ? error : String(error)), notifyListenersOfStartupFailure({
1648
- type: "error",
1649
- error: error instanceof Error ? error : new Error(String(error))
1650
- });
1651
- }
1652
- })();
1653
- }, 1e3);
1595
+ var changeDetectionAdapter = () => {
1596
+ if (!server)
1597
+ throw new Error(
1598
+ "builder-vite: changeDetectionAdapter() called before start(); the Vite dev server is not ready yet."
1599
+ );
1600
+ return createViteChangeDetectionAdapter(server);
1654
1601
  }, start = async ({
1655
1602
  startTime,
1656
1603
  options,
1657
1604
  router,
1658
1605
  server: devServer
1659
- }) => (moduleGraphRegistrationClosed = !0, server = await createViteServer(options, devServer), router.get("/iframe.html", iframeHandler(options, server)), router.use(server.middlewares), listeners.size > 0 && (watcherChangeHandler = () => {
1660
- clearTimeout(debounce), debounce = setTimeout(() => {
1661
- notifyListeners(buildModuleGraph(server.moduleGraph.fileToModulesMap));
1662
- }, 100);
1663
- }, startChangeDetection(options).catch((error) => {
1664
- clearModuleGraphPolling(), logger3.error("Failed to initialize Vite change detection"), logger3.error(error instanceof Error ? error : String(error)), notifyListenersOfStartupFailure({
1665
- type: "error",
1666
- error: error instanceof Error ? error : new Error(String(error))
1667
- });
1668
- })), {
1606
+ }) => (server = await createViteServer(options, devServer), router.get("/iframe.html", iframeHandler(options, server)), router.use(server.middlewares), {
1669
1607
  bail,
1670
1608
  stats: {
1671
1609
  toJson: () => {
@@ -1677,9 +1615,9 @@ var onModuleGraphChange = (cb) => {
1677
1615
  export {
1678
1616
  bail,
1679
1617
  build2 as build,
1618
+ changeDetectionAdapter,
1680
1619
  corePresets,
1681
1620
  hasVitePlugins,
1682
- onModuleGraphChange,
1683
1621
  start,
1684
1622
  withoutVitePlugins
1685
1623
  };
package/dist/preset.js CHANGED
@@ -1,10 +1,10 @@
1
- import CJS_COMPAT_NODE_URL_06axgbo8vy7 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_06axgbo8vy7 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_06axgbo8vy7 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_k4rlwj4u8j7 from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_k4rlwj4u8j7 from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7 from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_06axgbo8vy7.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_06axgbo8vy7.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_06axgbo8vy7.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_k4rlwj4u8j7.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_k4rlwj4u8j7.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_k4rlwj4u8j7.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -12,7 +12,7 @@ var require = CJS_COMPAT_NODE_MODULE_06axgbo8vy7.createRequire(import.meta.url);
12
12
  import {
13
13
  optimizeViteDeps,
14
14
  viteCorePlugins
15
- } from "./_node-chunks/chunk-MLH46CMH.js";
15
+ } from "./_node-chunks/chunk-7UION4BZ.js";
16
16
  export {
17
17
  optimizeViteDeps,
18
18
  viteCorePlugins
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/builder-vite",
3
- "version": "10.4.0-alpha.8",
3
+ "version": "10.4.0-beta.0",
4
4
  "description": "A Storybook builder to dev and build with Vite",
5
5
  "keywords": [
6
6
  "storybook",
@@ -47,7 +47,7 @@
47
47
  "!src/**/*"
48
48
  ],
49
49
  "dependencies": {
50
- "@storybook/csf-plugin": "10.4.0-alpha.8",
50
+ "@storybook/csf-plugin": "10.4.0-beta.0",
51
51
  "ts-dedent": "^2.0.0"
52
52
  },
53
53
  "devDependencies": {
@@ -62,7 +62,7 @@
62
62
  "vite": "^7.0.4"
63
63
  },
64
64
  "peerDependencies": {
65
- "storybook": "^10.4.0-alpha.8",
65
+ "storybook": "^10.4.0-beta.0",
66
66
  "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
67
67
  },
68
68
  "publishConfig": {