@module-federation/bridge-react 0.21.2 → 0.21.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @module-federation/bridge-react
 
+## 0.21.4
+
+### Patch Changes
+
+- 444db72: fix(bridge-react): hoist BridgeWrapper to prevent component recreation
+- Updated dependencies [a50e068]
+  - @module-federation/sdk@0.21.4
+  - @module-federation/bridge-shared@0.21.4
+
+## 0.21.3
+
+### Patch Changes
+
+- @module-federation/sdk@0.21.3
+- @module-federation/bridge-shared@0.21.3
+
 ## 0.21.2
 
 ### Patch Changes

package/dist/{bridge-base-DRFFglgm.mjs → bridge-base-CPSTBjEp.mjs}

@@ -121,6 +121,24 @@ function createBaseBridgeComponent({
         }
       ));
     };
+    const DefaultFallback = ({ error }) => /* @__PURE__ */ React.createElement("div", { role: "alert" }, /* @__PURE__ */ React.createElement("p", null, "Something went wrong:"), /* @__PURE__ */ React.createElement("pre", { style: { color: "red" } }, error.message));
+    const BridgeWrapper = ({
+      basename,
+      moduleName,
+      memoryRoute,
+      propsInfo,
+      fallback
+    }) => /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback || DefaultFallback }, /* @__PURE__ */ React.createElement(
+      RawComponent,
+      {
+        appInfo: {
+          moduleName,
+          basename,
+          memoryRoute
+        },
+        propsInfo
+      }
+    ));
     return {
       async render(info) {
         var _a, _b, _c, _d, _e, _f;
@@ -139,28 +157,20 @@ function createBaseBridgeComponent({
           ...rootOptions
         };
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React.createElement(
-          ErrorBoundary,
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(
+          BridgeWrapper,
           {
-            FallbackComponent: fallback
-          },
-          /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename: basename2,
-                memoryRoute
-              },
-              propsInfo: {
-                ...propsInfo,
-                basename: basename2,
-                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-              }
+            basename,
+            moduleName,
+            memoryRoute,
+            fallback,
+            propsInfo: {
+              ...propsInfo,
+              basename,
+              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
             }
-          )
+          }
         );
-        const rootComponentWithErrorBoundary = /* @__PURE__ */ React.createElement(BridgeWrapper, { basename });
         if (bridgeInfo.render) {
           await Promise.resolve(
             bridgeInfo.render(rootComponentWithErrorBoundary, dom)

package/dist/{bridge-base-B2malZDo.js → bridge-base-RStDxH71.js}

@@ -138,6 +138,24 @@ function createBaseBridgeComponent({
         }
       ));
     };
+    const DefaultFallback = ({ error }) => /* @__PURE__ */ React__namespace.createElement("div", { role: "alert" }, /* @__PURE__ */ React__namespace.createElement("p", null, "Something went wrong:"), /* @__PURE__ */ React__namespace.createElement("pre", { style: { color: "red" } }, error.message));
+    const BridgeWrapper = ({
+      basename,
+      moduleName,
+      memoryRoute,
+      propsInfo,
+      fallback
+    }) => /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback || DefaultFallback }, /* @__PURE__ */ React__namespace.createElement(
+      RawComponent,
+      {
+        appInfo: {
+          moduleName,
+          basename,
+          memoryRoute
+        },
+        propsInfo
+      }
+    ));
     return {
       async render(info) {
         var _a, _b, _c, _d, _e, _f;
@@ -156,28 +174,20 @@ function createBaseBridgeComponent({
           ...rootOptions
         };
         const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(info)) || {};
-        const BridgeWrapper = ({ basename: basename2 }) => /* @__PURE__ */ React__namespace.createElement(
-          ErrorBoundary,
+        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(
+          BridgeWrapper,
           {
-            FallbackComponent: fallback
-          },
-          /* @__PURE__ */ React__namespace.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename: basename2,
-                memoryRoute
-              },
-              propsInfo: {
-                ...propsInfo,
-                basename: basename2,
-                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-              }
+            basename,
+            moduleName,
+            memoryRoute,
+            fallback,
+            propsInfo: {
+              ...propsInfo,
+              basename,
+              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
             }
-          )
+          }
         );
-        const rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(BridgeWrapper, { basename });
         if (bridgeInfo.render) {
           await Promise.resolve(
             bridgeInfo.render(rootComponentWithErrorBoundary, dom)

package/dist/data-fetch-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lazyUtils = require("./utils-tM9yE73c.js");
-const prefetch = require("./prefetch-k61Qz1E-.js");
+const prefetch = require("./prefetch-8digEyiB.js");
 async function callDataFetch() {
   const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch-utils.es.js

@@ -1,7 +1,7 @@
 import { x as DATA_FETCH_FUNCTION } from "./utils-Bx_8GGd-.mjs";
 import { C, b, e, h, c, d, r } from "./utils-Bx_8GGd-.mjs";
-import { d as dataFetchFunction } from "./prefetch-BWGWrW3l.mjs";
-import { i, p } from "./prefetch-BWGWrW3l.mjs";
+import { d as dataFetchFunction } from "./prefetch-BB7FYVtC.mjs";
+import { i, p } from "./prefetch-BB7FYVtC.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/index.cjs.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const bridgeBase = require("./bridge-base-B2malZDo.js");
+const bridgeBase = require("./bridge-base-RStDxH71.js");
 const ReactDOM = require("react-dom");
 const index = require("./index-DRSBaSu3.js");
 const React = require("react");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CTOmHqqN.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-Cgim6ZGI.js");
 const lazyUtils = require("./utils-tM9yE73c.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-k61Qz1E-.js");
+const prefetch = require("./prefetch-8digEyiB.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {

package/dist/index.es.js

@@ -1,13 +1,13 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-DRFFglgm.mjs";
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-CPSTBjEp.mjs";
 import ReactDOM from "react-dom";
 import { L as LoggerInstance, p as pathJoin, g as getRootDomDefaultClassName } from "./index-DyQNwY2M.mjs";
 import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
-import { b, a, c, l } from "./lazy-load-component-plugin-Cd5_LHQf.mjs";
+import { b, a, c, l } from "./lazy-load-component-plugin-fFox6KGt.mjs";
 import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-Bx_8GGd-.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-BWGWrW3l.mjs";
+import { p } from "./prefetch-BB7FYVtC.mjs";
 function createReact16Or17Root(container) {
   return {
     render(children) {

package/dist/{lazy-load-component-plugin-CTOmHqqN.js → lazy-load-component-plugin-Cgim6ZGI.js}

@@ -1,5 +1,5 @@
 "use strict";
-const prefetch = require("./prefetch-k61Qz1E-.js");
+const prefetch = require("./prefetch-8digEyiB.js");
 const lazyUtils = require("./utils-tM9yE73c.js");
 const React = require("react");
 const autoFetchData = () => {

package/dist/{lazy-load-component-plugin-Cd5_LHQf.mjs → lazy-load-component-plugin-fFox6KGt.mjs}

@@ -1,4 +1,4 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-BWGWrW3l.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-BB7FYVtC.mjs";
 import { i as initDataFetchMap, j as isDataLoaderExpose, k as getDataFetchInfo, m as getDataFetchMapKey, l as logger, n as getDataFetchItem, o as DATA_FETCH_CLIENT_SUFFIX, p as MF_DATA_FETCH_TYPE, q as isCSROnly, a as loadDataFetchModule, M as MF_DATA_FETCH_STATUS, g as getDataFetchMap, t as isServerEnv, u as getDataFetchIdWithErrorMsgs, v as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, x as DATA_FETCH_FUNCTION, y as getLoadedRemoteInfos, f as fetchData$1, z as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-Bx_8GGd-.mjs";
 import React__default, { useRef, useState, Suspense, useEffect } from "react";
 const autoFetchData = () => {

package/dist/lazy-load-component-plugin.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CTOmHqqN.js");
-require("./prefetch-k61Qz1E-.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-Cgim6ZGI.js");
+require("./prefetch-8digEyiB.js");
 exports.default = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
 exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;

package/dist/lazy-load-component-plugin.es.js

@@ -1,5 +1,5 @@
-import { l, l as l2 } from "./lazy-load-component-plugin-Cd5_LHQf.mjs";
-import "./prefetch-BWGWrW3l.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-fFox6KGt.mjs";
+import "./prefetch-BB7FYVtC.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin

package/dist/{prefetch-k61Qz1E-.js → prefetch-8digEyiB.js}

@@ -211,7 +211,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = index_esm.isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.2";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.4";
   }
 }
 function getInfoWithoutType(target, key) {

package/dist/{prefetch-BWGWrW3l.mjs → prefetch-BB7FYVtC.mjs}

@@ -210,7 +210,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.2";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.4";
   }
 }
 function getInfoWithoutType(target, key) {

package/dist/v18.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-B2malZDo.js");
+const bridgeBase = require("./bridge-base-RStDxH71.js");
 function createReact18Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v18.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-DRFFglgm.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-CPSTBjEp.mjs";
 function createReact18Root(container, options) {
   return createRoot(container, options);
 }

package/dist/v19.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-B2malZDo.js");
+const bridgeBase = require("./bridge-base-RStDxH71.js");
 function createReact19Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v19.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-DRFFglgm.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-CPSTBjEp.mjs";
 function createReact19Root(container, options) {
   return createRoot(container, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.21.2",
+  "version": "0.21.4",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -121,8 +121,8 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/bridge-shared": "0.21.2",
-    "@module-federation/sdk": "0.21.2"
+    "@module-federation/sdk": "0.21.4",
+    "@module-federation/bridge-shared": "0.21.4"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -153,9 +153,9 @@
     "typescript": "^5.2.2",
     "vite": "^5.4.21",
     "vite-plugin-dts": "^4.3.0",
-    "hono": "4.10.2",
-    "@module-federation/runtime-core": "0.21.2",
-    "@module-federation/runtime": "0.21.2"
+    "hono": "4.10.3",
+    "@module-federation/runtime-core": "0.21.4",
+    "@module-federation/runtime": "0.21.4"
   },
   "scripts": {
     "dev": "vite",

package/src/provider/versions/bridge-base.tsx

@@ -43,6 +43,38 @@ export function createBaseBridgeComponent<T>({
       );
     };
 
+    const DefaultFallback = ({ error }: FallbackProps) => (
+      <div role="alert">
+        <p>Something went wrong:</p>
+        <pre style={{ color: 'red' }}>{error.message}</pre>
+      </div>
+    );
+
+    const BridgeWrapper = ({
+      basename,
+      moduleName,
+      memoryRoute,
+      propsInfo,
+      fallback,
+    }: {
+      basename?: string;
+      moduleName?: string;
+      memoryRoute?: any;
+      propsInfo: T;
+      fallback?: React.ComponentType<FallbackProps>;
+    }) => (
+      <ErrorBoundary FallbackComponent={fallback || DefaultFallback}>
+        <RawComponent
+          appInfo={{
+            moduleName,
+            basename,
+            memoryRoute,
+          }}
+          propsInfo={propsInfo}
+        />
+      </ErrorBoundary>
+    );
+
     return {
       async render(info: RenderParams) {
         LoggerInstance.debug(`createBridgeComponent render Info`, info);
@@ -64,29 +96,20 @@ export function createBaseBridgeComponent<T>({
         const beforeBridgeRenderRes =
           instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(info) || {};
 
-        const BridgeWrapper = ({ basename }: { basename?: string }) => (
-          <ErrorBoundary
-            FallbackComponent={fallback as React.ComponentType<FallbackProps>}
-          >
-            <RawComponent
-              appInfo={{
-                moduleName,
-                basename,
-                memoryRoute,
-              }}
-              propsInfo={
-                {
-                  ...propsInfo,
-                  basename,
-                  ...(beforeBridgeRenderRes as any)?.extraProps,
-                } as T
-              }
-            />
-          </ErrorBoundary>
-        );
-
         const rootComponentWithErrorBoundary = (
-          <BridgeWrapper basename={basename} />
+          <BridgeWrapper
+            basename={basename}
+            moduleName={moduleName}
+            memoryRoute={memoryRoute}
+            fallback={fallback as React.ComponentType<FallbackProps>}
+            propsInfo={
+              {
+                ...propsInfo,
+                basename,
+                ...(beforeBridgeRenderRes as any)?.extraProps,
+              } as T
+            }
+          />
         );
 
         if (bridgeInfo.render) {