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

package/CHANGELOG.md

@@ -1,7 +1,7 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20240620052430
+## 0.0.0-next-20240620060503
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240620052430
+- @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,6 +97,36 @@ function createRemoteComponent(lazyComponent, info) {
     } catch {
       enableDispathPopstate = false;
     }
+    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) || "/");
+        }
+      }
+    }
     const LazyComponent = React.useMemo(() => {
       return React.lazy(async () => {
         context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import React__default, { useMemo, useRef, useState, useEffect } 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,6 +78,36 @@ function createRemoteComponent(lazyComponent, info) {
     } catch {
       enableDispathPopstate = false;
     }
+    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) || "/");
+        }
+      }
+    }
     const LazyComponent = useMemo(() => {
       return React__default.lazy(async () => {
         LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {

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-20240620052430",
+  "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-20240620052430"
+    "@module-federation/bridge-shared": "0.0.0-next-20240620060503"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -1,7 +1,14 @@
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} 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;
@@ -128,44 +135,46 @@ export function createRemoteComponent<T, E extends keyof T>(
       enableDispathPopstate = false;
     }
 
-    // if (props.basename) {
-    //   basename = props.basename
-    // } else if (enableDispathPopstate) {
-    //   const routerV5Api = 'useRoute' + 'Match';
-    //   const routerV6Api = 'useMatches';
-    //   const routerV5History = 'use' + 'History';
-    //   const useHref = 'useHref';
-
-    //   const match = (ReactRouterDOM as any)[routerV5Api]?.();
-    //   const matchs = (ReactRouterDOM as any)[routerV6Api]?.();
-    //   const location = ReactRouterDOM.useLocation();
-
-    //   if ((ReactRouterDOM as any)[routerV5History] /* react-router@5 */) {
-    //     // there is no dynamic switching of the router version in the project
-    //     // so hooks can be used in conditional judgment
-    //     // eslint-disable-next-line react-hooks/rules-of-hooks
-    //     const history = (ReactRouterDOM as any)[routerV5History]?.();
-    //     // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
-    //     basename = history?.createHref?.({ pathname: '/' });
-    //   } else if (useHref /* react-router@6 */) {
-    //     // eslint-disable-next-line react-hooks/rules-of-hooks
-    //     basename = useHref?.('/');
-    //   }
-    // }
-
-    // if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
-    //   routerContextVal = eval('useContext(ReactRouterDOM.UNSAFE_RouteContext)');
-    //   if (
-    //     routerContextVal &&
-    //     routerContextVal.matches &&
-    //     routerContextVal.matches[0] &&
-    //     routerContextVal.matches[0].pathnameBase
-    //   ) {
-    //     basename = routerContextVal.matches[0].pathnameBase;
-    //   }
-    //   enableDispathPopstate =
-    //     routerContextVal?.matches && routerContextVal?.matches.length > 0;
-    // }
+    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 || '/');
+        }
+      }
+    }
 
     const LazyComponent = useMemo(() => {
       //@ts-ignore

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 || '/';
+}