chore: add example (#3825)

Author: zhoushaw

pnpm-workspace.yaml

@@ -11,3 +11,4 @@ packages:
   - '!nextjs-dynamic-ssr/*'
   - '!cra-react-app-rewired/*'
   - '!runtime-plugins/remote-router'
+  - '!react-manifest-example'

react-manifest-example/README.md

@@ -0,0 +1,18 @@
+# Module Federation 2.0 with Rspack in React
+
+This repo uses Module Federation 2.0 Rspack plugin to build a React microfrontend
+
+## Get started
+
+```shell
+cd react-manifest-example
+# In the reacts-manifest-example directory
+# You do not need to run the installation command in this directory
+pnpm install
+pnpm run start
+```
+
+Host runs at http://localhost:9000 (live reload only)
+Remote1 runs at http://localhost:9001 (HMR supported)
+Remote2 runs at http://localhost:9002 (HMR supported)
+

react-manifest-example/host/@mf-types/index.d.ts

@@ -0,0 +1,27 @@
+import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0 } from './remote1/apis.d.ts';
+import type { PackageType as PackageType_1,RemoteKeys as RemoteKeys_1 } from './remote2/apis.d.ts';
+    declare module "@module-federation/runtime" {
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+T extends RemoteKeys_1 ? PackageType_1<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+declare module "@module-federation/enhanced/runtime" {
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+T extends RemoteKeys_1 ? PackageType_1<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+declare module "@module-federation/runtime-tools" {
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
+T extends RemoteKeys_1 ? PackageType_1<T> :
+Y ;
+      export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
+      export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
+    }
+    

react-manifest-example/host/@mf-types/remote1/apis.d.ts

@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'remote1/button' | 'remote1/app';
+    type PackageType<T> = T extends 'remote1/app' ? typeof import('remote1/app') :T extends 'remote1/button' ? typeof import('remote1/button') :any;

react-manifest-example/host/@mf-types/remote1/app.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/app';
+export { default } from './compiled-types/app';

react-manifest-example/host/@mf-types/remote1/button.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/button';
+export { default } from './compiled-types/button';

react-manifest-example/host/@mf-types/remote1/compiled-types/app.d.ts

@@ -0,0 +1,5 @@
+import './App.css';
+declare const App: (info?: {
+    abc?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default App;

react-manifest-example/host/@mf-types/remote1/compiled-types/button.d.ts

@@ -0,0 +1 @@
+export default function Button(): import("react/jsx-runtime").JSX.Element;

react-manifest-example/host/@mf-types/remote2/apis.d.ts

@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'remote2/button';
+    type PackageType<T> = T extends 'remote2/button' ? typeof import('remote2/button') :any;

react-manifest-example/host/@mf-types/remote2/button.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/button';
+export { default } from './compiled-types/button';

react-manifest-example/host/@mf-types/remote2/compiled-types/button.d.ts

@@ -0,0 +1 @@
+export default function Button(): import("react/jsx-runtime").JSX.Element;

react-manifest-example/host/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

react-manifest-example/host/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-manifest-example_host",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.3.6",
+    "@module-federation/enhanced": "0.1.7",
+    "antd": "^5.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.6.3",
+    "@rsbuild/plugin-react": "^0.6.3",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "^5.4.5"
+  }
+}

react-manifest-example/host/rsbuild.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+
+export default defineConfig({
+  server: {
+    port: 9000,
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'host',
+          remotes: {
+            remote1: 'remote1@http://localhost:9001/mf-manifest.json',
+            remote2: 'remote2@http://localhost:9002/mf-manifest.json',
+          },
+          shared: ['react', 'react-dom'],
+        }),
+      ]);
+    },
+  },
+  plugins: [pluginReact()],
+});

react-manifest-example/host/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;
+} */

react-manifest-example/host/src/App.tsx

@@ -0,0 +1,25 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Navigation from './navigation';
+import './App.css';
+import { useMemo, useState } from 'react';
+import Home from './pages/Home';
+import Remote1 from './pages/remote1';
+import Remote2 from './pages/remote2';
+
+
+
+
+const App = () => {
+  return (
+    <BrowserRouter basename="/">
+      <Navigation />
+      <Routes>
+        <Route path="/" Component={Home}/>
+        <Route path="/remote1" Component={()=> <Remote1 />}/>
+        <Route path="/remote2" Component={()=> <Remote2 />}/>
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;

react-manifest-example/host/src/bootstrap.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

react-manifest-example/host/src/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="@rsbuild/core/types" />
+
+// import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0, PackageExportType as PackageExportType_0 } from './remote2/apis.d.ts';
+// import type { PackageType as PackageType_1,RemoteKeys as RemoteKeys_1, PackageExportType as PackageExportType_1 } from './remote1/apis.d.ts';
+
+
+// declare module "@module-federation/enhanced/runtime" {
+//     type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+//     type PackageType<T, R=any> = T extends RemoteKeys_0 ? PackageType_0<T> : T extends RemoteKeys_1 ? PackageType_1<T> : R ;
+//     type GetType<T, Y extends keyof T> = T[Y];
+//     export function createRemoteComponent<T extends RemoteKeys,Y>(info: {name: T, export: Y}): GetType<PackageType<T>, Y>;
+// }

react-manifest-example/host/src/index.tsx

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

react-manifest-example/host/src/navigation.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { BrowserRouter, createBrowserRouter, Routes, Router, Route, Link, RouterProvider, useLocation } from 'react-router-dom';
+import type { MenuProps } from 'antd';
+import { Menu, Timeline } from 'antd';
+import { GroupOutlined, HomeOutlined, SettingOutlined } from '@ant-design/icons';
+
+
+
+function Navgation () {
+    let location = useLocation();
+    const [current, setCurrent] = useState(location.pathname);
+    
+    const items: MenuProps['items'] = [
+      {
+        label: (
+          <Link to="/">
+            Home
+          </Link>
+        ),
+        key: '/',
+        icon: <HomeOutlined />,
+      },
+      {
+        label: (
+          <Link to="/remote1">
+            Remote1
+          </Link>
+        ),
+        key: '/remote1',
+        icon: <GroupOutlined />,
+      },
+      {
+        label: (
+          <Link to="/remote2">
+            Remote2
+          </Link>
+        ),
+        key: '/remote2',
+        icon: <GroupOutlined />
+      },
+    ];
+
+    const onClick: MenuProps['onClick'] = (e) => {
+      setCurrent(e.key);
+    };
+    return <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />;
+
+}
+
+export default Navgation;

react-manifest-example/host/src/pages/Home.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Space, Table, Tag } from 'antd';
+import type { TableProps } from 'antd';
+
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+  tags: string[];
+}
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    render: (text) => <a>{text}</a>,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: 'Tags',
+    key: 'tags',
+    dataIndex: 'tags',
+    render: (_, { tags }) => (
+      <>
+        {tags.map((tag) => {
+          let color = tag.length > 5 ? 'geekblue' : 'green';
+          if (tag === 'loser') {
+            color = 'volcano';
+          }
+          return (
+            <Tag color={color} key={tag}>
+              {tag.toUpperCase()}
+            </Tag>
+          );
+        })}
+      </>
+    ),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    render: (_, record) => (
+      <Space size="middle">
+        <a>Invite {record.name}</a>
+        <a>Delete</a>
+      </Space>
+    ),
+  },
+];
+
+const data: DataType[] = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sydney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+];
+
+const Home: React.FC = () => <Table columns={columns} dataSource={data} />;
+
+export default Home;