@modern-js/storybook-builder 0.0.0-next-20240220105216 → 0.0.0-next-20240220122504

package/dist/cjs/build.js

@@ -35,7 +35,7 @@ __export(build_exports, {
 });
 module.exports = __toCommonJS(build_exports);
 var import_path = require("path");
-var import_webpack_dev_middleware = __toESM(require("@rsbuild/shared/webpack-dev-middleware"));
+var import_webpack_dev_middleware = __toESM(require("@modern-js/builder-shared/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");

package/dist/cjs/core.js

@@ -21,8 +21,7 @@ __export(core_exports, {
   getCompiler: () => getCompiler
 });
 module.exports = __toCommonJS(core_exports);
-var import_uni_builder = require("@modern-js/uni-builder");
-var import_shared = require("@rsbuild/shared");
+var import_builder = require("@modern-js/builder");
 var import_core = require("@modern-js/core");
 var import_utils = require("./utils");
 var import_plugin_storybook = require("./plugin-storybook");
@@ -33,14 +32,18 @@ async function getCompiler(cwd, builderOptions, options) {
   const res = await (0, import_utils.runWithErrorMsg)(() => (0, import_core.loadConfig)(cwd, builderOptions.configPath || (0, import_utils.getConfigFileName)()), "Failed to load config");
   const loadedConfig = res ? res.config : {};
   const finalConfig = await presets.apply("modern", loadedConfig) || loadedConfig;
-  const uniBuilderConfig = builderOptions.builderConfig ? (0, import_shared.mergeRsbuildConfig)(finalConfig, builderOptions.builderConfig) : finalConfig || {};
-  const bundlerType = bundler || "webpack";
-  const builder = await (0, import_uni_builder.createUniBuilder)({
-    bundlerType,
+  const provider = await (0, import_utils.getProvider)(bundler, (0, import_builder.mergeBuilderConfig)(finalConfig, builderOptions.builderConfig) || {});
+  if (!provider) {
+    if (bundler) {
+      throw new Error(`You choose to use ${bundler}, but @modern-js/builder-${bundler}-provider not found in your project, please install it`);
+    } else {
+      throw new Error(`Please install one provider first, try install @modern-js/builder-rspack-provider or @modern-js/builder-webpack-provider first`);
+    }
+  }
+  const builder = await (0, import_builder.createBuilder)(provider, {
     cwd,
     target: "web",
-    frameworkConfigPath: (res === null || res === void 0 ? void 0 : res.path) ? res.path : void 0,
-    config: bundlerType === "webpack" ? await (0, import_plugin_storybook.addonBabelAdapter)(uniBuilderConfig, options) : uniBuilderConfig,
+    framework: "modern.js storybook",
     entry: {
       main: entries
     }

package/dist/cjs/docgen/index.js

@@ -33,7 +33,6 @@ __export(docgen_exports, {
 });
 module.exports = __toCommonJS(docgen_exports);
 var import_utils = require("@modern-js/utils");
-var import_shared = require("@rsbuild/shared");
 async function applyDocgenWebpack(chain, options) {
   const typescriptOptions = await options.presets.apply("typescript", {});
   const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
@@ -51,14 +50,14 @@ async function applyDocgenWebpack(chain, options) {
   } else if (reactDocgen === "react-docgen") {
     const loader = require.resolve("./loader");
     const resolveOptions = chain.toConfig().resolve;
-    chain.module.rule(import_shared.CHAIN_ID.RULE.JS).use("react-docgen").loader(loader).options({
+    chain.module.rule(import_utils.CHAIN_ID.RULE.JS).use("react-docgen").loader(loader).options({
       resolveOptions
-    }).after(import_shared.CHAIN_ID.USE.BABEL).after(import_shared.CHAIN_ID.USE.ESBUILD).after(import_shared.CHAIN_ID.USE.SWC).end();
-    const tsRuls = chain.module.rule(import_shared.CHAIN_ID.RULE.TS);
+    }).after(import_utils.CHAIN_ID.USE.BABEL).after(import_utils.CHAIN_ID.USE.ESBUILD).after(import_utils.CHAIN_ID.USE.SWC).end();
+    const tsRuls = chain.module.rule(import_utils.CHAIN_ID.RULE.TS);
     if (tsRuls.uses.values().length !== 0) {
       tsRuls.use("react-docgen").loader(loader).options({
         resolveOptions
-      }).after(import_shared.CHAIN_ID.USE.TS).after(import_shared.CHAIN_ID.USE.ESBUILD).after(import_shared.CHAIN_ID.USE.SWC).end();
+      }).after(import_utils.CHAIN_ID.USE.TS).after(import_utils.CHAIN_ID.USE.ESBUILD).after(import_utils.CHAIN_ID.USE.SWC).end();
     }
   }
 }

package/dist/cjs/plugin-storybook.js

@@ -28,16 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var plugin_storybook_exports = {};
 __export(plugin_storybook_exports, {
-  addonBabelAdapter: () => addonBabelAdapter,
   finalize: () => finalize,
   pluginStorybook: () => pluginStorybook
 });
 module.exports = __toCommonJS(plugin_storybook_exports);
 var import_path = require("path");
 var import_utils = require("@modern-js/utils");
+var import_builder_shared = require("@modern-js/builder-shared");
 var import_core_common = require("@storybook/core-common");
 var import_globals = require("@storybook/preview/globals");
-var import_shared = require("@rsbuild/shared");
 var import_csf_plugin = require("@storybook/csf-plugin");
 var import_minimatch = require("minimatch");
 var import_utils2 = require("./utils");
@@ -69,7 +68,7 @@ const pluginStorybook = (cwd, options) => {
         const absolutePattern = (0, import_path.isAbsolute)(pattern) ? pattern : (0, import_path.join)(options.configDir, pattern);
         return absolutePattern;
       });
-      api.modifyRsbuildConfig(async (builderConfig) => {
+      api.modifyBuilderConfig(async (builderConfig) => {
         await prepareStorybookModules(api.context.cachePath, cwd, options, builderConfig, storyPatterns);
         await applyDefines(builderConfig, options);
         await applyHTML(builderConfig, options);
@@ -84,13 +83,13 @@ const pluginStorybook = (cwd, options) => {
         await applyMdxLoader(config, options);
         await applyCsfPlugin(config, options);
       };
-      if (api.context.bundlerType === "webpack") {
+      if ("modifyWebpackConfig" in api) {
         addonAdapter(api, options);
         api.modifyWebpackConfig(modifyConfig);
         api.modifyWebpackChain(async (chain) => {
           await (0, import_docgen.applyDocgenWebpack)(chain, options);
         });
-      } else {
+      } else if ("modifyRspackConfig" in api) {
         api.modifyRspackConfig(async (config) => {
           await modifyConfig(config);
           await (0, import_docgen.applyDocgenRspack)(config, options);
@@ -137,9 +136,7 @@ async function prepareStorybookModules(tempDir, cwd, options, builderConfig, sto
   builderConfig.source.alias = (0, import_utils.applyOptionsChain)({
     ...storybookPaths,
     ...mappingsAlias
-  }, builderConfig.source.alias, {
-    target: "web"
-  });
+  }, builderConfig.source.alias);
   if ((0, import_utils2.isDev)()) {
     const watcher = await watchStories(storyPatterns, cwd, write);
     onClose(async () => {
@@ -251,7 +248,7 @@ async function applyMdxLoader(config, options) {
 }
 function applyExternals(builderConfig) {
   var _builderConfig_output;
-  const config = (0, import_shared.mergeRsbuildConfig)({
+  const config = (0, import_builder_shared.mergeBuilderConfig)({
     output: {
       ...builderConfig.output,
       externals: (_builderConfig_output = builderConfig.output) === null || _builderConfig_output === void 0 ? void 0 : _builderConfig_output.externals
@@ -313,9 +310,7 @@ async function applyReact(config, options) {
     (_source = (_config = config).source) !== null && _source !== void 0 ? _source : _config.source = {};
     config.source.alias = (0, import_utils.applyOptionsChain)({
       "@storybook/react-dom-shim": "@storybook/react-dom-shim/dist/react-18"
-    }, config.source.alias, {
-      target: "web"
-    });
+    }, config.source.alias);
   }
 }
 async function watchStories(patterns, cwd, writeModule) {
@@ -339,60 +334,57 @@ async function watchStories(patterns, cwd, writeModule) {
 }
 function addonAdapter(api, options) {
   const { presets } = options;
-  api.modifyWebpackConfig(async (config) => {
-    const finalDefaultConfig = await presets.apply("webpackFinal", config, options);
-    return finalDefaultConfig;
-  });
-}
-async function addonBabelAdapter(finalConfig, options) {
-  var _finalConfig;
-  const { presets } = options;
-  const babelOptions = await presets.apply("babel", {}, {
-    ...options
-  });
-  var _tools;
-  (_tools = (_finalConfig = finalConfig).tools) !== null && _tools !== void 0 ? _tools : _finalConfig.tools = {};
-  const userConfig = finalConfig.tools.babel;
-  finalConfig.tools.babel = (config, utils) => {
-    const getPluginName = (plugin) => Array.isArray(plugin) ? plugin[0] : plugin;
-    const getOptions = (plugin) => Array.isArray(plugin) ? plugin[1] : null;
-    const replaceOrInsert = (plugin, plugins) => {
-      const pluginName = getPluginName(plugin);
-      for (let i = 0; i < plugins.length; i++) {
-        if (getPluginName(plugins[i]) === pluginName) {
-          if (getOptions(plugin)) {
-            import_utils.logger.info(`Detected duplicated babel plugin or presets: ${pluginName}, overrides with the new one`);
-            plugins[i] = plugin;
+  api.modifyBuilderConfig(async (finalConfig) => {
+    var _finalConfig;
+    const babelOptions = await presets.apply("babel", {}, {
+      ...options
+    });
+    var _tools;
+    (_tools = (_finalConfig = finalConfig).tools) !== null && _tools !== void 0 ? _tools : _finalConfig.tools = {};
+    const userConfig = finalConfig.tools.babel;
+    finalConfig.tools.babel = (config, utils) => {
+      const getPluginName = (plugin) => Array.isArray(plugin) ? plugin[0] : plugin;
+      const getOptions = (plugin) => Array.isArray(plugin) ? plugin[1] : null;
+      const replaceOrInsert = (plugin, plugins) => {
+        const pluginName = getPluginName(plugin);
+        for (let i = 0; i < plugins.length; i++) {
+          if (getPluginName(plugins[i]) === pluginName) {
+            if (getOptions(plugin)) {
+              import_utils.logger.info(`Detected duplicated babel plugin or presets: ${pluginName}, overrides with the new one`);
+              plugins[i] = plugin;
+            }
+            return;
           }
-          return;
         }
+        plugins.push(plugin);
+      };
+      const currentPlugins = config.plugins || [];
+      const currentPresets = config.presets || [];
+      for (const plugin of babelOptions.plugins || []) {
+        replaceOrInsert(plugin, currentPlugins);
+      }
+      for (const preset of babelOptions.presets || []) {
+        replaceOrInsert(preset, currentPresets);
+      }
+      const finalConfig2 = {
+        ...babelOptions,
+        plugins: currentPlugins,
+        presets: currentPresets
+      };
+      if (userConfig) {
+        return (0, import_utils.applyOptionsChain)(finalConfig2, userConfig, utils);
+      } else {
+        return finalConfig2;
       }
-      plugins.push(plugin);
-    };
-    const currentPlugins = config.plugins || [];
-    const currentPresets = config.presets || [];
-    for (const plugin of babelOptions.plugins || []) {
-      replaceOrInsert(plugin, currentPlugins);
-    }
-    for (const preset of babelOptions.presets || []) {
-      replaceOrInsert(preset, currentPresets);
-    }
-    const finalConfig2 = {
-      ...babelOptions,
-      plugins: currentPlugins,
-      presets: currentPresets
     };
-    if (userConfig) {
-      return (0, import_utils.applyOptionsChain)(finalConfig2, userConfig, utils);
-    } else {
-      return finalConfig2;
-    }
-  };
-  return finalConfig;
+  });
+  api.modifyWebpackConfig(async (config) => {
+    const finalDefaultConfig = await presets.apply("webpackFinal", config, options);
+    return finalDefaultConfig;
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  addonBabelAdapter,
   finalize,
   pluginStorybook
 });

package/dist/cjs/preset.js

@@ -58,8 +58,6 @@ const modern = (builderConfig, options) => {
   var _builderConfig_output;
   return {
     ...builderConfig,
-    // modern plugin can't be used as Rsbuild plugin
-    plugins: [],
     output: {
       ...builderConfig.output,
       disableInlineRuntimeChunk: true,

package/dist/cjs/types.js

@@ -18,12 +18,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var types_exports = {};
 __export(types_exports, {
-  defineConfig: () => defineConfig
+  defineConfig: () => import_cli.defineConfig
 });
 module.exports = __toCommonJS(types_exports);
-function defineConfig(config) {
-  return config;
-}
+var import_cli = require("@modern-js/builder/cli");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   defineConfig

package/dist/cjs/utils.js

@@ -33,6 +33,7 @@ __export(utils_exports, {
   VIRTUAL_MODULE_BASE: () => VIRTUAL_MODULE_BASE,
   getAbsolutePath: () => getAbsolutePath,
   getConfigFileName: () => getConfigFileName,
+  getProvider: () => getProvider,
   isDev: () => isDev,
   maybeGetAbsolutePath: () => maybeGetAbsolutePath,
   requireResolve: () => requireResolve,
@@ -51,6 +52,24 @@ const requireResolve = (importer, path2) => {
   const require1 = (0, import_node_module.createRequire)(importer);
   require1.resolve(path2);
 };
+async function getProvider(bundler, builderConfig) {
+  try {
+    if (bundler === "webpack") {
+      const { builderWebpackProvider } = await Promise.resolve().then(() => __toESM(require("@modern-js/builder-webpack-provider")));
+      return builderWebpackProvider({
+        builderConfig
+      });
+    } else if (bundler === "rspack") {
+      const { builderRspackProvider } = await Promise.resolve().then(() => __toESM(require("@modern-js/builder-rspack-provider")));
+      return builderRspackProvider({
+        builderConfig
+      });
+    } else {
+      return await getProvider("webpack", builderConfig) || await getProvider("rspack", builderConfig);
+    }
+  } catch (e) {
+  }
+}
 async function virtualModule(tempDir, cwd, virtualModuleMap) {
   import_utils.fs.ensureDirSync(tempDir);
   const alias = {};
@@ -129,6 +148,7 @@ function getConfigFileName() {
   VIRTUAL_MODULE_BASE,
   getAbsolutePath,
   getConfigFileName,
+  getProvider,
   isDev,
   maybeGetAbsolutePath,
   requireResolve,

package/dist/esm/build.js

@@ -1,5 +1,5 @@
 import { dirname, join, parse } from "path";
-import webpackDevMiddleware from "@rsbuild/shared/webpack-dev-middleware";
+import webpackDevMiddleware from "@modern-js/builder-shared/webpack-dev-middleware";
 import webpackHotMiddleware from "webpack-hot-middleware";
 import serveStatic from "serve-static";
 import { fs } from "@modern-js/utils";

package/dist/esm/core.js

@@ -1,8 +1,7 @@
-import { createUniBuilder } from "@modern-js/uni-builder";
-import { mergeRsbuildConfig } from "@rsbuild/shared";
+import { createBuilder, mergeBuilderConfig } from "@modern-js/builder";
 import { loadConfig } from "@modern-js/core";
-import { getConfigFileName, runWithErrorMsg } from "./utils";
-import { pluginStorybook, addonBabelAdapter } from "./plugin-storybook";
+import { getConfigFileName, getProvider, runWithErrorMsg } from "./utils";
+import { pluginStorybook } from "./plugin-storybook";
 async function getCompiler(cwd, builderOptions, options) {
   const { bundler } = builderOptions;
   const { presets } = options;
@@ -13,17 +12,25 @@ async function getCompiler(cwd, builderOptions, options) {
   );
   const loadedConfig = res ? res.config : {};
   const finalConfig = await presets.apply("modern", loadedConfig) || loadedConfig;
-  const uniBuilderConfig = builderOptions.builderConfig ? mergeRsbuildConfig(
-    finalConfig,
-    builderOptions.builderConfig
-  ) : finalConfig || {};
-  const bundlerType = bundler || "webpack";
-  const builder = await createUniBuilder({
-    bundlerType,
+  const provider = await getProvider(
+    bundler,
+    mergeBuilderConfig(finalConfig, builderOptions.builderConfig) || {}
+  );
+  if (!provider) {
+    if (bundler) {
+      throw new Error(
+        `You choose to use ${bundler}, but @modern-js/builder-${bundler}-provider not found in your project, please install it`
+      );
+    } else {
+      throw new Error(
+        `Please install one provider first, try install @modern-js/builder-rspack-provider or @modern-js/builder-webpack-provider first`
+      );
+    }
+  }
+  const builder = await createBuilder(provider, {
     cwd,
     target: "web",
-    frameworkConfigPath: (res == null ? void 0 : res.path) ? res.path : void 0,
-    config: bundlerType === "webpack" ? await addonBabelAdapter(uniBuilderConfig, options) : uniBuilderConfig,
+    framework: "modern.js storybook",
     entry: {
       main: entries
     }

package/dist/esm/docgen/index.js

@@ -1,5 +1,4 @@
-import { logger } from "@modern-js/utils";
-import { CHAIN_ID } from "@rsbuild/shared";
+import { CHAIN_ID, logger } from "@modern-js/utils";
 async function applyDocgenWebpack(chain, options) {
   const typescriptOptions = await options.presets.apply(
     "typescript",

package/dist/esm/plugin-storybook.js

@@ -6,6 +6,9 @@ import {
   applyOptionsChain,
   logger
 } from "@modern-js/utils";
+import {
+  mergeBuilderConfig
+} from "@modern-js/builder-shared";
 import {
   normalizeStories,
   stringifyProcessEnvs,
@@ -14,9 +17,6 @@ import {
   loadPreviewOrConfigFile
 } from "@storybook/core-common";
 import { globalsNameReferenceMap } from "@storybook/preview/globals";
-import {
-  mergeRsbuildConfig
-} from "@rsbuild/shared";
 import { unplugin as csfPlugin } from "@storybook/csf-plugin";
 import { minimatch } from "minimatch";
 import {
@@ -53,7 +53,7 @@ const pluginStorybook = (cwd, options) => {
         const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern);
         return absolutePattern;
       });
-      api.modifyRsbuildConfig(async (builderConfig) => {
+      api.modifyBuilderConfig(async (builderConfig) => {
         await prepareStorybookModules(
           api.context.cachePath,
           cwd,
@@ -73,13 +73,13 @@ const pluginStorybook = (cwd, options) => {
         await applyMdxLoader(config, options);
         await applyCsfPlugin(config, options);
       };
-      if (api.context.bundlerType === "webpack") {
+      if ("modifyWebpackConfig" in api) {
         addonAdapter(api, options);
         api.modifyWebpackConfig(modifyConfig);
         api.modifyWebpackChain(async (chain) => {
           await applyDocgenWebpack(chain, options);
         });
-      } else {
+      } else if ("modifyRspackConfig" in api) {
         api.modifyRspackConfig(async (config) => {
           await modifyConfig(config);
           await applyDocgenRspack(config, options);
@@ -124,8 +124,7 @@ async function prepareStorybookModules(tempDir, cwd, options, builderConfig, sto
       ...storybookPaths,
       ...mappingsAlias
     },
-    builderConfig.source.alias,
-    { target: "web" }
+    builderConfig.source.alias
   );
   if (isDev()) {
     const watcher = await watchStories(storyPatterns, cwd, write);
@@ -255,7 +254,7 @@ async function applyMdxLoader(config, options) {
 }
 function applyExternals(builderConfig) {
   var _a;
-  const config = mergeRsbuildConfig(
+  const config = mergeBuilderConfig(
     {
       output: {
         ...builderConfig.output,
@@ -332,8 +331,7 @@ async function applyReact(config, options) {
       {
         "@storybook/react-dom-shim": "@storybook/react-dom-shim/dist/react-18"
       },
-      config.source.alias,
-      { target: "web" }
+      config.source.alias
     );
   }
 }
@@ -360,6 +358,49 @@ async function watchStories(patterns, cwd, writeModule) {
 }
 function addonAdapter(api, options) {
   const { presets } = options;
+  api.modifyBuilderConfig(async (finalConfig) => {
+    var _a;
+    const babelOptions = await presets.apply("babel", {}, { ...options });
+    (_a = finalConfig.tools) != null ? _a : finalConfig.tools = {};
+    const userConfig = finalConfig.tools.babel;
+    finalConfig.tools.babel = (config, utils) => {
+      const getPluginName = (plugin) => Array.isArray(plugin) ? plugin[0] : plugin;
+      const getOptions = (plugin) => Array.isArray(plugin) ? plugin[1] : null;
+      const replaceOrInsert = (plugin, plugins) => {
+        const pluginName = getPluginName(plugin);
+        for (let i = 0; i < plugins.length; i++) {
+          if (getPluginName(plugins[i]) === pluginName) {
+            if (getOptions(plugin)) {
+              logger.info(
+                `Detected duplicated babel plugin or presets: ${pluginName}, overrides with the new one`
+              );
+              plugins[i] = plugin;
+            }
+            return;
+          }
+        }
+        plugins.push(plugin);
+      };
+      const currentPlugins = config.plugins || [];
+      const currentPresets = config.presets || [];
+      for (const plugin of babelOptions.plugins || []) {
+        replaceOrInsert(plugin, currentPlugins);
+      }
+      for (const preset of babelOptions.presets || []) {
+        replaceOrInsert(preset, currentPresets);
+      }
+      const finalConfig2 = {
+        ...babelOptions,
+        plugins: currentPlugins,
+        presets: currentPresets
+      };
+      if (userConfig) {
+        return applyOptionsChain(finalConfig2, userConfig, utils);
+      } else {
+        return finalConfig2;
+      }
+    };
+  });
   api.modifyWebpackConfig(async (config) => {
     const finalDefaultConfig = await presets.apply(
       "webpackFinal",
@@ -369,53 +410,7 @@ function addonAdapter(api, options) {
     return finalDefaultConfig;
   });
 }
-async function addonBabelAdapter(finalConfig, options) {
-  var _a;
-  const { presets } = options;
-  const babelOptions = await presets.apply("babel", {}, { ...options });
-  (_a = finalConfig.tools) != null ? _a : finalConfig.tools = {};
-  const userConfig = finalConfig.tools.babel;
-  finalConfig.tools.babel = (config, utils) => {
-    const getPluginName = (plugin) => Array.isArray(plugin) ? plugin[0] : plugin;
-    const getOptions = (plugin) => Array.isArray(plugin) ? plugin[1] : null;
-    const replaceOrInsert = (plugin, plugins) => {
-      const pluginName = getPluginName(plugin);
-      for (let i = 0; i < plugins.length; i++) {
-        if (getPluginName(plugins[i]) === pluginName) {
-          if (getOptions(plugin)) {
-            logger.info(
-              `Detected duplicated babel plugin or presets: ${pluginName}, overrides with the new one`
-            );
-            plugins[i] = plugin;
-          }
-          return;
-        }
-      }
-      plugins.push(plugin);
-    };
-    const currentPlugins = config.plugins || [];
-    const currentPresets = config.presets || [];
-    for (const plugin of babelOptions.plugins || []) {
-      replaceOrInsert(plugin, currentPlugins);
-    }
-    for (const preset of babelOptions.presets || []) {
-      replaceOrInsert(preset, currentPresets);
-    }
-    const finalConfig2 = {
-      ...babelOptions,
-      plugins: currentPlugins,
-      presets: currentPresets
-    };
-    if (userConfig) {
-      return applyOptionsChain(finalConfig2, userConfig, utils);
-    } else {
-      return finalConfig2;
-    }
-  };
-  return finalConfig;
-}
 export {
-  addonBabelAdapter,
   finalize,
   pluginStorybook
 };

package/dist/esm/preset.js

@@ -25,8 +25,6 @@ const modern = (builderConfig, options) => {
   var _a;
   return {
     ...builderConfig,
-    // modern plugin can't be used as Rsbuild plugin
-    plugins: [],
     output: {
       ...builderConfig.output,
       disableInlineRuntimeChunk: true,

package/dist/esm/types.js

@@ -1,6 +1,4 @@
-function defineConfig(config) {
-  return config;
-}
+import { defineConfig } from "@modern-js/builder/cli";
 export {
   defineConfig
 };

package/dist/esm/utils.js

@@ -8,6 +8,24 @@ const requireResolve = (importer, path2) => {
   const require2 = createRequire(importer);
   require2.resolve(path2);
 };
+async function getProvider(bundler, builderConfig) {
+  try {
+    if (bundler === "webpack") {
+      const { builderWebpackProvider } = await import("@modern-js/builder-webpack-provider");
+      return builderWebpackProvider({
+        builderConfig
+      });
+    } else if (bundler === "rspack") {
+      const { builderRspackProvider } = await import("@modern-js/builder-rspack-provider");
+      return builderRspackProvider({
+        builderConfig
+      });
+    } else {
+      return await getProvider("webpack", builderConfig) || await getProvider("rspack", builderConfig);
+    }
+  } catch (e) {
+  }
+}
 async function virtualModule(tempDir, cwd, virtualModuleMap) {
   fs.ensureDirSync(tempDir);
   const alias = {};
@@ -83,6 +101,7 @@ export {
   VIRTUAL_MODULE_BASE,
   getAbsolutePath,
   getConfigFileName,
+  getProvider,
   isDev,
   maybeGetAbsolutePath,
   requireResolve,

package/dist/types/core.d.ts

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

package/dist/types/docgen/index.d.ts

@@ -1,5 +1,6 @@
 import type { Options } from '@storybook/types';
-import type { RspackConfig, WebpackChain } from '@rsbuild/shared';
+import { RspackConfig } from '@modern-js/builder-rspack-provider';
+import { WebpackChain } from '@modern-js/builder-webpack-provider';
 export type DocgenOptions = {
     reactDocgen?: 'react-docgen' | 'react-docgen-typescript' | false;
     reactDocgenTypescriptOptions?: any;

package/dist/types/plugin-storybook.d.ts

@@ -1,6 +1,6 @@
+import { BuilderPlugin } from '@modern-js/builder-shared';
 import type { Options } from '@storybook/types';
-import { type RsbuildPlugin } from '@rsbuild/shared';
-import { BuilderConfig } from './types';
+import type { BuilderPluginAPI as WebpackAPI } from '@modern-js/builder-webpack-provider';
+import type { BuilderPluginAPI as RspackAPI } from '@modern-js/builder-rspack-provider';
 export declare function finalize(): Promise<void>;
-export declare const pluginStorybook: (cwd: string, options: Options) => RsbuildPlugin;
-export declare function addonBabelAdapter(finalConfig: BuilderConfig, options: Options): Promise<BuilderConfig>;
+export declare const pluginStorybook: (cwd: string, options: Options) => BuilderPlugin<WebpackAPI | RspackAPI>;

package/dist/types/preset.d.ts

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

package/dist/types/types.d.ts

@@ -1,12 +1,15 @@
-import type { RsbuildPlugin } from '@rsbuild/shared';
-import type { UniBuilderConfig } from '@modern-js/uni-builder';
+import type { BuilderConfig as WebpackBuilderConfig } from '@modern-js/builder-webpack-provider';
+import type { BuilderConfig as RspackBuilderConfig } from '@modern-js/builder-rspack-provider';
+import { BuilderPlugin } from '@modern-js/builder-shared';
 export type BundlerType = 'webpack' | 'rspack';
+export type { WebpackBuilderConfig, RspackBuilderConfig };
+export type AllBuilderConfig = WebpackBuilderConfig | RspackBuilderConfig;
 export type BuilderOptions = {
     bundler?: BundlerType;
-    builderConfig?: UniBuilderConfig;
+    builderConfig?: AllBuilderConfig;
     configPath?: string;
 };
-export type BuilderConfig = UniBuilderConfig & {
-    builderPlugins?: RsbuildPlugin[];
+export type BuilderConfig = AllBuilderConfig & {
+    builderPlugins?: BuilderPlugin[];
 };
-export declare function defineConfig(config: UniBuilderConfig): UniBuilderConfig;
+export { defineConfig } from '@modern-js/builder/cli';

package/dist/types/utils.d.ts

@@ -1,7 +1,11 @@
+import { BuilderWebpackProvider } from '@modern-js/builder-webpack-provider';
+import { BuilderRspackProvider } from '@modern-js/builder-rspack-provider';
+import { AllBuilderConfig } from './types';
 export declare const VIRTUAL_MODULE_BASE = ".MODERN_STORYBOOK";
 export declare const STORIES_FILENAME = "storybook-stories.js";
 export declare const STORYBOOK_CONFIG_ENTRY = "storybook-config-entry.js";
 export declare const requireResolve: (importer: string, path: string) => void;
+export declare function getProvider(bundler: 'webpack' | 'rspack' | undefined, builderConfig: AllBuilderConfig): Promise<BuilderWebpackProvider | BuilderRspackProvider | undefined>;
 export declare function virtualModule(tempDir: string, cwd: string, virtualModuleMap: Record<string, string>): Promise<[Record<string, string>, (p: string, content: string) => void]>;
 export declare function toImportFn(cwd: string, stories: string[]): Promise<string>;
 export declare function getAbsolutePath<I extends string>(input: I): I;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/storybook-builder",
-  "version": "0.0.0-next-20240220105216",
+  "version": "0.0.0-next-20240220122504",
   "description": "modern.js support for storybook",
   "repository": {
     "type": "git",
@@ -51,19 +51,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@rsbuild/shared": "0.4.3",
     "@rspack/plugin-react-refresh": "0.4.5",
-    "@storybook/components": "~7.6.12",
-    "@storybook/core-common": "~7.6.12",
-    "@storybook/csf-plugin": "~7.6.12",
+    "@storybook/components": "~7.6.1",
+    "@storybook/core-common": "~7.6.1",
+    "@storybook/csf-plugin": "~7.6.1",
     "@storybook/global": "~5.0.0",
     "@storybook/mdx1-csf": "~1.0.0",
     "@storybook/mdx2-csf": "~1.1.0",
-    "@storybook/preview": "~7.6.12",
-    "@storybook/preview-api": "~7.6.12",
+    "@storybook/preview": "~7.6.1",
+    "@storybook/preview-api": "~7.6.1",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/router": "~7.6.12",
-    "@storybook/theming": "~7.6.12",
+    "@storybook/router": "~7.6.1",
+    "@storybook/theming": "~7.6.1",
     "ast-types": "^0.14.2",
     "minimatch": "^9.0.3",
     "react-docgen": "6.0.0-alpha.3",
@@ -72,19 +71,34 @@
     "serve-static": "^1.14.1",
     "tinypool": "^0.8.0",
     "webpack-hot-middleware": "^2.25.4",
-    "@modern-js/uni-builder": "0.0.0-next-20240220105216",
-    "@modern-js/core": "0.0.0-next-20240220105216",
-    "@modern-js/runtime": "0.0.0-next-20240220105216",
-    "@modern-js/utils": "0.0.0-next-20240220105216"
+    "@modern-js/builder": "0.0.0-next-20240220122504",
+    "@modern-js/core": "0.0.0-next-20240220122504",
+    "@modern-js/builder-shared": "0.0.0-next-20240220122504",
+    "@modern-js/runtime": "0.0.0-next-20240220122504",
+    "@modern-js/utils": "0.0.0-next-20240220122504"
   },
   "devDependencies": {
-    "@storybook/types": "~7.6.12",
+    "@storybook/types": "~7.6.1",
     "@types/babel__core": "^7.20.1",
     "@types/serve-static": "^1.13.10",
     "@types/webpack-hot-middleware": "^2.25.6",
     "typescript": "^5.2.2",
-    "@modern-js/core": "0.0.0-next-20240220105216",
-    "@scripts/build": "0.0.0-next-20240220105216"
+    "@modern-js/builder-rspack-provider": "0.0.0-next-20240220122504",
+    "@modern-js/builder-webpack-provider": "0.0.0-next-20240220122504",
+    "@scripts/build": "0.0.0-next-20240220122504",
+    "@modern-js/core": "0.0.0-next-20240220122504"
+  },
+  "peerDependencies": {
+    "@modern-js/builder-webpack-provider": "0.0.0-next-20240220122504",
+    "@modern-js/builder-rspack-provider": "0.0.0-next-20240220122504"
+  },
+  "peerDependenciesMeta": {
+    "@modern-js/builder-webpack-provider": {
+      "optional": true
+    },
+    "@modern-js/builder-rspack-provider": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",