@module-federation/bridge-react 0.16.0 → 0.17.1

package/dist/data-fetch-server-middleware.d.ts

@@ -0,0 +1,15 @@
+import { MiddlewareHandler } from 'hono';
+
+declare const dataFetchServerMiddleware: MiddlewareHandler;
+export default dataFetchServerMiddleware;
+
+export { }
+
+
+declare module '@module-federation/runtime-core' {
+    interface ModuleFederation {
+        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>;
+    }
+}

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

@@ -0,0 +1,164 @@
+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-C4oPJV34.mjs";
+import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-BCeUd-x9.mjs";
+function wrapSetTimeout(targetPromise, delay = 2e4, id) {
+  if (targetPromise && typeof targetPromise.then === "function") {
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        logger.warn(`Data fetch for ID ${id} timed out after 20 seconds.`);
+        reject(new Error(`Data fetch for ID ${id} timed out after 20 seconds`));
+      }, delay);
+      targetPromise.then((value) => {
+        clearTimeout(timeoutId);
+        resolve(value);
+      }).catch((err) => {
+        clearTimeout(timeoutId);
+        reject(err);
+      });
+    });
+  }
+}
+function addProtocol(url) {
+  if (url.startsWith("//")) {
+    return "https:" + url;
+  }
+  return url;
+}
+const getDecodeQuery = (url, name) => {
+  const res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+const dataFetchServerMiddleware = async (ctx, next) => {
+  var _a, _b, _c;
+  let url;
+  let dataFetchKey;
+  let params;
+  let remoteInfo;
+  try {
+    url = new URL(ctx.req.url);
+    dataFetchKey = getDecodeQuery(url, DATA_FETCH_QUERY);
+    params = JSON.parse(getDecodeQuery(url, "params") || "{}");
+    const remoteInfoQuery = getDecodeQuery(url, "remoteInfo");
+    remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
+  } catch (e) {
+    logger.error("fetch data from server, error: ", e);
+    return next();
+  }
+  if (!dataFetchKey) {
+    return next();
+  }
+  logger.log("fetch data from server, dataFetchKey: ", dataFetchKey);
+  logger.debug(
+    "fetch data from server, moduleInfo: ",
+    (_a = globalThis.__FEDERATION__) == null ? void 0 : _a.moduleInfo
+  );
+  try {
+    const dataFetchMap = getDataFetchMap();
+    if (!dataFetchMap) {
+      initDataFetchMap();
+    }
+    const fetchDataPromise = (_b = dataFetchMap[dataFetchKey]) == null ? void 0 : _b[1];
+    logger.debug(
+      "fetch data from server, fetchDataPromise: ",
+      fetchDataPromise
+    );
+    if (fetchDataPromise && ((_c = dataFetchMap[dataFetchKey]) == null ? void 0 : _c[2]) !== MF_DATA_FETCH_STATUS.ERROR) {
+      const targetPromise = fetchDataPromise[0];
+      const wrappedPromise = wrapSetTimeout(targetPromise, 2e4, dataFetchKey);
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log("fetch data from server, fetchDataPromise res: ", res);
+        return ctx.json(res);
+      }
+      logger.error(
+        `Expected a Promise from fetchDataPromise[0] for dataFetchKey ${dataFetchKey}, but received:`,
+        targetPromise,
+        "Will try call new dataFetch again..."
+      );
+    }
+    if (remoteInfo) {
+      try {
+        const hostInstance2 = globalThis.__FEDERATION__.__INSTANCES__[0];
+        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
+        if (!hostInstance2) {
+          throw new Error("host instance not found!");
+        }
+        const remote = hostInstance2.options.remotes.find(
+          (remote2) => remote2.name === remoteInfo.name
+        );
+        logger.debug("find remote: ", JSON.stringify(remote));
+        if (!remote) {
+          hostInstance2.registerRemotes([
+            {
+              name: remoteInfo.name,
+              entry: remoteEntry,
+              entryGlobalName: remoteInfo.globalName
+            }
+          ]);
+        } else if (!("entry" in remote) || !remote.entry.includes(MANIFEST_EXT)) {
+          const { hostGlobalSnapshot, remoteSnapshot } = hostInstance2.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
+          logger.debug(
+            "find hostGlobalSnapshot: ",
+            JSON.stringify(hostGlobalSnapshot)
+          );
+          logger.debug("find remoteSnapshot: ", JSON.stringify(remoteSnapshot));
+          if (!hostGlobalSnapshot || !remoteSnapshot) {
+            if ("version" in remote) {
+              delete remote.version;
+            }
+            remote.entry = remoteEntry;
+            remote.entryGlobalName = remoteInfo.globalName;
+          }
+        }
+      } catch (e) {
+        ctx.status(500);
+        return ctx.text(
+          `failed to fetch ${remoteInfo.name} data, error:
+ ${e}`
+        );
+      }
+    }
+    const dataFetchItem = dataFetchMap[dataFetchKey];
+    logger.debug("fetch data from server, dataFetchItem: ", dataFetchItem);
+    if (dataFetchItem) {
+      const callFetchDataPromise = fetchData(dataFetchKey, {
+        ...params,
+        isDowngrade: !remoteInfo,
+        _id: dataFetchKey
+      });
+      const wrappedPromise = wrapSetTimeout(
+        callFetchDataPromise,
+        2e4,
+        dataFetchKey
+      );
+      if (wrappedPromise) {
+        const res = await wrappedPromise;
+        logger.log("fetch data from server, dataFetchItem res: ", res);
+        return ctx.json(res);
+      }
+    }
+    const remoteId = dataFetchKey.split(SEPARATOR)[0];
+    const hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+    if (!hostInstance) {
+      throw new Error("host instance not found!");
+    }
+    const dataFetchFn = await loadDataFetchModule(hostInstance, remoteId);
+    const data = await dataFetchFn({
+      ...params,
+      isDowngrade: !remoteInfo,
+      _id: dataFetchKey
+    });
+    logger.log("fetch data from server, loadDataFetchModule res: ", data);
+    return ctx.json(data);
+  } catch (e) {
+    logger.error("server plugin data fetch error: ", e);
+    ctx.status(500);
+    return ctx.text(`failed to fetch ${remoteInfo.name} data, error:
+ ${e}`);
+  }
+};
+export {
+  dataFetchServerMiddleware as default
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lazyUtils = require("./utils-iEVlDmyk.js");
+const prefetch = require("./prefetch-BaKIdUwP.js");
+async function callDataFetch() {
+  const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
+  if (dataFetch) {
+    await Promise.all(
+      dataFetch.map(async (options) => {
+        await prefetch.dataFetchFunction(options);
+      })
+    );
+  }
+}
+exports.CacheSize = lazyUtils.CacheSize;
+exports.CacheTime = lazyUtils.CacheTime;
+exports.cache = lazyUtils.cache;
+exports.clearStore = lazyUtils.clearStore;
+exports.configureCache = lazyUtils.configureCache;
+exports.generateKey = lazyUtils.generateKey;
+exports.revalidateTag = lazyUtils.revalidateTag;
+exports.injectDataFetch = prefetch.injectDataFetch;
+exports.prefetch = prefetch.prefetch;
+exports.callDataFetch = callDataFetch;

package/dist/data-fetch-utils.d.ts

@@ -0,0 +1,81 @@
+import { getInstance } from '@module-federation/runtime';
+
+export declare function cache<T>(fn: DataFetch<T>, options?: CacheOptions): DataFetch<T>;
+
+declare interface CacheConfig {
+    maxSize?: number;
+    unstable_shouldDisable?: ({ request, }: {
+        request: Request;
+    }) => boolean | Promise<boolean>;
+}
+
+declare interface CacheOptions {
+    tag?: string | string[];
+    maxAge?: number;
+    revalidate?: number;
+    getKey?: <Args extends any[]>(...args: Args) => string;
+    onCache?: (info: CacheStatsInfo) => boolean;
+}
+
+export declare const CacheSize: {
+    readonly KB: 1024;
+    readonly MB: number;
+    readonly GB: number;
+};
+
+export declare interface CacheStatsInfo {
+    status: CacheStatus;
+    key: string | symbol;
+    params: DataFetchParams;
+    result: any;
+}
+
+export declare type CacheStatus = 'hit' | 'stale' | 'miss';
+
+export declare const CacheTime: {
+    readonly SECOND: 1000;
+    readonly MINUTE: number;
+    readonly HOUR: number;
+    readonly DAY: number;
+    readonly WEEK: number;
+    readonly MONTH: number;
+};
+
+export declare function callDataFetch(): Promise<void>;
+
+export declare function clearStore(): void;
+
+export declare function configureCache(config: CacheConfig): void;
+
+declare type DataFetch<T> = (params: DataFetchParams) => Promise<T>;
+
+declare type DataFetchParams = {
+    isDowngrade: boolean;
+    _id?: string;
+} & Record<string, unknown>;
+
+export declare function generateKey(dataFetchOptions: DataFetchParams): string;
+
+export declare function injectDataFetch(): void;
+
+export declare function prefetch(options: PrefetchOptions): Promise<void>;
+
+export declare type PrefetchOptions = {
+    id: string;
+    instance: ReturnType<typeof getInstance>;
+    dataFetchParams?: DataFetchParams;
+    preloadComponentResource?: boolean;
+};
+
+export declare function revalidateTag(tag: string): void;
+
+export { }
+
+
+declare module '@module-federation/runtime-core' {
+    interface ModuleFederation {
+        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>;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { x as DATA_FETCH_FUNCTION } from "./utils-C4oPJV34.mjs";
+import { C, b, e, h, c, d, r } from "./utils-C4oPJV34.mjs";
+import { d as dataFetchFunction } from "./prefetch-YpJYjpWC.mjs";
+import { i, p } from "./prefetch-YpJYjpWC.mjs";
+async function callDataFetch() {
+  const dataFetch = globalThis[DATA_FETCH_FUNCTION];
+  if (dataFetch) {
+    await Promise.all(
+      dataFetch.map(async (options) => {
+        await dataFetchFunction(options);
+      })
+    );
+  }
+}
+export {
+  C as CacheSize,
+  b as CacheTime,
+  e as cache,
+  callDataFetch,
+  h as clearStore,
+  c as configureCache,
+  d as generateKey,
+  i as injectDataFetch,
+  p as prefetch,
+  r as revalidateTag
+};

package/dist/index-C0fDZB5b.js

@@ -0,0 +1,45 @@
+"use strict";
+const React = require("react");
+const index_esm = require("./index.esm-j_1sIRzg.js");
+const RouterContext = React.createContext(null);
+const LoggerInstance = index_esm.createLogger(
+  "[ Module Federation Bridge React ]"
+);
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
+const getModuleName = (id) => {
+  if (!id) {
+    return id;
+  }
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  if (!moduleName) {
+    return "";
+  }
+  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
+exports.LoggerInstance = LoggerInstance;
+exports.RouterContext = RouterContext;
+exports.getRootDomDefaultClassName = getRootDomDefaultClassName;
+exports.pathJoin = pathJoin;

package/dist/index-CqxytsLY.mjs

@@ -0,0 +1,46 @@
+import React__default from "react";
+import { c as createLogger } from "./index.esm-BCeUd-x9.mjs";
+const RouterContext = React__default.createContext(null);
+const LoggerInstance = createLogger(
+  "[ Module Federation Bridge React ]"
+);
+function pathJoin(...args) {
+  const res = args.reduce((res2, path) => {
+    let nPath = path;
+    if (!nPath || typeof nPath !== "string") {
+      return res2;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res2 + nPath;
+  }, "");
+  return res || "/";
+}
+const getModuleName = (id) => {
+  if (!id) {
+    return id;
+  }
+  const idArray = id.split("/");
+  if (idArray.length < 2) {
+    return id;
+  }
+  return idArray[0] + "/" + idArray[1];
+};
+const getRootDomDefaultClassName = (moduleName) => {
+  if (!moduleName) {
+    return "";
+  }
+  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
+  return `bridge-root-component-${name}`;
+};
+export {
+  LoggerInstance as L,
+  RouterContext as R,
+  getRootDomDefaultClassName as g,
+  pathJoin as p
+};

package/dist/index.cjs.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const bridgeBase = require("./bridge-base-BBH982Tz.cjs");
+const bridgeBase = require("./bridge-base-UGCwcMnG.js");
 const ReactDOM = require("react-dom");
 const React = require("react");
-const index = require("./index-Cv3p6r66.cjs");
+const index = require("./index-C0fDZB5b.js");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-B80Ud11k.js");
+const lazyUtils = require("./utils-iEVlDmyk.js");
+const dataFetchUtils = require("./data-fetch-utils.cjs.js");
+const prefetch = require("./prefetch-BaKIdUwP.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {
@@ -83,7 +87,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
         index.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({
@@ -171,7 +175,7 @@ function withRouterData(WrappedComponent) {
         }
       }
     }
-    index.LoggerInstance.debug(`createRemoteComponent withRouterData >>>`, {
+    index.LoggerInstance.debug(`createRemoteAppComponent withRouterData >>>`, {
       ...props,
       basename,
       routerContextVal,
@@ -183,7 +187,7 @@ function withRouterData(WrappedComponent) {
       React.useEffect(() => {
         if (pathname !== "" && pathname !== location.pathname) {
           index.LoggerInstance.debug(
-            `createRemoteComponent dispatchPopstateEnv >>>`,
+            `createRemoteAppComponent dispatchPopstateEnv >>>`,
             {
               name: props.name,
               pathname: location.pathname
@@ -204,7 +208,7 @@ const RemoteApp = withRouterData(RemoteAppWrapper);
 function createLazyRemoteComponent(info) {
   const exportName = (info == null ? void 0 : info.export) || "default";
   return React.lazy(async () => {
-    index.LoggerInstance.debug(`createRemoteComponent LazyComponent create >>>`, {
+    index.LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
       lazyComponent: info.loader,
       exportName
     });
@@ -212,7 +216,7 @@ function createLazyRemoteComponent(info) {
       const m = await info.loader();
       const moduleName = m && m[Symbol.for("mf_module_id")];
       index.LoggerInstance.debug(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
+        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
         { name: moduleName, module: m, exportName }
       );
       const exportFn = m[exportName];
@@ -235,7 +239,7 @@ function createLazyRemoteComponent(info) {
         };
       } else {
         index.LoggerInstance.debug(
-          `createRemoteComponent LazyComponent module not found >>>`,
+          `createRemoteAppComponent LazyComponent module not found >>>`,
           { name: moduleName, module: m, exportName }
         );
         throw Error(
@@ -249,7 +253,7 @@ function createLazyRemoteComponent(info) {
     }
   });
 }
-function createRemoteComponent(info) {
+function createRemoteAppComponent(info) {
   const LazyComponent = createLazyRemoteComponent(info);
   return React.forwardRef((props, ref) => {
     return /* @__PURE__ */ React.createElement(
@@ -261,5 +265,27 @@ function createRemoteComponent(info) {
     );
   });
 }
+function createRemoteComponent(info) {
+  index.LoggerInstance.warn(
+    `createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
+  );
+  return createRemoteAppComponent(info);
+}
+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;
+exports.cache = lazyUtils.cache;
+exports.clearStore = lazyUtils.clearStore;
+exports.configureCache = lazyUtils.configureCache;
+exports.generateKey = lazyUtils.generateKey;
+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;