@module-federation/bridge-react 0.16.0 → 0.17.0

package/src/lazy/data-fetch/data-fetch-server-middleware.ts

@@ -0,0 +1,196 @@
+import { DATA_FETCH_QUERY, MF_DATA_FETCH_STATUS } from '../constant';
+import {
+  getDataFetchMap,
+  fetchData,
+  initDataFetchMap,
+  loadDataFetchModule,
+} from '../utils';
+import { SEPARATOR, MANIFEST_EXT } from '@module-federation/sdk';
+import logger from '../logger';
+
+import type { NoSSRRemoteInfo } from '../types';
+import type { MiddlewareHandler } from 'hono';
+
+function wrapSetTimeout(
+  targetPromise: Promise<unknown>,
+  delay = 20000,
+  id: string,
+) {
+  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: any) => {
+          clearTimeout(timeoutId);
+          resolve(value);
+        })
+        .catch((err: any) => {
+          clearTimeout(timeoutId);
+          reject(err);
+        });
+    });
+  }
+}
+
+function addProtocol(url: string) {
+  if (url.startsWith('//')) {
+    return 'https:' + url;
+  }
+  return url;
+}
+
+const getDecodeQuery = (url: URL, name: string) => {
+  const res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+
+const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
+  let url: URL;
+  let dataFetchKey: string | null;
+  let params: Record<string, unknown>;
+  let remoteInfo: NoSSRRemoteInfo;
+  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: ',
+    globalThis.__FEDERATION__?.moduleInfo,
+  );
+  try {
+    const dataFetchMap = getDataFetchMap();
+    if (!dataFetchMap) {
+      initDataFetchMap();
+    }
+    const fetchDataPromise = dataFetchMap[dataFetchKey]?.[1];
+    logger.debug(
+      'fetch data from server, fetchDataPromise: ',
+      fetchDataPromise,
+    );
+    if (
+      fetchDataPromise &&
+      dataFetchMap[dataFetchKey]?.[2] !== MF_DATA_FETCH_STATUS.ERROR
+    ) {
+      const targetPromise = fetchDataPromise[0];
+      // Ensure targetPromise is thenable
+      const wrappedPromise = wrapSetTimeout(targetPromise, 20000, 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 hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+        const remoteEntry = `${addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry}`;
+        if (!hostInstance) {
+          throw new Error('host instance not found!');
+        }
+        const remote = hostInstance.options.remotes.find(
+          (remote) => remote.name === remoteInfo.name,
+        );
+        logger.debug('find remote: ', JSON.stringify(remote));
+        if (!remote) {
+          hostInstance.registerRemotes([
+            {
+              name: remoteInfo.name,
+              entry: remoteEntry,
+              entryGlobalName: remoteInfo.globalName,
+            },
+          ]);
+        } else if (
+          !('entry' in remote) ||
+          !remote.entry.includes(MANIFEST_EXT)
+        ) {
+          const { hostGlobalSnapshot, remoteSnapshot } =
+            hostInstance.snapshotHandler.getGlobalRemoteInfo(remoteInfo);
+          logger.debug(
+            'find hostGlobalSnapshot: ',
+            JSON.stringify(hostGlobalSnapshot),
+          );
+          logger.debug('find remoteSnapshot: ', JSON.stringify(remoteSnapshot));
+
+          if (!hostGlobalSnapshot || !remoteSnapshot) {
+            if ('version' in remote) {
+              // @ts-ignore
+              delete remote.version;
+            }
+            // @ts-ignore
+            remote.entry = remoteEntry;
+            remote.entryGlobalName = remoteInfo.globalName;
+          }
+        }
+      } catch (e) {
+        ctx.status(500);
+        return ctx.text(
+          `failed to fetch ${remoteInfo.name} data, error:\n ${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,
+        20000,
+        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:\n ${e}`);
+  }
+};
+
+export default dataFetchServerMiddleware;

package/src/lazy/data-fetch/index.ts

@@ -0,0 +1,16 @@
+export { callDataFetch } from './call-data-fetch';
+export { injectDataFetch } from './inject-data-fetch';
+export {
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+} from './cache';
+
+export type { CacheStatus, CacheStatsInfo } from './cache';
+
+export type { PrefetchOptions } from './prefetch';
+export { prefetch } from './prefetch';

package/src/lazy/data-fetch/inject-data-fetch.ts

@@ -0,0 +1,109 @@
+import {
+  DATA_FETCH_FUNCTION,
+  DOWNGRADE_KEY,
+  FS_HREF,
+  MF_DATA_FETCH_STATUS,
+  MF_DATA_FETCH_TYPE,
+} from '../constant';
+import logger from '../logger';
+import {
+  dataFetchFunctionOptions,
+  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET,
+} from '../types';
+import {
+  callAllDowngrade,
+  callDowngrade,
+  getDataFetchItem,
+  getDataFetchMap,
+  getDowngradeTag,
+  initDataFetchMap,
+} from '../utils';
+
+const dataFetchFunction = async function (options: dataFetchFunctionOptions) {
+  const [id, data, downgrade] = options;
+  logger.debug('==========call data fetch function!');
+  if (data) {
+    if (!id) {
+      throw new Error('id is required!');
+    }
+    if (!getDataFetchMap()) {
+      initDataFetchMap();
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    if (dataFetchItem) {
+      dataFetchItem[1]?.[1]?.(data);
+      dataFetchItem[2] = MF_DATA_FETCH_STATUS.LOADED;
+      return;
+    }
+    if (!dataFetchItem) {
+      const dataFetchMap = getDataFetchMap();
+      let res: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[1];
+      let rej: MF_DATA_FETCH_MAP_VALUE_PROMISE_SET[2];
+      const p = new Promise((resolve, reject) => {
+        res = resolve;
+        rej = reject;
+      });
+
+      dataFetchMap[id] = [
+        [
+          async () => async () => {
+            return '';
+          },
+          MF_DATA_FETCH_TYPE.FETCH_SERVER,
+        ],
+        [p, res, rej],
+        MF_DATA_FETCH_STATUS.LOADED,
+      ];
+      res && res(data);
+      return;
+    }
+  }
+
+  if (downgrade) {
+    const mfDowngrade = getDowngradeTag();
+    if (!mfDowngrade) {
+      globalThis[DOWNGRADE_KEY] = id ? [id] : true;
+    } else if (Array.isArray(mfDowngrade) && id && !mfDowngrade.includes(id)) {
+      mfDowngrade.push(id);
+    }
+  }
+
+  const mfDowngrade = getDowngradeTag();
+
+  if (typeof mfDowngrade === 'boolean') {
+    return callAllDowngrade();
+  }
+  if (Array.isArray(mfDowngrade)) {
+    if (!id) {
+      globalThis[DOWNGRADE_KEY] = true;
+      return callAllDowngrade();
+    }
+
+    if (!mfDowngrade.includes(id)) {
+      mfDowngrade.push(id);
+    }
+
+    return callDowngrade(id);
+  }
+};
+
+export function injectDataFetch() {
+  globalThis[DATA_FETCH_FUNCTION] ||= [];
+  const dataFetch = globalThis[DATA_FETCH_FUNCTION];
+
+  //@ts-ignore
+  if (dataFetch.push === dataFetchFunction) {
+    return;
+  }
+
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  globalThis[FS_HREF] = window.location.href;
+
+  //@ts-ignore
+  dataFetch.push = dataFetchFunction;
+}
+
+export { dataFetchFunction };

package/src/lazy/data-fetch/prefetch.ts

@@ -0,0 +1,106 @@
+import type { getInstance } from '@module-federation/runtime';
+import {
+  getDataFetchInfo,
+  getDataFetchMap,
+  getDataFetchMapKey,
+} from '../utils';
+import logger from '../logger';
+import helpers from '@module-federation/runtime/helpers';
+import { DataFetchParams } from '../types';
+
+export type PrefetchOptions = {
+  id: string;
+  instance: ReturnType<typeof getInstance>;
+  dataFetchParams?: DataFetchParams;
+  preloadComponentResource?: boolean;
+};
+
+export async function prefetch(options: PrefetchOptions) {
+  const { instance, id, dataFetchParams, preloadComponentResource } = options;
+  if (!id) {
+    logger.error('id is required for prefetch!');
+    return;
+  }
+  if (!instance) {
+    logger.error('instance is required for prefetch!');
+    return;
+  }
+  const matchedRemoteInfo = helpers.utils.matchRemoteWithNameAndExpose(
+    instance.options.remotes,
+    id,
+  );
+  if (!matchedRemoteInfo) {
+    logger.error(`Can not found '${id}' in instance.options.remotes!`);
+    return;
+  }
+  const { remote, expose } = matchedRemoteInfo;
+  const { remoteSnapshot, globalSnapshot } =
+    await instance.snapshotHandler.loadRemoteSnapshotInfo({
+      moduleInfo: remote,
+      id,
+      expose,
+    });
+
+  if (preloadComponentResource) {
+    const remoteInfo = helpers.utils.getRemoteInfo(remote);
+
+    instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
+      origin: instance,
+      preloadOptions: {
+        remote,
+        preloadConfig: {
+          nameOrAlias: remote.name,
+          exposes: [expose],
+        },
+      },
+      remote,
+      remoteInfo,
+      globalSnapshot,
+      remoteSnapshot,
+    });
+  }
+
+  const dataFetchMap = getDataFetchMap();
+  if (!dataFetchMap) {
+    return;
+  }
+  const dataFetchInfo = getDataFetchInfo({
+    name: remote.name,
+    alias: remote.alias,
+    id,
+    remoteSnapshot,
+  });
+
+  const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
+    name: instance.name,
+    version: instance.options.version,
+  });
+
+  if (!dataFetchMapKey) {
+    return;
+  }
+
+  const dataFetchItem = dataFetchMap[dataFetchMapKey];
+  if (!dataFetchItem) {
+    return;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [getDataFetchGetter, _type, getDataFetchPromise] = dataFetchItem[0];
+
+  let _getDataFetchPromise = getDataFetchPromise;
+  if (!getDataFetchPromise) {
+    if (!getDataFetchGetter) {
+      return;
+    }
+    _getDataFetchPromise = getDataFetchGetter();
+  }
+
+  _getDataFetchPromise!.then((dataFetchFn) => {
+    return dataFetchFn({
+      ...dataFetchParams,
+      _id: dataFetchMapKey,
+      isDowngrade: false,
+    });
+  });
+}

package/src/lazy/data-fetch/runtime-plugin.ts

@@ -0,0 +1,115 @@
+import { injectDataFetch } from './inject-data-fetch';
+import {
+  getDataFetchInfo,
+  initDataFetchMap,
+  getDataFetchItem,
+  getDataFetchMap,
+  isCSROnly,
+  getDataFetchMapKey,
+  isDataLoaderExpose,
+  loadDataFetchModule,
+  isServerEnv,
+} from '../utils';
+import logger from '../logger';
+import {
+  MF_DATA_FETCH_TYPE,
+  MF_DATA_FETCH_STATUS,
+  DATA_FETCH_CLIENT_SUFFIX,
+} from '../constant';
+
+import type { MF_DATA_FETCH_MAP_VALUE } from '../types';
+import type { FederationRuntimePlugin } from '@module-federation/runtime';
+
+const autoFetchData: () => FederationRuntimePlugin = () => {
+  initDataFetchMap();
+  injectDataFetch();
+  return {
+    name: 'auto-fetch-data-plugin',
+    afterLoadSnapshot(args) {
+      const { id, moduleInfo, remoteSnapshot, host } = args;
+      if (typeof id === 'string' && isDataLoaderExpose(id)) {
+        return args;
+      }
+      if (!remoteSnapshot || !id || !('modules' in remoteSnapshot)) {
+        return args;
+      }
+
+      const { name, alias } = moduleInfo;
+      const dataFetchInfo = getDataFetchInfo({
+        name,
+        alias,
+        id,
+        remoteSnapshot,
+      });
+      if (!dataFetchInfo) {
+        return args;
+      }
+      const { dataFetchId, dataFetchName } = dataFetchInfo;
+
+      const dataFetchMapKey = getDataFetchMapKey(dataFetchInfo, {
+        name: host.name,
+        version: host.options.version,
+      });
+      logger.debug(
+        '======= auto fetch plugin dataFetchMapKey: ',
+        dataFetchMapKey,
+      );
+
+      if (!dataFetchMapKey) {
+        return args;
+      }
+
+      const dataFetchItem = getDataFetchItem(dataFetchMapKey);
+      if (dataFetchItem) {
+        return args;
+      }
+
+      const dataFetchMap = getDataFetchMap();
+      const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
+      const hasDataFetchClient = Boolean(
+        remoteSnapshot.modules.find(
+          (module) =>
+            module.moduleName === `${dataFetchName}${DATA_FETCH_CLIENT_SUFFIX}`,
+        ),
+      );
+      const downgradeType = hasDataFetchClient
+        ? MF_DATA_FETCH_TYPE.FETCH_CLIENT
+        : hasSSRAsset
+          ? MF_DATA_FETCH_TYPE.FETCH_SERVER
+          : MF_DATA_FETCH_TYPE.FETCH_CLIENT;
+      let finalDataFetchId = dataFetchId;
+
+      if (!isServerEnv()) {
+        finalDataFetchId =
+          downgradeType === MF_DATA_FETCH_TYPE.FETCH_CLIENT
+            ? hasDataFetchClient
+              ? `${dataFetchId}${DATA_FETCH_CLIENT_SUFFIX}`
+              : dataFetchId
+            : dataFetchId;
+      }
+
+      const getDataFetchGetter = () =>
+        loadDataFetchModule(host, finalDataFetchId);
+
+      const dataFetchFnItem: MF_DATA_FETCH_MAP_VALUE[0] = [
+        getDataFetchGetter,
+        downgradeType,
+      ];
+
+      // server client must execute
+      if (typeof window === 'undefined' || isCSROnly()) {
+        dataFetchFnItem.push(getDataFetchGetter());
+      }
+
+      dataFetchMap[dataFetchMapKey] = [
+        dataFetchFnItem,
+        undefined,
+        MF_DATA_FETCH_STATUS.AWAIT,
+      ];
+
+      return args;
+    },
+  };
+};
+
+export default autoFetchData;

package/src/lazy/index.ts

@@ -0,0 +1,35 @@
+import autoFetchDataPlugin from './data-fetch/runtime-plugin';
+
+export { ERROR_TYPE } from './constant';
+export type { DataFetchParams, NoSSRRemoteInfo } from './types';
+export type {
+  CreateLazyComponentOptions,
+  IProps as CollectSSRAssetsOptions,
+} from './createLazyComponent';
+
+export { createLazyComponent, collectSSRAssets } from './createLazyComponent';
+
+// export { wrapNoSSR } from './wrapNoSSR';
+
+export {
+  injectDataFetch,
+  callDataFetch,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
+} from './data-fetch';
+
+export { setSSREnv } from './utils';
+
+export { autoFetchDataPlugin };
+
+export type {
+  CacheStatus,
+  CacheStatsInfo,
+  PrefetchOptions,
+} from './data-fetch';

package/src/lazy/logger.ts

@@ -0,0 +1,6 @@
+import { createLogger } from '@module-federation/sdk';
+import { PLUGIN_IDENTIFIER } from './constant';
+
+const logger = createLogger(PLUGIN_IDENTIFIER);
+
+export default logger;

package/src/lazy/types.ts

@@ -0,0 +1,75 @@
+import { MF_DATA_FETCH_TYPE, MF_DATA_FETCH_STATUS } from './constant';
+import type { LRUCache } from 'lru-cache';
+
+export type dataFetchFunctionOptions = [
+  id?: string,
+  data?: unknown,
+  downgrade?: boolean,
+];
+
+declare global {
+  var _mfSSRDowngrade: string[] | true | undefined;
+  var __MF_DATA_FETCH_MAP__: MF_DATA_FETCH_MAP | undefined;
+  var FEDERATION_SERVER_QUERY: Record<string, unknown> | undefined;
+  var FEDERATION_SSR: boolean | undefined;
+  var _mfFSHref: string | undefined;
+  var _mfDataFetch: Array<dataFetchFunctionOptions> | undefined;
+  var __MF_DATA_FETCH_CACHE__: MF_DATA_FETCH_CACHE | undefined;
+}
+
+export interface CacheItem<T> {
+  data: T;
+  timestamp: number;
+  isRevalidating?: boolean;
+}
+
+export type DataFetchParams = {
+  isDowngrade: boolean;
+  _id?: string;
+} & Record<string, unknown>;
+export type DataFetch<T> = (params: DataFetchParams) => Promise<T>;
+
+// loading, resolve, reject
+export type MF_DATA_FETCH_MAP_VALUE_PROMISE_SET = [
+  Promise<unknown>,
+  ((data: unknown) => void)?,
+  ((err: unknown) => void)?,
+];
+export type MF_DATA_FETCH_MAP_VALUE = [
+  [
+    // getDataFetchGetter
+    () => Promise<DataFetch<unknown>>,
+    // data fetch type
+    MF_DATA_FETCH_TYPE,
+    // getDataFetchPromise
+    Promise<DataFetch<unknown>>?,
+  ],
+  MF_DATA_FETCH_MAP_VALUE_PROMISE_SET?,
+  MF_DATA_FETCH_STATUS?,
+];
+export type MF_DATA_FETCH_MAP = Record<string, MF_DATA_FETCH_MAP_VALUE>;
+export type MF_SSR_DOWNGRADE = string[] | true | undefined;
+
+export type NoSSRRemoteInfo = {
+  name: string;
+  version: string;
+  ssrPublicPath: string;
+  ssrRemoteEntry: string;
+  globalName: string;
+};
+
+export interface CacheConfig {
+  maxSize?: number;
+  unstable_shouldDisable?: ({
+    request,
+  }: {
+    request: Request;
+  }) => boolean | Promise<boolean>;
+}
+
+// key is the id, default is the same with dataFetchMapId, but it can be custom by passing dataFetchParams.id
+export type MF_DATA_FETCH_CACHE = {
+  cacheStore?: LRUCache<string, Map<string, CacheItem<any>>>;
+  tagKeyMap?: Map<string, Set<string>>;
+  cacheConfig?: CacheConfig;
+};