@module-federation/bridge-react-webpack-plugin 0.0.0-docs-remove-invalid-lark-link-20251205062649

package/README.md

@@ -0,0 +1,131 @@
+# React Bridge
+
+React bridge is used to load the routing module in mf, so that the routing module can work properly with the host environment.
+
+> When to use
+
+- Load the route module
+- Load across the front end framework
+
+## How to use
+
+# 1. Install the react bridge library
+
+```bash
+pnpm add @module-federation/bridge-react
+```
+
+# 2. Configure the react bridge library
+
+> Use createBridgeComponent create component provider
+
+```jsx
+// ./src/index.tsx
+import { createBridgeComponent } from '@module-federation/bridge-react';
+
+function App() {
+  return ( <BrowserRouter basename="/">
+    <Routes>
+      <Route path="/" Component={()=> <div>Home page</div>}>
+      <Route path="/detail" Component={()=> <div>Detail page</div>}>
+    </Routes>
+  </BrowserRouter>)
+}
+
+export default createBridgeComponent({
+  rootComponent: App
+});
+```
+
+> set alias to proxy
+
+```js
+//rsbuild.config.ts
+export default defineConfig({
+  source: {
+    alias: {
+      'react-router-dom$': path.resolve(
+        __dirname,
+        'node_modules/@module-federation/bridge-react/dist/router.es.js',
+      ),
+    },
+  },
+  server: {
+    port: 2001,
+    host: 'localhost',
+  },
+  dev: {
+    assetPrefix: 'http://localhost:2001',
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      delete config.optimization?.splitChunks;
+      config.output!.uniqueName = 'remote1';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'remote1',
+          exposes: {
+            './export-app': './src/index.tsx',
+          }
+        }),
+      ]);
+    },
+  },
+});
+```
+
+# 3. Load the module with routing
+
+```js
+//rsbuild.config.ts
+export default defineConfig({
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      config.output!.uniqueName = 'host';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'host',
+          remotes: {
+            remote1: 'remote1@http://localhost:2001/mf-manifest.json',
+          },
+        }),
+      ]);
+    },
+  },
+});
+```
+
+> Use the module
+
+```jsx
+// ./src/index.tsx
+import { createBridgeComponent } from '@module-federation/bridge-react';
+
+const Remote1 = createBridgeComponent(()=> import('remote1/export-app'));
+
+function App() {
+  return ( <BrowserRouter basename="/">
+    <ul>
+      <li>
+        <Link to="/">
+          Home
+        </Link>
+      </li>
+      <li>
+        <Link to="/remote1">
+          Remote1
+        </Link>
+      </li>
+    </ul>
+    <Routes>
+      <Route path="/" Component={()=> <div>Home page</div>}>
+      <Route path="/remote1" Component={()=> <Remote1 />}>
+    </Routes>
+  </BrowserRouter>)
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+    <App />
+);
+```

package/__tests__/mockRouterDir/router-v5/react-router-dom/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "react-router-dom",
+  "version": "5.3.4",
+  "description": "DOM bindings for React Router",
+  "homepage": "https://reactrouter.com/",
+  "repository": {
+    "url": "https://github.com/remix-run/react-router.git",
+    "type": "git",
+    "directory": "packages/react-router-dom"
+  },
+  "license": "MIT",
+  "author": "Remix Software <hello@remix.run>",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "BrowserRouter.js",
+    "HashRouter.js",
+    "Link.js",
+    "MemoryRouter.js",
+    "NavLink.js",
+    "Prompt.js",
+    "Redirect.js",
+    "Route.js",
+    "Router.js",
+    "StaticRouter.js",
+    "Switch.js",
+    "cjs",
+    "es",
+    "esm",
+    "index.js",
+    "generatePath.js",
+    "matchPath.js",
+    "modules/*.js",
+    "modules/utils/*.js",
+    "withRouter.js",
+    "warnAboutDeprecatedCJSRequire.js",
+    "umd"
+  ],
+  "main": "index.js",
+  "module": "esm/react-router-dom.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint modules"
+  },
+  "peerDependencies": {
+    "react": ">=15"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.12.13",
+    "history": "^4.9.0",
+    "loose-envify": "^1.3.1",
+    "prop-types": "^15.6.2",
+    "react-router": "5.3.4",
+    "tiny-invariant": "^1.0.2",
+    "tiny-warning": "^1.0.0"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  },
+  "keywords": [
+    "react",
+    "router",
+    "route",
+    "routing",
+    "history",
+    "link"
+  ]
+}

package/__tests__/mockRouterDir/router-v6/react-router-dom/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "react-router-dom",
+  "version": "6.22.3",
+  "description": "Declarative routing for React web applications",
+  "keywords": [
+    "react",
+    "router",
+    "route",
+    "routing",
+    "history",
+    "link"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/remix-run/react-router",
+    "directory": "packages/react-router-dom"
+  },
+  "license": "MIT",
+  "author": "Remix Software <hello@remix.run>",
+  "sideEffects": false,
+  "main": "./dist/main.js",
+  "unpkg": "./dist/umd/react-router-dom.production.min.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@remix-run/router": "1.15.3",
+    "react-router": "6.22.3"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "README.md",
+    "server.d.ts",
+    "server.js",
+    "server.mjs"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/__tests__/mockRouterDir/router-v7/react-router/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-router",
+  "version": "7.0.0",
+  "description": "Declarative routing for React applications",
+  "keywords": [
+    "react",
+    "router",
+    "route",
+    "routing",
+    "history",
+    "link"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/remix-run/react-router",
+    "directory": "packages/react-router"
+  },
+  "license": "MIT",
+  "author": "Remix Software <hello@remix.run>",
+  "sideEffects": false,
+  "main": "./dist/main.js",
+  "unpkg": "./dist/umd/react-router.production.min.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@remix-run/router": "2.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "files": [
+    "dist/",
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/__tests__/utils.spec.ts

@@ -0,0 +1,102 @@
+import path from 'node:path';
+import { checkVersion, findPackageJson } from '../src/utils';
+import { getBridgeRouterAlias } from '../src/router-alias';
+
+const resolveRouterV5 = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v5/react-router-dom',
+);
+const resolveRouterV5_PkgPath = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v5/react-router-dom/package.json',
+);
+const resolveRouterV6 = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v6/react-router-dom/dist/main.js',
+);
+const resolveRouterV6_PkgPath = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v6/react-router-dom/package.json',
+);
+const resolveRouterV7 = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v7/react-router',
+);
+const resolveRouterV7_PkgPath = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v7/react-router/package.json',
+);
+
+describe('test checkVersion: should return the correct major version for react-router-dom', () => {
+  it('should return 5', () => {
+    expect(checkVersion('5.0.0')).toBe(5);
+  });
+
+  it('should return 5', () => {
+    expect(checkVersion('^5.0.0')).toBe(5);
+  });
+
+  it('should return 6', () => {
+    expect(checkVersion('6.0.0')).toBe(6);
+  });
+
+  it('should return 6', () => {
+    expect(checkVersion('~6.0.0')).toBe(6);
+  });
+
+  it('should return 6', () => {
+    expect(checkVersion('^6.0.0')).toBe(6);
+  });
+
+  it('should return 7', () => {
+    expect(checkVersion('7.0.0')).toBe(7);
+  });
+
+  it('should return 7', () => {
+    expect(checkVersion('~7.0.0')).toBe(7);
+  });
+
+  it('should return 7', () => {
+    expect(checkVersion('^7.0.0')).toBe(7);
+  });
+});
+
+describe('test findPackageJson: should return the correct package.json path for react-router-dom v5, v6 and react-router v7', () => {
+  it('should return the package.json path', () => {
+    expect(findPackageJson(resolveRouterV5)).toBe(resolveRouterV5_PkgPath);
+    expect(findPackageJson(resolveRouterV6)).toBe(resolveRouterV6_PkgPath);
+    expect(findPackageJson(resolveRouterV7)).toBe(resolveRouterV7_PkgPath);
+  });
+});
+
+describe('test getBridgeRouterAlias: should return the correct alias for react-router-dom v5, v6 and react-router v7', () => {
+  it('should return the correct alias for router v5', () => {
+    const res = getBridgeRouterAlias(resolveRouterV5);
+    expect(res).toEqual({
+      'react-router-dom$':
+        '@module-federation/bridge-react/dist/router-v5.es.js',
+      'react-router-dom/index.js': resolveRouterV5,
+    });
+  });
+
+  it('should return the correct alias for router v6', () => {
+    const res = getBridgeRouterAlias(resolveRouterV6);
+    expect(res).toEqual({
+      'react-router-dom$':
+        '@module-federation/bridge-react/dist/router-v6.es.js',
+      'react-router-dom/dist/index.js': resolveRouterV6,
+    });
+  });
+
+  it('should return the correct alias for router v7', () => {
+    const res = getBridgeRouterAlias(resolveRouterV7);
+    expect(res).toEqual({
+      'react-router$': '@module-federation/bridge-react/dist/router-v7.es.js',
+      'react-router-dom$':
+        '@module-federation/bridge-react/dist/router-v7.es.js',
+      'react-router/dist/development/index.js': resolveRouterV7,
+      'react-router/dist/production/index.js': resolveRouterV7,
+      'react-router-dom/dist/index.js': resolveRouterV7,
+    });
+  });
+});

package/dist/index.cjs.d.ts

@@ -0,0 +1,14 @@
+import { moduleFederationPlugin } from '@module-federation/sdk';
+
+declare class ReactBridgeAliasChangerPlugin {
+    alias: string;
+    targetFile: string;
+    moduleFederationOptions: moduleFederationPlugin.ModuleFederationPluginOptions;
+    constructor(info: {
+        moduleFederationOptions: moduleFederationPlugin.ModuleFederationPluginOptions;
+    });
+    apply(compiler: any): void;
+}
+export default ReactBridgeAliasChangerPlugin;
+
+export { }