@module-federation/bridge-react-webpack-plugin 0.4.0 → 0.5.1

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@module-federation/bridge-react-webpack-plugin",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "publishConfig": {
     "access": "public"
   },
   "author": "zhouxiao <codingzx@gmail.com>",
   "main": "./dist/index.cjs.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.es.js",
   "types": "./dist/index.cjs.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.cjs.d.ts",
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
     "./*": "./*"
   },
   "dependencies": {
-    "@module-federation/sdk": "0.4.0"
+    "semver": "7.6.3",
+    "@types/semver": "7.5.8",
+    "@module-federation/sdk": "0.5.1"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

package/src/index.ts

@@ -1,6 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
+import { getBridgeRouterAlias } from './utis';
 
 class ReactBridgeAliasChangerPlugin {
   alias: string;
@@ -12,6 +13,7 @@ class ReactBridgeAliasChangerPlugin {
     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')) {
@@ -40,7 +42,12 @@ class ReactBridgeAliasChangerPlugin {
         const originalAlias = originalResolve.alias || {};
 
         // Update alias
-        const updatedAlias = { ...originalAlias, [this.alias]: targetFilePath };
+        const updatedAlias = {
+          // allow `alias` can be override
+          // [this.alias]: targetFilePath,
+          ...getBridgeRouterAlias(originalAlias['react-router-dom']),
+          ...originalAlias,
+        };
 
         // Update the webpack configuration
         compiler.options.resolve = {

package/src/utis.ts

@@ -0,0 +1,89 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import semver from 'semver';
+
+export const getBridgeRouterAlias = (
+  originalAlias: string,
+): Record<string, string> => {
+  const userPackageJsonPath = path.resolve(process.cwd(), 'package.json');
+  let userDependencies: Record<string, string> = {};
+
+  if (fs.existsSync(userPackageJsonPath)) {
+    const userPackageJson = JSON.parse(
+      fs.readFileSync(userPackageJsonPath, 'utf-8'),
+    );
+    userDependencies = {
+      ...userPackageJson.dependencies,
+      ...userPackageJson.devDependencies,
+    };
+  }
+
+  const hasBridgeReact = '@module-federation/bridge-react' in userDependencies;
+
+  let bridgeRouterAlias = {};
+  // user install @module-federation/bridge-react package or set bridgeReactRouterDomAlias
+  if (hasBridgeReact) {
+    // user install react-router-dom package
+    const reactRouterDomVersion = userDependencies['react-router-dom'];
+    let majorVersion = 0;
+    let reactRouterDomPath = '';
+
+    // if react-router-dom version is set, use the version in package.json
+    if (reactRouterDomVersion) {
+      majorVersion = semver.major(
+        semver.coerce(reactRouterDomVersion || '0.0.0') ?? '0.0.0',
+      );
+      reactRouterDomPath = require.resolve('react-router-dom');
+    } else {
+      // if react-router-dom version is not set, reslove react-router-dom to get the version
+      reactRouterDomPath = require.resolve('react-router-dom');
+      const packageJsonPath = path.resolve(
+        reactRouterDomPath,
+        '../../package.json',
+      );
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+      majorVersion = parseInt(packageJson.version.split('.')[0]);
+    }
+
+    // if react-router-dom path has set alias by user, use the originalAlias
+    reactRouterDomPath = originalAlias || reactRouterDomPath;
+
+    if (majorVersion === 5) {
+      bridgeRouterAlias = {
+        'react-router-dom$':
+          '@module-federation/bridge-react/dist/router-v5.es.js',
+      };
+      try {
+        require.resolve('react-router-dom/index.js');
+      } catch (error) {
+        // if react-router-dom/index.js cannot be resolved, set the alias to origin reactRouterDomPath
+        bridgeRouterAlias = {
+          ...bridgeRouterAlias,
+          'react-router-dom/index.js': reactRouterDomPath,
+        };
+      }
+    } else if (majorVersion === 6) {
+      bridgeRouterAlias = {
+        'react-router-dom$':
+          '@module-federation/bridge-react/dist/router-v6.es.js',
+      };
+
+      try {
+        require.resolve('react-router-dom/dist/index.js');
+      } catch (error) {
+        // if react-router-dom/dist/index.js cannot be resolved, set the alias to origin reactRouterDomPath
+        bridgeRouterAlias = {
+          ...bridgeRouterAlias,
+          'react-router-dom/dist/index.js': reactRouterDomPath,
+        };
+      }
+    } else {
+      console.warn('react-router-dom version is not supported');
+    }
+  }
+  console.log(
+    '<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>',
+    bridgeRouterAlias,
+  );
+  return bridgeRouterAlias;
+};