storybook-builder-rsbuild 2.0.3 → 2.1.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as rsbuildReal from '@rsbuild/core';
 import { RsbuildConfig } from '@rsbuild/core';
-import { TypescriptOptions as TypescriptOptions$1, Builder, Options, StorybookConfigRaw, BuilderResult as BuilderResult$1, NormalizedStoriesSpecifier } from 'storybook/internal/types';
+import { TypescriptOptions as TypescriptOptions$1, Builder, Options, StorybookConfigRaw, BuilderResult as BuilderResult$1 } from 'storybook/internal/types';
 import { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check';
 
 type RsbuildStats = {
@@ -52,12 +52,6 @@ declare const getVirtualModules: (options: Options) => Promise<{
     virtualModules: Record<string, string>;
     entries: string[];
 }>;
-declare function toImportFnPart(specifier: NormalizedStoriesSpecifier): string;
-declare function toImportFn(stories: NormalizedStoriesSpecifier[], relativeOffset: string, { needPipelinedImport }?: {
-    needPipelinedImport?: boolean;
-}): string;
-type ModuleExports = Record<string, any>;
-declare function importPipeline(): (importFn: () => Promise<ModuleExports>) => Promise<ModuleExports>;
 
 type StatsOrMultiStats = Parameters<rsbuildReal.OnAfterBuildFn>[0]['stats'];
 type Stats = NonNullable<Exclude<StatsOrMultiStats, {
@@ -75,4 +69,4 @@ declare const build: ({ options }: BuilderStartOptions) => Promise<Stats>;
 declare const corePresets: string[];
 declare const previewMainTemplate: () => string;
 
-export { BuilderOptions, BuilderResult, RsbuildBuilder, RsbuildFinal, Stats, StorybookConfigRsbuild, TypescriptOptions, bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, start, toImportFn, toImportFnPart };
+export { BuilderOptions, BuilderResult, RsbuildBuilder, RsbuildFinal, Stats, StorybookConfigRsbuild, TypescriptOptions, bail, build, corePresets, executor, getConfig, getVirtualModules, previewMainTemplate, printDuration, start };

package/dist/index.js

@@ -111,16 +111,13 @@ __export(src_exports, {
   executor: () => executor,
   getConfig: () => getConfig,
   getVirtualModules: () => getVirtualModules,
-  importPipeline: () => importPipeline,
   previewMainTemplate: () => previewMainTemplate,
   printDuration: () => printDuration,
-  start: () => start,
-  toImportFn: () => toImportFn,
-  toImportFnPart: () => toImportFnPart
+  start: () => start
 });
 module.exports = __toCommonJS(src_exports);
 var import_node_net = require("net");
-var import_node_path5 = require("path");
+var import_node_path4 = require("path");
 var rsbuildReal = __toESM(require("@rsbuild/core"));
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_pretty_hrtime = __toESM(require_pretty_hrtime());
@@ -129,7 +126,7 @@ var import_common3 = require("storybook/internal/common");
 var import_server_errors = require("storybook/internal/server-errors");
 
 // src/preview/iframe-rsbuild.config.ts
-var import_node_path3 = require("path");
+var import_node_path2 = require("path");
 var import_core = require("@rsbuild/core");
 var import_plugin_type_check = require("@rsbuild/plugin-type-check");
 var import_preset = require("@storybook/addon-docs/preset");
@@ -137,41 +134,27 @@ var import_case_sensitive_paths_webpack_plugin = __toESM(require("case-sensitive
 var import_rsbuild_plugin_html_minifier_terser = require("rsbuild-plugin-html-minifier-terser");
 var import_common2 = require("storybook/internal/common");
 var import_globals = require("storybook/internal/preview/globals");
-var import_ts_dedent2 = require("ts-dedent");
+var import_ts_dedent = require("ts-dedent");
 
 // src/preview/virtual-module-mapping.ts
-var import_node_fs = __toESM(require("fs"));
-var import_node_path = __toESM(require("path"));
-var import_node_path2 = require("path");
+var import_node_path = require("path");
 var import_core_webpack = require("@storybook/core-webpack");
-var import_find_cache_dir = __toESM(require("find-cache-dir"));
 
 // ../../node_modules/.pnpm/slash@5.1.0/node_modules/slash/index.js
-function slash(path2) {
-  const isExtendedLengthPath = path2.startsWith("\\\\?\\");
+function slash(path) {
+  const isExtendedLengthPath = path.startsWith("\\\\?\\");
   if (isExtendedLengthPath) {
-    return path2;
+    return path;
   }
-  return path2.replace(/\\/g, "/");
+  return path.replace(/\\/g, "/");
 }
 
 // src/preview/virtual-module-mapping.ts
 var import_common = require("storybook/internal/common");
-var import_ts_dedent = require("ts-dedent");
 var getVirtualModules = async (options) => {
   const virtualModules = {};
-  const cwd = process.cwd();
-  const workingDir = options.cache ? (
-    // TODO: This is a hard code cache dir, as Rspack doesn't support virtual modules now.
-    // Remove this when Rspack supports virtual modules.
-    (0, import_find_cache_dir.default)({
-      name: "storybook-rsbuild-builder",
-      create: true
-    })
-  ) : process.cwd();
-  if (!import_node_fs.default.existsSync(workingDir)) {
-    import_node_fs.default.mkdirSync(workingDir, { recursive: true });
-  }
+  const builderOptions = await (0, import_common.getBuilderOptions)(options);
+  const workingDir = process.cwd();
   const isProd = options.configType === "PRODUCTION";
   const nonNormalizedStories = await options.presets.apply("stories", []);
   const entries = [];
@@ -179,7 +162,6 @@ var getVirtualModules = async (options) => {
     configDir: options.configDir,
     workingDir
   });
-  const realPathRelativeToCwd = import_node_path.default.relative(workingDir, cwd).split(import_node_path.default.sep).join(import_node_path.default.posix.sep);
   const previewAnnotations = [
     ...(await options.presets.apply(
       "previewAnnotations",
@@ -194,13 +176,12 @@ var getVirtualModules = async (options) => {
     (0, import_common.loadPreviewOrConfigFile)(options)
   ].filter(Boolean);
   const storiesFilename = "storybook-stories.js";
-  const storiesPath = (0, import_node_path2.resolve)((0, import_node_path2.join)(workingDir, storiesFilename));
-  const builderOptions = await (0, import_common.getBuilderOptions)(options);
+  const storiesPath = (0, import_node_path.resolve)((0, import_node_path.join)(workingDir, storiesFilename));
   const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
-  virtualModules[storiesPath] = toImportFn(stories, realPathRelativeToCwd, {
+  virtualModules[storiesPath] = (0, import_core_webpack.toImportFn)(stories, {
     needPipelinedImport
   });
-  const configEntryPath = (0, import_node_path2.resolve)((0, import_node_path2.join)(workingDir, "storybook-config-entry.js"));
+  const configEntryPath = (0, import_node_path.resolve)((0, import_node_path.join)(workingDir, "storybook-config-entry.js"));
   virtualModules[configEntryPath] = (await (0, import_common.readTemplate)(
     require.resolve("storybook-builder-rsbuild/templates/virtualModuleModernEntry.js")
   )).replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`).replaceAll(
@@ -211,83 +192,14 @@ var getVirtualModules = async (options) => {
     previewAnnotations.filter(Boolean).map((entry) => `require('${entry}')`).join(",")
   ).replace(/\\/g, "\\\\");
   entries.push(configEntryPath);
-  for (const [key, value] of Object.entries(virtualModules)) {
-    import_node_fs.default.writeFileSync(key, value);
-  }
   return {
     virtualModules,
     entries
   };
 };
-function toImportFnPart(specifier) {
-  const { directory, importPathMatcher } = specifier;
-  return import_ts_dedent.dedent`
-      async (path) => {
-        if (!${importPathMatcher}.exec(path)) {
-          return;
-        }
-
-        const pathRemainder = path.substring(${directory.length + 1});
-        return import(
-          /* webpackChunkName: "[request]" */
-          /* webpackInclude: ${(0, import_core_webpack.webpackIncludeRegexp)(specifier)} */
-          '${directory}/' + pathRemainder
-        );
-      }
-
-  `;
-}
-function toImportFn(stories, relativeOffset, { needPipelinedImport } = {}) {
-  let pipelinedImport = "const pipeline = (x) => x();";
-  if (needPipelinedImport) {
-    pipelinedImport = `
-      const importPipeline = ${importPipeline};
-      const pipeline = importPipeline();
-    `;
-  }
-  return import_ts_dedent.dedent`
-    ${pipelinedImport}
-
-    const importers = [
-      ${stories.map(toImportFnPart).join(",\n")}
-    ];
-
-    export async function importFn(path) {
-      const offset = '${relativeOffset}';
-
-      for (let i = 0; i < importers.length; i++) {
-        const pathWithOffset = buildPath(offset, path)
-
-        const moduleExports = await pipeline(() => importers[i](pathWithOffset));
-        if (moduleExports) {
-          return moduleExports;
-        }
-      }
-    }
-
-    function buildPath(offset, path) {
-      if(path.startsWith('./')) {
-        return offset + '/' + path.substring(2);
-      } else {
-        return offset + '/' + path;
-      }
-    }
-  `;
-}
-function importPipeline() {
-  let importGate = Promise.resolve();
-  return async (importFn) => {
-    await importGate;
-    const moduleExportsPromise = importFn();
-    importGate = importGate.then(async () => {
-      await moduleExportsPromise;
-    });
-    return moduleExportsPromise;
-  };
-}
 
 // src/preview/iframe-rsbuild.config.ts
-var getAbsolutePath = (input) => (0, import_node_path3.dirname)(require.resolve((0, import_node_path3.join)(input, "package.json")));
+var getAbsolutePath = (input) => (0, import_node_path2.dirname)(require.resolve((0, import_node_path2.join)(input, "package.json")));
 var maybeGetAbsolutePath = (input) => {
   try {
     return getAbsolutePath(input);
@@ -313,7 +225,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
   const { rsbuildConfigPath, addonDocs } = await (0, import_common2.getBuilderOptions)(options);
   const appliedDocsWebpack = await (0, import_preset.webpack)({}, { ...options, ...addonDocs });
   const {
-    outputDir = (0, import_node_path3.join)(".", "public"),
+    outputDir = (0, import_node_path2.join)(".", "public"),
     quiet,
     packageJson,
     configType,
@@ -365,7 +277,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
     lazyCompilation: { entries: false }
   } : {};
   if (!template) {
-    throw new Error(import_ts_dedent2.dedent`
+    throw new Error(import_ts_dedent.dedent`
       Storybook's Webpack5 builder requires a template to be specified.
       Somehow you've ended up with a falsy value for the template option.
 
@@ -376,7 +288,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
   if (build2?.test?.disableBlocks) {
     externals["@storybook/blocks"] = "__STORYBOOK_BLOCKS_EMPTY_MODULE__";
   }
-  const { virtualModules: _virtualModules, entries: dynamicEntries } = await getVirtualModules(options);
+  const { virtualModules: virtualModuleMapping, entries: dynamicEntries } = await getVirtualModules(options);
   if (!options.cache) {
     throw new Error("Cache is required");
   }
@@ -429,7 +341,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
         css: !options.build?.test?.disableSourcemaps
       },
       distPath: {
-        root: (0, import_node_path3.resolve)(process.cwd(), outputDir)
+        root: (0, import_node_path2.resolve)(process.cwd(), outputDir)
       },
       filename: {
         js: isProd ? "[name].[contenthash:8].iframe.bundle.js" : "[name].iframe.bundle.js",
@@ -517,7 +429,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
       }
     ].filter(Boolean),
     tools: {
-      rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
+      rspack: (config, { addRules, appendPlugins, rspack: rspack2, mergeConfig }) => {
         addRules({
           test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
           exclude: /node_modules/,
@@ -528,6 +440,10 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
             }
           ]
         });
+        config.module ??= {};
+        config.module.parser ??= {};
+        config.module.parser.javascript ??= {};
+        config.module.parser.javascript.unknownContextCritical = false;
         config.resolve ??= {};
         config.resolve.symlinks = !(0, import_common2.isPreservingSymlinks)();
         config.resolve.extensions = Array.from(
@@ -562,9 +478,17 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
         config.module.parser ??= {};
         config.module.parser.javascript ??= {};
         config.module.parser.javascript.exportsPresence = false;
+        if (!rspack2.experiments?.VirtualModulesPlugin) {
+          throw new Error(
+            "rspack.experiments.VirtualModulesPlugin requires at least 1.5.0 version of @rsbuild/core, please upgrade or downgrade storybook-rsbuild-builder to lower version."
+          );
+        }
         appendPlugins(
           [
-            new rspack.ProvidePlugin({
+            Object.keys(virtualModuleMapping).length > 0 ? new rspack2.experiments.VirtualModulesPlugin(
+              virtualModuleMapping
+            ) : null,
+            new rspack2.ProvidePlugin({
               process: require.resolve("process/browser.js")
             }),
             new import_case_sensitive_paths_webpack_plugin.default()
@@ -612,7 +536,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
 
 // src/react-shims.ts
 var import_promises = require("fs/promises");
-var import_node_path4 = require("path");
+var import_node_path3 = require("path");
 var getIsReactVersion18or19 = async (options) => {
   const { legacyRootApi } = await options.presets.apply(
     "frameworkOptions"
@@ -625,12 +549,12 @@ var getIsReactVersion18or19 = async (options) => {
     {}
   );
   let reactDom = "";
-  reactDom = resolvedReact.reactDom || (0, import_node_path4.dirname)(require.resolve("react-dom/package.json"));
-  if (!(0, import_node_path4.isAbsolute)(reactDom)) {
+  reactDom = resolvedReact.reactDom || (0, import_node_path3.dirname)(require.resolve("react-dom/package.json"));
+  if (!(0, import_node_path3.isAbsolute)(reactDom)) {
     return false;
   }
   const { version } = JSON.parse(
-    await (0, import_promises.readFile)((0, import_node_path4.join)(reactDom, "package.json"), "utf-8")
+    await (0, import_promises.readFile)((0, import_node_path3.join)(reactDom, "package.json"), "utf-8")
   );
   return version.startsWith("18") || version.startsWith("19") || version.startsWith("0.0.0");
 };
@@ -649,7 +573,7 @@ var applyReactShims = async (config, options) => {
 };
 
 // src/index.ts
-var corePath = (0, import_node_path5.dirname)(require.resolve("storybook/package.json"));
+var corePath = (0, import_node_path4.dirname)(require.resolve("storybook/package.json"));
 var printDuration = (startTime) => (0, import_pretty_hrtime.default)(process.hrtime(startTime)).replace(" ms", " milliseconds").replace(" s", " seconds").replace(" m", " minutes");
 var executor = {
   get: async (options) => {
@@ -757,7 +681,7 @@ var start = async ({
       error: new Error("Missing Rsbuild build instance at runtime!")
     });
   }
-  const previewResolvedDir = (0, import_node_path5.join)(corePath, "dist/preview");
+  const previewResolvedDir = (0, import_node_path4.join)(corePath, "dist/preview");
   const previewDirOrigin = previewResolvedDir;
   router.use(
     "/sb-preview",
@@ -780,16 +704,16 @@ var build = async ({ options }) => {
     cwd: process.cwd(),
     rsbuildConfig: config
   });
-  const previewResolvedDir = (0, import_node_path5.join)(corePath, "dist/preview");
+  const previewResolvedDir = (0, import_node_path4.join)(corePath, "dist/preview");
   const previewDirOrigin = previewResolvedDir;
-  const previewDirTarget = (0, import_node_path5.join)(options.outputDir || "", "sb-preview");
+  const previewDirTarget = (0, import_node_path4.join)(options.outputDir || "", "sb-preview");
   let stats;
   rsbuildBuild.onAfterBuild((params) => {
     stats = params.stats;
   });
   const previewFiles = import_fs_extra.default.copy(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
-      const { ext } = (0, import_node_path5.parse)(src);
+      const { ext } = (0, import_node_path4.parse)(src);
       if (ext) {
         return ext === ".js";
       }
@@ -803,7 +727,7 @@ var build = async ({ options }) => {
   await close();
   return stats;
 };
-var corePresets = [(0, import_node_path5.join)(__dirname, "./preview-preset.js")];
+var corePresets = [(0, import_node_path4.join)(__dirname, "./preview-preset.js")];
 var previewMainTemplate = () => require.resolve("storybook-builder-rsbuild/templates/preview.ejs");
 function getRandomPort(host) {
   return new Promise((resolve3, reject) => {
@@ -826,10 +750,7 @@ function getRandomPort(host) {
   executor,
   getConfig,
   getVirtualModules,
-  importPipeline,
   previewMainTemplate,
   printDuration,
-  start,
-  toImportFn,
-  toImportFnPart
+  start
 });

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { __commonJS, __toESM, __require } from './chunk-TTFRSOOU.mjs';
 import { createServer } from 'net';
-import path, { dirname, join, resolve, parse, isAbsolute } from 'path';
+import { dirname, join, resolve, parse, isAbsolute } from 'path';
 import * as rsbuildReal from '@rsbuild/core';
 import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core';
-import fs2 from 'fs-extra';
+import fs from 'fs-extra';
 import sirv from 'sirv';
-import { normalizeStories, loadPreviewOrConfigFile, getBuilderOptions, readTemplate, resolveAddonName, getPresets, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
+import { getBuilderOptions, normalizeStories, loadPreviewOrConfigFile, readTemplate, resolveAddonName, getPresets, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
 import { WebpackInvocationError } from 'storybook/internal/server-errors';
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
 import { webpack } from '@storybook/addon-docs/preset';
@@ -13,9 +13,7 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser';
 import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
 import { dedent } from 'ts-dedent';
-import fs from 'fs';
-import { webpackIncludeRegexp } from '@storybook/core-webpack';
-import findCacheDirectory from 'find-cache-dir';
+import { toImportFn } from '@storybook/core-webpack';
 import { readFile } from 'fs/promises';
 
 // ../../node_modules/.pnpm/pretty-hrtime@1.0.3/node_modules/pretty-hrtime/index.js
@@ -93,27 +91,17 @@ var require_pretty_hrtime = __commonJS({
 var import_pretty_hrtime = __toESM(require_pretty_hrtime());
 
 // ../../node_modules/.pnpm/slash@5.1.0/node_modules/slash/index.js
-function slash(path2) {
-  const isExtendedLengthPath = path2.startsWith("\\\\?\\");
+function slash(path) {
+  const isExtendedLengthPath = path.startsWith("\\\\?\\");
   if (isExtendedLengthPath) {
-    return path2;
+    return path;
   }
-  return path2.replace(/\\/g, "/");
+  return path.replace(/\\/g, "/");
 }
 var getVirtualModules = async (options) => {
   const virtualModules = {};
-  const cwd = process.cwd();
-  const workingDir = options.cache ? (
-    // TODO: This is a hard code cache dir, as Rspack doesn't support virtual modules now.
-    // Remove this when Rspack supports virtual modules.
-    findCacheDirectory({
-      name: "storybook-rsbuild-builder",
-      create: true
-    })
-  ) : process.cwd();
-  if (!fs.existsSync(workingDir)) {
-    fs.mkdirSync(workingDir, { recursive: true });
-  }
+  const builderOptions = await getBuilderOptions(options);
+  const workingDir = process.cwd();
   const isProd = options.configType === "PRODUCTION";
   const nonNormalizedStories = await options.presets.apply("stories", []);
   const entries = [];
@@ -121,7 +109,6 @@ var getVirtualModules = async (options) => {
     configDir: options.configDir,
     workingDir
   });
-  const realPathRelativeToCwd = path.relative(workingDir, cwd).split(path.sep).join(path.posix.sep);
   const previewAnnotations = [
     ...(await options.presets.apply(
       "previewAnnotations",
@@ -137,9 +124,8 @@ var getVirtualModules = async (options) => {
   ].filter(Boolean);
   const storiesFilename = "storybook-stories.js";
   const storiesPath = resolve(join(workingDir, storiesFilename));
-  const builderOptions = await getBuilderOptions(options);
   const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
-  virtualModules[storiesPath] = toImportFn(stories, realPathRelativeToCwd, {
+  virtualModules[storiesPath] = toImportFn(stories, {
     needPipelinedImport
   });
   const configEntryPath = resolve(join(workingDir, "storybook-config-entry.js"));
@@ -155,80 +141,11 @@ var getVirtualModules = async (options) => {
     previewAnnotations.filter(Boolean).map((entry) => `require('${entry}')`).join(",")
   ).replace(/\\/g, "\\\\");
   entries.push(configEntryPath);
-  for (const [key, value] of Object.entries(virtualModules)) {
-    fs.writeFileSync(key, value);
-  }
   return {
     virtualModules,
     entries
   };
 };
-function toImportFnPart(specifier) {
-  const { directory, importPathMatcher } = specifier;
-  return dedent`
-      async (path) => {
-        if (!${importPathMatcher}.exec(path)) {
-          return;
-        }
-
-        const pathRemainder = path.substring(${directory.length + 1});
-        return import(
-          /* webpackChunkName: "[request]" */
-          /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
-          '${directory}/' + pathRemainder
-        );
-      }
-
-  `;
-}
-function toImportFn(stories, relativeOffset, { needPipelinedImport } = {}) {
-  let pipelinedImport = "const pipeline = (x) => x();";
-  if (needPipelinedImport) {
-    pipelinedImport = `
-      const importPipeline = ${importPipeline};
-      const pipeline = importPipeline();
-    `;
-  }
-  return dedent`
-    ${pipelinedImport}
-
-    const importers = [
-      ${stories.map(toImportFnPart).join(",\n")}
-    ];
-
-    export async function importFn(path) {
-      const offset = '${relativeOffset}';
-
-      for (let i = 0; i < importers.length; i++) {
-        const pathWithOffset = buildPath(offset, path)
-
-        const moduleExports = await pipeline(() => importers[i](pathWithOffset));
-        if (moduleExports) {
-          return moduleExports;
-        }
-      }
-    }
-
-    function buildPath(offset, path) {
-      if(path.startsWith('./')) {
-        return offset + '/' + path.substring(2);
-      } else {
-        return offset + '/' + path;
-      }
-    }
-  `;
-}
-function importPipeline() {
-  let importGate = Promise.resolve();
-  return async (importFn) => {
-    await importGate;
-    const moduleExportsPromise = importFn();
-    importGate = importGate.then(async () => {
-      await moduleExportsPromise;
-    });
-    return moduleExportsPromise;
-  };
-}
 
 // src/preview/iframe-rsbuild.config.ts
 var getAbsolutePath = (input) => dirname(__require.resolve(join(input, "package.json")));
@@ -320,7 +237,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
   if (build2?.test?.disableBlocks) {
     externals["@storybook/blocks"] = "__STORYBOOK_BLOCKS_EMPTY_MODULE__";
   }
-  const { virtualModules: _virtualModules, entries: dynamicEntries } = await getVirtualModules(options);
+  const { virtualModules: virtualModuleMapping, entries: dynamicEntries } = await getVirtualModules(options);
   if (!options.cache) {
     throw new Error("Cache is required");
   }
@@ -461,7 +378,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
       }
     ].filter(Boolean),
     tools: {
-      rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
+      rspack: (config, { addRules, appendPlugins, rspack: rspack2, mergeConfig }) => {
         addRules({
           test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
           exclude: /node_modules/,
@@ -474,6 +391,10 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
             }
           ]
         });
+        config.module ??= {};
+        config.module.parser ??= {};
+        config.module.parser.javascript ??= {};
+        config.module.parser.javascript.unknownContextCritical = false;
         config.resolve ??= {};
         config.resolve.symlinks = !isPreservingSymlinks();
         config.resolve.extensions = Array.from(
@@ -508,9 +429,17 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
         config.module.parser ??= {};
         config.module.parser.javascript ??= {};
         config.module.parser.javascript.exportsPresence = false;
+        if (!rspack2.experiments?.VirtualModulesPlugin) {
+          throw new Error(
+            "rspack.experiments.VirtualModulesPlugin requires at least 1.5.0 version of @rsbuild/core, please upgrade or downgrade storybook-rsbuild-builder to lower version."
+          );
+        }
         appendPlugins(
           [
-            new rspack.ProvidePlugin({
+            Object.keys(virtualModuleMapping).length > 0 ? new rspack2.experiments.VirtualModulesPlugin(
+              virtualModuleMapping
+            ) : null,
+            new rspack2.ProvidePlugin({
               process: __require.resolve("process/browser.js")
             }),
             new CaseSensitivePathsPlugin()
@@ -729,7 +658,7 @@ var build = async ({ options }) => {
   rsbuildBuild.onAfterBuild((params) => {
     stats = params.stats;
   });
-  const previewFiles = fs2.copy(previewDirOrigin, previewDirTarget, {
+  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
@@ -761,4 +690,4 @@ function getRandomPort(host) {
   });
 }
 
-export { bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, start, toImportFn, toImportFnPart };
+export { bail, build, corePresets, executor, getConfig, getVirtualModules, previewMainTemplate, printDuration, start };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-builder-rsbuild",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Rsbuild builder for Storybook",
   "keywords": [
     "storybook",
@@ -57,20 +57,19 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@rsbuild/plugin-type-check": "^1.2.3",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/core-webpack": "^9.0.18",
+    "@rsbuild/plugin-type-check": "^1.2.4",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/core-webpack": "^9.1.2",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "cjs-module-lexer": "^1.4.3",
     "constants-browserify": "^1.0.0",
     "es-module-lexer": "^1.7.0",
-    "find-cache-dir": "^5.0.0",
-    "fs-extra": "^11.3.0",
+    "fs-extra": "^11.3.1",
     "magic-string": "^0.30.17",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
-    "rsbuild-plugin-html-minifier-terser": "^1.1.1",
+    "rsbuild-plugin-html-minifier-terser": "^1.1.2",
     "sirv": "^2.0.4",
     "ts-dedent": "^2.2.0",
     "url": "^0.11.4",
@@ -78,18 +77,19 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@rsbuild/core": "^1.4.11",
+    "@rsbuild/core": "^1.5.0",
     "@types/find-cache-dir": "^5.0.2",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.19.110",
     "@types/pretty-hrtime": "^1.0.3",
+    "find-cache-dir": "^5.0.0",
     "pretty-hrtime": "^1.0.3",
     "slash": "^5.1.0",
-    "storybook": "9.0.18",
-    "typescript": "^5.8.3"
+    "storybook": "9.1.2",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^1.0.1",
+    "@rsbuild/core": "^1.5.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "^9.0.0"

package/templates/virtualModuleModernEntry.js

@@ -1,16 +1,23 @@
 import { createBrowserChannel } from 'storybook/internal/channels'
-import {
-  PreviewWeb,
-  addons,
-  composeConfigs,
-} from 'storybook/internal/preview-api'
+import { STORY_HOT_UPDATED } from 'storybook/internal/core-events'
+import { isPreview } from 'storybook/internal/csf'
 
 import { global } from '@storybook/global'
 
+import { PreviewWeb, addons, composeConfigs } from 'storybook/preview-api'
 import { importFn } from '{{storiesFilename}}'
 
-const getProjectAnnotations = () =>
-  composeConfigs(['{{previewAnnotations_requires}}'])
+const getProjectAnnotations = () => {
+  const previewAnnotations = ['{{previewAnnotations_requires}}']
+  // the last one in this array is the user preview
+  const userPreview = previewAnnotations[previewAnnotations.length - 1]?.default
+
+  if (isPreview(userPreview)) {
+    return userPreview.composed
+  }
+
+  return composeConfigs(previewAnnotations)
+}
 
 const channel = createBrowserChannel({ page: 'preview' })
 addons.setChannel(channel)
@@ -26,6 +33,12 @@ window.__STORYBOOK_STORY_STORE__ = preview.storyStore
 window.__STORYBOOK_ADDONS_CHANNEL__ = channel
 
 if (import.meta.webpackHot) {
+  import.meta.webpackHot.addStatusHandler((status) => {
+    if (status === 'idle') {
+      preview.channel.emit(STORY_HOT_UPDATED)
+    }
+  })
+
   import.meta.webpackHot.accept('{{storiesFilename}}', () => {
     // importFn has changed so we need to patch the new one in
     preview.onStoriesChanged({ importFn })