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

package/dist/index.cjs.js

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const bridgeBase = require("./bridge-base-Ds850AOx.js");
-const ReactDOM = require("react-dom");
+const createHelpers = require("./createHelpers-B_L612IN.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-Dr5VV1mu.js");
 const React = require("react");
-const index = require("./index-eN2xRRXs.js");
 const ReactRouterDOM = require("react-router-dom");
-const plugin = require("./plugin.cjs.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CWNzJM0v.js");
-const lazyUtils = require("./utils-vIpCrZmn.js");
+const index = require("./index-DRSBaSu3.js");
+const lazyUtils = require("./utils-tM9yE73c.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-hTVJ80G6.js");
+const prefetch = require("./prefetch-J3x-_5zT.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {
@@ -27,113 +25,10 @@ function _interopNamespaceDefault(e2) {
   return Object.freeze(n);
 }
 const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
-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) {
-        console.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);
-}
 function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
-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 withRouterData(WrappedComponent) {
   const Component = React.forwardRef(function(props, ref) {
     var _a;
@@ -205,74 +100,12 @@ function withRouterData(WrappedComponent) {
     return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
   });
 }
-const RemoteApp = withRouterData(RemoteAppWrapper);
-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 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 createRemoteComponent(info) {
-  index.LoggerInstance.warn(
-    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
-  );
-  return createRemoteAppComponent(info);
-}
+const RemoteApp = withRouterData(createHelpers.RemoteAppWrapper);
+const createRemoteAppComponent = createHelpers.createRemoteAppComponentFactory(RemoteApp);
+const createRemoteComponent = createHelpers.createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent
+);
+exports.createBridgeComponent = createHelpers.createBridgeComponent;
 exports.autoFetchDataPlugin = lazyLoadComponentPlugin.autoFetchData;
 exports.collectSSRAssets = lazyLoadComponentPlugin.collectSSRAssets;
 exports.createLazyComponent = lazyLoadComponentPlugin.createLazyComponent;
@@ -288,6 +121,5 @@ exports.revalidateTag = lazyUtils.revalidateTag;
 exports.setSSREnv = lazyUtils.setSSREnv;
 exports.callDataFetch = dataFetchUtils.callDataFetch;
 exports.prefetch = prefetch.prefetch;
-exports.createBridgeComponent = createBridgeComponent;
 exports.createRemoteAppComponent = createRemoteAppComponent;
 exports.createRemoteComponent = createRemoteComponent;

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { getInstance } from '@module-federation/runtime';
 import { ModuleFederationRuntimePlugin } from '@module-federation/runtime';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 
 export declare const autoFetchDataPlugin: () => ModuleFederationRuntimePlugin;
 
@@ -82,12 +84,12 @@ export declare type CreateLazyComponentOptions<T, E extends keyof T> = {
     injectLink?: boolean;
 };
 
-export declare function createRemoteAppComponent<T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<Omit<RemoteComponentProps<Record<string, unknown>>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+export declare const createRemoteAppComponent: <T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>) => ForwardRefExoticComponent<Omit<RemoteComponentProps<Record<string, unknown>>, "ref"> & RefAttributes<HTMLDivElement>>;
 
 /**
- * @deprecated createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!
+ * @deprecated createRemoteComponent is deprecated, please use createRemoteAppComponent instead!
  */
-export declare function createRemoteComponent<T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<Omit<RemoteComponentProps<Record<string, unknown>>, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
+export declare const createRemoteComponent: <T = Record<string, unknown>, E extends keyof T = keyof T>(info: LazyRemoteComponentInfo<T, E>) => any;
 
 export declare interface CreateRootOptions {
     identifierPrefix?: string;
@@ -134,7 +136,7 @@ export declare function generateKey(dataFetchOptions: DataFetchParams): string;
 
 export declare function lazyLoadComponentPlugin(): ModuleFederationRuntimePlugin;
 
-declare type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
+export declare type LazyRemoteComponentInfo<T, _E extends keyof T> = RemoteComponentParams<T>;
 
 export declare type NoSSRRemoteInfo = {
     name: string;
@@ -193,7 +195,7 @@ declare type ReactKey = {
 /**
  * Parameters for the remote component loader
  */
-declare interface RemoteComponentParams<T = Record<string, unknown>, E extends keyof T = keyof T> {
+export declare interface RemoteComponentParams<T = Record<string, unknown>, E extends keyof T = keyof T> {
     loader: () => Promise<T>;
     loading: React_2.ReactNode;
     fallback: React_2.ComponentType<{
@@ -206,7 +208,7 @@ declare interface RemoteComponentParams<T = Record<string, unknown>, E extends k
 /**
  * Parameters for the remote component
  */
-declare interface RemoteComponentProps<T = Record<string, unknown>> {
+export declare interface RemoteComponentProps<T = Record<string, unknown>> {
     props?: T;
     fallback?: React_2.ComponentType<{
         error: Error;
@@ -215,6 +217,29 @@ declare interface RemoteComponentProps<T = Record<string, unknown>> {
     [key: string]: unknown;
 }
 
+/**
+ * Interface for a remote module provider
+ */
+export declare interface RemoteModule {
+    provider: () => {
+        render: (info: RenderFnParams) => void;
+        destroy: (info: {
+            dom: any;
+        }) => void;
+    };
+}
+
+/**
+ * Parameters for the render function, extending ProviderParams
+ */
+export declare interface RenderFnParams extends ProviderParams {
+    dom: HTMLElement;
+    fallback?: React_2.ComponentType<{
+        error: Error;
+    }>;
+    [key: string]: unknown;
+}
+
 /**
  * Parameters for the render function
  */

package/dist/index.es.js

@@ -1,120 +1,16 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-BwHtOqw_.mjs";
-import ReactDOM from "react-dom";
-import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
-import { p as pathJoin, L as LoggerInstance, g as getRootDomDefaultClassName } from "./index-rAO0Wr0M.mjs";
+import { R as RemoteAppWrapper, c as createDeprecatedRemoteComponentFactory, a as createRemoteAppComponentFactory } from "./createHelpers-Ui5pt7je.mjs";
+import { b } from "./createHelpers-Ui5pt7je.mjs";
+import { b as b2, a, c, l } from "./lazy-load-component-plugin-CNyT62wB.mjs";
+import React__default, { forwardRef, useContext, useState, useEffect } 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-D6tEPyvX.mjs";
-import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-VSOJTX_o.mjs";
+import { p as pathJoin, L as LoggerInstance } from "./index-DyQNwY2M.mjs";
+import { C, a as a2, E, b as b3, d, c as c2, g, r, s } from "./utils-dUgb9Jkm.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-DCF_oa3O.mjs";
-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) {
-        console.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);
-}
-function e2() {
+import { p } from "./prefetch-lrSPKiuu.mjs";
+function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
-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 withRouterData(WrappedComponent) {
   const Component = forwardRef(function(props, ref) {
     var _a;
@@ -175,7 +71,7 @@ function withRouterData(WrappedComponent) {
               pathname: location.pathname
             }
           );
-          e2();
+          e();
         }
         setPathname(location.pathname);
       }, [location]);
@@ -187,88 +83,25 @@ function withRouterData(WrappedComponent) {
   });
 }
 const RemoteApp = withRouterData(RemoteAppWrapper);
-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 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 createRemoteComponent(info) {
-  LoggerInstance.warn(
-    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
-  );
-  return createRemoteAppComponent(info);
-}
+const createRemoteAppComponent = createRemoteAppComponentFactory(RemoteApp);
+const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent
+);
 export {
   C as CacheSize,
-  b2 as CacheTime,
+  a2 as CacheTime,
   E as ERROR_TYPE,
-  b as autoFetchDataPlugin,
-  e as cache,
+  b2 as autoFetchDataPlugin,
+  b3 as cache,
   callDataFetch,
-  h as clearStore,
+  d as clearStore,
   a as collectSSRAssets,
   c2 as configureCache,
-  createBridgeComponent,
+  b as createBridgeComponent,
   c as createLazyComponent,
   createRemoteAppComponent,
   createRemoteComponent,
-  d as generateKey,
+  g as generateKey,
   l as lazyLoadComponentPlugin,
   p as prefetch,
   r as revalidateTag,