storybook-builder-rsbuild 0.1.0 → 0.1.1

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/internal/types';
+import { TypescriptOptions as TypescriptOptions$1, Builder, Options, StorybookConfigRaw, BuilderResult as BuilderResult$1, NormalizedStoriesSpecifier } from 'storybook/internal/types';
 import { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check';
 
 type RsbuildStats = {
@@ -19,6 +19,7 @@ type RsbuildBuilder = Builder<RsbuildConfig, RsbuildStats>;
 type RsbuildFinal = (config: RsbuildConfig, options: Options) => RsbuildConfig | Promise<RsbuildConfig>;
 type StorybookConfigRsbuild = {
     rsbuildFinal?: RsbuildFinal;
+    webpackAddons?: StorybookConfigRaw['addons'];
 };
 type BuilderOptions = {
     /**
@@ -42,10 +43,6 @@ interface BuilderResult extends BuilderResult$1 {
     stats?: Stats;
 }
 
-type RsbuildBuilderOptions = Options & {
-    typescriptOptions: TypescriptOptions;
-};
-
 declare const getVirtualModules: (options: Options) => Promise<{
     virtualModules: Record<string, string>;
     entries: string[];
@@ -66,7 +63,6 @@ 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 getConfig: RsbuildBuilder['getConfig'];
 declare function bail(): Promise<void>;
 declare const start: RsbuildBuilder['start'];
@@ -74,4 +70,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, rsbuild, start, toImportFn, toImportFnPart };
+export { BuilderOptions, BuilderResult, RsbuildBuilder, RsbuildFinal, Stats, StorybookConfigRsbuild, TypescriptOptions, bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, start, toImportFn, toImportFnPart };

package/dist/index.js

@@ -114,7 +114,6 @@ __export(src_exports, {
   importPipeline: () => importPipeline,
   previewMainTemplate: () => previewMainTemplate,
   printDuration: () => printDuration,
-  rsbuild: () => rsbuild,
   start: () => start,
   toImportFn: () => toImportFn,
   toImportFnPart: () => toImportFnPart
@@ -128,6 +127,7 @@ var import_express = __toESM(require("express"));
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_pretty_hrtime = __toESM(require_pretty_hrtime());
 var import_core_path = require("storybook/core-path");
+var import_common3 = require("storybook/internal/common");
 var import_server_errors = require("storybook/internal/server-errors");
 
 // src/preview/iframe-rsbuild.config.ts
@@ -301,7 +301,7 @@ var storybookPaths = {
   ...routerPath ? { "@storybook/router": routerPath } : {},
   ...themingPath ? { "@storybook/theming": themingPath } : {}
 };
-var iframe_rsbuild_config_default = async (options) => {
+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 {
@@ -411,7 +411,7 @@ var iframe_rsbuild_config_default = async (options) => {
   contentFromConfig.source ??= {};
   contentFromConfig.source.entry = {};
   const resourceFilename = isProd ? "static/media/[name].[contenthash:8][ext]" : "static/media/[path][name][ext]";
-  const merged = (0, import_core.mergeRsbuildConfig)(contentFromConfig, {
+  const rsbuildConfig = (0, import_core.mergeRsbuildConfig)(contentFromConfig, {
     output: {
       cleanDistPath: false,
       assetPrefix: "/",
@@ -539,7 +539,7 @@ var iframe_rsbuild_config_default = async (options) => {
           ...config.experiments,
           ...lazyCompilationConfig
         };
-        return mergeConfig(config, appliedDocsWebpack);
+        return mergeConfig(config, extraWebpackConfig, appliedDocsWebpack);
       },
       htmlPlugin: {
         filename: "iframe.html",
@@ -571,7 +571,7 @@ var iframe_rsbuild_config_default = async (options) => {
       }
     }
   });
-  return merged;
+  return rsbuildConfig;
 };
 
 // src/react-shims.ts
@@ -619,9 +619,41 @@ var executor = {
     return rsbuildInstance;
   }
 };
+var isObject = (val) => val != null && typeof val === "object" && Array.isArray(val) === false;
+function nonNullables(value) {
+  return value !== void 0;
+}
 var rsbuild = async (_, options) => {
   const { presets } = options;
-  let defaultConfig = await iframe_rsbuild_config_default(options);
+  const webpackAddons = await presets.apply("webpackAddons");
+  const resolvedWebpackAddons = (webpackAddons ?? []).map((preset) => {
+    const options2 = isObject(preset) ? preset.options || void 0 : void 0;
+    const name = isObject(preset) ? preset.name : preset;
+    return (0, import_common3.resolveAddonName)(options2.configDir, name, options2);
+  }).filter(nonNullables);
+  const { apply } = await (0, import_common3.getPresets)(resolvedWebpackAddons, options);
+  const webpackAddonsConfig = await apply(
+    "webpackFinal",
+    // TODO: using empty webpack config as base for now. It's better to using the composed rspack
+    // config in `iframe-rsbuild.config.ts` as base config. But when `tools.rspack` is an async function,
+    // the following `tools.rspack` raise an ` Promises are not supported` error.
+    {
+      output: {},
+      module: {},
+      plugins: [],
+      resolve: {},
+      devServer: {},
+      optimization: {},
+      performance: {},
+      externals: {},
+      experiments: {},
+      node: {},
+      stats: {},
+      entry: {}
+    },
+    options
+  );
+  let defaultConfig = await iframe_rsbuild_config_default(options, webpackAddonsConfig);
   const shimsConfig = await applyReactShims(defaultConfig, options);
   defaultConfig = (0, import_core2.mergeRsbuildConfig)(
     defaultConfig,
@@ -632,7 +664,7 @@ var rsbuild = async (_, options) => {
     defaultConfig,
     options
   );
-  return (0, import_core2.mergeRsbuildConfig)(finalDefaultConfig);
+  return finalDefaultConfig;
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -759,7 +791,6 @@ function getRandomPort(host) {
   importPipeline,
   previewMainTemplate,
   printDuration,
-  rsbuild,
   start,
   toImportFn,
   toImportFnPart

package/dist/index.mjs

@@ -6,12 +6,12 @@ import { mergeRsbuildConfig, loadConfig } from '@rsbuild/core';
 import express from 'express';
 import fs2 from 'fs-extra';
 import { corePath } from 'storybook/core-path';
+import { normalizeStories, loadPreviewOrConfigFile, getBuilderOptions, handlebars, 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/dist/preset';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser';
-import { normalizeStories, loadPreviewOrConfigFile, getBuilderOptions, handlebars, readTemplate, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
 import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
 import { dedent } from 'ts-dedent';
 import fs from 'fs';
@@ -244,7 +244,7 @@ var storybookPaths = {
   ...routerPath ? { "@storybook/router": routerPath } : {},
   ...themingPath ? { "@storybook/theming": themingPath } : {}
 };
-var iframe_rsbuild_config_default = async (options) => {
+var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
   const { rsbuildConfigPath, addonDocs } = await getBuilderOptions(options);
   const appliedDocsWebpack = await webpack({}, { ...options, ...addonDocs });
   const {
@@ -354,7 +354,7 @@ var iframe_rsbuild_config_default = async (options) => {
   contentFromConfig.source ??= {};
   contentFromConfig.source.entry = {};
   const resourceFilename = isProd ? "static/media/[name].[contenthash:8][ext]" : "static/media/[path][name][ext]";
-  const merged = mergeRsbuildConfig(contentFromConfig, {
+  const rsbuildConfig = mergeRsbuildConfig(contentFromConfig, {
     output: {
       cleanDistPath: false,
       assetPrefix: "/",
@@ -484,7 +484,7 @@ var iframe_rsbuild_config_default = async (options) => {
           ...config.experiments,
           ...lazyCompilationConfig
         };
-        return mergeConfig(config, appliedDocsWebpack);
+        return mergeConfig(config, extraWebpackConfig, appliedDocsWebpack);
       },
       htmlPlugin: {
         filename: "iframe.html",
@@ -516,7 +516,7 @@ var iframe_rsbuild_config_default = async (options) => {
       }
     }
   });
-  return merged;
+  return rsbuildConfig;
 };
 var getIsReactVersion18or19 = async (options) => {
   const { legacyRootApi } = await options.presets.apply(
@@ -560,9 +560,41 @@ var executor = {
     return rsbuildInstance;
   }
 };
+var isObject = (val) => val != null && typeof val === "object" && Array.isArray(val) === false;
+function nonNullables(value) {
+  return value !== void 0;
+}
 var rsbuild = async (_, options) => {
   const { presets } = options;
-  let defaultConfig = await iframe_rsbuild_config_default(options);
+  const webpackAddons = await presets.apply("webpackAddons");
+  const resolvedWebpackAddons = (webpackAddons ?? []).map((preset) => {
+    const options2 = isObject(preset) ? preset.options || void 0 : void 0;
+    const name = isObject(preset) ? preset.name : preset;
+    return resolveAddonName(options2.configDir, name, options2);
+  }).filter(nonNullables);
+  const { apply } = await getPresets(resolvedWebpackAddons, options);
+  const webpackAddonsConfig = await apply(
+    "webpackFinal",
+    // TODO: using empty webpack config as base for now. It's better to using the composed rspack
+    // config in `iframe-rsbuild.config.ts` as base config. But when `tools.rspack` is an async function,
+    // the following `tools.rspack` raise an ` Promises are not supported` error.
+    {
+      output: {},
+      module: {},
+      plugins: [],
+      resolve: {},
+      devServer: {},
+      optimization: {},
+      performance: {},
+      externals: {},
+      experiments: {},
+      node: {},
+      stats: {},
+      entry: {}
+    },
+    options
+  );
+  let defaultConfig = await iframe_rsbuild_config_default(options, webpackAddonsConfig);
   const shimsConfig = await applyReactShims(defaultConfig, options);
   defaultConfig = mergeRsbuildConfig(
     defaultConfig,
@@ -573,7 +605,7 @@ var rsbuild = async (_, options) => {
     defaultConfig,
     options
   );
-  return mergeRsbuildConfig(finalDefaultConfig);
+  return finalDefaultConfig;
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -690,4 +722,4 @@ function getRandomPort(host) {
   });
 }
 
-export { bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, rsbuild, start, toImportFn, toImportFnPart };
+export { bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, start, toImportFn, toImportFnPart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-builder-rsbuild",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Rsbuild builder for Storybook",
   "keywords": [
     "storybook",
@@ -61,33 +61,30 @@
     "@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",
+    "cjs-module-lexer": "^1.4.1",
     "constants-browserify": "^1.0.0",
-    "css-loader": "^6.11.0",
     "es-module-lexer": "^1.5.4",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "fs-extra": "^11.2.0",
     "magic-string": "^0.30.11",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "rsbuild-plugin-html-minifier-terser": "^1.1.1",
-    "style-loader": "^3.3.4",
     "ts-dedent": "^2.2.0",
     "url": "^0.11.4",
     "util": "^0.12.5",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@rsbuild/core": "1.0.1",
+    "@rsbuild/core": "1.0.8",
     "@types/express": "^4.17.21",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.0.0",
     "@types/pretty-hrtime": "^1.0.3",
-    "add": "^2.0.6",
     "pretty-hrtime": "^1.0.3",
     "slash": "^5.1.0",
-    "storybook": "8.3.0-beta.3",
-    "typescript": "^5.3.2"
+    "storybook": "8.4.0-alpha.0",
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "@rsbuild/core": "^1.0.1",