feat(storybook): use uni-builder instead of modern.js builder as buil…

…d tool (#5371)

Co-authored-by: neverland <[email protected]>

.changeset/light-games-shave.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/storybook-builder': minor
+---
+
+feat(storybook): use uni-builder instead of modern.js builder as build tool
+
+feat(storybook): 使用 uni-builder 代替 modern.js builder 作为底层构建工具

.changeset/slimy-dogs-hang.md

@@ -2,6 +2,6 @@
 '@modern-js/builder-doc': patch
 ---
 
-chore(plugin-vue): builder vue & vue2 plugin is no longer maintained,, please use rsbuild instead
+chore(plugin-vue): builder vue & vue2 plugin is no longer maintained, please use rsbuild instead
 
 chore(plugin-vue): builder vue & vue2  插件不再维护, 请使用 rsbuild 代替

packages/storybook/builder/package.json

@@ -56,23 +56,23 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@modern-js/builder": "workspace:*",
-    "@modern-js/builder-shared": "workspace:*",
+    "@rsbuild/shared": "0.4.3",
+    "@modern-js/uni-builder": "workspace:*",
     "@modern-js/core": "workspace:*",
     "@modern-js/runtime": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@rspack/plugin-react-refresh": "0.4.5",
-    "@storybook/components": "~7.6.1",
-    "@storybook/core-common": "~7.6.1",
-    "@storybook/csf-plugin": "~7.6.1",
+    "@storybook/components": "~7.6.12",
+    "@storybook/core-common": "~7.6.12",
+    "@storybook/csf-plugin": "~7.6.12",
     "@storybook/global": "~5.0.0",
     "@storybook/mdx1-csf": "~1.0.0",
     "@storybook/mdx2-csf": "~1.1.0",
-    "@storybook/preview": "~7.6.1",
-    "@storybook/preview-api": "~7.6.1",
+    "@storybook/preview": "~7.6.12",
+    "@storybook/preview-api": "~7.6.12",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/router": "~7.6.1",
-    "@storybook/theming": "~7.6.1",
+    "@storybook/router": "~7.6.12",
+    "@storybook/theming": "~7.6.12",
     "ast-types": "^0.14.2",
     "minimatch": "^9.0.3",
     "react-docgen": "6.0.0-alpha.3",
@@ -83,28 +83,14 @@
     "webpack-hot-middleware": "^2.25.4"
   },
   "devDependencies": {
-    "@modern-js/builder-rspack-provider": "workspace:*",
-    "@modern-js/builder-webpack-provider": "workspace:*",
     "@modern-js/core": "workspace:*",
     "@scripts/build": "workspace:*",
-    "@storybook/types": "~7.6.1",
+    "@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"
   },
-  "peerDependencies": {
-    "@modern-js/builder-webpack-provider": "workspace:^2.46.1",
-    "@modern-js/builder-rspack-provider": "workspace:^2.46.1"
-  },
-  "peerDependenciesMeta": {
-    "@modern-js/builder-webpack-provider": {
-      "optional": true
-    },
-    "@modern-js/builder-rspack-provider": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",

packages/storybook/builder/src/build.ts

@@ -1,5 +1,5 @@
 import { dirname, join, parse } from 'path';
-import webpackDevMiddleware from '@modern-js/builder-shared/webpack-dev-middleware';
+import webpackDevMiddleware from '@rsbuild/shared/webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import serveStatic from 'serve-static';
 import type { Builder as RawStorybookBuilder, Stats } from '@storybook/types';

packages/storybook/builder/src/core.ts

@@ -1,10 +1,11 @@
-import { createBuilder, mergeBuilderConfig } from '@modern-js/builder';
+import { createUniBuilder } from '@modern-js/uni-builder';
+import { mergeRsbuildConfig, type RsbuildConfig } from '@rsbuild/shared';
 import { loadConfig } from '@modern-js/core';
 import type { Options } from '@storybook/types';
-import type { Compiler } from '@modern-js/builder-shared/webpack-dev-middleware';
-import type { BuilderConfig, BuilderOptions } from './types';
-import { getConfigFileName, getProvider, runWithErrorMsg } from './utils';
-import { pluginStorybook } from './plugin-storybook';
+import type { Compiler } from '@rsbuild/shared/webpack-dev-middleware';
+import type { BuilderOptions, BuilderConfig } from './types';
+import { getConfigFileName, runWithErrorMsg } from './utils';
+import { pluginStorybook, addonBabelAdapter } from './plugin-storybook';
 
 export async function getCompiler(
   cwd: string,
@@ -27,27 +28,24 @@ export async function getCompiler(
     (await presets.apply<BuilderConfig | void>('modern', loadedConfig)) ||
     loadedConfig;
 
-  const provider = await getProvider(
-    bundler,
-    mergeBuilderConfig(finalConfig, builderOptions.builderConfig) || {},
-  );
+  const uniBuilderConfig = builderOptions.builderConfig
+    ? (mergeRsbuildConfig(
+        finalConfig as RsbuildConfig,
+        builderOptions.builderConfig as RsbuildConfig,
+      ) as BuilderConfig)
+    : finalConfig || {};
+
+  const bundlerType = bundler || 'webpack';
 
-  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, {
+  const builder = await createUniBuilder({
+    bundlerType,
     cwd,
     target: 'web',
-    framework: 'modern.js storybook',
+    frameworkConfigPath: res?.path ? res.path : undefined,
+    config:
+      bundlerType === 'webpack'
+        ? await addonBabelAdapter(uniBuilderConfig, options)
+        : uniBuilderConfig,
     entry: {
       main: entries,
     },
@@ -58,5 +56,5 @@ export async function getCompiler(
     ...(finalConfig.builderPlugins || []),
   ]);
 
-  return builder.createCompiler() as Promise<Compiler>;
+  return builder.createCompiler();
 }

packages/storybook/builder/src/docgen/index.ts

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