@module-federation/bridge-react 0.15.0 → 0.17.0

package/src/lazy/createLazyComponent.tsx

@@ -0,0 +1,411 @@
+import type { ModuleFederation, getInstance } from '@module-federation/runtime';
+import type { BasicProviderModuleInfo } from '@module-federation/sdk';
+import React, { ReactNode, useState, useEffect } from 'react';
+import type { ErrorInfo } from './AwaitDataFetch';
+import type { DataFetchParams, NoSSRRemoteInfo } from './types';
+
+import logger from './logger';
+import {
+  AwaitDataFetch,
+  DelayedLoading,
+  transformError,
+} from './AwaitDataFetch';
+import {
+  fetchData,
+  getDataFetchItem,
+  getDataFetchMapKey,
+  getDataFetchInfo,
+  getLoadedRemoteInfos,
+  setDataFetchItemLoadedStatus,
+  wrapDataFetchId,
+} from './utils';
+import {
+  DATA_FETCH_ERROR_PREFIX,
+  DATA_FETCH_FUNCTION,
+  FS_HREF,
+  LOAD_REMOTE_ERROR_PREFIX,
+  MF_DATA_FETCH_TYPE,
+} from './constant';
+
+export type IProps = {
+  id: string;
+  instance: ReturnType<typeof getInstance>;
+  injectScript?: boolean;
+  injectLink?: boolean;
+};
+
+export type CreateLazyComponentOptions<T, E extends keyof T> = {
+  loader: () => Promise<T>;
+  instance: ReturnType<typeof getInstance>;
+  loading: React.ReactNode;
+  delayLoading?: number;
+  fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
+  export?: E;
+  dataFetchParams?: DataFetchParams;
+  noSSR?: boolean;
+  injectScript?: boolean;
+  injectLink?: boolean;
+};
+
+type ReactKey = { key?: React.Key | null };
+
+function getTargetModuleInfo(
+  id: string,
+  instance?: ModuleFederation,
+):
+  | {
+      module: BasicProviderModuleInfo['modules'][0];
+      publicPath: string;
+      remoteEntry: string;
+    }
+  | undefined {
+  if (!instance) {
+    return;
+  }
+  const loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
+  if (!loadedRemoteInfo) {
+    return;
+  }
+  const { snapshot } = loadedRemoteInfo;
+  if (!snapshot) {
+    return;
+  }
+  const publicPath: string =
+    '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,
+  };
+}
+
+export function collectSSRAssets(options: IProps) {
+  const {
+    id,
+    injectLink = true,
+    injectScript = false,
+  } = typeof options === 'string' ? { id: options } : options;
+  const links: React.ReactNode[] = [];
+  const scripts: React.ReactNode[] = [];
+  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(
+          <link
+            key={`${file.split('.')[0]}_${index}`}
+            href={`${publicPath}${file}`}
+            rel="stylesheet"
+            type="text/css"
+          />,
+        );
+      });
+  }
+
+  if (injectScript) {
+    scripts.push(
+      <script
+        async={true}
+        key={remoteEntry.split('.')[0]}
+        src={`${publicPath}${remoteEntry}`}
+        crossOrigin="anonymous"
+      />,
+    );
+    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
+      scripts.push(
+        <script
+          key={`${file.split('.')[0]}_${index}`}
+          async={true}
+          src={`${publicPath}${file}`}
+          crossOrigin="anonymous"
+        />,
+      );
+    });
+  }
+
+  return [...scripts, ...links];
+}
+
+function getServerNeedRemoteInfo(
+  loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>,
+  id: string,
+  noSSR?: boolean,
+): NoSSRRemoteInfo | undefined {
+  if (
+    noSSR ||
+    (typeof window !== 'undefined' && window.location.href !== window[FS_HREF])
+  ) {
+    if (!loadedRemoteInfo?.version) {
+      throw new Error(`${loadedRemoteInfo?.name} version is empty`);
+    }
+    const { snapshot } = loadedRemoteInfo;
+    if (!snapshot) {
+      throw new Error(`${loadedRemoteInfo?.name} snapshot is empty`);
+    }
+    const dataFetchItem = getDataFetchItem(id);
+    const isFetchServer =
+      dataFetchItem?.[0]?.[1] === MF_DATA_FETCH_TYPE.FETCH_SERVER;
+
+    if (
+      isFetchServer &&
+      (!('ssrPublicPath' in snapshot) || !snapshot.ssrPublicPath)
+    ) {
+      throw new Error(
+        `ssrPublicPath is required while fetching ${loadedRemoteInfo?.name} data in SSR project!`,
+      );
+    }
+
+    if (
+      isFetchServer &&
+      (!('ssrRemoteEntry' in snapshot) || !snapshot.ssrRemoteEntry)
+    ) {
+      throw new Error(
+        `ssrRemoteEntry is required while loading ${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 undefined;
+}
+
+export function createLazyComponent<T, E extends keyof T>(
+  options: CreateLazyComponentOptions<T, E>,
+) {
+  const { instance, injectScript, injectLink } = options;
+  if (!instance) {
+    throw new Error('instance is required for createLazyComponent!');
+  }
+
+  type ComponentType = T[E] extends (...args: any) => any
+    ? Parameters<T[E]>[0] extends undefined
+      ? ReactKey
+      : Parameters<T[E]>[0] & ReactKey
+    : ReactKey;
+  const exportName = options?.export || 'default';
+
+  const callLoader = async () => {
+    logger.debug('callLoader start', Date.now());
+    const m = (await options.loader()) as Record<string, React.FC> &
+      Record<symbol, string>;
+    logger.debug('callLoader end', Date.now());
+    if (!m) {
+      throw new Error('load remote failed');
+    }
+    return m;
+  };
+
+  const getData = async (noSSR?: boolean) => {
+    let loadedRemoteInfo: ReturnType<typeof getLoadedRemoteInfos>;
+    let moduleId: string;
+    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 (e) {
+      const errMsg = `${LOAD_REMOTE_ERROR_PREFIX}${e}`;
+      logger.debug(e);
+      throw new Error(errMsg);
+    }
+    let dataFetchMapKey: string | undefined;
+    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(
+        dataFetchMapKey,
+        {
+          ...options.dataFetchParams,
+          isDowngrade: false,
+        },
+        getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR),
+      );
+      setDataFetchItemLoadedStatus(dataFetchMapKey);
+      logger.debug('get data res: \n', data);
+      return data;
+    } catch (err) {
+      const errMsg = `${DATA_FETCH_ERROR_PREFIX}${wrapDataFetchId(dataFetchMapKey)}${err}`;
+      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 = getLoadedRemoteInfos(moduleId, instance);
+    loadedRemoteInfo?.snapshot;
+    const dataFetchMapKey = loadedRemoteInfo
+      ? getDataFetchMapKey(
+          getDataFetchInfo({
+            name: loadedRemoteInfo.name,
+            alias: loadedRemoteInfo.alias,
+            id: moduleId,
+            remoteSnapshot: loadedRemoteInfo.snapshot,
+          }),
+          { name: instance.name, version: instance?.options.version },
+        )
+      : undefined;
+    logger.debug('LazyComponent dataFetchMapKey: ', dataFetchMapKey);
+
+    const assets = collectSSRAssets({
+      id: moduleId,
+      instance,
+      injectLink,
+      injectScript,
+    });
+
+    const Com = m[exportName] as React.FC<ComponentType>;
+    if (exportName in m && typeof Com === 'function') {
+      return {
+        default: (props: Omit<ComponentType, 'key'> & { mfData?: unknown }) => (
+          <>
+            {globalThis.FEDERATION_SSR && dataFetchMapKey && (
+              <script
+                suppressHydrationWarning
+                dangerouslySetInnerHTML={{
+                  __html: String.raw`
+                  globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}'] || [];
+                  globalThis['${DATA_FETCH_FUNCTION}'].push(['${dataFetchMapKey}',${JSON.stringify(props.mfData)}]);
+                  `,
+                }}
+              ></script>
+            )}
+            {globalThis.FEDERATION_SSR && assets}
+            <Com {...props} />
+          </>
+        ),
+      };
+      // eslint-disable-next-line max-lines
+    } else {
+      throw Error(
+        `Make sure that ${moduleId} has the correct export when export is ${String(
+          exportName,
+        )}`,
+      );
+    }
+  });
+
+  return (props: ComponentType) => {
+    const { key, ...args } = props;
+
+    if (!options.noSSR) {
+      return (
+        <AwaitDataFetch
+          resolve={getData(options.noSSR)}
+          loading={options.loading}
+          delayLoading={options.delayLoading}
+          errorElement={options.fallback}
+        >
+          {/* @ts-expect-error ignore */}
+          {(data) => <LazyComponent {...args} mfData={data} />}
+        </AwaitDataFetch>
+      );
+    } else {
+      // Client-side rendering logic
+      const [data, setData] = useState<unknown>(null);
+      const [loading, setLoading] = useState<boolean>(true);
+      const [error, setError] = useState<ErrorInfo | null>(null);
+
+      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 as Error));
+            }
+          } finally {
+            if (isMounted) {
+              setLoading(false);
+            }
+          }
+        };
+
+        fetchDataAsync();
+
+        return () => {
+          isMounted = false;
+        };
+      }, []);
+
+      if (loading) {
+        return (
+          <DelayedLoading delayLoading={options.delayLoading}>
+            {options.loading}
+          </DelayedLoading>
+        );
+      }
+
+      if (error) {
+        return (
+          <>
+            {typeof options.fallback === 'function'
+              ? options.fallback(error)
+              : options.fallback}
+          </>
+        );
+      }
+      // @ts-expect-error ignore
+      return <LazyComponent {...args} mfData={data} />;
+    }
+  };
+}

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

@@ -0,0 +1,291 @@
+import { LRUCache } from 'lru-cache';
+import { getDataFetchCache } from '../utils';
+
+import type {
+  CacheConfig,
+  CacheItem,
+  DataFetch,
+  DataFetchParams,
+} from '../types';
+
+export const CacheSize = {
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024,
+} as const;
+
+export const CacheTime = {
+  SECOND: 1000,
+  MINUTE: 60 * 1000,
+  HOUR: 60 * 60 * 1000,
+  DAY: 24 * 60 * 60 * 1000,
+  WEEK: 7 * 24 * 60 * 60 * 1000,
+  MONTH: 30 * 24 * 60 * 60 * 1000,
+} as const;
+
+export type CacheStatus = 'hit' | 'stale' | 'miss';
+
+export interface CacheStatsInfo {
+  status: CacheStatus;
+  key: string | symbol;
+  params: DataFetchParams;
+  result: any;
+}
+
+interface CacheOptions {
+  tag?: string | string[];
+  maxAge?: number;
+  revalidate?: number;
+  getKey?: <Args extends any[]>(...args: Args) => string;
+  onCache?: (info: CacheStatsInfo) => boolean;
+}
+
+function getTagKeyMap() {
+  const dataFetchCache = getDataFetchCache();
+  if (!dataFetchCache || !dataFetchCache.tagKeyMap) {
+    const tagKeyMap = new Map<string, Set<string>>();
+    globalThis.__MF_DATA_FETCH_CACHE__ ||= {};
+    globalThis.__MF_DATA_FETCH_CACHE__.tagKeyMap = tagKeyMap;
+    return tagKeyMap;
+  }
+  return dataFetchCache.tagKeyMap;
+}
+
+function addTagKeyRelation(tag: string, key: string) {
+  const tagKeyMap = getTagKeyMap();
+  let keys = tagKeyMap.get(tag);
+  if (!keys) {
+    keys = new Set();
+    tagKeyMap.set(tag, keys);
+  }
+  keys.add(key);
+}
+
+function getCacheConfig() {
+  const dataFetchCache = getDataFetchCache();
+  if (!dataFetchCache || !dataFetchCache.cacheConfig) {
+    const cacheConfig: CacheConfig = {
+      maxSize: CacheSize.GB,
+    };
+    globalThis.__MF_DATA_FETCH_CACHE__ ||= {};
+    globalThis.__MF_DATA_FETCH_CACHE__.cacheConfig = cacheConfig;
+    return cacheConfig;
+  }
+  return dataFetchCache.cacheConfig;
+}
+
+export function configureCache(config: CacheConfig): void {
+  const cacheConfig = getCacheConfig();
+  Object.assign(cacheConfig, config);
+}
+
+function getLRUCache() {
+  const dataFetchCache = getDataFetchCache();
+  const cacheConfig = getCacheConfig();
+
+  if (!dataFetchCache || !dataFetchCache.cacheStore) {
+    const cacheStore = new LRUCache<string, Map<string, CacheItem<any>>>({
+      maxSize: cacheConfig.maxSize ?? CacheSize.GB,
+      sizeCalculation: (value: Map<string, CacheItem<any>>): number => {
+        if (!value.size) {
+          return 1;
+        }
+
+        let size = 0;
+        for (const [k, item] of value.entries()) {
+          size += k.length * 2;
+          size += estimateObjectSize(item.data);
+          size += 8;
+        }
+        return size;
+      },
+      updateAgeOnGet: true,
+      updateAgeOnHas: true,
+    });
+    globalThis.__MF_DATA_FETCH_CACHE__ ||= {};
+    globalThis.__MF_DATA_FETCH_CACHE__.cacheStore = cacheStore;
+    return cacheStore;
+  }
+
+  return dataFetchCache.cacheStore;
+}
+
+function estimateObjectSize(data: unknown): number {
+  const type = typeof data;
+
+  if (type === 'number') return 8;
+  if (type === 'boolean') return 4;
+  if (type === 'string') return Math.max((data as string).length * 2, 1);
+  if (data === null || data === undefined) return 1;
+
+  if (ArrayBuffer.isView(data)) {
+    return Math.max(data.byteLength, 1);
+  }
+
+  if (Array.isArray(data)) {
+    return Math.max(
+      data.reduce((acc, item) => acc + estimateObjectSize(item), 0),
+      1,
+    );
+  }
+
+  if (data instanceof Map || data instanceof Set) {
+    return 1024;
+  }
+
+  if (data instanceof Date) {
+    return 8;
+  }
+
+  if (type === 'object') {
+    return Math.max(
+      Object.entries(data).reduce(
+        (acc, [key, value]) => acc + key.length * 2 + estimateObjectSize(value),
+        0,
+      ),
+      1,
+    );
+  }
+
+  return 1;
+}
+
+export function generateKey(dataFetchOptions: DataFetchParams): string {
+  return JSON.stringify(dataFetchOptions, (_, value) => {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      return Object.keys(value)
+        .sort()
+        .reduce((result: Record<string, unknown>, key) => {
+          result[key] = value[key];
+          return result;
+        }, {});
+    }
+    return value;
+  });
+}
+
+export function cache<T>(
+  fn: DataFetch<T>,
+  options?: CacheOptions,
+): DataFetch<T> {
+  const {
+    tag = 'default',
+    maxAge = CacheTime.MINUTE * 5,
+    revalidate = 0,
+    onCache,
+    getKey,
+  } = options || {};
+
+  const tags = Array.isArray(tag) ? tag : [tag];
+
+  return async (dataFetchOptions) => {
+    // if downgrade, skip cache
+    if (dataFetchOptions.isDowngrade || !dataFetchOptions._id) {
+      return fn(dataFetchOptions);
+    }
+    const store = getLRUCache();
+
+    const now = Date.now();
+    const storeKey = dataFetchOptions._id;
+    const cacheKey = getKey
+      ? getKey(dataFetchOptions)
+      : generateKey(dataFetchOptions);
+
+    tags.forEach((t) => addTagKeyRelation(t, cacheKey));
+
+    let cacheStore = store.get(cacheKey);
+    if (!cacheStore) {
+      cacheStore = new Map();
+    }
+
+    const cached = cacheStore.get(storeKey);
+    if (cached) {
+      const age = now - cached.timestamp;
+
+      if (age < maxAge) {
+        if (onCache) {
+          const useCache = onCache({
+            status: 'hit',
+            key: cacheKey,
+            params: dataFetchOptions,
+            result: cached.data,
+          });
+          if (!useCache) {
+            return fn(dataFetchOptions);
+          }
+        }
+        return cached.data;
+      }
+
+      if (revalidate > 0 && age < maxAge + revalidate) {
+        if (onCache) {
+          onCache({
+            status: 'stale',
+            key: cacheKey,
+            params: dataFetchOptions,
+            result: cached.data,
+          });
+        }
+
+        if (!cached.isRevalidating) {
+          cached.isRevalidating = true;
+          Promise.resolve().then(async () => {
+            try {
+              const newData = await fn(dataFetchOptions);
+              cacheStore!.set(storeKey, {
+                data: newData,
+                timestamp: Date.now(),
+                isRevalidating: false,
+              });
+
+              store.set(cacheKey, cacheStore!);
+            } catch (error) {
+              cached.isRevalidating = false;
+              console.error('Background revalidation failed:', error);
+            }
+          });
+        }
+        return cached.data;
+      }
+    }
+
+    const data = await fn(dataFetchOptions);
+    cacheStore.set(storeKey, {
+      data,
+      timestamp: now,
+      isRevalidating: false,
+    });
+    store.set(cacheKey, cacheStore);
+
+    if (onCache) {
+      onCache({
+        status: 'miss',
+        key: cacheKey,
+        params: dataFetchOptions,
+        result: data,
+      });
+    }
+
+    return data;
+  };
+}
+
+export function revalidateTag(tag: string): void {
+  const tagKeyMap = getTagKeyMap();
+  const keys = tagKeyMap.get(tag);
+  const lruCache = getLRUCache();
+  if (keys) {
+    keys.forEach((key) => {
+      lruCache?.delete(key);
+    });
+  }
+}
+
+export function clearStore(): void {
+  const lruCache = getLRUCache();
+  const tagKeyMap = getTagKeyMap();
+
+  lruCache?.clear();
+  delete globalThis.__MF_DATA_FETCH_CACHE__?.cacheStore;
+  tagKeyMap.clear();
+}

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

@@ -0,0 +1,13 @@
+import { DATA_FETCH_FUNCTION } from '../constant';
+import { dataFetchFunction } from './inject-data-fetch';
+
+export async function callDataFetch() {
+  const dataFetch = globalThis[DATA_FETCH_FUNCTION];
+  if (dataFetch) {
+    await Promise.all(
+      dataFetch.map(async (options) => {
+        await dataFetchFunction(options);
+      }),
+    );
+  }
+}