@module-federation/bridge-react 0.0.0-next-20250707074728 → 0.0.0-next-20250708033956

package/dist/index.es.js

@@ -1,9 +1,13 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-P6pEjY1q.js";
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-BoshEggF.mjs";
 import ReactDOM from "react-dom";
-import React__default, { forwardRef, useRef, useState, useEffect, useContext } from "react";
-import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin } from "./index-D4yt7Udv.js";
+import React__default, { forwardRef, useRef, useState, useEffect, useContext, Suspense } from "react";
+import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin } from "./index-CqxytsLY.mjs";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
+import { default as default2 } from "./data-fetch-runtime-plugin.es.js";
+import { s as getDataFetchIdWithErrorMsgs, t as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, l as logger, n as DATA_FETCH_FUNCTION, u as getLoadedRemoteInfos, a as getDataFetchMapKey, g as getDataFetchInfo, m as fetchData$1, v as setDataFetchItemLoadedStatus, F as FS_HREF, b as getDataFetchItem, M as MF_DATA_FETCH_TYPE } from "./utils-Bk8hGjjF.mjs";
+import { C, y, B, H, z, A, G, x } from "./utils-Bk8hGjjF.mjs";
+import { callDataFetch, prefetch } from "./data-fetch-utils.es.js";
 function createReact16Or17Root(container) {
   return {
     render(children) {
@@ -64,7 +68,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
         LoggerInstance.debug(
-          `createRemoteComponent LazyComponent destroy >>>`,
+          `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({
@@ -152,7 +156,7 @@ function withRouterData(WrappedComponent) {
         }
       }
     }
-    LoggerInstance.debug(`createRemoteComponent withRouterData >>>`, {
+    LoggerInstance.debug(`createRemoteAppComponent withRouterData >>>`, {
       ...props,
       basename,
       routerContextVal,
@@ -164,7 +168,7 @@ function withRouterData(WrappedComponent) {
       useEffect(() => {
         if (pathname !== "" && pathname !== location.pathname) {
           LoggerInstance.debug(
-            `createRemoteComponent dispatchPopstateEnv >>>`,
+            `createRemoteAppComponent dispatchPopstateEnv >>>`,
             {
               name: props.name,
               pathname: location.pathname
@@ -185,7 +189,7 @@ const RemoteApp = withRouterData(RemoteAppWrapper);
 function createLazyRemoteComponent(info) {
   const exportName = (info == null ? void 0 : info.export) || "default";
   return React__default.lazy(async () => {
-    LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
+    LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
       lazyComponent: info.loader,
       exportName
     });
@@ -193,7 +197,7 @@ function createLazyRemoteComponent(info) {
       const m = await info.loader();
       const moduleName = m && m[Symbol.for("mf_module_id")];
       LoggerInstance.debug(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
         { name: moduleName, module: m, exportName }
       );
       const exportFn = m[exportName];
@@ -216,7 +220,7 @@ function createLazyRemoteComponent(info) {
         };
       } else {
         LoggerInstance.debug(
-          `createRemoteComponent LazyComponent module not found >>>`,
+          `createRemoteAppComponent LazyComponent module not found >>>`,
           { name: moduleName, module: m, exportName }
         );
         throw Error(
@@ -230,7 +234,7 @@ function createLazyRemoteComponent(info) {
     }
   });
 }
-function createRemoteComponent(info) {
+function createRemoteAppComponent(info) {
   const LazyComponent = createLazyRemoteComponent(info);
   return forwardRef((props, ref) => {
     return /* @__PURE__ */ React__default.createElement(
@@ -242,7 +246,456 @@ function createRemoteComponent(info) {
     );
   });
 }
+function createRemoteComponent(info) {
+  LoggerInstance.warn(
+    `createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
+  );
+  return createRemoteAppComponent(info);
+}
+function isPromise(obj) {
+  return !!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function";
+}
+const AWAIT_ERROR_PREFIX = "<Await /> caught the following error during render: ";
+const transformError = (err) => {
+  const errMsg = err instanceof Error ? err.message : err;
+  const originalMsg = errMsg.replace(AWAIT_ERROR_PREFIX, "");
+  const dataFetchMapKey = getDataFetchIdWithErrorMsgs(originalMsg);
+  if (originalMsg.indexOf(DATA_FETCH_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(
+        originalMsg.replace(DATA_FETCH_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")
+      ),
+      errorType: ERROR_TYPE.DATA_FETCH,
+      dataFetchMapKey
+    };
+  }
+  if (originalMsg.indexOf(LOAD_REMOTE_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(
+        originalMsg.replace(LOAD_REMOTE_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")
+      ),
+      errorType: ERROR_TYPE.LOAD_REMOTE,
+      dataFetchMapKey
+    };
+  }
+  return {
+    error: new Error(originalMsg.replace(wrapDataFetchId(dataFetchMapKey), "")),
+    errorType: ERROR_TYPE.UNKNOWN,
+    dataFetchMapKey
+  };
+};
+const DefaultLoading = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+const DefaultErrorElement = (_data) => /* @__PURE__ */ React__default.createElement("div", null, "Error");
+function AwaitDataFetch({
+  resolve,
+  loading = DefaultLoading,
+  errorElement = DefaultErrorElement,
+  children,
+  params,
+  delayLoading
+}) {
+  const dataRef = useRef();
+  const data = dataRef.current || resolve;
+  const getData = isPromise(data) ? fetchData(data, dataRef) : () => data;
+  return /* @__PURE__ */ React__default.createElement(
+    AwaitSuspense,
+    {
+      params,
+      loading,
+      errorElement,
+      delayLoading,
+      resolve: getData
+    },
+    children
+  );
+}
+const DelayedLoading = ({
+  delayLoading,
+  children
+}) => {
+  const [show, setShow] = useState(false);
+  const timerSet = useRef(false);
+  if (!delayLoading) {
+    return children;
+  }
+  if (typeof window !== "undefined" && !show && !timerSet.current) {
+    timerSet.current = true;
+    setTimeout(() => {
+      setShow(true);
+    }, delayLoading);
+  }
+  return show ? children : null;
+};
+function AwaitSuspense({
+  resolve,
+  children,
+  loading = DefaultLoading,
+  errorElement = DefaultErrorElement,
+  delayLoading
+}) {
+  return /* @__PURE__ */ React__default.createElement(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ React__default.createElement(DelayedLoading, { delayLoading }, loading)
+    },
+    /* @__PURE__ */ React__default.createElement(ResolveAwait, { resolve, errorElement }, children)
+  );
+}
+function ResolveAwait({
+  children,
+  resolve,
+  errorElement,
+  params
+}) {
+  const data = resolve();
+  logger.debug("resolve data: ", data);
+  if (typeof data === "string" && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
+    const transformedError = transformError(data);
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, typeof errorElement === "function" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, globalThis.FEDERATION_SSR && /* @__PURE__ */ React__default.createElement(
+      "script",
+      {
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: {
+          __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}']  || []
+                  globalThis['${DATA_FETCH_FUNCTION}'].push([${transformedError.dataFetchMapKey ? `'${transformedError.dataFetchMapKey}'` : ""},${params ? JSON.stringify(params) : null},true]);`
+        }
+      }
+    ), errorElement(transformedError)) : errorElement);
+  }
+  const toRender = typeof children === "function" ? children(data) : children;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toRender);
+}
+const fetchData = (promise, ref) => {
+  let data;
+  let status = "pending";
+  const suspender = promise.then((res) => {
+    status = "success";
+    data = res;
+    ref.current = res;
+  }).catch((e2) => {
+    status = "success";
+    console.warn(e2);
+    data = AWAIT_ERROR_PREFIX + e2;
+  });
+  return () => {
+    if (status === "pending") {
+      throw suspender;
+    }
+    return data;
+  };
+};
+function getTargetModuleInfo(id, instance) {
+  if (!instance) {
+    return;
+  }
+  const loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
+  if (!loadedRemoteInfo) {
+    return;
+  }
+  const snapshot = loadedRemoteInfo.snapshot;
+  if (!snapshot) {
+    return;
+  }
+  const publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
+  if (!publicPath) {
+    return;
+  }
+  const modules = "modules" in snapshot ? snapshot.modules : [];
+  const targetModule = modules.find(
+    (m) => m.modulePath === loadedRemoteInfo.expose
+  );
+  if (!targetModule) {
+    return;
+  }
+  const remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectSSRAssets(options) {
+  const {
+    id,
+    injectLink = true,
+    injectScript = false
+  } = typeof options === "string" ? { id: options } : options;
+  const links = [];
+  const scripts = [];
+  const instance = options.instance;
+  if (!instance || !injectLink && !injectScript) {
+    return [...scripts, ...links];
+  }
+  const moduleAndPublicPath = getTargetModuleInfo(id, instance);
+  if (!moduleAndPublicPath) {
+    return [...scripts, ...links];
+  }
+  const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
+  if (injectLink) {
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async].sort().forEach((file, index) => {
+      links.push(
+        /* @__PURE__ */ React__default.createElement(
+          "link",
+          {
+            key: `${file.split(".")[0]}_${index}`,
+            href: `${publicPath}${file}`,
+            rel: "stylesheet",
+            type: "text/css"
+          }
+        )
+      );
+    });
+  }
+  if (injectScript) {
+    scripts.push(
+      /* @__PURE__ */ React__default.createElement(
+        "script",
+        {
+          async: true,
+          key: remoteEntry.split(".")[0],
+          src: `${publicPath}${remoteEntry}`,
+          crossOrigin: "anonymous"
+        }
+      )
+    );
+    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
+      scripts.push(
+        /* @__PURE__ */ React__default.createElement(
+          "script",
+          {
+            key: `${file.split(".")[0]}_${index}`,
+            async: true,
+            src: `${publicPath}${file}`,
+            crossOrigin: "anonymous"
+          }
+        )
+      );
+    });
+  }
+  return [...scripts, ...links];
+}
+function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
+  var _a;
+  if (noSSR || typeof window !== "undefined" && window.location.href !== window[FS_HREF]) {
+    if (!(loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.version)) {
+      throw new Error(`${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} version is empty`);
+    }
+    const { snapshot } = loadedRemoteInfo;
+    if (!snapshot) {
+      throw new Error(`${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} snapshot is empty`);
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    const isFetchServer = ((_a = dataFetchItem == null ? void 0 : dataFetchItem[0]) == null ? void 0 : _a[1]) === MF_DATA_FETCH_TYPE.FETCH_SERVER;
+    if (isFetchServer && (!("ssrPublicPath" in snapshot) || !snapshot.ssrPublicPath)) {
+      throw new Error(
+        `ssrPublicPath is required while fetching ${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} data in SSR project!`
+      );
+    }
+    if (isFetchServer && (!("ssrRemoteEntry" in snapshot) || !snapshot.ssrRemoteEntry)) {
+      throw new Error(
+        `ssrRemoteEntry is required while loading ${loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.name} data loader in SSR project!`
+      );
+    }
+    return {
+      name: loadedRemoteInfo.name,
+      version: loadedRemoteInfo.version,
+      ssrPublicPath: "ssrPublicPath" in snapshot ? snapshot.ssrPublicPath || "" : "",
+      ssrRemoteEntry: "ssrRemoteEntry" in snapshot ? snapshot.ssrRemoteEntry || "" : "",
+      globalName: loadedRemoteInfo.entryGlobalName
+    };
+  }
+  return void 0;
+}
+function createLazyComponent(options) {
+  const { instance, cacheData } = options;
+  if (!instance) {
+    throw new Error("instance is required for createLazyComponent!");
+  }
+  let dataCache = null;
+  const exportName = (options == null ? void 0 : options.export) || "default";
+  const callLoader = async () => {
+    logger.debug("callLoader start", Date.now());
+    const m = await options.loader();
+    logger.debug("callLoader end", Date.now());
+    if (!m) {
+      throw new Error("load remote failed");
+    }
+    return m;
+  };
+  const getData = async (noSSR) => {
+    let loadedRemoteInfo;
+    let moduleId;
+    try {
+      const m = await callLoader();
+      moduleId = m && m[Symbol.for("mf_module_id")];
+      if (!moduleId) {
+        throw new Error("moduleId is empty");
+      }
+      loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+      if (!loadedRemoteInfo) {
+        throw new Error(`can not find loaded remote('${moduleId}') info!`);
+      }
+    } catch (e2) {
+      const errMsg = `${LOAD_REMOTE_ERROR_PREFIX}${e2}`;
+      logger.debug(e2);
+      throw new Error(errMsg);
+    }
+    let dataFetchMapKey;
+    try {
+      dataFetchMapKey = getDataFetchMapKey(
+        getDataFetchInfo({
+          name: loadedRemoteInfo.name,
+          alias: loadedRemoteInfo.alias,
+          id: moduleId,
+          remoteSnapshot: loadedRemoteInfo.snapshot
+        }),
+        { name: instance.name, version: instance.options.version }
+      );
+      logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
+      if (!dataFetchMapKey) {
+        return;
+      }
+      const data = await fetchData$1(
+        dataFetchMapKey,
+        {
+          ...options.dataFetchParams,
+          isDowngrade: false
+        },
+        getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR)
+      );
+      setDataFetchItemLoadedStatus(dataFetchMapKey);
+      logger.debug("get data res: \n", data);
+      dataCache = data;
+      return data;
+    } catch (err) {
+      const errMsg = `${DATA_FETCH_ERROR_PREFIX}${wrapDataFetchId(dataFetchMapKey)}${err}`;
+      logger.debug(errMsg);
+      throw new Error(errMsg);
+    }
+  };
+  const LazyComponent = React__default.lazy(async () => {
+    const m = await callLoader();
+    const moduleId = m && m[Symbol.for("mf_module_id")];
+    const loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+    loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.snapshot;
+    const dataFetchMapKey = loadedRemoteInfo ? getDataFetchMapKey(
+      getDataFetchInfo({
+        name: loadedRemoteInfo.name,
+        alias: loadedRemoteInfo.alias,
+        id: moduleId,
+        remoteSnapshot: loadedRemoteInfo.snapshot
+      }),
+      { name: instance.name, version: instance == null ? void 0 : instance.options.version }
+    ) : void 0;
+    logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
+    const assets = collectSSRAssets({
+      id: moduleId,
+      instance
+    });
+    const Com = m[exportName];
+    if (exportName in m && typeof Com === "function") {
+      return {
+        default: (props) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ React__default.createElement(
+          "script",
+          {
+            suppressHydrationWarning: true,
+            dangerouslySetInnerHTML: {
+              __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}'] || [];
+                  globalThis['${DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
+                  `
+            }
+          }
+        ), globalThis.FEDERATION_SSR && assets, /* @__PURE__ */ React__default.createElement(Com, { ...props }))
+      };
+    } else {
+      throw Error(
+        `Make sure that ${moduleId} has the correct export when export is ${String(
+          exportName
+        )}`
+      );
+    }
+  });
+  return (props) => {
+    const { key, ...args } = props;
+    if (cacheData && dataCache) {
+      return /* @__PURE__ */ React__default.createElement(LazyComponent, { ...args, mfData: dataCache });
+    }
+    if (!options.noSSR) {
+      return /* @__PURE__ */ React__default.createElement(
+        AwaitDataFetch,
+        {
+          resolve: getData(options.noSSR),
+          loading: options.loading,
+          delayLoading: options.delayLoading,
+          errorElement: options.fallback
+        },
+        (data) => /* @__PURE__ */ React__default.createElement(LazyComponent, { ...args, mfData: data })
+      );
+    } else {
+      const [data, setData] = useState(null);
+      const [loading, setLoading] = useState(true);
+      const [error, setError] = useState(null);
+      useEffect(() => {
+        let isMounted = true;
+        const fetchDataAsync = async () => {
+          try {
+            setLoading(true);
+            const result = await getData(options.noSSR);
+            if (isMounted) {
+              setData(result);
+            }
+          } catch (e2) {
+            if (isMounted) {
+              setError(transformError(e2));
+            }
+          } finally {
+            if (isMounted) {
+              setLoading(false);
+            }
+          }
+        };
+        fetchDataAsync();
+        return () => {
+          isMounted = false;
+        };
+      }, []);
+      if (loading) {
+        return /* @__PURE__ */ React__default.createElement(DelayedLoading, { delayLoading: options.delayLoading }, options.loading);
+      }
+      if (error) {
+        return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, typeof options.fallback === "function" ? options.fallback(error) : options.fallback);
+      }
+      return /* @__PURE__ */ React__default.createElement(LazyComponent, { ...args, mfData: data });
+    }
+  };
+}
+function wrapNoSSR(createLazyComponentFn) {
+  return (options) => {
+    return createLazyComponentFn({ ...options, noSSR: true });
+  };
+}
 export {
+  C as CacheSize,
+  y as CacheTime,
+  ERROR_TYPE,
+  default2 as autoFetchDataPlugin,
+  B as cache,
+  callDataFetch,
+  H as clearStore,
+  collectSSRAssets,
+  z as configureCache,
   createBridgeComponent,
-  createRemoteComponent
+  createLazyComponent,
+  createRemoteAppComponent,
+  createRemoteComponent,
+  A as generateKey,
+  prefetch,
+  G as revalidateTag,
+  x as setSSREnv,
+  wrapNoSSR
 };