feat: add prefetch and cache api

Author: 2heal1

apps/modern-component-data-fetch/provider/src/components/BasicComponent/index.data.ts

@@ -1,13 +1,15 @@
+import { cache } from '@module-federation/modern-js/react';
+
 export type Data = {
   data: string;
 };
 
-export const fetchData = async (): Promise<Data> => {
+export const fetchData = cache(async (): Promise<Data> => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
         data: `[ provider - server ] fetched data: ${new Date()}`,
       });
     }, 1000);
   });
-};
+});

packages/bridge/bridge-react/package.json

@@ -99,7 +99,8 @@
   "dependencies": {
     "@module-federation/bridge-shared": "workspace:*",
     "@module-federation/sdk": "workspace:*",
-    "react-error-boundary": "^4.1.2"
+    "react-error-boundary": "^4.1.2",
+    "lru-cache": "^10.4.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

packages/bridge/bridge-react/src/index.ts

@@ -15,6 +15,14 @@ export {
   callDataFetch,
   setSSREnv,
   autoFetchDataPlugin,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
 } from './lazy';
 
 export type { CreateRootOptions, Root } from './provider/versions/legacy';
@@ -30,4 +38,6 @@ export type {
   NoSSRRemoteInfo,
   CollectSSRAssetsOptions,
   CreateLazyComponentOptions,
+  CacheStatus,
+  CacheStatsInfo,
 } from './lazy';

packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx

@@ -194,9 +194,7 @@ export function createLazyComponent<T, E extends keyof T>(
 ) {
   const { instance } = options;
   if (!instance) {
-    throw new Error(
-      'instance is required if used in "@module-federation/bridge-react"!',
-    );
+    throw new Error('instance is required for createLazyComponent!');
   }
   type ComponentType = T[E] extends (...args: any) => any
     ? Parameters<T[E]>[0] extends undefined

packages/bridge/bridge-react/src/lazy/data-fetch/cache.ts

@@ -0,0 +1,296 @@
+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;
+  customKey?: <Args extends any[]>(options: {
+    params: Args;
+    fn: (...args: Args) => any;
+    generatedKey: string;
+  }) => string | symbol;
+  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();
+}

packages/bridge/bridge-react/src/lazy/data-fetch/data-fetch-server-middleware.ts

@@ -159,6 +159,7 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
       const callFetchDataPromise = fetchData(dataFetchId, {
         ...params,
         isDowngrade: !remoteInfo,
+        _id: dataFetchId,
       });
       const wrappedPromise = wrapSetTimeout(
         callFetchDataPromise,
@@ -178,7 +179,11 @@ const dataFetchServerMiddleware: MiddlewareHandler = async (ctx, next) => {
       throw new Error('host instance not found!');
     }
     const dataFetchFn = await loadDataFetchModule(hostInstance, remoteId);
-    const data = await dataFetchFn({ ...params, isDowngrade: !remoteInfo });
+    const data = await dataFetchFn({
+      ...params,
+      isDowngrade: !remoteInfo,
+      _id: dataFetchId,
+    });
     logger.log('fetch data from server, loadDataFetchModule res: ', data);
     return ctx.json(data);
   } catch (e) {

packages/bridge/bridge-react/src/lazy/data-fetch/index.ts

@@ -1,2 +1,15 @@
 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 { prefetch } from './prefetch';