@module-federation/bridge-react 0.0.0-next-20250926024003 → 0.0.0-perf-devtools-20260106124142

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

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index = require("./index-eN2xRRXs.js");
+const index = require("./index-DRSBaSu3.js");
 const plugin = require("./plugin.cjs.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -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;
@@ -157,24 +175,18 @@ function createBaseBridgeComponent({
         };
         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 rootComponentWithErrorBoundary = /* @__PURE__ */ React__namespace.createElement(
-          ErrorBoundary,
+          BridgeWrapper,
           {
-            FallbackComponent: fallback
-          },
-          /* @__PURE__ */ React__namespace.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: {
-                ...propsInfo,
-                ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
-              }
+            basename,
+            moduleName,
+            memoryRoute,
+            fallback,
+            propsInfo: {
+              ...propsInfo,
+              basename,
+              ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps
             }
-          )
+          }
         );
         if (bridgeInfo.render) {
           await Promise.resolve(
@@ -201,7 +213,7 @@ function createBaseBridgeComponent({
           if ("unmount" in root) {
             root.unmount();
           } else {
-            console.warn("Root does not have unmount method");
+            index.LoggerInstance.warn("Root does not have unmount method");
           }
           rootMap.delete(dom);
         }

package/dist/createHelpers-B_L612IN.js

@@ -0,0 +1,190 @@
+"use strict";
+const bridgeBase = require("./bridge-base-RStDxH71.js");
+const ReactDOM = require("react-dom");
+const index = require("./index-DRSBaSu3.js");
+const React = require("react");
+const plugin = require("./plugin.cjs.js");
+function createReact16Or17Root(container) {
+  return {
+    render(children) {
+      const reactVersion = ReactDOM.version || "";
+      const isReact18 = reactVersion.startsWith("18");
+      const isReact19 = reactVersion.startsWith("19");
+      if (isReact19) {
+        throw new Error(
+          `React 19 detected in legacy mode. This is not supported. Please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v19'`
+        );
+      }
+      if (isReact18) {
+        index.LoggerInstance.warn(
+          `[Bridge-React] React 18 detected in legacy mode. For better compatibility, please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v18'`
+        );
+      }
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    createRoot: createReact16Or17Root,
+    ...bridgeInfo
+  };
+  return bridgeBase.createBaseBridgeComponent(fullBridgeInfo);
+}
+const RemoteAppWrapper = React.forwardRef(function(props, ref) {
+  const {
+    moduleName,
+    memoryRoute,
+    basename,
+    providerInfo,
+    className,
+    style,
+    fallback,
+    loading,
+    ...resProps
+  } = props;
+  const instance = plugin.federationRuntime.instance;
+  const rootRef = ref && "current" in ref ? ref : React.useRef(null);
+  const renderDom = React.useRef(null);
+  const providerInfoRef = React.useRef(null);
+  const [initialized, setInitialized] = React.useState(false);
+  index.LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+  React.useEffect(() => {
+    if (initialized) return;
+    const providerReturn = providerInfo();
+    providerInfoRef.current = providerReturn;
+    setInitialized(true);
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+        index.LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent destroy >>>`,
+          { moduleName, basename, dom: renderDom.current }
+        );
+        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        });
+        (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
+          moduleName,
+          dom: renderDom.current
+        });
+        (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        });
+      }
+    };
+  }, [moduleName]);
+  React.useEffect(() => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!initialized || !providerInfoRef.current) return;
+    let renderProps = {
+      moduleName,
+      dom: rootRef.current,
+      basename,
+      memoryRoute,
+      fallback,
+      ...resProps
+    };
+    renderDom.current = rootRef.current;
+    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(renderProps)) || {};
+    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+    providerInfoRef.current.render(renderProps);
+    (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
+  }, [initialized, ...Object.values(props)]);
+  const rootComponentClassName = `${index.getRootDomDefaultClassName(moduleName)} ${className || ""}`;
+  return /* @__PURE__ */ React.createElement("div", { className: rootComponentClassName, style, ref: rootRef }, loading);
+});
+function createLazyRemoteComponentFactory(RemoteApp) {
+  return function createLazyRemoteComponent(info) {
+    const exportName = (info == null ? void 0 : info.export) || "default";
+    return React.lazy(async () => {
+      index.LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent create >>>`,
+        {
+          lazyComponent: info.loader,
+          exportName
+        }
+      );
+      try {
+        const m = await info.loader();
+        const moduleName = m && m[Symbol.for("mf_module_id")];
+        index.LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent loadRemote info >>>`,
+          { name: moduleName, module: m, exportName }
+        );
+        const exportFn = m[exportName];
+        if (exportName in m && typeof exportFn === "function") {
+          const RemoteAppComponent = React.forwardRef((props, ref) => {
+            return /* @__PURE__ */ React.createElement(
+              RemoteApp,
+              {
+                moduleName,
+                providerInfo: exportFn,
+                exportName: info.export || "default",
+                fallback: info.fallback,
+                loading: info.loading,
+                ref,
+                ...props
+              }
+            );
+          });
+          return {
+            default: RemoteAppComponent
+          };
+        } else {
+          index.LoggerInstance.debug(
+            `createRemoteAppComponent LazyComponent module not found >>>`,
+            { name: moduleName, module: m, exportName }
+          );
+          throw Error(
+            `Make sure that ${moduleName} has the correct export when export is ${String(
+              exportName
+            )}`
+          );
+        }
+      } catch (error) {
+        throw error;
+      }
+    });
+  };
+}
+function createRemoteAppComponentFactory(RemoteApp) {
+  const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+  return function createRemoteAppComponent(info) {
+    const LazyComponent = createLazyRemoteComponent(info);
+    return React.forwardRef((props, ref) => {
+      return /* @__PURE__ */ React.createElement(
+        bridgeBase.ErrorBoundary,
+        {
+          FallbackComponent: info.fallback
+        },
+        /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref }))
+      );
+    });
+  };
+}
+function createDeprecatedRemoteComponentFactory(createFn) {
+  return function createRemoteComponent(info) {
+    index.LoggerInstance.warn(
+      `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
+    );
+    return createFn(info);
+  };
+}
+exports.RemoteAppWrapper = RemoteAppWrapper;
+exports.createBridgeComponent = createBridgeComponent;
+exports.createDeprecatedRemoteComponentFactory = createDeprecatedRemoteComponentFactory;
+exports.createRemoteAppComponentFactory = createRemoteAppComponentFactory;

package/dist/createHelpers-Ui5pt7je.mjs

@@ -0,0 +1,191 @@
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-CPSTBjEp.mjs";
+import ReactDOM from "react-dom";
+import { L as LoggerInstance, g as getRootDomDefaultClassName } from "./index-DyQNwY2M.mjs";
+import React__default, { forwardRef, useRef, useState, useEffect } from "react";
+import { federationRuntime } from "./plugin.es.js";
+function createReact16Or17Root(container) {
+  return {
+    render(children) {
+      const reactVersion = ReactDOM.version || "";
+      const isReact18 = reactVersion.startsWith("18");
+      const isReact19 = reactVersion.startsWith("19");
+      if (isReact19) {
+        throw new Error(
+          `React 19 detected in legacy mode. This is not supported. Please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v19'`
+        );
+      }
+      if (isReact18) {
+        LoggerInstance.warn(
+          `[Bridge-React] React 18 detected in legacy mode. For better compatibility, please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v18'`
+        );
+      }
+      ReactDOM.render(children, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  };
+}
+function createBridgeComponent(bridgeInfo) {
+  const fullBridgeInfo = {
+    createRoot: createReact16Or17Root,
+    ...bridgeInfo
+  };
+  return createBaseBridgeComponent(fullBridgeInfo);
+}
+const RemoteAppWrapper = forwardRef(function(props, ref) {
+  const {
+    moduleName,
+    memoryRoute,
+    basename,
+    providerInfo,
+    className,
+    style,
+    fallback,
+    loading,
+    ...resProps
+  } = props;
+  const instance = federationRuntime.instance;
+  const rootRef = ref && "current" in ref ? ref : useRef(null);
+  const renderDom = useRef(null);
+  const providerInfoRef = useRef(null);
+  const [initialized, setInitialized] = useState(false);
+  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+  useEffect(() => {
+    if (initialized) return;
+    const providerReturn = providerInfo();
+    providerInfoRef.current = providerReturn;
+    setInitialized(true);
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent destroy >>>`,
+          { moduleName, basename, dom: renderDom.current }
+        );
+        (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        });
+        (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
+          moduleName,
+          dom: renderDom.current
+        });
+        (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+          moduleName,
+          dom: renderDom.current,
+          basename,
+          memoryRoute,
+          fallback,
+          ...resProps
+        });
+      }
+    };
+  }, [moduleName]);
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!initialized || !providerInfoRef.current) return;
+    let renderProps = {
+      moduleName,
+      dom: rootRef.current,
+      basename,
+      memoryRoute,
+      fallback,
+      ...resProps
+    };
+    renderDom.current = rootRef.current;
+    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(renderProps)) || {};
+    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+    providerInfoRef.current.render(renderProps);
+    (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
+  }, [initialized, ...Object.values(props)]);
+  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ""}`;
+  return /* @__PURE__ */ React__default.createElement("div", { className: rootComponentClassName, style, ref: rootRef }, loading);
+});
+function createLazyRemoteComponentFactory(RemoteApp) {
+  return function createLazyRemoteComponent(info) {
+    const exportName = (info == null ? void 0 : info.export) || "default";
+    return React__default.lazy(async () => {
+      LoggerInstance.debug(
+        `createRemoteAppComponent LazyComponent create >>>`,
+        {
+          lazyComponent: info.loader,
+          exportName
+        }
+      );
+      try {
+        const m = await info.loader();
+        const moduleName = m && m[Symbol.for("mf_module_id")];
+        LoggerInstance.debug(
+          `createRemoteAppComponent LazyComponent loadRemote info >>>`,
+          { name: moduleName, module: m, exportName }
+        );
+        const exportFn = m[exportName];
+        if (exportName in m && typeof exportFn === "function") {
+          const RemoteAppComponent = forwardRef((props, ref) => {
+            return /* @__PURE__ */ React__default.createElement(
+              RemoteApp,
+              {
+                moduleName,
+                providerInfo: exportFn,
+                exportName: info.export || "default",
+                fallback: info.fallback,
+                loading: info.loading,
+                ref,
+                ...props
+              }
+            );
+          });
+          return {
+            default: RemoteAppComponent
+          };
+        } else {
+          LoggerInstance.debug(
+            `createRemoteAppComponent LazyComponent module not found >>>`,
+            { name: moduleName, module: m, exportName }
+          );
+          throw Error(
+            `Make sure that ${moduleName} has the correct export when export is ${String(
+              exportName
+            )}`
+          );
+        }
+      } catch (error) {
+        throw error;
+      }
+    });
+  };
+}
+function createRemoteAppComponentFactory(RemoteApp) {
+  const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+  return function createRemoteAppComponent(info) {
+    const LazyComponent = createLazyRemoteComponent(info);
+    return forwardRef((props, ref) => {
+      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, ref }))
+      );
+    });
+  };
+}
+function createDeprecatedRemoteComponentFactory(createFn) {
+  return function createRemoteComponent(info) {
+    LoggerInstance.warn(
+      `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
+    );
+    return createFn(info);
+  };
+}
+export {
+  RemoteAppWrapper as R,
+  createRemoteAppComponentFactory as a,
+  createBridgeComponent as b,
+  createDeprecatedRemoteComponentFactory as c
+};

package/dist/data-fetch-server-middleware.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
-const lazyUtils = require("./utils-vIpCrZmn.js");
-const index_esm = require("./index.esm-Ju4RY-yW.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

package/dist/data-fetch-server-middleware.es.js

@@ -1,5 +1,5 @@
-import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-VSOJTX_o.mjs";
-import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-CtI0uQUR.mjs";
+import { D as DATA_FETCH_QUERY, l as logger, e as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, h as loadDataFetchModule } from "./utils-dUgb9Jkm.mjs";
+import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-CPwSeCvw.mjs";
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lazyUtils = require("./utils-vIpCrZmn.js");
-const prefetch = require("./prefetch-hTVJ80G6.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
+const prefetch = require("./prefetch-DcwCyN6i.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-VSOJTX_o.mjs";
-import { C, b, e, h, c, d, r } from "./utils-VSOJTX_o.mjs";
-import { d as dataFetchFunction } from "./prefetch-DCF_oa3O.mjs";
-import { i, p } from "./prefetch-DCF_oa3O.mjs";
+import { x as DATA_FETCH_FUNCTION } from "./utils-dUgb9Jkm.mjs";
+import { C, a, b, d, c, g, r } from "./utils-dUgb9Jkm.mjs";
+import { d as dataFetchFunction } from "./prefetch-CBBSKet3.mjs";
+import { i, p } from "./prefetch-CBBSKet3.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {
@@ -14,12 +14,12 @@ async function callDataFetch() {
 }
 export {
   C as CacheSize,
-  b as CacheTime,
-  e as cache,
+  a as CacheTime,
+  b as cache,
   callDataFetch,
-  h as clearStore,
+  d as clearStore,
   c as configureCache,
-  d as generateKey,
+  g as generateKey,
   i as injectDataFetch,
   p as prefetch,
   r as revalidateTag

package/dist/{index-eN2xRRXs.js → index-DRSBaSu3.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index_esm = require("./index.esm-Ju4RY-yW.js");
+const index_esm = require("./index.esm-BWaKho-8.js");
 const RouterContext = React.createContext(null);
 const LoggerInstance = index_esm.createLogger(
   "[ Module Federation Bridge React ]"

package/dist/{index-rAO0Wr0M.mjs → index-DyQNwY2M.mjs}

@@ -1,5 +1,5 @@
 import React__default from "react";
-import { c as createLogger } from "./index.esm-CtI0uQUR.mjs";
+import { c as createLogger } from "./index.esm-CPwSeCvw.mjs";
 const RouterContext = React__default.createContext(null);
 const LoggerInstance = createLogger(
   "[ Module Federation Bridge React ]"