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

package/CHANGELOG.md

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

package/__tests__/bridge.spec.tsx

@@ -63,6 +63,7 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('loading');
 
     await sleep(200);
-    expect(getHtml(container)).toMatch('life cycle render hello world');
+    expect(getHtml(container)).toMatch('life cycle render');
+    expect(getHtml(container)).toMatch('hello world');
   });
 });

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const reactRouterDom = require("react-router-dom");
+const ReactRouterDOM = require("react-router-dom");
 const context = require("./context-ePt4wynZ.cjs");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -21,28 +21,32 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
 const RemoteApp = ({
   name,
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = React.useRef(null);
   const renderDom = React.useRef(null);
-  const location = reactRouterDom.useLocation();
-  const [pathname, setPathname] = React.useState(location.pathname);
   const providerInfoRef = React.useRef(null);
-  React.useEffect(() => {
-    if (pathname !== "" && pathname !== location.pathname) {
-      context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-        name,
-        pathname: location.pathname
-      });
-      context.f();
-    }
-    setPathname(location.pathname);
-  }, [location]);
+  if (dispathPopstate) {
+    const location = ReactRouterDOM__namespace.useLocation();
+    const [pathname, setPathname] = React.useState(location.pathname);
+    React.useEffect(() => {
+      if (pathname !== "" && pathname !== location.pathname) {
+        context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+          name,
+          pathname: location.pathname
+        });
+        context.f();
+      }
+      setPathname(location.pathname);
+    }, [location]);
+  }
   React.useEffect(() => {
     const renderTimeout = setTimeout(() => {
       const providerReturn = providerInfo();
@@ -83,10 +87,21 @@ RemoteApp["__APP_VERSION__"] = "0.0.1";
 function createRemoteComponent(lazyComponent, info) {
   return (props) => {
     const exportName = (info == null ? void 0 : info.export) || "default";
-    const routerContextVal = React.useContext(reactRouterDom.UNSAFE_RouteContext);
     let basename = "/";
-    if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-      basename = routerContextVal.matches[0].pathnameBase;
+    let enableDispathPopstate = false;
+    let routerContextVal;
+    try {
+      ReactRouterDOM__namespace.useLocation();
+      enableDispathPopstate = true;
+    } 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;
+      }
+      enableDispathPopstate = (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0;
     }
     const LazyComponent = React.useMemo(() => {
       return React.lazy(async () => {
@@ -94,7 +109,8 @@ function createRemoteComponent(lazyComponent, info) {
           basename,
           lazyComponent,
           exportName,
-          props
+          props,
+          routerContextVal
         });
         const m2 = await lazyComponent();
         const moduleName = m2 && m2[Symbol.for("mf_module_id")];
@@ -109,6 +125,7 @@ function createRemoteComponent(lazyComponent, info) {
               RemoteApp,
               {
                 name: moduleName,
+                dispathPopstate: enableDispathPopstate,
                 ...info,
                 ...props,
                 providerInfo: exportFn,

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
-import { UNSAFE_RouteContext, useLocation } from "react-router-dom";
+import * as ReactRouterDOM from "react-router-dom";
 import { L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-CPtN38Ur.js";
 import ReactDOM from "react-dom";
 const RemoteApp = ({
@@ -8,23 +8,26 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }) => {
   const rootRef = useRef(null);
   const renderDom = useRef(null);
-  const location = useLocation();
-  const [pathname, setPathname] = useState(location.pathname);
   const providerInfoRef = useRef(null);
-  useEffect(() => {
-    if (pathname !== "" && pathname !== location.pathname) {
-      LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-        name,
-        pathname: location.pathname
-      });
-      f();
-    }
-    setPathname(location.pathname);
-  }, [location]);
+  if (dispathPopstate) {
+    const location = ReactRouterDOM.useLocation();
+    const [pathname, setPathname] = useState(location.pathname);
+    useEffect(() => {
+      if (pathname !== "" && pathname !== location.pathname) {
+        LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+          name,
+          pathname: location.pathname
+        });
+        f();
+      }
+      setPathname(location.pathname);
+    }, [location]);
+  }
   useEffect(() => {
     const renderTimeout = setTimeout(() => {
       const providerReturn = providerInfo();
@@ -65,10 +68,21 @@ RemoteApp["__APP_VERSION__"] = "0.0.1";
 function createRemoteComponent(lazyComponent, info) {
   return (props) => {
     const exportName = (info == null ? void 0 : info.export) || "default";
-    const routerContextVal = useContext(UNSAFE_RouteContext);
     let basename = "/";
-    if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-      basename = routerContextVal.matches[0].pathnameBase;
+    let enableDispathPopstate = false;
+    let routerContextVal;
+    try {
+      ReactRouterDOM.useLocation();
+      enableDispathPopstate = true;
+    } 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;
+      }
+      enableDispathPopstate = (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0;
     }
     const LazyComponent = useMemo(() => {
       return React__default.lazy(async () => {
@@ -76,7 +90,8 @@ function createRemoteComponent(lazyComponent, info) {
           basename,
           lazyComponent,
           exportName,
-          props
+          props,
+          routerContextVal
         });
         const m2 = await lazyComponent();
         const moduleName = m2 && m2[Symbol.for("mf_module_id")];
@@ -91,6 +106,7 @@ function createRemoteComponent(lazyComponent, info) {
               RemoteApp,
               {
                 name: moduleName,
+                dispathPopstate: enableDispathPopstate,
                 ...info,
                 ...props,
                 providerInfo: exportFn,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240619100937",
+  "version": "0.0.0-next-20240620034636",
   "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-20240619100937"
+    "@module-federation/bridge-shared": "0.0.0-next-20240620034636"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/src/create.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { UNSAFE_RouteContext, useLocation } from 'react-router-dom';
+import * as ReactRouterDOM from 'react-router-dom';
 import type { ProviderParams } from '@module-federation/bridge-shared';
 import { LoggerInstance } from './utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
@@ -31,6 +31,7 @@ interface RemoteModule {
 interface RemoteAppParams {
   name: string;
   providerInfo: NonNullable<RemoteModule['provider']>;
+  dispathPopstate: boolean;
 }
 
 const RemoteApp = ({
@@ -38,24 +39,27 @@ const RemoteApp = ({
   memoryRoute,
   basename,
   providerInfo,
+  dispathPopstate,
   ...resProps
 }: RemoteAppParams & ProviderParams) => {
   const rootRef = useRef(null);
   const renderDom = useRef(null);
-  const location = useLocation();
-  const [pathname, setPathname] = useState(location.pathname);
   const providerInfoRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (pathname !== '' && pathname !== location.pathname) {
-      LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-        name,
-        pathname: location.pathname,
-      });
-      dispatchPopstateEnv();
-    }
-    setPathname(location.pathname);
-  }, [location]);
+  if (dispathPopstate) {
+    const location = ReactRouterDOM.useLocation();
+    const [pathname, setPathname] = useState(location.pathname);
+
+    useEffect(() => {
+      if (pathname !== '' && pathname !== location.pathname) {
+        LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+          name,
+          pathname: location.pathname,
+        });
+        dispatchPopstateEnv();
+      }
+      setPathname(location.pathname);
+    }, [location]);
+  }
 
   useEffect(() => {
     const renderTimeout = setTimeout(() => {
@@ -121,13 +125,28 @@ export function createRemoteComponent<T, E extends keyof T>(
     } & RawComponentType,
   ) => {
     const exportName = info?.export || 'default';
-    const routerContextVal = useContext(UNSAFE_RouteContext);
     let basename = '/';
-    if (
-      routerContextVal.matches[0] &&
-      routerContextVal.matches[0].pathnameBase
-    ) {
-      basename = routerContextVal.matches[0].pathnameBase;
+    let enableDispathPopstate = false;
+    let routerContextVal: any;
+    try {
+      ReactRouterDOM.useLocation();
+      enableDispathPopstate = true;
+    } 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;
+      }
+      enableDispathPopstate =
+        routerContextVal?.matches && routerContextVal?.matches.length > 0;
     }
 
     const LazyComponent = useMemo(() => {
@@ -138,6 +157,7 @@ export function createRemoteComponent<T, E extends keyof T>(
           lazyComponent,
           exportName,
           props,
+          routerContextVal,
         });
         const m = (await lazyComponent()) as RemoteModule;
         // @ts-ignore
@@ -155,6 +175,7 @@ export function createRemoteComponent<T, E extends keyof T>(
             default: () => (
               <RemoteApp
                 name={moduleName}
+                dispathPopstate={enableDispathPopstate}
                 {...info}
                 {...props}
                 providerInfo={exportFn}