@module-federation/bridge-react-webpack-plugin 0.0.0-feat-support-bridge-react-router-v7-20251015102312

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@module-federation/bridge-react-webpack-plugin",
+  "version": "0.0.0-feat-support-bridge-react-router-v7-20251015102312",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "zhouxiao <codingzx@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/module-federation/core.git",
+    "directory": "packages/bridge/bridge-react-webpack-plugin"
+  },
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.cjs.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./*": "./*"
+  },
+  "dependencies": {
+    "semver": "7.6.3",
+    "@types/semver": "7.5.8",
+    "@module-federation/sdk": "0.0.0-feat-support-bridge-react-router-v7-20251015102312"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.4.20",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "bridge-react-webpack-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/bridge/bridge-react-webpack-plugin/src",
+  "projectType": "library",
+  "tags": ["type:pkg"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npm run build --prefix packages/bridge/bridge-react-webpack-plugin"
+        ]
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "parallel": false,
+        "commands": [
+          {
+            "command": "vitest run -c packages/bridge/bridge-react-webpack-plugin/vitest.config.ts",
+            "forwardAllArgs": false
+          }
+        ]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,62 @@
+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;
+  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 = {
+          // allow `alias` can be override
+          // [this.alias]: targetFilePath,
+          ...getBridgeRouterAlias(originalAlias['react-router-dom']),
+          ...originalAlias,
+        };
+
+        // Update the webpack configuration
+        compiler.options.resolve = {
+          ...originalResolve,
+          alias: updatedAlias,
+        };
+      }
+    });
+  }
+}
+
+export default ReactBridgeAliasChangerPlugin;

package/src/utis.ts

@@ -0,0 +1,184 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import semver from 'semver';
+
+export const checkVersion = (version: string) => {
+  // Extract the version number starting from the first digit
+  const versionMatch = version.match(/\d.*/);
+  if (!versionMatch) return 0;
+
+  const cleanVersion = versionMatch[0];
+
+  if (semver.gte(cleanVersion, '5.0.0') && semver.lt(cleanVersion, '6.0.0')) {
+    return 5;
+  } else if (
+    semver.gte(cleanVersion, '6.0.0') &&
+    semver.lt(cleanVersion, '7.0.0')
+  ) {
+    return 6;
+  } else if (semver.gte(cleanVersion, '7.0.0')) {
+    return 7;
+  }
+
+  return 0;
+};
+
+export const findPackageJson = (startPath: string): string | null => {
+  let currentPath = startPath;
+  while (currentPath !== path.parse(currentPath).root) {
+    const packageJsonPath = path.join(currentPath, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      return packageJsonPath;
+    }
+    currentPath = path.dirname(currentPath);
+  }
+  return null;
+};
+
+const getDependencies = () => {
+  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,
+    };
+  }
+  return userDependencies;
+};
+
+const reactRouterDomV5AliasPath =
+  '@module-federation/bridge-react/dist/router-v5.es.js';
+const reactRouterDomV6AliasPath =
+  '@module-federation/bridge-react/dist/router-v6.es.js';
+const reactRouterDomV7AliasPath =
+  '@module-federation/bridge-react/dist/router-v7.es.js';
+
+const setRouterAlias = (majorVersion: number, reactRouterDomPath: string) => {
+  let bridgeRouterAlias = {};
+  if (majorVersion === 5) {
+    bridgeRouterAlias = {
+      'react-router-dom$': reactRouterDomV5AliasPath,
+    };
+    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$': reactRouterDomV6AliasPath,
+    };
+    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 if (majorVersion === 7) {
+    // React Router v7 uses 'react-router' package name with new dist structure
+    bridgeRouterAlias = {
+      'react-router$': reactRouterDomV7AliasPath,
+      'react-router-dom$': reactRouterDomV7AliasPath, // Keep compatibility for old imports
+    };
+
+    // Try to resolve v7's new dist structure
+    try {
+      require.resolve('react-router/dist/development/index.js');
+    } catch (error) {
+      try {
+        require.resolve('react-router/dist/production/index.js');
+        bridgeRouterAlias = {
+          ...bridgeRouterAlias,
+          'react-router/dist/development/index.js':
+            reactRouterDomPath + '/dist/production/index.js',
+        };
+      } catch (error2) {
+        // Fallback to original path
+        bridgeRouterAlias = {
+          ...bridgeRouterAlias,
+          'react-router/dist/development/index.js': reactRouterDomPath,
+        };
+      }
+    }
+
+    // Keep compatibility for old react-router-dom imports
+    try {
+      require.resolve('react-router-dom/dist/index.js');
+    } catch (error) {
+      bridgeRouterAlias = {
+        ...bridgeRouterAlias,
+        'react-router-dom/dist/index.js': reactRouterDomPath,
+      };
+    }
+  }
+  return bridgeRouterAlias;
+};
+
+export const getBridgeRouterAlias = (
+  originalAlias: string,
+): Record<string, string> => {
+  const userDependencies = getDependencies();
+  let reactRouterDomPath = '';
+
+  if (originalAlias) {
+    reactRouterDomPath = originalAlias;
+  } else if (userDependencies['react-router']) {
+    // React Router v7 uses 'react-router' package name
+    try {
+      reactRouterDomPath = path.resolve(
+        process.cwd(),
+        'node_modules/react-router',
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  } else if (userDependencies['react-router-dom']) {
+    // React Router v5/v6 uses 'react-router-dom' package name
+    try {
+      reactRouterDomPath = path.resolve(
+        process.cwd(),
+        'node_modules/react-router-dom',
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  // if find react-router-dom in package.json
+  if (reactRouterDomPath) {
+    const packageJsonPath = findPackageJson(reactRouterDomPath) || '';
+    const packageJsonContent = JSON.parse(
+      fs.readFileSync(packageJsonPath, 'utf-8'),
+    );
+    const majorVersion = checkVersion(packageJsonContent.version);
+    const bridgeRouterAlias = setRouterAlias(majorVersion, reactRouterDomPath);
+    console.log(
+      '<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>',
+      bridgeRouterAlias,
+    );
+    return bridgeRouterAlias;
+  } else {
+    // Default to v7 (latest) which uses 'react-router' package name
+    const bridgeRouterAlias = {
+      'react-router$': reactRouterDomV7AliasPath,
+      'react-router-dom$': reactRouterDomV7AliasPath, // Keep compatibility
+    };
+    console.log(
+      '<<<<<<<<<<<<< default bridgeRouterAlias >>>>>>>>>>>>>',
+      bridgeRouterAlias,
+    );
+    return bridgeRouterAlias;
+  }
+};

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,
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import path from 'path';
+export default defineConfig({
+  define: {
+    __DEV__: true,
+    __TEST__: true,
+    __BROWSER__: false,
+    __VERSION__: '"unknown"',
+    __APP_VERSION__: '"0.0.0"',
+  },
+  plugins: [nxViteTsPaths()],
+  test: {
+    environment: 'jsdom',
+    include: [
+      path.resolve(__dirname, '__tests__/*.spec.ts'),
+      path.resolve(__dirname, '__tests__/*.spec.tsx'),
+    ],
+    globals: true,
+    testTimeout: 10000,
+  },
+});