storybook-builder-rsbuild 0.0.6 → 0.0.7

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, BuilderResult as BuilderResult$1, NormalizedStoriesSpecifier } from '@storybook/types';
+import { TypescriptOptions as TypescriptOptions$1, Builder, Options, BuilderResult as BuilderResult$1, NormalizedStoriesSpecifier } from 'storybook/internal/types';
 import { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check';
 
 type RsbuildStats = {

package/dist/index.js

@@ -121,23 +121,23 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var rsbuildReal = __toESM(require("@rsbuild/core"));
-var import_path4 = require("path");
+var import_path5 = require("path");
 var import_express = __toESM(require("express"));
 var import_fs_extra = __toESM(require("fs-extra"));
-var import_server_errors = require("@storybook/core-events/server-errors");
+var import_server_errors = require("storybook/internal/server-errors");
 
 // src/preview/iframe-rsbuild.config.ts
 var import_path3 = require("path");
 var import_case_sensitive_paths_webpack_plugin = __toESM(require("case-sensitive-paths-webpack-plugin"));
-var import_globals = require("@storybook/preview/globals");
-var import_core_common2 = require("@storybook/core-common");
+var import_globals = require("storybook/internal/preview/globals");
+var import_common2 = require("storybook/internal/common");
 var import_ts_dedent2 = require("ts-dedent");
 
 // src/preview/virtual-module-mapping.ts
 var import_path = __toESM(require("path"));
 var import_fs = __toESM(require("fs"));
 var import_path2 = require("path");
-var import_core_common = require("@storybook/core-common");
+var import_common = require("storybook/internal/common");
 
 // ../../node_modules/.pnpm/slash@5.1.0/node_modules/slash/index.js
 function slash(path2) {
@@ -158,7 +158,7 @@ var getVirtualModules = async (options) => {
   const isProd = options.configType === "PRODUCTION";
   const nonNormalizedStories = await options.presets.apply("stories", []);
   const entries = [];
-  const stories = (0, import_core_common.normalizeStories)(nonNormalizedStories, {
+  const stories = (0, import_common.normalizeStories)(nonNormalizedStories, {
     configDir: options.configDir,
     workingDir
   });
@@ -174,7 +174,7 @@ var getVirtualModules = async (options) => {
       }
       return slash(entry);
     }),
-    (0, import_core_common.loadPreviewOrConfigFile)(options)
+    (0, import_common.loadPreviewOrConfigFile)(options)
   ].filter(Boolean);
   const storiesFilename = "storybook-stories.js";
   const storiesPath = (0, import_path2.resolve)((0, import_path2.join)(workingDir, storiesFilename));
@@ -183,8 +183,8 @@ var getVirtualModules = async (options) => {
     needPipelinedImport
   });
   const configEntryPath = (0, import_path2.resolve)((0, import_path2.join)(workingDir, "storybook-config-entry.js"));
-  virtualModules[configEntryPath] = (0, import_core_common.handlebars)(
-    await (0, import_core_common.readTemplate)(
+  virtualModules[configEntryPath] = (0, import_common.handlebars)(
+    await (0, import_common.readTemplate)(
       require.resolve("storybook-builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars")
     ),
     {
@@ -273,6 +273,7 @@ function importPipeline() {
 var import_core = require("@rsbuild/core");
 var import_preset = require("@storybook/addon-docs/dist/preset");
 var import_plugin_type_check = require("@rsbuild/plugin-type-check");
+var import_rsbuild_plugin_html_minifier_terser = require("rsbuild-plugin-html-minifier-terser");
 var getAbsolutePath = (input) => (0, import_path3.dirname)(require.resolve((0, import_path3.join)(input, "package.json")));
 var maybeGetAbsolutePath = (input) => {
   try {
@@ -339,8 +340,8 @@ var iframe_rsbuild_config_default = async (options) => {
     options.presets.apply("build"),
     presets.apply("tags", {})
   ]);
-  const { rsbuildConfigPath } = await (0, import_core_common2.getBuilderOptions)(options);
-  const stories = (0, import_core_common2.normalizeStories)(nonNormalizedStories, {
+  const { rsbuildConfigPath } = await (0, import_common2.getBuilderOptions)(options);
+  const stories = (0, import_common2.normalizeStories)(nonNormalizedStories, {
     configDir: options.configDir,
     workingDir
   });
@@ -405,7 +406,7 @@ var iframe_rsbuild_config_default = async (options) => {
         main: [...entries ?? [], ...dynamicEntries]
       },
       define: {
-        ...(0, import_core_common2.stringifyProcessEnvs)(envs),
+        ...(0, import_common2.stringifyProcessEnvs)(envs),
         NODE_ENV: JSON.stringify(process.env.NODE_ENV)
       }
     },
@@ -417,9 +418,17 @@ var iframe_rsbuild_config_default = async (options) => {
         }
       }
     },
-    plugins: [shouldCheckTs ? (0, import_plugin_type_check.pluginTypeCheck)(tsCheckOptions) : null].filter(
-      Boolean
-    ),
+    plugins: [
+      shouldCheckTs ? (0, import_plugin_type_check.pluginTypeCheck)(tsCheckOptions) : null,
+      (0, import_rsbuild_plugin_html_minifier_terser.pluginHtmlMinifierTerser)({
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: false,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true
+      })
+    ].filter(Boolean),
     tools: {
       rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
         addRules({
@@ -433,7 +442,7 @@ var iframe_rsbuild_config_default = async (options) => {
           ]
         });
         config.resolve ??= {};
-        config.resolve.symlinks = !(0, import_core_common2.isPreservingSymlinks)();
+        config.resolve.symlinks = !(0, import_common2.isPreservingSymlinks)();
         config.watchOptions = {
           ignored: /node_modules/
         };
@@ -458,6 +467,10 @@ var iframe_rsbuild_config_default = async (options) => {
         config.optimization.runtimeChunk = true;
         config.optimization.usedExports = options.build?.test?.disableTreeShaking ? false : isProd;
         config.optimization.moduleIds = "named";
+        config.module ??= {};
+        config.module.parser ??= {};
+        config.module.parser.javascript ??= {};
+        config.module.parser.javascript.exportsPresence = false;
         appendPlugins(
           [
             new rspack.ProvidePlugin({
@@ -494,14 +507,6 @@ var iframe_rsbuild_config_default = async (options) => {
           },
           headHtmlSnippet,
           bodyHtmlSnippet
-        },
-        minify: {
-          collapseWhitespace: true,
-          removeComments: true,
-          removeRedundantAttributes: true,
-          removeScriptTypeAttributes: false,
-          removeStyleLinkTypeAttributes: true,
-          useShortDoctype: true
         }
       }
     }
@@ -509,10 +514,50 @@ var iframe_rsbuild_config_default = async (options) => {
   return merged;
 };
 
+// src/index.ts
+var import_core_path = require("storybook/core-path");
+
+// src/react-shims.ts
+var import_path4 = require("path");
+var import_promises = require("fs/promises");
+var getIsReactVersion18or19 = async (options) => {
+  const { legacyRootApi } = await options.presets.apply(
+    "frameworkOptions"
+  ) || {};
+  if (legacyRootApi) {
+    return false;
+  }
+  const resolvedReact = await options.presets.apply(
+    "resolvedReact",
+    {}
+  );
+  const reactDom = resolvedReact.reactDom || (0, import_path4.dirname)(require.resolve("react-dom/package.json"));
+  if (!(0, import_path4.isAbsolute)(reactDom)) {
+    return false;
+  }
+  const { version } = JSON.parse(
+    await (0, import_promises.readFile)((0, import_path4.join)(reactDom, "package.json"), "utf-8")
+  );
+  return version.startsWith("18") || version.startsWith("19") || version.startsWith("0.0.0");
+};
+var applyReactShims = async (config, options) => {
+  const isReactVersion18 = await getIsReactVersion18or19(options);
+  if (isReactVersion18) {
+    return void 0;
+  }
+  return {
+    source: {
+      alias: {
+        "@storybook/react-dom-shim": "@storybook/react-dom-shim/dist/react-16"
+      }
+    }
+  };
+};
+
 // src/index.ts
 var import_pretty_hrtime = __toESM(require_pretty_hrtime());
+var import_core2 = require("@rsbuild/core");
 var printDuration = (startTime) => (0, import_pretty_hrtime.default)(process.hrtime(startTime)).replace(" ms", " milliseconds").replace(" s", " seconds").replace(" m", " minutes");
-var getAbsolutePath2 = (input) => (0, import_path4.dirname)(require.resolve((0, import_path4.join)(input, "package.json")));
 var executor = {
   get: async (options) => {
     const rsbuildInstance = await options.presets.apply("rsbuildInstance") || rsbuildReal;
@@ -520,14 +565,19 @@ var executor = {
   }
 };
 var rsbuild = async (_, options) => {
-  const defaultConfig = await iframe_rsbuild_config_default(options);
   const { presets } = options;
+  let defaultConfig = await iframe_rsbuild_config_default(options);
+  const shimsConfig = await applyReactShims(defaultConfig, options);
+  defaultConfig = (0, import_core2.mergeRsbuildConfig)(
+    defaultConfig,
+    shimsConfig
+  );
   const finalDefaultConfig = await presets.apply(
     "rsbuildFinal",
     defaultConfig,
     options
   );
-  return finalDefaultConfig;
+  return (0, import_core2.mergeRsbuildConfig)(finalDefaultConfig);
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -585,8 +635,8 @@ var start = async ({
       error: new Error(`Missing Rsbuild build instance at runtime!`)
     });
   }
-  const previewResolvedDir = getAbsolutePath2("@storybook/preview");
-  const previewDirOrigin = (0, import_path4.join)(previewResolvedDir, "dist");
+  const previewResolvedDir = (0, import_path5.join)(import_core_path.corePath, "dist/preview");
+  const previewDirOrigin = previewResolvedDir;
   router.use(
     `/sb-preview`,
     import_express.default.static(previewDirOrigin, { immutable: true, maxAge: "5m" })
@@ -607,16 +657,16 @@ var build = async ({ options }) => {
     cwd: process.cwd(),
     rsbuildConfig: config
   });
-  const previewResolvedDir = getAbsolutePath2("@storybook/preview");
-  const previewDirOrigin = (0, import_path4.join)(previewResolvedDir, "dist");
-  const previewDirTarget = (0, import_path4.join)(options.outputDir || "", `sb-preview`);
+  const previewResolvedDir = (0, import_path5.join)(import_core_path.corePath, "dist/preview");
+  const previewDirOrigin = previewResolvedDir;
+  const previewDirTarget = (0, import_path5.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_path4.parse)(src);
+      const { ext } = (0, import_path5.parse)(src);
       if (ext) {
         return ext === ".js";
       }
@@ -629,7 +679,7 @@ var build = async ({ options }) => {
   await Promise.all([rsbuildBuild.build(), previewFiles]);
   return stats;
 };
-var corePresets = [(0, import_path4.join)(__dirname, "./preview-preset.js")];
+var corePresets = [(0, import_path5.join)(__dirname, "./preview-preset.js")];
 var previewMainTemplate = () => require.resolve("storybook-builder-rsbuild/templates/preview.ejs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,18 +1,21 @@
 import { __commonJS, __toESM, __require } from './chunk-TTFRSOOU.mjs';
 import * as rsbuildReal from '@rsbuild/core';
-import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core';
-import path, { join, resolve, parse, dirname } from 'path';
+import { mergeRsbuildConfig, loadConfig } from '@rsbuild/core';
+import path, { join, resolve, parse, dirname, isAbsolute } from 'path';
 import express from 'express';
 import fs2 from 'fs-extra';
-import { WebpackInvocationError } from '@storybook/core-events/server-errors';
+import { WebpackInvocationError } from 'storybook/internal/server-errors';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import { globalsNameReferenceMap } from '@storybook/preview/globals';
-import { normalizeStories, loadPreviewOrConfigFile, handlebars, readTemplate, getBuilderOptions, stringifyProcessEnvs, isPreservingSymlinks } from '@storybook/core-common';
+import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
+import { normalizeStories, loadPreviewOrConfigFile, handlebars, readTemplate, getBuilderOptions, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
 import { dedent } from 'ts-dedent';
 import fs from 'fs';
 import { webpackIncludeRegexp } from '@storybook/core-webpack';
 import { webpack } from '@storybook/addon-docs/dist/preset';
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
+import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser';
+import { corePath } from 'storybook/core-path';
+import { readFile } from 'fs/promises';
 
 // ../../node_modules/.pnpm/pretty-hrtime@1.0.3/node_modules/pretty-hrtime/index.js
 var require_pretty_hrtime = __commonJS({
@@ -356,9 +359,17 @@ var iframe_rsbuild_config_default = async (options) => {
         }
       }
     },
-    plugins: [shouldCheckTs ? pluginTypeCheck(tsCheckOptions) : null].filter(
-      Boolean
-    ),
+    plugins: [
+      shouldCheckTs ? pluginTypeCheck(tsCheckOptions) : null,
+      pluginHtmlMinifierTerser({
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: false,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true
+      })
+    ].filter(Boolean),
     tools: {
       rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
         addRules({
@@ -399,6 +410,10 @@ var iframe_rsbuild_config_default = async (options) => {
         config.optimization.runtimeChunk = true;
         config.optimization.usedExports = options.build?.test?.disableTreeShaking ? false : isProd;
         config.optimization.moduleIds = "named";
+        config.module ??= {};
+        config.module.parser ??= {};
+        config.module.parser.javascript ??= {};
+        config.module.parser.javascript.exportsPresence = false;
         appendPlugins(
           [
             new rspack.ProvidePlugin({
@@ -435,25 +450,49 @@ var iframe_rsbuild_config_default = async (options) => {
           },
           headHtmlSnippet,
           bodyHtmlSnippet
-        },
-        minify: {
-          collapseWhitespace: true,
-          removeComments: true,
-          removeRedundantAttributes: true,
-          removeScriptTypeAttributes: false,
-          removeStyleLinkTypeAttributes: true,
-          useShortDoctype: true
         }
       }
     }
   });
   return merged;
 };
+var getIsReactVersion18or19 = async (options) => {
+  const { legacyRootApi } = await options.presets.apply(
+    "frameworkOptions"
+  ) || {};
+  if (legacyRootApi) {
+    return false;
+  }
+  const resolvedReact = await options.presets.apply(
+    "resolvedReact",
+    {}
+  );
+  const reactDom = resolvedReact.reactDom || dirname(__require.resolve("react-dom/package.json"));
+  if (!isAbsolute(reactDom)) {
+    return false;
+  }
+  const { version } = JSON.parse(
+    await readFile(join(reactDom, "package.json"), "utf-8")
+  );
+  return version.startsWith("18") || version.startsWith("19") || version.startsWith("0.0.0");
+};
+var applyReactShims = async (config, options) => {
+  const isReactVersion18 = await getIsReactVersion18or19(options);
+  if (isReactVersion18) {
+    return void 0;
+  }
+  return {
+    source: {
+      alias: {
+        "@storybook/react-dom-shim": "@storybook/react-dom-shim/dist/react-16"
+      }
+    }
+  };
+};
 
 // src/index.ts
 var import_pretty_hrtime = __toESM(require_pretty_hrtime());
 var printDuration = (startTime) => (0, import_pretty_hrtime.default)(process.hrtime(startTime)).replace(" ms", " milliseconds").replace(" s", " seconds").replace(" m", " minutes");
-var getAbsolutePath2 = (input) => dirname(__require.resolve(join(input, "package.json")));
 var executor = {
   get: async (options) => {
     const rsbuildInstance = await options.presets.apply("rsbuildInstance") || rsbuildReal;
@@ -461,14 +500,19 @@ var executor = {
   }
 };
 var rsbuild = async (_, options) => {
-  const defaultConfig = await iframe_rsbuild_config_default(options);
   const { presets } = options;
+  let defaultConfig = await iframe_rsbuild_config_default(options);
+  const shimsConfig = await applyReactShims(defaultConfig, options);
+  defaultConfig = mergeRsbuildConfig(
+    defaultConfig,
+    shimsConfig
+  );
   const finalDefaultConfig = await presets.apply(
     "rsbuildFinal",
     defaultConfig,
     options
   );
-  return finalDefaultConfig;
+  return mergeRsbuildConfig(finalDefaultConfig);
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -526,8 +570,8 @@ var start = async ({
       error: new Error(`Missing Rsbuild build instance at runtime!`)
     });
   }
-  const previewResolvedDir = getAbsolutePath2("@storybook/preview");
-  const previewDirOrigin = join(previewResolvedDir, "dist");
+  const previewResolvedDir = join(corePath, "dist/preview");
+  const previewDirOrigin = previewResolvedDir;
   router.use(
     `/sb-preview`,
     express.static(previewDirOrigin, { immutable: true, maxAge: "5m" })
@@ -548,8 +592,8 @@ var build = async ({ options }) => {
     cwd: process.cwd(),
     rsbuildConfig: config
   });
-  const previewResolvedDir = getAbsolutePath2("@storybook/preview");
-  const previewDirOrigin = join(previewResolvedDir, "dist");
+  const previewResolvedDir = join(corePath, "dist/preview");
+  const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || "", `sb-preview`);
   let stats;
   rsbuildBuild.onAfterBuild((params) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-builder-rsbuild",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Rsbuild builder for Storybook",
   "keywords": [
     "storybook",
@@ -56,18 +56,9 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@rsbuild/plugin-type-check": "0.7.9",
-    "@storybook/addon-docs": "^8.0.10",
-    "@storybook/channels": "^8.0.10",
-    "@storybook/client-logger": "^8.0.10",
-    "@storybook/core-common": "^8.0.10",
-    "@storybook/core-events": "^8.0.10",
-    "@storybook/core-webpack": "^8.0.10",
-    "@storybook/node-logger": "^8.0.10",
-    "@storybook/preview": "^8.0.10",
-    "@storybook/preview-api": "^8.0.10",
-    "@storybook/react-dom-shim": "^8.0.10",
-    "@storybook/types": "^8.0.10",
+    "@rsbuild/plugin-type-check": "1.0.0-alpha.9",
+    "@storybook/addon-docs": "^8.2.1",
+    "@storybook/core-webpack": "^8.2.1",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "cjs-module-lexer": "^1.2.3",
@@ -79,6 +70,7 @@
     "magic-string": "^0.30.5",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
+    "rsbuild-plugin-html-minifier-terser": "^1.1.0",
     "style-loader": "^3.3.1",
     "ts-dedent": "^2.2.0",
     "url": "^0.11.0",
@@ -86,7 +78,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@rsbuild/core": "0.7.9",
+    "@rsbuild/core": "1.0.0-alpha.9",
     "@types/express": "^4.17.21",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.0.0",
@@ -94,10 +86,12 @@
     "add": "^2.0.6",
     "pretty-hrtime": "^1.0.3",
     "slash": "^5.0.0",
+    "storybook": "8.2.1",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@rsbuild/core": ">= 0.7.0"
+    "@rsbuild/core": ">= 1.0.0-alpha.9",
+    "storybook": "^8.2.1"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/templates/virtualModuleModernEntry.js.handlebars

@@ -1,7 +1,7 @@
 import { global } from '@storybook/global';
 
-import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api';
-import { createBrowserChannel } from '@storybook/channels';
+import { ClientApi, PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api';
+import { createBrowserChannel } from 'storybook/internal/channels';
 
 import { importFn } from './{{storiesFilename}}';