@module-federation/bridge-react 0.15.0 → 0.17.0

package/dist/lazy-load-component-plugin-C1tVve-W.js

@@ -0,0 +1,521 @@
+"use strict";
+const prefetch = require("./prefetch-CZvoIftg.js");
+const lazyUtils = require("./utils-iEVlDmyk.js");
+const React = require("react");
+const autoFetchData = () => {
+  lazyUtils.initDataFetchMap();
+  prefetch.injectDataFetch();
+  return {
+    name: "auto-fetch-data-plugin",
+    afterLoadSnapshot(args) {
+      const { id, moduleInfo, remoteSnapshot, host } = args;
+      if (typeof id === "string" && lazyUtils.isDataLoaderExpose(id)) {
+        return args;
+      }
+      if (!remoteSnapshot || !id || !("modules" in remoteSnapshot)) {
+        return args;
+      }
+      const { name, alias } = moduleInfo;
+      const dataFetchInfo = lazyUtils.getDataFetchInfo({
+        name,
+        alias,
+        id,
+        remoteSnapshot
+      });
+      if (!dataFetchInfo) {
+        return args;
+      }
+      const { dataFetchId, dataFetchName } = dataFetchInfo;
+      const dataFetchMapKey = lazyUtils.getDataFetchMapKey(dataFetchInfo, {
+        name: host.name,
+        version: host.options.version
+      });
+      lazyUtils.logger.debug(
+        "======= auto fetch plugin dataFetchMapKey: ",
+        dataFetchMapKey
+      );
+      if (!dataFetchMapKey) {
+        return args;
+      }
+      const dataFetchItem = lazyUtils.getDataFetchItem(dataFetchMapKey);
+      if (dataFetchItem) {
+        return args;
+      }
+      const dataFetchMap = lazyUtils.getDataFetchMap();
+      const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
+      const hasDataFetchClient = Boolean(
+        remoteSnapshot.modules.find(
+          (module2) => module2.moduleName === `${dataFetchName}${lazyUtils.DATA_FETCH_CLIENT_SUFFIX}`
+        )
+      );
+      const downgradeType = hasDataFetchClient ? lazyUtils.MF_DATA_FETCH_TYPE.FETCH_CLIENT : hasSSRAsset ? lazyUtils.MF_DATA_FETCH_TYPE.FETCH_SERVER : lazyUtils.MF_DATA_FETCH_TYPE.FETCH_CLIENT;
+      let finalDataFetchId = dataFetchId;
+      if (!lazyUtils.isServerEnv()) {
+        finalDataFetchId = downgradeType === lazyUtils.MF_DATA_FETCH_TYPE.FETCH_CLIENT ? hasDataFetchClient ? `${dataFetchId}${lazyUtils.DATA_FETCH_CLIENT_SUFFIX}` : dataFetchId : dataFetchId;
+      }
+      const getDataFetchGetter = () => lazyUtils.loadDataFetchModule(host, finalDataFetchId);
+      const dataFetchFnItem = [
+        getDataFetchGetter,
+        downgradeType
+      ];
+      if (typeof window === "undefined" || lazyUtils.isCSROnly()) {
+        dataFetchFnItem.push(getDataFetchGetter());
+      }
+      dataFetchMap[dataFetchMapKey] = [
+        dataFetchFnItem,
+        void 0,
+        lazyUtils.MF_DATA_FETCH_STATUS.AWAIT
+      ];
+      return args;
+    }
+  };
+};
+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((e) => {
+    status = "success";
+    console.warn(e);
+    data = AWAIT_ERROR_PREFIX + e;
+  });
+  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;
+  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.createElement(
+          "link",
+          {
+            key: `${file.split(".")[0]}_${index}`,
+            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, index) => {
+      scripts.push(
+        /* @__PURE__ */ React.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[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, injectScript, injectLink } = options;
+  if (!instance) {
+    throw new Error("instance is required for createLazyComponent!");
+  }
+  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 (e) {
+      const errMsg = `${lazyUtils.LOAD_REMOTE_ERROR_PREFIX}${e}`;
+      lazyUtils.logger.debug(e);
+      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);
+      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,
+      injectLink,
+      injectScript
+    });
+    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 (!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 (e) {
+            if (isMounted) {
+              setError(transformError(e));
+            }
+          } 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 lazyLoadComponentPlugin() {
+  return {
+    name: "lazy-load-component-plugin",
+    apply(instance) {
+      instance.registerPlugins([autoFetchData()]);
+      instance.createLazyComponent = (options) => {
+        return createLazyComponent({
+          instance,
+          ...options
+        });
+      };
+      instance.prefetch = (options) => {
+        return prefetch.prefetch({
+          instance,
+          ...options
+        });
+      };
+      instance.collectSSRAssets = (options) => {
+        return collectSSRAssets({
+          instance,
+          ...options
+        });
+      };
+    }
+  };
+}
+exports.autoFetchData = autoFetchData;
+exports.collectSSRAssets = collectSSRAssets;
+exports.createLazyComponent = createLazyComponent;
+exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin;