@module-federation/bridge-react 0.0.0-next-20240620034636 → 0.0.0-next-20240620060503

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240620034636
+## 0.0.0-next-20240620060503
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240620034636
+- @module-federation/bridge-shared@0.0.0-next-20240620060503

package/dist/{context-ePt4wynZ.cjs → context--mtFt3tp.cjs}

@@ -48,8 +48,26 @@ function atLeastReact18(React2) {
     return false;
   }
 }
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
 const RouterContext = React.createContext(null);
 exports.LoggerInstance = LoggerInstance;
 exports.RouterContext = RouterContext;
 exports.atLeastReact18 = atLeastReact18;
 exports.f = f;
+exports.pathJoin = pathJoin;

package/dist/{context-CPtN38Ur.js → context-Bw2PEwa6.js}

@@ -47,10 +47,28 @@ function atLeastReact18(React2) {
     return false;
   }
 }
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
 const RouterContext = React__default.createContext(null);
 export {
   LoggerInstance as L,
   RouterContext as R,
   atLeastReact18 as a,
-  f
+  f,
+  pathJoin as p
 };

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDOM = require("react-router-dom");
-const context = require("./context-ePt4wynZ.cjs");
+const context = require("./context--mtFt3tp.cjs");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -86,6 +86,7 @@ const RemoteApp = ({
 RemoteApp["__APP_VERSION__"] = "0.0.1";
 function createRemoteComponent(lazyComponent, info) {
   return (props) => {
+    var _a;
     const exportName = (info == null ? void 0 : info.export) || "default";
     let basename = "/";
     let enableDispathPopstate = false;
@@ -96,12 +97,35 @@ function createRemoteComponent(lazyComponent, info) {
     } catch {
       enableDispathPopstate = false;
     }
-    if (ReactRouterDOM__namespace.UNSAFE_RouteContext && enableDispathPopstate) {
-      routerContextVal = React.useContext(ReactRouterDOM__namespace.UNSAFE_RouteContext);
-      if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-        basename = routerContextVal.matches[0].pathnameBase;
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny = ReactRouterDOM__namespace;
+      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
+      const useHistory = ReactRouterDOMAny["useHistory"];
+      const useHref = ReactRouterDOMAny["useHref"];
+      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
+      if (UNSAFE_RouteContext) {
+        if (useHref) {
+          basename = useHref == null ? void 0 : useHref("/");
+        }
+        routerContextVal = React.useContext(UNSAFE_RouteContext);
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+          basename = context.pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || "/"
+          );
+        }
+      } else {
+        const match = useRouteMatch == null ? void 0 : useRouteMatch();
+        if (useHistory) {
+          const history = useHistory == null ? void 0 : useHistory();
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
+        }
+        if (match) {
+          basename = context.pathJoin(basename, (match == null ? void 0 : match.path) || "/");
+        }
       }
-      enableDispathPopstate = (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0;
     }
     const LazyComponent = React.useMemo(() => {
       return React.lazy(async () => {

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
-import { L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-CPtN38Ur.js";
+import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import ReactDOM from "react-dom";
 const RemoteApp = ({
   name,
@@ -67,6 +67,7 @@ const RemoteApp = ({
 RemoteApp["__APP_VERSION__"] = "0.0.1";
 function createRemoteComponent(lazyComponent, info) {
   return (props) => {
+    var _a;
     const exportName = (info == null ? void 0 : info.export) || "default";
     let basename = "/";
     let enableDispathPopstate = false;
@@ -77,12 +78,35 @@ function createRemoteComponent(lazyComponent, info) {
     } catch {
       enableDispathPopstate = false;
     }
-    if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
-      routerContextVal = useContext(ReactRouterDOM.UNSAFE_RouteContext);
-      if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-        basename = routerContextVal.matches[0].pathnameBase;
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny = ReactRouterDOM;
+      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
+      const useHistory = ReactRouterDOMAny["useHistory"];
+      const useHref = ReactRouterDOMAny["useHref"];
+      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
+      if (UNSAFE_RouteContext) {
+        if (useHref) {
+          basename = useHref == null ? void 0 : useHref("/");
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
+          basename = pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || "/"
+          );
+        }
+      } else {
+        const match = useRouteMatch == null ? void 0 : useRouteMatch();
+        if (useHistory) {
+          const history = useHistory == null ? void 0 : useHistory();
+          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
+        }
+        if (match) {
+          basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
+        }
       }
-      enableDispathPopstate = (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0;
     }
     const LazyComponent = useMemo(() => {
       return React__default.lazy(async () => {

package/dist/router.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom = require("react-router-dom/");
-const context = require("./context-ePt4wynZ.cjs");
+const context = require("./context--mtFt3tp.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-CPtN38Ur.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-Bw2PEwa6.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240620034636",
+  "version": "0.0.0-next-20240620060503",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240620034636"
+    "@module-federation/bridge-shared": "0.0.0-next-20240620060503"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
-import { LoggerInstance } from './utils';
+import { LoggerInstance, pathJoin } from './utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 
 declare const __APP_VERSION__: string;
@@ -135,18 +135,45 @@ export function createRemoteComponent<T, E extends keyof T>(
       enableDispathPopstate = false;
     }
 
-    if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
-      routerContextVal = useContext(ReactRouterDOM.UNSAFE_RouteContext);
-      if (
-        routerContextVal &&
-        routerContextVal.matches &&
-        routerContextVal.matches[0] &&
-        routerContextVal.matches[0].pathnameBase
-      ) {
-        basename = routerContextVal.matches[0].pathnameBase;
+    if (props.basename) {
+      basename = props.basename;
+    } else if (enableDispathPopstate) {
+      const ReactRouterDOMAny: any = ReactRouterDOM;
+      // Avoid building tools checking references
+      const useRouteMatch = ReactRouterDOMAny['use' + 'RouteMatch']; //v5
+      const useHistory = ReactRouterDOMAny['use' + 'History']; //v5
+      const useHref = ReactRouterDOMAny['use' + 'Href'];
+      const UNSAFE_RouteContext = ReactRouterDOMAny['UNSAFE_' + 'RouteContext'];
+
+      if (UNSAFE_RouteContext /* react-router@6 */) {
+        if (useHref) {
+          basename = useHref?.('/');
+        }
+        routerContextVal = useContext(UNSAFE_RouteContext);
+        if (
+          routerContextVal &&
+          routerContextVal.matches &&
+          routerContextVal.matches[0] &&
+          routerContextVal.matches[0].pathnameBase
+        ) {
+          basename = pathJoin(
+            basename,
+            routerContextVal.matches[0].pathnameBase || '/',
+          );
+        }
+      } /* react-router@5 */ else {
+        const match = useRouteMatch?.(); // v5
+        if (useHistory /* react-router@5 */) {
+          // there is no dynamic switching of the router version in the project
+          // so hooks can be used in conditional judgment
+          const history = useHistory?.();
+          // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
+          basename = history?.createHref?.({ pathname: '/' });
+        }
+        if (match /* react-router@5 */) {
+          basename = pathJoin(basename, match?.path || '/');
+        }
       }
-      enableDispathPopstate =
-        routerContextVal?.matches && routerContextVal?.matches.length > 0;
     }
 
     const LazyComponent = useMemo(() => {

package/src/utils.ts

@@ -21,3 +21,21 @@ export function atLeastReact18(React: typeReact) {
     return false;
   }
 }
+
+export function pathJoin(...args: string[]) {
+  const res = args.reduce((res, path: string) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== 'string') {
+      return res;
+    }
+    if (nPath[0] !== '/') {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === '/') {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res + nPath;
+  }, '');
+  return res || '/';
+}