chore(rsbuild-plugin): split setUp function to help extend

Author: 2heal1

.changeset/angry-spoons-wink.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/rsbuild-plugin': patch
+---
+
+chore(rsbuild-plugin): split setUp function to help extend

.changeset/spicy-roses-hear.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/storybook-addon': patch
+---
+
+chore: export plugin name

apps/rslib-module/.storybook/main.ts

@@ -29,7 +29,7 @@ const config: StorybookConfig = {
       options: {
         remotes: {
           'rslib-module':
-            'rslib-module@http://localhost:3001/mf/mf-manifest.json',
+            'rslib_provider@http://localhost:3001/mf-manifest.json',
         },
       },
     },

apps/rslib-module/package.json

@@ -22,7 +22,7 @@
     "@module-federation/rsbuild-plugin": "workspace:*",
     "@module-federation/storybook-addon": "workspace:*",
     "@rsbuild/plugin-react": "^1.0.6",
-    "@rslib/core": "^0.0.18",
+    "@rslib/core": "^0.1.2",
     "@types/react": "^18.3.11",
     "http-server": "^14.1.1",
     "react": "^18.3.1",

apps/rslib-module/rslib.config.ts

@@ -35,13 +35,7 @@ export default defineConfig({
         distPath: {
           root: './dist/mf',
         },
-        assetPrefix: 'http://localhost:3000/mf',
-        minify: true,
       },
-      dev: {
-        assetPrefix: 'http://localhost:3001/mf',
-      },
-      // just for dev
       server: {
         port: 3001,
       },

packages/rsbuild-plugin/src/cli/index.ts

@@ -15,11 +15,19 @@ import logger from '../logger';
 type ModuleFederationOptions =
   moduleFederationPlugin.ModuleFederationPluginOptions;
 
-const PLUGIN_MODULE_FEDERATION_NAME = 'rsbuild:module-federation-enhanced';
+const RSBUILD_PLUGIN_MODULE_FEDERATION_NAME =
+  'rsbuild:module-federation-enhanced';
+const RSPACK_PLUGIN_MODULE_FEDERATION_NAME = 'module-federation';
+
+export {
+  RSBUILD_PLUGIN_MODULE_FEDERATION_NAME,
+  RSPACK_PLUGIN_MODULE_FEDERATION_NAME,
+};
+
 export const pluginModuleFederation = (
   moduleFederationOptions: ModuleFederationOptions,
 ): RsbuildPlugin => ({
-  name: PLUGIN_MODULE_FEDERATION_NAME,
+  name: RSBUILD_PLUGIN_MODULE_FEDERATION_NAME,
   setup: (api) => {
     const sharedOptions: [string, sharePlugin.SharedConfig][] = parseOptions(
       moduleFederationOptions.shared || [],
@@ -153,7 +161,7 @@ export const pluginModuleFederation = (
 
     api.modifyBundlerChain(async (chain) => {
       chain
-        .plugin('module-federation')
+        .plugin(RSPACK_PLUGIN_MODULE_FEDERATION_NAME)
         .use(ModuleFederationPlugin, [moduleFederationOptions]);
 
       // `uniqueName` is required for react refresh to work

packages/storybook-addon/package.json

@@ -44,6 +44,9 @@
     "*": {
       ".": [
         "./dist/index.d.ts"
+      ],
+      "preset": [
+        "./dist/preset.d.ts"
       ]
     }
   },

packages/storybook-addon/preset.ts

@@ -18,3 +18,4 @@ export default {
     });
   },
 };
+export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild';

packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts

@@ -9,6 +9,7 @@ import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
 
 const tempDirPath = path.resolve(process.cwd(), `node_modules/${TEMP_DIR}`);
+export const PLUGIN_NAME = 'module-federation-storybook-addon';
 // add bootstrap for host project
 const bootstrapPath = path.resolve(
   process.cwd(),
@@ -27,7 +28,7 @@ const writeBootstrap = (context: string, entryPath: string) => {
   }
   fs.writeFileSync(bootstrapPath, generateBootstrap(context, entryPath));
 };
-export const withModuleFederation = async (
+export const withModuleFederation = (
   rsbuildConfig: RsbuildConfig,
   options: moduleFederationPlugin.ModuleFederationPluginOptions,
 ) => {
@@ -52,36 +53,30 @@ export const withModuleFederation = async (
             // remoteEntry already includes one hmr runtime, and an additional one is not necessary.
             hmr: false,
           },
-          tools: {
-            rspack: (config) => {
-              config.output ??= {};
-              config.output.chunkLoadingGlobal =
-                'module-federation-storybook-addon';
-              config.plugins?.push(
-                new ModuleFederationPlugin({
-                  name: options.name || 'module-federation-storybook-addon',
-                  shared: {
-                    react: {
-                      singleton: true,
-                    },
-                    'react-dom': {
-                      singleton: true,
-                    },
-                    ...options.shared,
-                  },
-                  remotes: {
-                    ...options.remotes,
-                  },
-                  shareStrategy: options.shareStrategy,
-                }),
-              );
-              return config;
-            },
-          },
         };
-
         return mergeRsbuildConfig(config, mfConfig);
       });
+
+      api.modifyBundlerChain(async (chain) => {
+        chain.plugin(PLUGIN_NAME).use(ModuleFederationPlugin, [
+          {
+            name: options.name || PLUGIN_NAME,
+            shared: {
+              react: {
+                singleton: true,
+              },
+              'react-dom': {
+                singleton: true,
+              },
+              ...options.shared,
+            },
+            remotes: {
+              ...options.remotes,
+            },
+            shareStrategy: options.shareStrategy,
+          },
+        ]);
+      });
     },
   };