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

package/dist/index.cjs.js

@@ -6,9 +6,10 @@ const React = require("react");
 const index = require("./index-C0fDZB5b.js");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
-const dataFetchRuntimePlugin = require("./data-fetch-runtime-plugin.cjs.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CttAWi8N.js");
 const lazyUtils = require("./utils-iEVlDmyk.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
+const prefetch = require("./prefetch-cGDaDkgV.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {
@@ -270,434 +271,10 @@ function createRemoteComponent(info) {
   );
   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 = lazyUtils.getDataFetchIdWithErrorMsgs(originalMsg);
-  if (originalMsg.indexOf(lazyUtils.DATA_FETCH_ERROR_PREFIX) === 0) {
-    return {
-      error: new Error(
-        originalMsg.replace(lazyUtils.DATA_FETCH_ERROR_PREFIX, "").replace(lazyUtils.wrapDataFetchId(dataFetchMapKey), "")
-      ),
-      errorType: lazyUtils.ERROR_TYPE.DATA_FETCH,
-      dataFetchMapKey
-    };
-  }
-  if (originalMsg.indexOf(lazyUtils.LOAD_REMOTE_ERROR_PREFIX) === 0) {
-    return {
-      error: new Error(
-        originalMsg.replace(lazyUtils.LOAD_REMOTE_ERROR_PREFIX, "").replace(lazyUtils.wrapDataFetchId(dataFetchMapKey), "")
-      ),
-      errorType: lazyUtils.ERROR_TYPE.LOAD_REMOTE,
-      dataFetchMapKey
-    };
-  }
-  return {
-    error: new Error(originalMsg.replace(lazyUtils.wrapDataFetchId(dataFetchMapKey), "")),
-    errorType: lazyUtils.ERROR_TYPE.UNKNOWN,
-    dataFetchMapKey
-  };
-};
-const DefaultLoading = /* @__PURE__ */ React.createElement(React.Fragment, null);
-const DefaultErrorElement = (_data) => /* @__PURE__ */ React.createElement("div", null, "Error");
-function AwaitDataFetch({
-  resolve,
-  loading = DefaultLoading,
-  errorElement = DefaultErrorElement,
-  children,
-  params,
-  delayLoading
-}) {
-  const dataRef = React.useRef();
-  const data = dataRef.current || resolve;
-  const getData = isPromise(data) ? fetchData(data, dataRef) : () => data;
-  return /* @__PURE__ */ React.createElement(
-    AwaitSuspense,
-    {
-      params,
-      loading,
-      errorElement,
-      delayLoading,
-      resolve: getData
-    },
-    children
-  );
-}
-const DelayedLoading = ({
-  delayLoading,
-  children
-}) => {
-  const [show, setShow] = React.useState(false);
-  const timerSet = React.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.createElement(
-    React.Suspense,
-    {
-      fallback: /* @__PURE__ */ React.createElement(DelayedLoading, { delayLoading }, loading)
-    },
-    /* @__PURE__ */ React.createElement(ResolveAwait, { resolve, errorElement }, children)
-  );
-}
-function ResolveAwait({
-  children,
-  resolve,
-  errorElement,
-  params
-}) {
-  const data = resolve();
-  lazyUtils.logger.debug("resolve data: ", data);
-  if (typeof data === "string" && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
-    const transformedError = transformError(data);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof errorElement === "function" ? /* @__PURE__ */ React.createElement(React.Fragment, null, globalThis.FEDERATION_SSR && /* @__PURE__ */ React.createElement(
-      "script",
-      {
-        suppressHydrationWarning: true,
-        dangerouslySetInnerHTML: {
-          __html: String.raw`
-                  globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] = globalThis['${lazyUtils.DATA_FETCH_FUNCTION}']  || []
-                  globalThis['${lazyUtils.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.createElement(React.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 = lazyUtils.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, index2) => {
-      links.push(
-        /* @__PURE__ */ React.createElement(
-          "link",
-          {
-            key: `${file.split(".")[0]}_${index2}`,
-            href: `${publicPath}${file}`,
-            rel: "stylesheet",
-            type: "text/css"
-          }
-        )
-      );
-    });
-  }
-  if (injectScript) {
-    scripts.push(
-      /* @__PURE__ */ React.createElement(
-        "script",
-        {
-          async: true,
-          key: remoteEntry.split(".")[0],
-          src: `${publicPath}${remoteEntry}`,
-          crossOrigin: "anonymous"
-        }
-      )
-    );
-    [...targetModule.assets.js.sync].sort().forEach((file, index2) => {
-      scripts.push(
-        /* @__PURE__ */ React.createElement(
-          "script",
-          {
-            key: `${file.split(".")[0]}_${index2}`,
-            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[lazyUtils.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 = lazyUtils.getDataFetchItem(id);
-    const isFetchServer = ((_a = dataFetchItem == null ? void 0 : dataFetchItem[0]) == null ? void 0 : _a[1]) === lazyUtils.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 () => {
-    lazyUtils.logger.debug("callLoader start", Date.now());
-    const m = await options.loader();
-    lazyUtils.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 = lazyUtils.getLoadedRemoteInfos(moduleId, instance);
-      if (!loadedRemoteInfo) {
-        throw new Error(`can not find loaded remote('${moduleId}') info!`);
-      }
-    } catch (e2) {
-      const errMsg = `${lazyUtils.LOAD_REMOTE_ERROR_PREFIX}${e2}`;
-      lazyUtils.logger.debug(e2);
-      throw new Error(errMsg);
-    }
-    let dataFetchMapKey;
-    try {
-      dataFetchMapKey = lazyUtils.getDataFetchMapKey(
-        lazyUtils.getDataFetchInfo({
-          name: loadedRemoteInfo.name,
-          alias: loadedRemoteInfo.alias,
-          id: moduleId,
-          remoteSnapshot: loadedRemoteInfo.snapshot
-        }),
-        { name: instance.name, version: instance.options.version }
-      );
-      lazyUtils.logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
-      if (!dataFetchMapKey) {
-        return;
-      }
-      const data = await lazyUtils.fetchData(
-        dataFetchMapKey,
-        {
-          ...options.dataFetchParams,
-          isDowngrade: false
-        },
-        getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR)
-      );
-      lazyUtils.setDataFetchItemLoadedStatus(dataFetchMapKey);
-      lazyUtils.logger.debug("get data res: \n", data);
-      dataCache = data;
-      return data;
-    } catch (err) {
-      const errMsg = `${lazyUtils.DATA_FETCH_ERROR_PREFIX}${lazyUtils.wrapDataFetchId(dataFetchMapKey)}${err}`;
-      lazyUtils.logger.debug(errMsg);
-      throw new Error(errMsg);
-    }
-  };
-  const LazyComponent = React.lazy(async () => {
-    const m = await callLoader();
-    const moduleId = m && m[Symbol.for("mf_module_id")];
-    const loadedRemoteInfo = lazyUtils.getLoadedRemoteInfos(moduleId, instance);
-    loadedRemoteInfo == null ? void 0 : loadedRemoteInfo.snapshot;
-    const dataFetchMapKey = loadedRemoteInfo ? lazyUtils.getDataFetchMapKey(
-      lazyUtils.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;
-    lazyUtils.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.createElement(React.Fragment, null, globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ React.createElement(
-          "script",
-          {
-            suppressHydrationWarning: true,
-            dangerouslySetInnerHTML: {
-              __html: String.raw`
-                  globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] = globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'] || [];
-                  globalThis['${lazyUtils.DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
-                  `
-            }
-          }
-        ), globalThis.FEDERATION_SSR && assets, /* @__PURE__ */ React.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.createElement(LazyComponent, { ...args, mfData: dataCache });
-    }
-    if (!options.noSSR) {
-      return /* @__PURE__ */ React.createElement(
-        AwaitDataFetch,
-        {
-          resolve: getData(options.noSSR),
-          loading: options.loading,
-          delayLoading: options.delayLoading,
-          errorElement: options.fallback
-        },
-        (data) => /* @__PURE__ */ React.createElement(LazyComponent, { ...args, mfData: data })
-      );
-    } else {
-      const [data, setData] = React.useState(null);
-      const [loading, setLoading] = React.useState(true);
-      const [error, setError] = React.useState(null);
-      React.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.createElement(DelayedLoading, { delayLoading: options.delayLoading }, options.loading);
-      }
-      if (error) {
-        return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof options.fallback === "function" ? options.fallback(error) : options.fallback);
-      }
-      return /* @__PURE__ */ React.createElement(LazyComponent, { ...args, mfData: data });
-    }
-  };
-}
-function wrapNoSSR(createLazyComponentFn) {
-  return (options) => {
-    return createLazyComponentFn({ ...options, noSSR: true });
-  };
-}
-exports.autoFetchDataPlugin = dataFetchRuntimePlugin;
+exports.autoFetchDataPlugin = lazyLoadComponentPlugin.autoFetchData;
+exports.collectSSRAssets = lazyLoadComponentPlugin.collectSSRAssets;
+exports.createLazyComponent = lazyLoadComponentPlugin.createLazyComponent;
+exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
 exports.CacheSize = lazyUtils.CacheSize;
 exports.CacheTime = lazyUtils.CacheTime;
 exports.ERROR_TYPE = lazyUtils.ERROR_TYPE;
@@ -708,10 +285,7 @@ exports.generateKey = lazyUtils.generateKey;
 exports.revalidateTag = lazyUtils.revalidateTag;
 exports.setSSREnv = lazyUtils.setSSREnv;
 exports.callDataFetch = dataFetchUtils.callDataFetch;
-exports.prefetch = dataFetchUtils.prefetch;
-exports.collectSSRAssets = collectSSRAssets;
+exports.prefetch = prefetch.prefetch;
 exports.createBridgeComponent = createBridgeComponent;
-exports.createLazyComponent = createLazyComponent;
 exports.createRemoteAppComponent = createRemoteAppComponent;
 exports.createRemoteComponent = createRemoteComponent;
-exports.wrapNoSSR = wrapNoSSR;

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { default as default_2 } from 'react';
 import { FederationRuntimePlugin } from '@module-federation/runtime';
 import { getInstance } from '@module-federation/runtime';
-import { JSX as JSX_2 } from 'react';
-import { Key } from 'react';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 
@@ -84,7 +82,6 @@ export declare type CreateLazyComponentOptions<T, E extends keyof T> = {
     fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
     export?: E;
     dataFetchParams?: DataFetchParams;
-    noSSR?: boolean;
     cacheData?: boolean;
 };
 
@@ -138,6 +135,8 @@ declare type ErrorInfo = {
 
 export declare function generateKey(dataFetchOptions: DataFetchParams): string;
 
+export declare function lazyLoadComponentPlugin(): FederationRuntimePlugin;
+
 declare type LazyRemoteComponentInfo<T, E extends keyof T> = RemoteComponentParams<T>;
 
 export declare type NoSSRRemoteInfo = {
@@ -266,12 +265,13 @@ export declare function setSSREnv({ fetchServerQuery, }: {
     fetchServerQuery?: Record<string, unknown>;
 }): void;
 
-export declare function wrapNoSSR<T, E extends keyof T>(createLazyComponentFn: typeof createLazyComponent<T, E>): (options: Omit<CreateLazyComponentOptions<T, E>, "noSSR">) => (props: T[E] extends (...args: any) => any ? Parameters<T[E]>[0] extends undefined ? {
-    key?: Key | null;
-} : Parameters<T[E]>[0] & {
-    key?: Key | null;
-} : {
-    key?: Key | null;
-}) => JSX_2.Element;
-
 export { }
+
+
+declare module '@module-federation/runtime' {
+    interface FederationHost {
+        createLazyComponent<T, E extends keyof T>(options: Omit<CreateLazyComponentOptions<T, E>, 'instance'>): ReturnType<typeof createLazyComponent<T, E>>;
+        prefetch(options: Omit<PrefetchOptions, 'instance'>): ReturnType<typeof prefetch>;
+        collectSSRAssets(options: Omit<Parameters<typeof collectSSRAssets>[0], 'instance'>): ReturnType<typeof collectSSRAssets>;
+    }
+}