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

.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

@@ -13,7 +13,8 @@
   "types": "./dist/cjs/index.d.ts",
   "scripts": {
     "build": "rslib build",
-    "dev": "rslib mf dev",
+    "dev": "rslib mf-dev",
+    "build:watch": "rslib build --watch",
     "serve": "pnpm build && http-server -p 3001 ./dist/ --cors",
     "storybook": "storybook dev -p 6006"
   },
@@ -22,7 +23,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.2.0",
     "@types/react": "^18.3.11",
     "http-server": "^14.1.1",
     "react": "^18.3.1",

apps/rslib-module/rslib.config.ts

@@ -35,33 +35,27 @@ 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,
       },
-      plugins: [
-        pluginModuleFederation({
-          name: 'rslib_provider',
-          exposes: {
-            '.': './src/index.tsx',
-          },
-          shared: {
-            react: {
-              singleton: true,
-            },
-            'react-dom': {
-              singleton: true,
-            },
-          },
-        }),
-      ],
     },
   ],
-  plugins: [pluginReact()],
+  plugins: [
+    pluginReact(),
+    pluginModuleFederation({
+      name: 'rslib_provider',
+      exposes: {
+        '.': './src/index.tsx',
+      },
+      shared: {
+        react: {
+          singleton: true,
+        },
+        'react-dom': {
+          singleton: true,
+        },
+      },
+    }),
+  ],
 });

packages/enhanced/src/index.ts

@@ -1,5 +1,8 @@
 import type { moduleFederationPlugin } from '@module-federation/sdk';
-export { default as ModuleFederationPlugin } from './wrapper/ModuleFederationPlugin';
+export {
+  default as ModuleFederationPlugin,
+  PLUGIN_NAME,
+} from './wrapper/ModuleFederationPlugin';
 export { default as ContainerReferencePlugin } from './wrapper/ContainerReferencePlugin';
 export { default as SharePlugin } from './wrapper/SharePlugin';
 export { default as ContainerPlugin } from './wrapper/ContainerPlugin';

packages/enhanced/src/rspack.ts

@@ -1 +1,4 @@
-export { ModuleFederationPlugin } from '@module-federation/rspack/plugin';
+export {
+  ModuleFederationPlugin,
+  PLUGIN_NAME,
+} from '@module-federation/rspack/plugin';

packages/enhanced/src/webpack.ts

@@ -1,3 +1,6 @@
-import { default as ModuleFederationPlugin } from './wrapper/ModuleFederationPlugin';
+import {
+  default as ModuleFederationPlugin,
+  PLUGIN_NAME,
+} from './wrapper/ModuleFederationPlugin';
 
-export { ModuleFederationPlugin };
+export { ModuleFederationPlugin, PLUGIN_NAME };

packages/enhanced/src/wrapper/ModuleFederationPlugin.ts

@@ -13,7 +13,7 @@ import path from 'node:path';
 import fs from 'node:fs';
 import ReactBridgePlugin from '@module-federation/bridge-react-webpack-plugin';
 
-const PLUGIN_NAME = 'ModuleFederationPlugin';
+export const PLUGIN_NAME = 'ModuleFederationPlugin';
 
 export default class ModuleFederationPlugin implements WebpackPluginInstance {
   private _options: moduleFederationPlugin.ModuleFederationPluginOptions;

packages/modernjs/package.json

@@ -88,6 +88,7 @@
   "license": "MIT",
   "dependencies": {
     "@modern-js/node-bundle-require": "2.60.6",
+    "@module-federation/rsbuild-plugin": "workspace:*",
     "@modern-js/utils": "2.60.6",
     "@module-federation/enhanced": "workspace:*",
     "@module-federation/node": "workspace:*",

packages/modernjs/src/cli/utils.ts

@@ -5,6 +5,7 @@ import { bundle } from '@modern-js/node-bundle-require';
 import { PluginOptions } from '../types';
 import { LOCALHOST, PLUGIN_IDENTIFIER } from '../constant';
 import logger from './logger';
+import { autoDeleteSplitChunkCacheGroups } from '@module-federation/rsbuild-plugin/utils';
 
 import type { BundlerConfig, BundlerChainConfig } from '../interfaces/bundler';
 import type {
@@ -301,6 +302,7 @@ export function patchBundlerConfig<T extends Bundler>(options: {
   }
 
   if (!isServer) {
+    // @ts-ignore
     autoDeleteSplitChunkCacheGroups(mfConfig, bundlerConfig);
   }
 
@@ -419,31 +421,3 @@ const SHARED_SPLIT_CHUNK_MAP = {
   '@douyinfe/semi-ui': SPLIT_CHUNK_MAP.SEMI,
   axios: SPLIT_CHUNK_MAP.AXIOS,
 };
-
-function autoDeleteSplitChunkCacheGroups<T extends Bundler>(
-  mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions,
-  bundlerConfig: BundlerConfig<T>,
-) {
-  if (!mfConfig.shared) {
-    return;
-  }
-  if (
-    !bundlerConfig.optimization?.splitChunks ||
-    !bundlerConfig.optimization.splitChunks.cacheGroups
-  ) {
-    return;
-  }
-  const arrayShared = Array.isArray(mfConfig.shared)
-    ? mfConfig.shared
-    : Object.keys(mfConfig.shared);
-  for (const shared of arrayShared) {
-    const splitChunkKey =
-      SHARED_SPLIT_CHUNK_MAP[shared as keyof typeof SHARED_SPLIT_CHUNK_MAP];
-    if (!splitChunkKey) {
-      continue;
-    }
-    if (bundlerConfig.optimization.splitChunks.cacheGroups[splitChunkKey]) {
-      delete bundlerConfig.optimization.splitChunks.cacheGroups[splitChunkKey];
-    }
-  }
-}

packages/rsbuild-plugin/package.json

@@ -14,9 +14,14 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.cjs.d.ts",
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/index.cjs.d.ts"
+      "require": "./dist/index.cjs.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.cjs.d.ts",
+      "import": "./dist/utils.esm.js",
+      "require": "./dist/utils.cjs.js"
     }
   },
   "main": "./dist/index.cjs.js",
@@ -25,6 +30,9 @@
     "*": {
       ".": [
         "./dist/index.cjs.d.ts"
+      ],
+      "utils": [
+        "./dist/utils.cjs.d.ts"
       ]
     }
   },
@@ -41,6 +49,14 @@
     "@module-federation/enhanced": "workspace:*",
     "@rsbuild/core": "1.x"
   },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    },
+    "@module-federation/enhanced": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=16.0.0"
   },

packages/rsbuild-plugin/rollup.config.js

@@ -13,6 +13,7 @@ module.exports = (rollupConfig, _projectOptions) => {
   );
   rollupConfig.input = {
     index: 'packages/rsbuild-plugin/src/cli/index.ts',
+    utils: 'packages/rsbuild-plugin/src/utils/index.ts',
   };
   return rollupConfig;
 };