storybook-builder-rsbuild 0.0.6-beta.1 → 0.0.6-beta.2

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as _storybook_core_webpack from '@storybook/core-webpack';
 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/internal/types';
@@ -54,7 +55,7 @@ type BuilderStartOptions = Parameters<RsbuildBuilder['start']>['0'];
 declare const executor: {
     get: (options: Options) => Promise<typeof rsbuildReal>;
 };
-declare const rsbuild: (_: unknown, options: RsbuildBuilderOptions) => Promise<rsbuildReal.RsbuildConfig>;
+declare const rsbuild: (_: unknown, options: RsbuildBuilderOptions) => Promise<_storybook_core_webpack.WebpackConfiguration>;
 declare const getConfig: RsbuildBuilder['getConfig'];
 declare function bail(): Promise<void>;
 declare const start: RsbuildBuilder['start'];

package/dist/index.js

@@ -121,7 +121,7 @@ __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/internal/server-errors");
@@ -515,7 +515,47 @@ var iframe_rsbuild_config_default = async (options) => {
 
 // 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 config;
+  }
+  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_core_webpack2 = require("@storybook/core-webpack");
 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) => {
@@ -524,14 +564,16 @@ 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_core_webpack2.mergeConfigs)(defaultConfig, shimsConfig);
   const finalDefaultConfig = await presets.apply(
     "rsbuildFinal",
     defaultConfig,
     options
   );
-  return finalDefaultConfig;
+  return (0, import_core_webpack2.mergeConfigs)(finalDefaultConfig, shimsConfig);
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -589,7 +631,7 @@ var start = async ({
       error: new Error(`Missing Rsbuild build instance at runtime!`)
     });
   }
-  const previewResolvedDir = (0, import_path4.join)(import_core_path.corePath, "dist/preview");
+  const previewResolvedDir = (0, import_path5.join)(import_core_path.corePath, "dist/preview");
   const previewDirOrigin = previewResolvedDir;
   router.use(
     `/sb-preview`,
@@ -611,16 +653,16 @@ var build = async ({ options }) => {
     cwd: process.cwd(),
     rsbuildConfig: config
   });
-  const previewResolvedDir = (0, import_path4.join)(import_core_path.corePath, "dist/preview");
+  const previewResolvedDir = (0, import_path5.join)(import_core_path.corePath, "dist/preview");
   const previewDirOrigin = previewResolvedDir;
-  const previewDirTarget = (0, import_path4.join)(options.outputDir || "", `sb-preview`);
+  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";
       }
@@ -633,7 +675,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,7 +1,7 @@
 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 path, { join, resolve, parse, dirname, isAbsolute } from 'path';
 import express from 'express';
 import fs2 from 'fs-extra';
 import { WebpackInvocationError } from 'storybook/internal/server-errors';
@@ -10,11 +10,12 @@ 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 { webpackIncludeRegexp, mergeConfigs } 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({
@@ -454,6 +455,39 @@ var iframe_rsbuild_config_default = async (options) => {
   });
   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 config;
+  }
+  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());
@@ -465,14 +499,16 @@ 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 = mergeConfigs(defaultConfig, shimsConfig);
   const finalDefaultConfig = await presets.apply(
     "rsbuildFinal",
     defaultConfig,
     options
   );
-  return finalDefaultConfig;
+  return mergeConfigs(finalDefaultConfig, shimsConfig);
 };
 var getConfig = async (options) => {
   const { presets } = options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-builder-rsbuild",
-  "version": "0.0.6-beta.1",
+  "version": "0.0.6-beta.2",
   "description": "Rsbuild builder for Storybook",
   "keywords": [
     "storybook",