chore(example): add basic module federation example (#1444)

examples/module-federation/host/module-federation.config.js

@@ -0,0 +1,19 @@
+const { dependencies } = require('./package.json');
+
+module.exports = {
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://localhost:3002/remoteEntry.js',
+  },
+  shared: {
+    ...dependencies,
+    react: {
+      singleton: true,
+      requiredVersion: dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: dependencies['react-dom'],
+    },
+  },
+};

examples/module-federation/host/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@examples/module-federation-host",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "workspace:*",
+    "@rsbuild/plugin-react": "workspace:*"
+  }
+}

examples/module-federation/host/rsbuild.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import mfConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  server: {
+    port: 3000,
+  },
+  performance: {
+    chunkSplit: {
+      strategy: 'split-by-experience',
+      override: {
+        chunks: 'async',
+        minSize: 30000,
+      },
+    },
+  },
+  tools: {
+    rspack(config, { rspack, mergeConfig }) {
+      return mergeConfig(config, {
+        output: {
+          publicPath: 'auto',
+        },
+        plugins: [new rspack.container.ModuleFederationPlugin(mfConfig)],
+      });
+    },
+  },
+});

examples/module-federation/host/src/App.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const RemoteButton = React.lazy(() => import('remote/Button'));
+
+const App = () => (
+  <div>
+    <h1>Basic Host-Remote</h1>
+    <h2>Host</h2>
+    <React.Suspense fallback="Loading Button">
+      <RemoteButton />
+    </React.Suspense>
+  </div>
+);
+
+export default App;

examples/module-federation/host/src/bootstrap.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

examples/module-federation/host/src/index.js

@@ -0,0 +1 @@
+import('./bootstrap');

examples/module-federation/remote/module-federation.config.js

@@ -0,0 +1,20 @@
+const { dependencies } = require('./package.json');
+
+module.exports = {
+  name: 'remote',
+  exposes: {
+    './Button': './src/Button',
+  },
+  filename: 'remoteEntry.js',
+  shared: {
+    ...dependencies,
+    react: {
+      singleton: true,
+      requiredVersion: dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: dependencies['react-dom'],
+    },
+  },
+};

examples/module-federation/remote/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@examples/module-federation-remote",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "workspace:*",
+    "@rsbuild/plugin-react": "workspace:*"
+  }
+}

examples/module-federation/remote/rsbuild.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import mfConfig from './module-federation.config';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  server: {
+    port: 3002,
+  },
+  performance: {
+    chunkSplit: {
+      strategy: 'split-by-experience',
+      override: {
+        chunks: 'async',
+        minSize: 30000,
+      },
+    },
+  },
+  tools: {
+    rspack(config, { rspack, mergeConfig }) {
+      return mergeConfig(config, {
+        output: {
+          publicPath: 'auto',
+        },
+        plugins: [new rspack.container.ModuleFederationPlugin(mfConfig)],
+      });
+    },
+  },
+});

examples/module-federation/remote/src/App.js

@@ -0,0 +1,11 @@
+import LocalButton from './Button';
+
+const App = () => (
+  <div>
+    <h1>Basic Host-Remote</h1>
+    <h2>Remote</h2>
+    <LocalButton />
+  </div>
+);
+
+export default App;

examples/module-federation/remote/src/Button.js

@@ -0,0 +1,2 @@
+const Button = () => <button type="button">Hello from remote</button>;
+export default Button;

examples/module-federation/remote/src/bootstrap.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);

examples/module-federation/remote/src/index.js

@@ -0,0 +1 @@
+import('./bootstrap');