@module-federation/bridge-react-webpack-plugin 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @module-federation/bridge-react-webpack-plugin
 
+## 0.6.0
+
+### Patch Changes
+
+- Updated dependencies [1d9bb77]
+  - @module-federation/sdk@0.6.0
+
 ## 0.5.2
 
 ### Patch Changes

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.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "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__/utils.spec.ts

@@ -0,0 +1,71 @@
+import path from 'node:path';
+import {
+  checkVersion,
+  findPackageJson,
+  getBridgeRouterAlias,
+} from '../src/utis';
+
+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',
+);
+
+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);
+  });
+});
+
+describe('test findPackageJson: should return the correct package.json path for react-router-dom v5 and v6', () => {
+  it('should return the package.json path', () => {
+    expect(findPackageJson(resolveRouterV5)).toBe(resolveRouterV5_PkgPath);
+    expect(findPackageJson(resolveRouterV6)).toBe(resolveRouterV6_PkgPath);
+  });
+});
+
+describe('test getBridgeRouterAlias: should return the correct alias for react-router-dom v5 and v6', () => {
+  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',
+    });
+  });
+});

package/dist/index.cjs.js

@@ -1625,6 +1625,29 @@ var semver = {
   rcompareIdentifiers: identifiers.rcompareIdentifiers
 };
 const semver$1 = /* @__PURE__ */ getDefaultExportFromCjs(semver);
+const checkVersion = (version) => {
+  const versionMatch = version.match(/\d.*/);
+  if (!versionMatch)
+    return 0;
+  const cleanVersion = versionMatch[0];
+  if (semver$1.gte(cleanVersion, "5.0.0") && semver$1.lt(cleanVersion, "6.0.0")) {
+    return 5;
+  } else if (semver$1.gte(cleanVersion, "6.0.0")) {
+    return 6;
+  }
+  return 0;
+};
+const findPackageJson = (startPath) => {
+  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 getBridgeRouterAlias = (originalAlias) => {
   const userPackageJsonPath = path.resolve(process.cwd(), "package.json");
   let userDependencies = {};
@@ -1637,54 +1660,51 @@ const getBridgeRouterAlias = (originalAlias) => {
       ...userPackageJson.devDependencies
     };
   }
-  const hasBridgeReact = "@module-federation/bridge-react" in userDependencies;
   let bridgeRouterAlias = {};
-  if (hasBridgeReact) {
-    const reactRouterDomVersion = userDependencies["react-router-dom"];
-    let majorVersion = 0;
-    let reactRouterDomPath = "";
-    if (reactRouterDomVersion) {
-      majorVersion = semver$1.major(
-        semver$1.coerce(reactRouterDomVersion || "0.0.0") ?? "0.0.0"
-      );
-      reactRouterDomPath = require.resolve("react-router-dom");
-    } else {
-      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]);
-    }
-    reactRouterDomPath = originalAlias || reactRouterDomPath;
-    if (majorVersion === 5) {
+  let majorVersion = 0;
+  let reactRouterDomPath = "";
+  const reactRouterDomVersion = userDependencies["react-router-dom"];
+  if (originalAlias) {
+    reactRouterDomPath = originalAlias;
+  } else if (reactRouterDomVersion) {
+    majorVersion = checkVersion(reactRouterDomVersion);
+    reactRouterDomPath = require.resolve("react-router-dom");
+  } else {
+    reactRouterDomPath = require.resolve("react-router-dom");
+  }
+  const packageJsonPath = findPackageJson(reactRouterDomPath);
+  if (packageJsonPath) {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+    majorVersion = checkVersion(packageJson.version);
+  } else {
+    console.warn("Unable to find package.json for react-router-dom");
+  }
+  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) {
       bridgeRouterAlias = {
-        "react-router-dom$": "@module-federation/bridge-react/dist/router-v5.es.js"
+        ...bridgeRouterAlias,
+        "react-router-dom/index.js": reactRouterDomPath
       };
-      try {
-        require.resolve("react-router-dom/index.js");
-      } catch (error) {
-        bridgeRouterAlias = {
-          ...bridgeRouterAlias,
-          "react-router-dom/index.js": reactRouterDomPath
-        };
-      }
-    } else if (majorVersion === 6) {
+    }
+  } 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) {
       bridgeRouterAlias = {
-        "react-router-dom$": "@module-federation/bridge-react/dist/router-v6.es.js"
+        ...bridgeRouterAlias,
+        "react-router-dom/dist/index.js": reactRouterDomPath
       };
-      try {
-        require.resolve("react-router-dom/dist/index.js");
-      } catch (error) {
-        bridgeRouterAlias = {
-          ...bridgeRouterAlias,
-          "react-router-dom/dist/index.js": reactRouterDomPath
-        };
-      }
-    } else {
-      console.warn("react-router-dom version is not supported");
     }
+  } else {
+    console.warn("react-router-dom version is not supported");
   }
   console.log(
     "<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>",

package/dist/index.es.js

@@ -1603,6 +1603,29 @@ var semver = {
   rcompareIdentifiers: identifiers.rcompareIdentifiers
 };
 const semver$1 = /* @__PURE__ */ getDefaultExportFromCjs(semver);
+const checkVersion = (version) => {
+  const versionMatch = version.match(/\d.*/);
+  if (!versionMatch)
+    return 0;
+  const cleanVersion = versionMatch[0];
+  if (semver$1.gte(cleanVersion, "5.0.0") && semver$1.lt(cleanVersion, "6.0.0")) {
+    return 5;
+  } else if (semver$1.gte(cleanVersion, "6.0.0")) {
+    return 6;
+  }
+  return 0;
+};
+const findPackageJson = (startPath) => {
+  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 getBridgeRouterAlias = (originalAlias) => {
   const userPackageJsonPath = path.resolve(process.cwd(), "package.json");
   let userDependencies = {};
@@ -1615,54 +1638,51 @@ const getBridgeRouterAlias = (originalAlias) => {
       ...userPackageJson.devDependencies
     };
   }
-  const hasBridgeReact = "@module-federation/bridge-react" in userDependencies;
   let bridgeRouterAlias = {};
-  if (hasBridgeReact) {
-    const reactRouterDomVersion = userDependencies["react-router-dom"];
-    let majorVersion = 0;
-    let reactRouterDomPath = "";
-    if (reactRouterDomVersion) {
-      majorVersion = semver$1.major(
-        semver$1.coerce(reactRouterDomVersion || "0.0.0") ?? "0.0.0"
-      );
-      reactRouterDomPath = require.resolve("react-router-dom");
-    } else {
-      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]);
-    }
-    reactRouterDomPath = originalAlias || reactRouterDomPath;
-    if (majorVersion === 5) {
+  let majorVersion = 0;
+  let reactRouterDomPath = "";
+  const reactRouterDomVersion = userDependencies["react-router-dom"];
+  if (originalAlias) {
+    reactRouterDomPath = originalAlias;
+  } else if (reactRouterDomVersion) {
+    majorVersion = checkVersion(reactRouterDomVersion);
+    reactRouterDomPath = require.resolve("react-router-dom");
+  } else {
+    reactRouterDomPath = require.resolve("react-router-dom");
+  }
+  const packageJsonPath = findPackageJson(reactRouterDomPath);
+  if (packageJsonPath) {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+    majorVersion = checkVersion(packageJson.version);
+  } else {
+    console.warn("Unable to find package.json for react-router-dom");
+  }
+  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) {
       bridgeRouterAlias = {
-        "react-router-dom$": "@module-federation/bridge-react/dist/router-v5.es.js"
+        ...bridgeRouterAlias,
+        "react-router-dom/index.js": reactRouterDomPath
       };
-      try {
-        require.resolve("react-router-dom/index.js");
-      } catch (error) {
-        bridgeRouterAlias = {
-          ...bridgeRouterAlias,
-          "react-router-dom/index.js": reactRouterDomPath
-        };
-      }
-    } else if (majorVersion === 6) {
+    }
+  } 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) {
       bridgeRouterAlias = {
-        "react-router-dom$": "@module-federation/bridge-react/dist/router-v6.es.js"
+        ...bridgeRouterAlias,
+        "react-router-dom/dist/index.js": reactRouterDomPath
       };
-      try {
-        require.resolve("react-router-dom/dist/index.js");
-      } catch (error) {
-        bridgeRouterAlias = {
-          ...bridgeRouterAlias,
-          "react-router-dom/dist/index.js": reactRouterDomPath
-        };
-      }
-    } else {
-      console.warn("react-router-dom version is not supported");
     }
+  } else {
+    console.warn("react-router-dom version is not supported");
   }
   console.log(
     "<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react-webpack-plugin",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
   "dependencies": {
     "semver": "7.6.3",
     "@types/semver": "7.5.8",
-    "@module-federation/sdk": "0.5.2"
+    "@module-federation/sdk": "0.6.0"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

package/project.json

@@ -11,6 +11,18 @@
           "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
+          }
+        ]
+      }
     }
   },
   "tags": ["type:pkg"]

package/src/utis.ts

@@ -2,6 +2,34 @@ 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')) {
+    return 6;
+  }
+
+  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 getBridgeRouterAlias = (
   originalAlias: string,
 ): Record<string, string> => {
@@ -18,69 +46,63 @@ export const getBridgeRouterAlias = (
     };
   }
 
-  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 = '';
+  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]);
-    }
+  const reactRouterDomVersion = userDependencies['react-router-dom'];
+
+  if (originalAlias) {
+    reactRouterDomPath = originalAlias;
+  } else if (reactRouterDomVersion) {
+    majorVersion = checkVersion(reactRouterDomVersion);
+    reactRouterDomPath = require.resolve('react-router-dom');
+  } else {
+    reactRouterDomPath = require.resolve('react-router-dom');
+  }
 
-    // if react-router-dom path has set alias by user, use the originalAlias
-    reactRouterDomPath = originalAlias || reactRouterDomPath;
+  const packageJsonPath = findPackageJson(reactRouterDomPath);
 
-    if (majorVersion === 5) {
+  if (packageJsonPath) {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+    majorVersion = checkVersion(packageJson.version);
+  } else {
+    console.warn('Unable to find package.json for react-router-dom');
+  }
+
+  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 = {
-        'react-router-dom$':
-          '@module-federation/bridge-react/dist/router-v5.es.js',
+        ...bridgeRouterAlias,
+        'react-router-dom/index.js': reactRouterDomPath,
       };
-      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) {
+    }
+  } 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 = {
-        'react-router-dom$':
-          '@module-federation/bridge-react/dist/router-v6.es.js',
+        ...bridgeRouterAlias,
+        'react-router-dom/dist/index.js': reactRouterDomPath,
       };
-
-      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');
     }
+  } else {
+    console.warn('react-router-dom version is not supported');
   }
+
   console.log(
     '<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>',
     bridgeRouterAlias,

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