@module-federation/data-prefetch 0.0.0-next-20240617071542 → 0.0.0-next-20240702090143

package/src/plugin.ts

@@ -0,0 +1,210 @@
+import { Module } from '@module-federation/runtime';
+import type {
+  FederationRuntimePlugin,
+  RemoteInfo,
+} from '@module-federation/runtime/types';
+import { ModuleInfo, getResourceUrl } from '@module-federation/sdk';
+
+import { getSignalFromManifest } from './common/runtime-utils';
+import { MFDataPrefetch } from './prefetch';
+import logger from './logger';
+
+type depsPreloadArg = Omit<PreloadRemoteArgs, 'depsRemote'>;
+
+interface PreloadRemoteArgs {
+  nameOrAlias: string;
+  exposes?: Array<string>;
+  resourceCategory?: 'all' | 'sync';
+  share?: boolean;
+  depsRemote?: boolean | Array<depsPreloadArg>;
+  filter?: (assetUrl: string) => boolean;
+  prefetchInterface?: boolean;
+}
+
+interface Loading {
+  id: string;
+  promise: Promise<
+    Array<{
+      value: any;
+      functionId: string;
+    }>
+  >;
+}
+const loadingArray: Array<Loading> = [];
+const strategy = 'loaded-first';
+let sharedFlag = strategy;
+// eslint-disable-next-line max-lines-per-function
+export const prefetchPlugin = (): FederationRuntimePlugin => ({
+  name: 'data-prefetch-runtime-plugin',
+  initContainer(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot as ModuleInfo;
+    const { name } = remoteInfo;
+
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot,
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    if (sharedFlag !== strategy) {
+      throw new Error(
+        `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`,
+      );
+    }
+
+    const instance =
+      MFDataPrefetch.getInstance(name) || new MFDataPrefetch(prefetchOptions);
+
+    let prefetchUrl;
+    // @ts-expect-error
+    if (snapshot.prefetchEntry) {
+      // @ts-expect-error
+      prefetchUrl = getResourceUrl(snapshot, snapshot.prefetchEntry as string);
+    }
+
+    const exist = loadingArray.find((loading) => loading.id === id);
+    if (exist) {
+      return options;
+    }
+    // @ts-ignore
+    const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      const projectExports = instance!.getProjectExports();
+      if (projectExports instanceof Promise) {
+        await projectExports;
+      }
+      return Promise.resolve().then(() => {
+        const exports = instance!.getExposeExports(id);
+        logger.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        const result = Object.keys(exports).map((k) => {
+          const value = instance!.prefetch({
+            id,
+            functionId: k,
+          });
+          const functionId = k;
+
+          return {
+            value,
+            functionId,
+          };
+        });
+        return result;
+      });
+    });
+
+    loadingArray.push({
+      id,
+      promise,
+    });
+    return options;
+  },
+
+  async onLoad(options) {
+    const { remote, id } = options;
+    const { name } = remote;
+    const promise = loadingArray.find((loading) => loading.id === id)?.promise;
+
+    if (promise) {
+      const prefetch = await promise;
+      const prefetchValue = prefetch.map((result) => result.value);
+      await Promise.all(prefetchValue);
+      const instance = MFDataPrefetch.getInstance(name);
+
+      prefetch.forEach((result: { value: any; functionId: string }) => {
+        const { value, functionId } = result;
+        instance!.memorize(id + functionId, value);
+      });
+    }
+    return options;
+  },
+
+  handlePreloadModule(options) {
+    const { remoteSnapshot, name, id, preloadConfig, origin, remote } = options;
+    const snapshot = remoteSnapshot as ModuleInfo;
+
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+
+    const prefetchOptions = {
+      name,
+      origin,
+      remote,
+      remoteSnapshot: snapshot,
+    };
+    const instance =
+      MFDataPrefetch.getInstance(name) || new MFDataPrefetch(prefetchOptions);
+
+    let prefetchUrl;
+    // @ts-expect-error
+    if (snapshot.prefetchEntry) {
+      // @ts-expect-error
+      prefetchUrl = getResourceUrl(snapshot, snapshot.prefetchEntry);
+    }
+
+    if (!preloadConfig.prefetchInterface) {
+      // @ts-ignore
+      instance.loadEntry(prefetchUrl);
+      return options;
+    }
+
+    const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      let module = origin.moduleCache.get(remote.name);
+      const moduleOptions = {
+        host: origin,
+        remoteInfo: remote as RemoteInfo,
+      };
+      if (!module) {
+        module = new Module(moduleOptions);
+        origin.moduleCache.set(remote.name, module);
+      }
+      const idPart = id.split('/');
+      let expose = idPart[idPart.length - 1];
+      if (expose !== '.') {
+        expose = `./${expose}`;
+      }
+      await module.get(id, expose, {}, remoteSnapshot);
+
+      const projectExports = instance!.getProjectExports();
+      if (projectExports instanceof Promise) {
+        await projectExports;
+      }
+      const exports = instance!.getExposeExports(id);
+      logger.info(
+        `1. PreloadRemote Start Prefetch: ${id} - ${performance.now()}`,
+      );
+      const result = Object.keys(exports).map((k) => {
+        const value = instance!.prefetch({
+          id,
+          functionId: k,
+        });
+        const functionId = k;
+
+        return {
+          value,
+          functionId,
+        };
+      });
+      return result;
+    });
+
+    loadingArray.push({
+      id,
+      promise,
+    });
+    return options;
+  },
+
+  beforeLoadShare(options) {
+    const shareInfo = options.shareInfo;
+    sharedFlag = shareInfo?.strategy || sharedFlag;
+    return options;
+  },
+});
+
+export default prefetchPlugin;

package/src/prefetch.ts

@@ -0,0 +1,210 @@
+import {
+  FederationHost,
+  getRemoteEntry,
+  getRemoteInfo,
+} from '@module-federation/runtime';
+import {
+  loadScript,
+  ModuleInfo,
+  ProviderModuleInfo,
+} from '@module-federation/sdk';
+import { Remote } from '@module-federation/runtime/types';
+
+import { getPrefetchId } from './common/runtime-utils';
+
+declare module '@module-federation/runtime' {
+  export interface Federation {
+    __PREFETCH__: {
+      entryLoading: Record<string, undefined | Promise<void>>;
+      instance: Map<string, MFDataPrefetch>;
+      __PREFETCH_EXPORTS__: Record<string, Promise<Record<string, any>>>;
+    };
+  }
+}
+
+type PrefetchExports = Record<string, any>;
+
+export interface DataPrefetchOptions {
+  name: string;
+  remote?: Remote;
+  origin?: FederationHost;
+  remoteSnapshot?: ModuleInfo;
+}
+
+export interface prefetchOptions {
+  id: string;
+  functionId?: string;
+  cacheStrategy?: () => boolean;
+  refetchParams?: any;
+}
+
+// @ts-ignore init global variable for test
+globalThis.__FEDERATION__ ??= {};
+globalThis.__FEDERATION__.__PREFETCH__ ??= {
+  entryLoading: {},
+  instance: new Map(),
+  __PREFETCH_EXPORTS__: {},
+};
+export class MFDataPrefetch {
+  public prefetchMemory: Map<string, Promise<any>>;
+  public recordOutdate: Record<string, Record<string, boolean>>;
+  private _exports: Record<string, any>;
+  private _options: DataPrefetchOptions;
+
+  constructor(options: DataPrefetchOptions) {
+    this.prefetchMemory = new Map();
+    this.recordOutdate = {};
+    this._exports = {};
+    this._options = options;
+    this.global.instance.set(options.name, this);
+  }
+
+  get global(): Record<string, any> {
+    return globalThis.__FEDERATION__.__PREFETCH__;
+  }
+
+  static getInstance(id: string): MFDataPrefetch | undefined {
+    return globalThis.__FEDERATION__.__PREFETCH__.instance.get(id);
+  }
+
+  async loadEntry(entry: string | undefined): Promise<any> {
+    const { name, remoteSnapshot, remote, origin } = this._options;
+
+    if (entry) {
+      const { buildVersion, globalName } = remoteSnapshot as ProviderModuleInfo;
+      const uniqueKey = globalName || `${name}:${buildVersion}`;
+
+      if (!this.global.entryLoading[uniqueKey]) {
+        this.global.entryLoading[uniqueKey] = loadScript(entry, {});
+      }
+      return this.global.entryLoading[uniqueKey];
+    } else {
+      const remoteInfo = getRemoteInfo(remote as Remote);
+      const module = origin!.moduleCache.get(remoteInfo.name);
+      return getRemoteEntry({
+        remoteInfo,
+        remoteEntryExports: module ? module.remoteEntryExports : undefined,
+        createScriptHook: (url: string) => {
+          const res = origin!.loaderHook.lifecycle.createScript.emit({
+            url,
+          });
+          if (res instanceof HTMLScriptElement) {
+            return res;
+          }
+          return;
+        },
+      });
+    }
+  }
+
+  getProjectExports() {
+    if (Object.keys(this._exports).length > 0) {
+      return this._exports;
+    }
+    const { name } = this._options;
+    const exportsPromise =
+      globalThis.__FEDERATION__.__PREFETCH__.__PREFETCH_EXPORTS__?.[name];
+    const resolve = exportsPromise.then(
+      (exports: Record<string, Record<string, any>> = {}) => {
+        // 根据函数名后缀匹配 prefetch，以便后续拓展其他能力，不应直接将所有函数都识别为 prefetch 函数
+        const memory: Record<string, Record<string, any>> = {};
+        Object.keys(exports).forEach((key) => {
+          memory[key] = {};
+          const exportVal = exports[key];
+          Object.keys(exportVal).reduce(
+            (memo: Record<string, any>, current: string) => {
+              if (
+                current.toLocaleLowerCase().endsWith('prefetch') ||
+                current.toLocaleLowerCase() === 'default'
+              ) {
+                memo[current] = exportVal[current];
+              }
+              return memo;
+            },
+            memory[key],
+          );
+        });
+        this.memorizeExports(memory);
+      },
+    );
+    return resolve;
+  }
+
+  memorizeExports(exports: Record<string, any>): void {
+    this._exports = exports;
+  }
+
+  getExposeExports(id: string): PrefetchExports {
+    const prefetchId = getPrefetchId(id);
+    const prefetchExports = this._exports[prefetchId] as PrefetchExports;
+    return prefetchExports || {};
+  }
+
+  prefetch(prefetchOptions: prefetchOptions): any {
+    const { id, functionId = 'default', refetchParams } = prefetchOptions;
+    let prefetchResult;
+    const prefetchId = getPrefetchId(id);
+    const memorizeId = id + functionId;
+    const memory = this.prefetchMemory.get(memorizeId);
+    if (!this.checkOutdate(prefetchOptions) && memory) {
+      return memory;
+    }
+
+    const prefetchExports = this._exports[prefetchId] as PrefetchExports;
+    if (!prefetchExports) {
+      return;
+    }
+    const executePrefetch = prefetchExports[functionId];
+    if (typeof executePrefetch === 'function') {
+      if (refetchParams) {
+        prefetchResult = executePrefetch(refetchParams);
+      } else {
+        prefetchResult = executePrefetch();
+      }
+    } else {
+      throw new Error(
+        `[Module Federation Data Prefetch]: No prefetch function called ${functionId} export in prefetch file`,
+      );
+    }
+    this.memorize(memorizeId, prefetchResult);
+    return prefetchResult;
+  }
+
+  memorize(id: string, value: any): void {
+    this.prefetchMemory.set(id, value);
+  }
+
+  markOutdate(
+    markOptions: Omit<prefetchOptions, 'cacheStrategy'>,
+    isOutdate: boolean,
+  ): void {
+    const { id, functionId = 'default' } = markOptions;
+    if (!this.recordOutdate[id]) {
+      this.recordOutdate[id] = {};
+    }
+    this.recordOutdate[id][functionId] = isOutdate;
+  }
+
+  checkOutdate(outdateOptions: prefetchOptions): boolean {
+    const { id, functionId = 'default', cacheStrategy } = outdateOptions;
+    if (typeof cacheStrategy === 'function') {
+      return cacheStrategy();
+    }
+
+    if (!this.recordOutdate[id]) {
+      this.recordOutdate[id] = {};
+    }
+    if (this.recordOutdate[id][functionId]) {
+      this.markOutdate(
+        {
+          id,
+          functionId,
+        },
+        false,
+      );
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

package/src/react/hooks.ts

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import type { defer } from 'react-router';
+
+import logger from '../logger';
+import { MFDataPrefetch, type prefetchOptions } from '../prefetch';
+import { prefetch } from '../universal';
+import { getScope } from '../common/runtime-utils';
+import { useFirstMounted } from './utils';
+
+type refetchParams = any;
+type DeferredData = ReturnType<typeof defer>;
+type prefetchReturnType<T> = [
+  Promise<T>,
+  (refetchParams?: refetchParams) => void,
+];
+
+type UsePrefetchOptions = prefetchOptions & {
+  deferId?: string;
+};
+
+export const usePrefetch = <T>(
+  options: UsePrefetchOptions,
+): prefetchReturnType<T> => {
+  const isFirstMounted = useFirstMounted();
+  if (isFirstMounted) {
+    const startTiming = performance.now();
+    logger.info(
+      `2. Start Get Prefetch Data: ${options.id} - ${
+        options.functionId || 'default'
+      } - ${startTiming}`,
+    );
+  }
+  const { id, functionId, deferId } = options;
+  const prefetchInfo = {
+    id,
+    functionId,
+  };
+  const mfScope = getScope(id);
+
+  let state;
+  const prefetchResult = prefetch(options);
+  if (deferId) {
+    if (prefetchResult instanceof Promise) {
+      state = (prefetchResult as Promise<DeferredData>).then(
+        (deferredData) => deferredData.data[deferId],
+      );
+    } else {
+      state = (prefetchResult as DeferredData).data[deferId];
+    }
+  } else {
+    state = prefetchResult;
+  }
+  const [prefetchState, setPrefetchState] = useState<Promise<T>>(
+    state as Promise<T>,
+  );
+  const prefetchInstance = MFDataPrefetch.getInstance(mfScope);
+
+  useEffect(() => {
+    const useEffectTiming = performance.now();
+    logger.info(
+      `3. Start Execute UseEffect: ${options.id} - ${
+        options.functionId || 'default'
+      } - ${useEffectTiming}`,
+    );
+
+    return () => {
+      prefetchInstance?.markOutdate(prefetchInfo, true);
+    };
+  }, []);
+
+  const refreshExecutor = (refetchParams?: refetchParams) => {
+    const refetchOptions = {
+      ...options,
+    };
+    if (refetchParams) {
+      refetchOptions.refetchParams = refetchParams;
+    }
+    prefetchInstance?.markOutdate(prefetchInfo, true);
+    const newVal = prefetch(refetchOptions) as Promise<DeferredData>;
+    let newState;
+    if (deferId) {
+      if (newVal instanceof Promise) {
+        newState = newVal.then((deferredData) => deferredData.data[deferId]);
+      } else {
+        newState = (newVal as DeferredData).data[deferId];
+      }
+    } else {
+      newState = newVal;
+    }
+
+    setPrefetchState(newState as Promise<T>);
+  };
+
+  return [prefetchState, refreshExecutor];
+};

package/src/react/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

package/src/react/utils.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const useFirstMounted = (): boolean => {
+  const ref = useRef(true);
+
+  useEffect(() => {
+    ref.current = false;
+  }, []);
+
+  return ref.current;
+};

package/src/shared/index.ts

@@ -0,0 +1,26 @@
+import type { FederationRuntimePlugin } from '@module-federation/runtime';
+
+const sharedStrategy: () => FederationRuntimePlugin = () => ({
+  name: 'shared-strategy',
+  beforeInit(args) {
+    const { userOptions } = args;
+    const shared = userOptions.shared;
+    if (shared) {
+      Object.keys(shared).forEach((sharedKey) => {
+        const sharedConfigs = shared[sharedKey];
+        const arraySharedConfigs = Array.isArray(sharedConfigs)
+          ? sharedConfigs
+          : [sharedConfigs];
+        arraySharedConfigs.forEach((s) => {
+          s.strategy = 'loaded-first';
+        });
+      });
+      console.warn(
+        `[Module Federation Data Prefetch]: Your shared strategy is set to 'loaded-first', this is a necessary condition for data prefetch`,
+      );
+    }
+    return args;
+  },
+});
+
+export default sharedStrategy;

package/src/universal/index.ts

@@ -0,0 +1,27 @@
+import { MFDataPrefetch, type prefetchOptions } from '../prefetch';
+import { getScope } from '../common/runtime-utils';
+
+export function prefetch(options: prefetchOptions): Promise<any> {
+  const { id, functionId } = options;
+  const mfScope = getScope(id);
+
+  const prefetchInstance =
+    MFDataPrefetch.getInstance(mfScope) ||
+    new MFDataPrefetch({
+      name: mfScope,
+    });
+
+  const res = prefetchInstance.getProjectExports();
+  if (res instanceof Promise) {
+    const promise = res.then(() => {
+      const result = prefetchInstance!.prefetch(options);
+      prefetchInstance.memorize(id + functionId, result);
+      return result;
+    });
+    return promise;
+  } else {
+    const result = prefetchInstance!.prefetch(options);
+    prefetchInstance.memorize(id + functionId, result);
+    return result;
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,35 @@
+import { replace } from 'esbuild-plugin-replace';
+import minimist from 'minimist';
+import type { Options } from 'tsup';
+
+import pkg from './package.json';
+
+const args = minimist(process.argv.slice(2));
+const watch = process.env.WATCH;
+const sourceMap = args.sourcemap || args.s;
+
+export const tsup: Options = {
+  entry: [
+    'src/index.ts',
+    'src/react/index.ts',
+    'src/cli/index.ts',
+    'src/cli/babel.ts',
+    'src/universal/index.ts',
+    'src/plugin.ts',
+    'src/shared/index.ts',
+  ],
+  sourcemap: sourceMap,
+  clean: true,
+  dts: true,
+  watch: watch ? 'src/' : false,
+  format: ['esm', 'cjs'],
+  legacyOutput: true,
+  esbuildPlugins: [
+    replace({
+      __VERSION__: `'${pkg.version}'`,
+      __DEV__:
+        '(typeof process !== "undefined" && process.env && process.env.NODE_ENV ? (process.env.NODE_ENV !== "production") : false)',
+      __TEST__: 'false',
+    }),
+  ],
+};