@module-federation/bridge-react-webpack-plugin 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @module-federation/bridge-react-webpack-plugin
+
+## 0.2.0
+
+### Minor Changes
+
+- d2ab821: feat(bridge): Supports exporting and loading of application-level modules (with routing), currently supports react and vue3
+
+### Patch Changes
+
+- @module-federation/sdk@0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# 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/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 { }

package/dist/index.cjs.js

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const fs = require("node:fs");
+const path = require("node:path");
+class ReactBridgeAliasChangerPlugin {
+  constructor(info) {
+    __publicField(this, "alias");
+    __publicField(this, "targetFile");
+    __publicField(this, "moduleFederationOptions");
+    this.moduleFederationOptions = info.moduleFederationOptions;
+    this.alias = "react-router-dom$";
+    this.targetFile = "@module-federation/bridge-react/dist/router.es.js";
+    if (this.moduleFederationOptions.shared) {
+      if (Array.isArray(this.moduleFederationOptions.shared)) {
+        if (this.moduleFederationOptions.shared.includes("react-router-dom")) {
+          throw Error(
+            "React-router-dom cannot be set to shared after react bridge is used"
+          );
+        }
+      } else {
+        if (this.moduleFederationOptions.shared["react-router-dom"]) {
+          throw Error(
+            "React-router-dom cannot be set to shared after react bridge is used"
+          );
+        }
+      }
+    }
+  }
+  apply(compiler) {
+    compiler.hooks.afterEnvironment.tap("ReactBridgeAliasPlugin", () => {
+      const nodeModulesPath = path.resolve(compiler.context, "node_modules");
+      const targetFilePath = path.join(nodeModulesPath, this.targetFile);
+      if (fs.existsSync(targetFilePath)) {
+        const originalResolve = compiler.options.resolve || {};
+        const originalAlias = originalResolve.alias || {};
+        const updatedAlias = { ...originalAlias, [this.alias]: targetFilePath };
+        compiler.options.resolve = {
+          ...originalResolve,
+          alias: updatedAlias
+        };
+      }
+    });
+  }
+}
+module.exports = ReactBridgeAliasChangerPlugin;

package/dist/index.es.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import fs from "node:fs";
+import path from "node:path";
+class ReactBridgeAliasChangerPlugin {
+  constructor(info) {
+    __publicField(this, "alias");
+    __publicField(this, "targetFile");
+    __publicField(this, "moduleFederationOptions");
+    this.moduleFederationOptions = info.moduleFederationOptions;
+    this.alias = "react-router-dom$";
+    this.targetFile = "@module-federation/bridge-react/dist/router.es.js";
+    if (this.moduleFederationOptions.shared) {
+      if (Array.isArray(this.moduleFederationOptions.shared)) {
+        if (this.moduleFederationOptions.shared.includes("react-router-dom")) {
+          throw Error(
+            "React-router-dom cannot be set to shared after react bridge is used"
+          );
+        }
+      } else {
+        if (this.moduleFederationOptions.shared["react-router-dom"]) {
+          throw Error(
+            "React-router-dom cannot be set to shared after react bridge is used"
+          );
+        }
+      }
+    }
+  }
+  apply(compiler) {
+    compiler.hooks.afterEnvironment.tap("ReactBridgeAliasPlugin", () => {
+      const nodeModulesPath = path.resolve(compiler.context, "node_modules");
+      const targetFilePath = path.join(nodeModulesPath, this.targetFile);
+      if (fs.existsSync(targetFilePath)) {
+        const originalResolve = compiler.options.resolve || {};
+        const originalAlias = originalResolve.alias || {};
+        const updatedAlias = { ...originalAlias, [this.alias]: targetFilePath };
+        compiler.options.resolve = {
+          ...originalResolve,
+          alias: updatedAlias
+        };
+      }
+    });
+  }
+}
+export {
+  ReactBridgeAliasChangerPlugin as default
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@module-federation/bridge-react-webpack-plugin",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "zhouxiao <codingzx@gmail.com>",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.cjs.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./*": "./*"
+  },
+  "dependencies": {
+    "@module-federation/sdk": "0.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "bridge-react-webpack-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/bridge/bridge-react-webpack-plugin/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npm run build --prefix packages/bridge/bridge-react-webpack-plugin"
+        ]
+      }
+    }
+  },
+  "tags": ["type:pkg"]
+}

package/src/index.ts

@@ -0,0 +1,55 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { moduleFederationPlugin } from '@module-federation/sdk';
+
+class ReactBridgeAliasChangerPlugin {
+  alias: string;
+  targetFile: string;
+  moduleFederationOptions: moduleFederationPlugin.ModuleFederationPluginOptions;
+  constructor(info: {
+    moduleFederationOptions: moduleFederationPlugin.ModuleFederationPluginOptions;
+  }) {
+    this.moduleFederationOptions = info.moduleFederationOptions;
+    this.alias = 'react-router-dom$';
+    this.targetFile = '@module-federation/bridge-react/dist/router.es.js';
+    if (this.moduleFederationOptions.shared) {
+      if (Array.isArray(this.moduleFederationOptions.shared)) {
+        if (this.moduleFederationOptions.shared.includes('react-router-dom')) {
+          throw Error(
+            'React-router-dom cannot be set to shared after react bridge is used',
+          );
+        }
+      } else {
+        if (this.moduleFederationOptions.shared['react-router-dom']) {
+          throw Error(
+            'React-router-dom cannot be set to shared after react bridge is used',
+          );
+        }
+      }
+    }
+  }
+
+  apply(compiler: any) {
+    compiler.hooks.afterEnvironment.tap('ReactBridgeAliasPlugin', () => {
+      // Gets the path to the node_modules directory
+      const nodeModulesPath = path.resolve(compiler.context, 'node_modules');
+      const targetFilePath = path.join(nodeModulesPath, this.targetFile);
+
+      if (fs.existsSync(targetFilePath)) {
+        const originalResolve = compiler.options.resolve || {};
+        const originalAlias = originalResolve.alias || {};
+
+        // Update alias
+        const updatedAlias = { ...originalAlias, [this.alias]: targetFilePath };
+
+        // Update the webpack configuration
+        compiler.options.resolve = {
+          ...originalResolve,
+          alias: updatedAlias,
+        };
+      }
+    });
+  }
+}
+
+export default ReactBridgeAliasChangerPlugin;

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+
+    /* Bundler mode */
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+
+    "declarationDir": "./dist/types",
+    "rootDir": "./src",
+    "module": "commonjs",
+    "target": "es5",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/remoteApp.tsx",
+    "src/create.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      rollupTypes: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+      },
+      formats: ['cjs', 'es'],
+      fileName: (format, entryName) => `${entryName}.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['node:fs', 'node:path'],
+    },
+    minify: false,
+  },
+});