@modern-js/storybook-builder 2.49.4 → 2.51.0

package/dist/cjs/build.js

@@ -35,8 +35,6 @@ __export(build_exports, {
 });
 module.exports = __toCommonJS(build_exports);
 var import_path = require("path");
-var import_webpack_dev_middleware = __toESM(require("webpack-dev-middleware"));
-var import_webpack_hot_middleware = __toESM(require("webpack-hot-middleware"));
 var import_serve_static = __toESM(require("serve-static"));
 var import_utils = require("@modern-js/utils");
 var import_core = require("./core");
@@ -48,7 +46,7 @@ const getConfig = async (options) => {
 };
 const build = async ({ options }) => {
   const config = await getConfig(options);
-  const compiler = await (0, import_core.getCompiler)(process.cwd(), config, options);
+  const builder = await (0, import_core.createBuilder)(process.cwd(), config, options);
   const previewResolvedDir = (0, import_path.dirname)(require.resolve("@storybook/preview/package.json"));
   const previewDirOrigin = (0, import_path.join)(previewResolvedDir, "dist");
   const previewDirTarget = (0, import_path.join)(options.outputDir || "", `sb-preview`);
@@ -61,22 +59,18 @@ const build = async ({ options }) => {
       return true;
     }
   });
-  const compilation = new Promise((resolve, reject) => {
-    compiler.run((err, stats2) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(stats2);
-      }
-    });
+  let stats;
+  builder.onAfterBuild((params) => {
+    stats = params.stats;
   });
-  const [stats] = await Promise.all([
-    compilation,
+  await Promise.all([
+    builder.build(),
     previewFiles
   ]);
   return stats;
 };
-const start = async ({ options, router, startTime }) => {
+let server;
+const start = async ({ options, router, startTime, server: storybookServer }) => {
   const previewResolvedDir = (0, import_path.dirname)(require.resolve("@storybook/preview/package.json"));
   const previewDirOrigin = (0, import_path.join)(previewResolvedDir, "dist");
   router.use(`/sb-preview`, (0, import_serve_static.default)(previewDirOrigin, {
@@ -84,28 +78,21 @@ const start = async ({ options, router, startTime }) => {
     maxAge: "5m"
   }));
   const config = await getConfig(options);
-  const compiler = await (0, import_core.getCompiler)(process.cwd(), config, options);
-  const middleware = (0, import_webpack_dev_middleware.default)(compiler, {
-    writeToDisk: false,
-    // builder can log errors, so not using dev-middleware logs
-    stats: false
-  });
-  router.use(middleware);
-  router.use((0, import_webpack_hot_middleware.default)(compiler, {
-    log: false
-  }));
-  const stats = await new Promise((resolve) => {
-    middleware.waitUntilValid((stats2) => {
+  const builder = await (0, import_core.createBuilder)(process.cwd(), config, options);
+  const waitFirstCompileDone = new Promise((resolve) => {
+    builder.onDevCompileDone(({ stats: stats2, isFirstCompile }) => {
+      if (!isFirstCompile) {
+        return;
+      }
       resolve(stats2);
     });
   });
-  if (!stats) {
-    throw new Error("build failed");
-  }
-  const statsJson = stats.toJson();
-  if (statsJson.errors.length > 1) {
-    throw stats;
-  }
+  const rsbuildServer = await builder.createDevServer();
+  server = rsbuildServer;
+  router.use(rsbuildServer.middlewares);
+  storybookServer.on("upgrade", rsbuildServer.onHTTPUpgrade);
+  await rsbuildServer.afterListen();
+  const stats = await waitFirstCompileDone;
   return {
     bail,
     stats,
@@ -114,6 +101,7 @@ const start = async ({ options, router, startTime }) => {
 };
 const bail = async () => {
   await (0, import_plugin_storybook.finalize)();
+  await (server === null || server === void 0 ? void 0 : server.close());
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/core.js

@@ -18,7 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var core_exports = {};
 __export(core_exports, {
-  getCompiler: () => getCompiler
+  createBuilder: () => createBuilder
 });
 module.exports = __toCommonJS(core_exports);
 var import_uni_builder = require("@modern-js/uni-builder");
@@ -26,7 +26,7 @@ var import_core = require("@rsbuild/core");
 var import_core2 = require("@modern-js/core");
 var import_utils = require("./utils");
 var import_plugin_storybook = require("./plugin-storybook");
-async function getCompiler(cwd, builderOptions, options) {
+async function createBuilder(cwd, builderOptions, options) {
   const { bundler } = builderOptions;
   const { presets } = options;
   const entries = await presets.apply("entries", []);
@@ -49,9 +49,9 @@ async function getCompiler(cwd, builderOptions, options) {
     (0, import_plugin_storybook.pluginStorybook)(cwd, options),
     ...finalConfig.builderPlugins || []
   ]);
-  return builder.createCompiler();
+  return builder;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getCompiler
+  createBuilder
 });

package/dist/cjs/plugin-storybook.js

@@ -74,7 +74,8 @@ const pluginStorybook = (cwd, options) => {
         await applyDefines(builderConfig, options);
         await applyHTML(builderConfig, options);
         await applyReact(builderConfig, options);
-        applyExternals(builderConfig);
+        applyOutput(builderConfig);
+        applyServerConfig(builderConfig, options);
       });
       const modifyConfig = async (config) => {
         var _config;
@@ -250,7 +251,20 @@ async function applyMdxLoader(config, options) {
     ]
   });
 }
-function applyExternals(builderConfig) {
+function applyServerConfig(builderConfig, options) {
+  var _builderConfig;
+  var _server;
+  (_server = (_builderConfig = builderConfig).server) !== null && _server !== void 0 ? _server : _builderConfig.server = {};
+  builderConfig.server = {
+    ...builderConfig.server || {},
+    port: options.port,
+    host: "localhost",
+    htmlFallback: false,
+    strictPort: true,
+    printUrls: false
+  };
+}
+function applyOutput(builderConfig) {
   var _builderConfig_output;
   const config = (0, import_core.mergeRsbuildConfig)({
     output: {
@@ -259,7 +273,9 @@ function applyExternals(builderConfig) {
     }
   }, {
     output: {
-      externals: import_globals.globalsNameReferenceMap
+      externals: import_globals.globalsNameReferenceMap,
+      // storybook will generator other files in other pipeline
+      cleanDistPath: false
     }
   });
   builderConfig.output = config.output;

package/dist/cjs/preset.js

@@ -34,7 +34,6 @@ __export(preset_exports, {
 });
 module.exports = __toCommonJS(preset_exports);
 var import_path = require("path");
-var import_build = require("./build");
 var import_utils = require("./utils");
 const previewMainTemplate = () => {
   return require.resolve("@modern-js/storybook-builder/templates/preview.ejs");
@@ -42,15 +41,8 @@ const previewMainTemplate = () => {
 function getStoriesConfigPath(cwd) {
   return (0, import_path.resolve)((0, import_path.join)(cwd, import_utils.STORYBOOK_CONFIG_ENTRY));
 }
-const entries = async (_, options) => {
+const entries = async (_) => {
   const result = [];
-  const { bundler } = await (0, import_build.getConfig)(options);
-  if (options.configType === "DEVELOPMENT") {
-    result.push(...[
-      `${require.resolve("webpack-hot-middleware/client")}?reload=true&quiet=false&noInfo=${options.quiet}`,
-      bundler === "rspack" ? require.resolve("@rspack/plugin-react-refresh/react-refresh-entry") : null
-    ].filter(Boolean));
-  }
   result.push(getStoriesConfigPath(process.cwd()));
   return result;
 };

package/dist/esm/build.js

@@ -1,9 +1,7 @@
 import { dirname, join, parse } from "path";
-import webpackDevMiddleware from "webpack-dev-middleware";
-import webpackHotMiddleware from "webpack-hot-middleware";
 import serveStatic from "serve-static";
 import { fs } from "@modern-js/utils";
-import { getCompiler } from "./core";
+import { createBuilder } from "./core";
 import { finalize } from "./plugin-storybook";
 const getConfig = async (options) => {
   const { presets } = options;
@@ -12,7 +10,7 @@ const getConfig = async (options) => {
 };
 const build = async ({ options }) => {
   const config = await getConfig(options);
-  const compiler = await getCompiler(process.cwd(), config, options);
+  const builder = await createBuilder(process.cwd(), config, options);
   const previewResolvedDir = dirname(
     require.resolve("@storybook/preview/package.json")
   );
@@ -27,22 +25,19 @@ const build = async ({ options }) => {
       return true;
     }
   });
-  const compilation = new Promise((resolve, reject) => {
-    compiler.run((err, stats2) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(stats2);
-      }
-    });
+  let stats;
+  builder.onAfterBuild((params) => {
+    stats = params.stats;
   });
-  const [stats] = await Promise.all([compilation, previewFiles]);
+  await Promise.all([builder.build(), previewFiles]);
   return stats;
 };
+let server;
 const start = async ({
   options,
   router,
-  startTime
+  startTime,
+  server: storybookServer
 }) => {
   const previewResolvedDir = dirname(
     require.resolve("@storybook/preview/package.json")
@@ -53,26 +48,21 @@ const start = async ({
     serveStatic(previewDirOrigin, { immutable: true, maxAge: "5m" })
   );
   const config = await getConfig(options);
-  const compiler = await getCompiler(process.cwd(), config, options);
-  const middleware = webpackDevMiddleware(compiler, {
-    writeToDisk: false,
-    // builder can log errors, so not using dev-middleware logs
-    stats: false
-  });
-  router.use(middleware);
-  router.use(webpackHotMiddleware(compiler, { log: false }));
-  const stats = await new Promise((resolve) => {
-    middleware.waitUntilValid((stats2) => {
+  const builder = await createBuilder(process.cwd(), config, options);
+  const waitFirstCompileDone = new Promise((resolve) => {
+    builder.onDevCompileDone(({ stats: stats2, isFirstCompile }) => {
+      if (!isFirstCompile) {
+        return;
+      }
       resolve(stats2);
     });
   });
-  if (!stats) {
-    throw new Error("build failed");
-  }
-  const statsJson = stats.toJson();
-  if (statsJson.errors.length > 1) {
-    throw stats;
-  }
+  const rsbuildServer = await builder.createDevServer();
+  server = rsbuildServer;
+  router.use(rsbuildServer.middlewares);
+  storybookServer.on("upgrade", rsbuildServer.onHTTPUpgrade);
+  await rsbuildServer.afterListen();
+  const stats = await waitFirstCompileDone;
   return {
     bail,
     stats,
@@ -81,6 +71,7 @@ const start = async ({
 };
 const bail = async () => {
   await finalize();
+  await (server == null ? void 0 : server.close());
 };
 export {
   bail,

package/dist/esm/core.js

@@ -3,7 +3,7 @@ import { mergeRsbuildConfig } from "@rsbuild/core";
 import { loadConfig } from "@modern-js/core";
 import { getConfigFileName, runWithErrorMsg } from "./utils";
 import { pluginStorybook, addonBabelAdapter } from "./plugin-storybook";
-async function getCompiler(cwd, builderOptions, options) {
+async function createBuilder(cwd, builderOptions, options) {
   const { bundler } = builderOptions;
   const { presets } = options;
   const entries = await presets.apply("entries", []);
@@ -32,8 +32,8 @@ async function getCompiler(cwd, builderOptions, options) {
     pluginStorybook(cwd, options),
     ...finalConfig.builderPlugins || []
   ]);
-  return builder.createCompiler();
+  return builder;
 }
 export {
-  getCompiler
+  createBuilder
 };

package/dist/esm/plugin-storybook.js

@@ -62,7 +62,8 @@ const pluginStorybook = (cwd, options) => {
         await applyDefines(builderConfig, options);
         await applyHTML(builderConfig, options);
         await applyReact(builderConfig, options);
-        applyExternals(builderConfig);
+        applyOutput(builderConfig);
+        applyServerConfig(builderConfig, options);
       });
       const modifyConfig = async (config) => {
         var _a;
@@ -252,7 +253,19 @@ async function applyMdxLoader(config, options) {
     }
   );
 }
-function applyExternals(builderConfig) {
+function applyServerConfig(builderConfig, options) {
+  var _a;
+  (_a = builderConfig.server) != null ? _a : builderConfig.server = {};
+  builderConfig.server = {
+    ...builderConfig.server || {},
+    port: options.port,
+    host: "localhost",
+    htmlFallback: false,
+    strictPort: true,
+    printUrls: false
+  };
+}
+function applyOutput(builderConfig) {
   var _a;
   const config = mergeRsbuildConfig(
     {
@@ -263,7 +276,9 @@ function applyExternals(builderConfig) {
     },
     {
       output: {
-        externals: globalsNameReferenceMap
+        externals: globalsNameReferenceMap,
+        // storybook will generator other files in other pipeline
+        cleanDistPath: false
       }
     }
   );

package/dist/esm/preset.js

@@ -1,5 +1,4 @@
 import { join, resolve } from "path";
-import { getConfig } from "./build";
 import { STORYBOOK_CONFIG_ENTRY } from "./utils";
 const previewMainTemplate = () => {
   return require.resolve("@modern-js/storybook-builder/templates/preview.ejs");
@@ -7,17 +6,8 @@ const previewMainTemplate = () => {
 function getStoriesConfigPath(cwd) {
   return resolve(join(cwd, STORYBOOK_CONFIG_ENTRY));
 }
-const entries = async (_, options) => {
+const entries = async (_) => {
   const result = [];
-  const { bundler } = await getConfig(options);
-  if (options.configType === "DEVELOPMENT") {
-    result.push(
-      ...[
-        `${require.resolve("webpack-hot-middleware/client")}?reload=true&quiet=false&noInfo=${options.quiet}`,
-        bundler === "rspack" ? require.resolve("@rspack/plugin-react-refresh/react-refresh-entry") : null
-      ].filter(Boolean)
-    );
-  }
   result.push(getStoriesConfigPath(process.cwd()));
   return result;
 };

package/dist/types/core.d.ts

@@ -1,4 +1,4 @@
+import { UniBuilderInstance } from '@modern-js/uni-builder';
 import type { Options } from '@storybook/types';
-import type { Compiler } from 'webpack-dev-middleware';
 import type { BuilderOptions } from './types';
-export declare function getCompiler(cwd: string, builderOptions: BuilderOptions, options: Options): Promise<Compiler>;
+export declare function createBuilder(cwd: string, builderOptions: BuilderOptions, options: Options): Promise<UniBuilderInstance>;

package/dist/types/preset.d.ts

@@ -1,5 +1,5 @@
 import type { Options } from '@storybook/types';
 import type { UniBuilderConfig } from '@modern-js/uni-builder';
 export declare const previewMainTemplate: () => string;
-export declare const entries: (_: unknown, options: Options) => Promise<string[]>;
+export declare const entries: (_: unknown) => Promise<string[]>;
 export declare const modern: (builderConfig: UniBuilderConfig, options: Options) => UniBuilderConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/storybook-builder",
-  "version": "2.49.4",
+  "version": "2.51.0",
   "description": "modern.js support for storybook",
   "repository": {
     "type": "git",
@@ -51,9 +51,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@rsbuild/shared": "0.6.15",
-    "@rsbuild/core": "0.6.15",
-    "@rspack/plugin-react-refresh": "0.4.5",
+    "@rsbuild/shared": "0.7.1",
+    "@rsbuild/core": "0.7.1",
     "@storybook/components": "~7.6.12",
     "@storybook/core-common": "~7.6.12",
     "@storybook/csf-plugin": "~7.6.12",
@@ -72,21 +71,18 @@
     "remark-slug": "^7.0.1",
     "serve-static": "^1.14.1",
     "tinypool": "^0.8.0",
-    "webpack-dev-middleware": "6.1.3",
-    "webpack-hot-middleware": "^2.25.4",
-    "@modern-js/uni-builder": "2.49.4",
-    "@modern-js/core": "2.49.4",
-    "@modern-js/runtime": "2.49.4",
-    "@modern-js/utils": "2.49.4"
+    "@modern-js/uni-builder": "2.51.0",
+    "@modern-js/core": "2.51.0",
+    "@modern-js/runtime": "2.51.0",
+    "@modern-js/utils": "2.51.0"
   },
   "devDependencies": {
     "@storybook/types": "~7.6.12",
     "@types/babel__core": "^7.20.1",
     "@types/serve-static": "^1.13.10",
-    "@types/webpack-hot-middleware": "^2.25.6",
     "typescript": "^5.2.2",
-    "@scripts/build": "2.49.4",
-    "@modern-js/core": "2.49.4"
+    "@modern-js/core": "2.51.0",
+    "@scripts/build": "2.51.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",