@module-federation/bridge-react - npm Package Compare versions

Comparing version 0.0.0-next-20240702090143 to 0.0.0-next-20240704021704

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20240702090143
+## 0.0.0-next-20240704021704
 
 ### Patch Changes
 
-- @module-federation/bridge-shared@0.0.0-next-20240702090143
+- @module-federation/bridge-shared@0.0.0-next-20240704021704
 
@@ -9,0 +9,0 @@ ## 0.2.3

dist/index.cjs.js

 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const context = require("./context--mtFt3tp.cjs");
 const ReactRouterDOM = require("react-router-dom");
-const context = require("./context--mtFt3tp.cjs");
 const ReactDOM = require("react-dom");
@@ -125,3 +125,2 @@ function _interopNamespaceDefault(e) {
   providerInfo,
-  dispathPopstate,
   ...resProps
@@ -132,16 +131,2 @@ }) => {
   const providerInfoRef = React.useRef(null);
-  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(() => {
@@ -184,7 +169,5 @@ const renderTimeout = setTimeout(() => {
 RemoteApp["__APP_VERSION__"] = "0.2.3";
-function createRemoteComponent(info) {
+function withRouterData(WrappedComponent) {
   return (props) => {
     var _a;
-    const exportName = (info == null ? void 0 : info.export) || "default";
-    let basename = "/";
     let enableDispathPopstate = false;
@@ -198,5 +181,4 @@ let routerContextVal;
     }
-    if (props.basename) {
-      basename = props.basename;
-    } else if (enableDispathPopstate) {
+    let basename = "/";
+    if (!props.basename && enableDispathPopstate) {
       const ReactRouterDOMAny = ReactRouterDOM__namespace;
@@ -212,7 +194,6 @@ const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
         routerContextVal = React.useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-          basename = context.pathJoin(
-            basename,
-            routerContextVal.matches[0].pathnameBase || "/"
-          );
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
+          basename = context.pathJoin(basename, pathnameBase || "/");
         }
@@ -230,52 +211,78 @@ } else {
     }
-    const LazyComponent = React.useMemo(() => {
-      return React.lazy(async () => {
-        context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-          basename,
-          lazyComponent: info.loader,
-          exportName,
-          props,
-          routerContextVal
-        });
-        try {
-          const m2 = await info.loader();
-          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-          context.LoggerInstance.log(
-            `createRemoteComponent LazyComponent loadRemote info >>>`,
-            { basename, name: moduleName, module: m2, exportName, props }
-          );
-          const exportFn = m2[exportName];
-          if (exportName in m2 && typeof exportFn === "function") {
-            return {
-              default: () => /* @__PURE__ */ React.createElement(
-                RemoteApp,
-                {
-                  name: moduleName,
-                  dispathPopstate: enableDispathPopstate,
-                  ...info,
-                  ...props,
-                  providerInfo: exportFn,
-                  basename
-                }
-              )
-            };
-          } else {
-            context.LoggerInstance.log(
-              `createRemoteComponent LazyComponent module not found >>>`,
-              { basename, name: moduleName, module: m2, exportName, props }
-            );
-            throw Error(
-              `Make sure that ${moduleName} has the correct export when export is ${String(
-                exportName
-              )}`
-            );
-          }
-        } catch (error) {
-          throw error;
+    context.LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate
+    });
+    if (enableDispathPopstate) {
+      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: props.name,
+            pathname: location.pathname
+          });
+          context.f();
         }
-      });
-    }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, null)));
+        setPathname(location.pathname);
+      }, [location]);
+    }
+    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename });
   };
 }
+const RemoteApp$1 = withRouterData(RemoteApp);
+function createLazyRemoteComponent(info) {
+  const exportName = (info == null ? void 0 : info.export) || "default";
+  return React.lazy(async () => {
+    context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName
+    });
+    try {
+      const m2 = await info.loader();
+      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      context.LoggerInstance.log(
+        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m2, exportName }
+      );
+      const exportFn = m2[exportName];
+      if (exportName in m2 && typeof exportFn === "function") {
+        const RemoteAppComponent = React.forwardRef((props, _ref) => {
+          return /* @__PURE__ */ React.createElement(
+            RemoteApp$1,
+            {
+              name: moduleName,
+              providerInfo: exportFn,
+              exportName: info.export || "default",
+              ...props
+            }
+          );
+        });
+        return {
+          default: RemoteAppComponent
+        };
+      } else {
+        context.LoggerInstance.log(
+          `createRemoteComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m2, exportName }
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName
+          )}`
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+function createRemoteComponent(info) {
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props })));
+  };
+}
 var client = {};
@@ -282,0 +289,0 @@ var m = ReactDOM;

dist/index.es.js

 import * as React from "react";
-import React__default, { createContext, Component, createElement, isValidElement, useContext, useMemo, useRef, useState, useEffect } from "react";
+import React__default, { createContext, Component, createElement, isValidElement, useContext, useState, useEffect, useRef, forwardRef } from "react";
+import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import * as ReactRouterDOM from "react-router-dom";
-import { p as pathJoin, L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-Bw2PEwa6.js";
 import ReactDOM from "react-dom";
@@ -106,3 +106,2 @@ const ErrorBoundaryContext = createContext(null);
   providerInfo,
-  dispathPopstate,
   ...resProps
@@ -113,16 +112,2 @@ }) => {
   const providerInfoRef = useRef(null);
-  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(() => {
@@ -165,7 +150,5 @@ const renderTimeout = setTimeout(() => {
 RemoteApp["__APP_VERSION__"] = "0.2.3";
-function createRemoteComponent(info) {
+function withRouterData(WrappedComponent) {
   return (props) => {
     var _a;
-    const exportName = (info == null ? void 0 : info.export) || "default";
-    let basename = "/";
     let enableDispathPopstate = false;
@@ -179,5 +162,4 @@ let routerContextVal;
     }
-    if (props.basename) {
-      basename = props.basename;
-    } else if (enableDispathPopstate) {
+    let basename = "/";
+    if (!props.basename && enableDispathPopstate) {
       const ReactRouterDOMAny = ReactRouterDOM;
@@ -193,7 +175,6 @@ const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
         routerContextVal = useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
-          basename = pathJoin(
-            basename,
-            routerContextVal.matches[0].pathnameBase || "/"
-          );
+        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
+          const matchIndex = routerContextVal.matches.length - 1;
+          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
+          basename = pathJoin(basename, pathnameBase || "/");
         }
@@ -211,52 +192,78 @@ } else {
     }
-    const LazyComponent = useMemo(() => {
-      return React__default.lazy(async () => {
-        LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-          basename,
-          lazyComponent: info.loader,
-          exportName,
-          props,
-          routerContextVal
-        });
-        try {
-          const m2 = await info.loader();
-          const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-          LoggerInstance.log(
-            `createRemoteComponent LazyComponent loadRemote info >>>`,
-            { basename, name: moduleName, module: m2, exportName, props }
-          );
-          const exportFn = m2[exportName];
-          if (exportName in m2 && typeof exportFn === "function") {
-            return {
-              default: () => /* @__PURE__ */ React__default.createElement(
-                RemoteApp,
-                {
-                  name: moduleName,
-                  dispathPopstate: enableDispathPopstate,
-                  ...info,
-                  ...props,
-                  providerInfo: exportFn,
-                  basename
-                }
-              )
-            };
-          } else {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent module not found >>>`,
-              { basename, name: moduleName, module: m2, exportName, props }
-            );
-            throw Error(
-              `Make sure that ${moduleName} has the correct export when export is ${String(
-                exportName
-              )}`
-            );
-          }
-        } catch (error) {
-          throw error;
+    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
+      ...props,
+      basename,
+      routerContextVal,
+      enableDispathPopstate
+    });
+    if (enableDispathPopstate) {
+      const location = ReactRouterDOM.useLocation();
+      const [pathname, setPathname] = useState(location.pathname);
+      useEffect(() => {
+        if (pathname !== "" && pathname !== location.pathname) {
+          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
+            name: props.name,
+            pathname: location.pathname
+          });
+          f();
         }
-      });
-    }, [exportName, basename, props.memoryRoute]);
-    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, null)));
+        setPathname(location.pathname);
+      }, [location]);
+    }
+    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename });
   };
 }
+const RemoteApp$1 = withRouterData(RemoteApp);
+function createLazyRemoteComponent(info) {
+  const exportName = (info == null ? void 0 : info.export) || "default";
+  return React__default.lazy(async () => {
+    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
+      lazyComponent: info.loader,
+      exportName
+    });
+    try {
+      const m2 = await info.loader();
+      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
+      LoggerInstance.log(
+        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        { name: moduleName, module: m2, exportName }
+      );
+      const exportFn = m2[exportName];
+      if (exportName in m2 && typeof exportFn === "function") {
+        const RemoteAppComponent = forwardRef((props, _ref) => {
+          return /* @__PURE__ */ React__default.createElement(
+            RemoteApp$1,
+            {
+              name: moduleName,
+              providerInfo: exportFn,
+              exportName: info.export || "default",
+              ...props
+            }
+          );
+        });
+        return {
+          default: RemoteAppComponent
+        };
+      } else {
+        LoggerInstance.log(
+          `createRemoteComponent LazyComponent module not found >>>`,
+          { name: moduleName, module: m2, exportName }
+        );
+        throw Error(
+          `Make sure that ${moduleName} has the correct export when export is ${String(
+            exportName
+          )}`
+        );
+      }
+    } catch (error) {
+      throw error;
+    }
+  });
+}
+function createRemoteComponent(info) {
+  const LazyComponent = createLazyRemoteComponent(info);
+  return (props) => {
+    return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props })));
+  };
+}
 var client = {};
@@ -263,0 +270,0 @@ var m = ReactDOM;

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20240702090143",
+  "version": "0.0.0-next-20240704021704",
   "publishConfig": {
@@ -28,3 +28,3 @@ "access": "public"
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20240702090143"
+    "@module-federation/bridge-shared": "0.0.0-next-20240704021704"
   },
@@ -31,0 +31,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66178

increased by2.4%

Number of package files

29

increased by3.57%

Lines of code

1854

increased by2.89%

Dependency changes

• + Added@module-federation/bridge-shared@0.0.0-next-20240704021704(transitive)

• - Removed@module-federation/bridge-shared@0.0.0-next-20240702090143(transitive)

• Updated@module-federation/bridge-shared@0.0.0-next-20240704021704