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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@module-federation/bridge-react-webpack-plugin",
+  "version": "0.0.0-docs-remove-invalid-lark-link-20251205062649",
+  "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-docs-remove-invalid-lark-link-20251205062649"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.4.21",
+    "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 './router-alias';
+
+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 - set up router version alias
+        const updatedAlias: Record<string, string> = {
+          // 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/router-alias.ts

@@ -0,0 +1,124 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { checkVersion, findPackageJson, getDependencies } from './utils';
+
+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 createReactRouterV7Alias = (
+  reactRouterDomPath: string,
+): Record<string, string> => {
+  const baseAlias = {
+    'react-router$': reactRouterDomV7AliasPath,
+    'react-router-dom$': reactRouterDomV7AliasPath, // Keep compatibility for old imports
+  };
+
+  const resolvedDistPaths: Record<string, string> = {
+    'react-router/dist/development/index.js': reactRouterDomPath,
+    'react-router/dist/production/index.js': reactRouterDomPath,
+  };
+
+  const legacyCompatibility: Record<string, string> = {
+    'react-router-dom/dist/index.js': reactRouterDomPath,
+  };
+
+  return {
+    ...baseAlias,
+    ...resolvedDistPaths,
+    ...legacyCompatibility,
+  };
+};
+
+const createReactRouterV5Alias = (
+  reactRouterDomPath: string,
+): Record<string, string> => {
+  return {
+    'react-router-dom$': reactRouterDomV5AliasPath,
+    'react-router-dom/index.js': reactRouterDomPath,
+  };
+};
+
+const createReactRouterV6Alias = (
+  reactRouterDomPath: string,
+): Record<string, string> => {
+  return {
+    'react-router-dom$': reactRouterDomV6AliasPath,
+    'react-router-dom/dist/index.js': reactRouterDomPath,
+  };
+};
+
+const setRouterAlias = (
+  majorVersion: number,
+  reactRouterDomPath: string,
+): Record<string, string> => {
+  switch (majorVersion) {
+    case 5:
+      return createReactRouterV5Alias(reactRouterDomPath);
+    case 6:
+      return createReactRouterV6Alias(reactRouterDomPath);
+    case 7:
+      return createReactRouterV7Alias(reactRouterDomPath);
+    default:
+      console.warn(
+        `Unsupported React Router version: ${majorVersion}. Defaulting to v7.`,
+      );
+      return createReactRouterV7Alias(reactRouterDomPath);
+  }
+};
+
+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
+    reactRouterDomPath = path.resolve(
+      process.cwd(),
+      'node_modules/react-router',
+    );
+  } else if (userDependencies['react-router-dom']) {
+    // React Router v5/v6 uses 'react-router-dom' package name
+    reactRouterDomPath = path.resolve(
+      process.cwd(),
+      'node_modules/react-router-dom',
+    );
+  }
+
+  // Generate alias based on detected router package
+  if (reactRouterDomPath) {
+    const packageJsonPath = findPackageJson(reactRouterDomPath);
+    if (packageJsonPath) {
+      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;
+    }
+  }
+
+  // Default to v6 which uses 'react-router-dom'
+  const bridgeRouterAlias = {
+    'react-router-dom$': reactRouterDomV6AliasPath,
+  };
+  console.log(
+    '<<<<<<<<<<<<< default bridgeRouterAlias >>>>>>>>>>>>>',
+    bridgeRouterAlias,
+  );
+  return bridgeRouterAlias;
+};

package/src/utils.ts

@@ -0,0 +1,52 @@
+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;
+};
+
+export 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;
+};

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