feat: add Rsbuild module-federation-enhanced example

rsbuild/module-federation-enhanced/consumer/.gitignore

@@ -0,0 +1 @@
+@mf-types

rsbuild/module-federation-enhanced/consumer/package.json

@@ -13,6 +13,9 @@
   "devDependencies": {
     "@module-federation/enhanced": "^0.1.10",
     "@rsbuild/core": "^0.6.0",
-    "@rsbuild/plugin-react": "^0.6.0"
+    "@rsbuild/plugin-react": "^0.6.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.5"
   }
 }

rsbuild/module-federation-enhanced/consumer/src/App.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

rsbuild/module-federation-enhanced/consumer/src/bootstrap.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}

rsbuild/module-federation-enhanced/consumer/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}

rsbuild/module-federation-enhanced/provider/package.json

@@ -13,6 +13,9 @@
   "devDependencies": {
     "@module-federation/enhanced": "^0.1.10",
     "@rsbuild/core": "^0.6.0",
-    "@rsbuild/plugin-react": "^0.6.0"
+    "@rsbuild/plugin-react": "^0.6.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.4.5"
   }
 }

rsbuild/module-federation-enhanced/provider/rsbuild.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
     port: 3000,
   },
   dev: {
-    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
+    // It is necessary to configure assetPrefix, and in the production build, you need to configure output.assetPrefix
     assetPrefix: "http://localhost:3000",
   },
   tools: {
@@ -18,7 +18,7 @@ export default defineConfig({
         new ModuleFederationPlugin({
           name: "federation_provider",
           exposes: {
-            "./button": "./src/button.jsx",
+            "./button": "./src/Button.tsx",
           },
           shared: ["react", "react-dom"],
         }),

rsbuild/module-federation-enhanced/provider/src/Button.tsx

@@ -0,0 +1,3 @@
+export default function Button() {
+  return <div>Provider button</div>;
+}

rsbuild/module-federation-enhanced/provider/src/bootstrap.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}

rsbuild/module-federation-enhanced/provider/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}