feat(rsbuild-plugin): support generate MF SSR in Rslib (#3804)

Author: 2heal1

.changeset/violet-boxes-happen.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/rsbuild-plugin': patch
+---
+
+feat(rsbuild-plugin): support generate MF SSR in Rslib 

apps/modernjs-ssr/dynamic-nested-remote/@mf-types/dynamic_remote/Image.d.ts

@@ -17,7 +17,7 @@ registerRemotes([
 ]);
 
 const RemoteSSRComponent = createRemoteSSRComponent({
-  loader: () => loadRemote('dynamic_remote/Image'),
+  loader: () => loadRemote('dynamic_remote'),
   loading: 'loading...',
   fallback: ({ error }) => {
     if (error instanceof Error && error.message.includes('not exist')) {

apps/modernjs-ssr/dynamic-nested-remote/src/components/Content.tsx

@@ -2,7 +2,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'dynamic_remote',
   exposes: {
-    './Image': './src/components/Image.tsx',
+    '.': './src/components/Image.tsx',
   },
   shared: {
     react: { singleton: true },

apps/modernjs-ssr/dynamic-remote-new-version/module-federation.config.ts

@@ -3,7 +3,7 @@ export default createModuleFederationConfig({
   name: 'dynamic_remote',
   filename: 'remoteEntry.js',
   exposes: {
-    './Image': './src/components/Image.tsx',
+    '.': './src/Index.tsx',
   },
   shared: {
     react: { singleton: true },

apps/modernjs-ssr/dynamic-remote/.npmrc

@@ -1,49 +1,23 @@
 {
   "name": "modernjs-ssr-dynamic-remote",
   "private": true,
-  "version": "0.1.34",
   "scripts": {
-    "reset": "npx rimraf ./**/node_modules",
-    "dev": "modern dev",
-    "build": "modern build",
-    "start": "FEDERATION_DEBUG=true modern start",
-    "serve": "modern serve",
-    "new": "modern new",
-    "lint": "modern lint",
-    "upgrade": "modern upgrade"
-  },
-  "engines": {
-    "node": ">=16.18.1"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,mjs,cjs}": [
-      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
-    ]
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "dist/"
-  ],
-  "dependencies": {
-    "@babel/runtime": "7.26.0",
-    "@modern-js/runtime": "2.67.6",
-    "@module-federation/modern-js": "workspace:*",
-    "antd": "4.24.15",
-    "react": "~18.3.1",
-    "react-dom": "~18.3.1"
+    "build": "rslib build",
+    "serve": "rslib mf-dev",
+    "dev": "rslib mf-dev",
+    "storybook": "storybook dev -p 6006"
   },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/cjs/index.d.ts",
   "devDependencies": {
-    "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.67.6",
-    "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.67.6",
-    "@types/jest": "~29.5.0",
-    "@types/node": "~16.11.7",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.3.0",
-    "lint-staged": "~13.1.0",
-    "prettier": "~3.3.3",
-    "rimraf": "~6.0.1",
-    "typescript": "~5.0.4"
+    "@module-federation/enhanced": "workspace:*",
+    "@module-federation/rsbuild-plugin": "workspace:*",
+    "@rsbuild/plugin-react": "^1.3.1",
+    "@rslib/core": "^0.9.0",
+    "@types/react": "^18.3.11",
+    "http-server": "^14.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

apps/modernjs-ssr/dynamic-remote/CHANGELOG.md

@@ -8,18 +8,7 @@
     "build": {
       "executor": "nx:run-commands",
       "options": {
-        "dependsOn": [
-          {
-            "target": "build",
-            "dependencies": true
-          }
-        ],
-        "commands": [
-          {
-            "command": "cd apps/modernjs-ssr/dynamic-remote; pnpm run build",
-            "forwardAllArgs": true
-          }
-        ]
+        "commands": ["cd apps/modernjs-ssr/dynamic-remote; pnpm run build"]
       }
     },
     "serve": {
@@ -39,6 +28,18 @@
         ]
       }
     },
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["cd apps/modernjs-ssr/dynamic-remote; pnpm run dev"]
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ]
+    },
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {

apps/modernjs-ssr/dynamic-remote/modern.config.ts

@@ -0,0 +1,49 @@
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+import mfConfig from './module-federation.config';
+
+const shared = {
+  dts: {
+    bundle: false,
+  },
+};
+
+export default defineConfig({
+  output: {
+    cleanDistPath: true,
+  },
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'mf',
+      output: {
+        distPath: {
+          root: './dist/mf',
+        },
+      },
+    },
+  ],
+  server: {
+    port: 3053,
+  },
+  plugins: [pluginReact(), pluginModuleFederation(mfConfig, { ssr: true })],
+});

apps/modernjs-ssr/dynamic-remote/module-federation.config.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import Button from 'antd/lib/button';
-import mfSvg from '../assets/module-federation.svg';
 import stuff from './stuff.module.css';
 
 export default ({ text }: { text: string }): JSX.Element => (