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

package/dist/index.js

@@ -200,9 +200,11 @@ var logger_default = new import_sdk3.Logger("[Module Federation Data Prefetch]")
 
 // src/plugin.ts
 var loadingArray = [];
+var strategy = "loaded-first";
+var sharedFlag = strategy;
 var prefetchPlugin = () => ({
   name: "data-prefetch-runtime-plugin",
-  afterResolve(options) {
+  initContainer(options) {
     const { remoteSnapshot, remoteInfo, id, origin } = options;
     const snapshot = remoteSnapshot;
     const { name } = remoteInfo;
@@ -216,6 +218,11 @@ var prefetchPlugin = () => ({
     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;
     if (snapshot.prefetchEntry) {
@@ -230,20 +237,22 @@ var prefetchPlugin = () => ({
       if (projectExports instanceof Promise) {
         await projectExports;
       }
-      const exports = instance.getExposeExports(id);
-      logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
-      const result = Object.keys(exports).map((k) => {
-        const value = instance.prefetch({
-          id,
-          functionId: k
+      return Promise.resolve().then(() => {
+        const exports = instance.getExposeExports(id);
+        logger_default.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
+          };
         });
-        const functionId = k;
-        return {
-          value,
-          functionId
-        };
+        return result;
       });
-      return result;
     });
     loadingArray.push({
       id,
@@ -296,7 +305,9 @@ var prefetchPlugin = () => ({
         await projectExports;
       }
       const exports = instance.getExposeExports(id);
-      logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+      logger_default.info(
+        `1. PreloadRemote Start Prefetch: ${id} - ${performance.now()}`
+      );
       const result = Object.keys(exports).map((k) => {
         const value = instance.prefetch({
           id,
@@ -315,6 +326,11 @@ var prefetchPlugin = () => ({
       promise
     });
     return options;
+  },
+  beforeLoadShare(options) {
+    const shareInfo = options.shareInfo;
+    sharedFlag = (shareInfo == null ? void 0 : shareInfo.strategy) || sharedFlag;
+    return options;
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/plugin.js

@@ -196,9 +196,11 @@ var logger_default = new import_sdk3.Logger("[Module Federation Data Prefetch]")
 
 // src/plugin.ts
 var loadingArray = [];
+var strategy = "loaded-first";
+var sharedFlag = strategy;
 var prefetchPlugin = () => ({
   name: "data-prefetch-runtime-plugin",
-  afterResolve(options) {
+  initContainer(options) {
     const { remoteSnapshot, remoteInfo, id, origin } = options;
     const snapshot = remoteSnapshot;
     const { name } = remoteInfo;
@@ -212,6 +214,11 @@ var prefetchPlugin = () => ({
     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;
     if (snapshot.prefetchEntry) {
@@ -226,20 +233,22 @@ var prefetchPlugin = () => ({
       if (projectExports instanceof Promise) {
         await projectExports;
       }
-      const exports = instance.getExposeExports(id);
-      logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
-      const result = Object.keys(exports).map((k) => {
-        const value = instance.prefetch({
-          id,
-          functionId: k
+      return Promise.resolve().then(() => {
+        const exports = instance.getExposeExports(id);
+        logger_default.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
+          };
         });
-        const functionId = k;
-        return {
-          value,
-          functionId
-        };
+        return result;
       });
-      return result;
     });
     loadingArray.push({
       id,
@@ -292,7 +301,9 @@ var prefetchPlugin = () => ({
         await projectExports;
       }
       const exports = instance.getExposeExports(id);
-      logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+      logger_default.info(
+        `1. PreloadRemote Start Prefetch: ${id} - ${performance.now()}`
+      );
       const result = Object.keys(exports).map((k) => {
         const value = instance.prefetch({
           id,
@@ -311,6 +322,11 @@ var prefetchPlugin = () => ({
       promise
     });
     return options;
+  },
+  beforeLoadShare(options) {
+    const shareInfo = options.shareInfo;
+    sharedFlag = (shareInfo == null ? void 0 : shareInfo.strategy) || sharedFlag;
+    return options;
   }
 });
 var plugin_default = prefetchPlugin;

package/dist/react/index.js

@@ -231,7 +231,7 @@ var usePrefetch = (options) => {
   if (isFirstMounted) {
     const startTiming = performance.now();
     logger_default.info(
-      `2. Start Get Prefetch Data: ${options.id} - ${options.functionId} - ${startTiming}`
+      `2. Start Get Prefetch Data: ${options.id} - ${options.functionId || "default"} - ${startTiming}`
     );
   }
   const { id, functionId, deferId } = options;
@@ -260,7 +260,7 @@ var usePrefetch = (options) => {
   (0, import_react2.useEffect)(() => {
     const useEffectTiming = performance.now();
     logger_default.info(
-      `3. Start Execute UseEffect: ${options.id} - ${options.functionId} - ${useEffectTiming}`
+      `3. Start Execute UseEffect: ${options.id} - ${options.functionId || "default"} - ${useEffectTiming}`
     );
     return () => {
       prefetchInstance == null ? void 0 : prefetchInstance.markOutdate(prefetchInfo, true);

package/dist/shared/index.d.ts

@@ -0,0 +1,5 @@
+import { FederationRuntimePlugin } from '@module-federation/runtime';
+
+declare const sharedStrategy: () => FederationRuntimePlugin;
+
+export { sharedStrategy as default };

package/dist/shared/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/shared/index.ts
+var shared_exports = {};
+__export(shared_exports, {
+  default: () => shared_default
+});
+module.exports = __toCommonJS(shared_exports);
+var sharedStrategy = () => ({
+  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;
+  }
+});
+var shared_default = sharedStrategy;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/data-prefetch",
   "description": "Module Federation Data Prefetch",
-  "version": "0.0.0-next-20240617071542",
+  "version": "0.0.0-next-20240701101956",
   "author": "nieyan <nyqykk@foxmail.com>",
   "homepage": "https://github.com/module-federation/core",
   "license": "MIT",
@@ -33,6 +33,11 @@
       "import": "./dist/esm/universal/index.js",
       "require": "./dist/universal/index.js",
       "types": "./dist/universal/index.d.ts"
+    },
+    "./shared": {
+      "import": "./dist/esm/shared/index.js",
+      "require": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts"
     }
   },
   "typesVersions": {
@@ -48,6 +53,9 @@
       ],
       "universal": [
         "./dist/universal/index.d.ts"
+      ],
+      "shared": [
+        "./dist/shared/index.d.ts"
       ]
     }
   },
@@ -77,8 +85,8 @@
   },
   "dependencies": {
     "fs-extra": "9.1.0",
-    "@module-federation/sdk": "0.0.0-next-20240617071542",
-    "@module-federation/runtime": "0.0.0-next-20240617071542"
+    "@module-federation/sdk": "0.0.0-next-20240701101956",
+    "@module-federation/runtime": "0.0.0-next-20240701101956"
   },
   "scripts": {
     "dev": "cross-env WATCH=true tsup",

package/src/cli/babel.ts

@@ -0,0 +1,93 @@
+import path from 'path';
+import type { moduleFederationPlugin } from '@module-federation/sdk';
+
+const attribute = 'id';
+const hookId = 'usePrefetch';
+const importPackage = '@module-federation/data-prefetch/react';
+
+interface BabelPluginOptions {
+  hook_id: string;
+  import_pkg: string;
+  attribute: string;
+  mf_name: string;
+  exposes: moduleFederationPlugin.ModuleFederationPluginOptions['exposes'];
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export default (babel: { types: any }, options: BabelPluginOptions) => {
+  const t = babel.types;
+  let shouldHandle = false;
+  let scope = '';
+  const { mf_name: name, exposes } = options;
+  if (!exposes) {
+    return {};
+  }
+  const exposesKey = Object.keys(exposes);
+  const processedExposes = exposesKey.map((expose) => ({
+    key: expose.replace('.', ''),
+    value: path.resolve(
+      // @ts-ignore
+      typeof exposes[expose] === 'string'
+        ? // @ts-ignore
+          exposes[expose]
+        : // @ts-ignore
+          exposes[expose].import,
+    ),
+  }));
+
+  return {
+    visitor: {
+      ImportDeclaration(
+        nodePath: {
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          node: { source: { value: any }; specifiers: any };
+        },
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        state: { file: { opts: { filename: any } } },
+      ) {
+        const source = nodePath.node.source.value;
+        const { specifiers } = nodePath.node;
+        const { filename } = state.file.opts;
+
+        if (source === importPackage) {
+          shouldHandle = specifiers.some(
+            (specifier: { imported: { name: string } }) =>
+              specifier.imported &&
+              specifier.imported.name === hookId &&
+              processedExposes.find(
+                // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+                (expose) => expose.value === filename && (scope = expose.key),
+              ),
+          );
+        }
+      },
+
+      CallExpression(nodePath: {
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        node: { callee: any; arguments: string | any[] };
+      }) {
+        if (
+          shouldHandle &&
+          t.isIdentifier(nodePath.node.callee, { name: hookId }) &&
+          nodePath.node.arguments.length > 0
+        ) {
+          const objectExpression = nodePath.node.arguments[0];
+          if (
+            objectExpression &&
+            t.isObjectExpression(objectExpression) &&
+            !objectExpression.properties.find(
+              (p: { key: { name: string } }) => p.key.name === attribute,
+            )
+          ) {
+            objectExpression.properties.push(
+              t.objectProperty(
+                t.identifier(attribute),
+                t.stringLiteral(name + scope),
+              ),
+            );
+          }
+        }
+      },
+    },
+  };
+};

package/src/cli/index.ts

@@ -0,0 +1,98 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+import {
+  encodeName,
+  moduleFederationPlugin,
+  MFPrefetchCommon,
+} from '@module-federation/sdk';
+import type { Compiler, WebpackPluginInstance } from 'webpack';
+
+import { TEMP_DIR } from '../common/constant';
+import { fileExistsWithCaseSync, fixPrefetchPath } from '../common/node-utils';
+import { getPrefetchId } from '../common/runtime-utils';
+
+export class PrefetchPlugin implements WebpackPluginInstance {
+  public options: moduleFederationPlugin.ModuleFederationPluginOptions;
+  private _reWriteExports: string;
+
+  constructor(options: moduleFederationPlugin.ModuleFederationPluginOptions) {
+    this.options = options;
+    this._reWriteExports = '';
+  }
+
+  // eslint-disable-next-line max-lines-per-function
+  apply(compiler: Compiler) {
+    const { name, exposes } = this.options;
+    if (!exposes) {
+      return;
+    }
+    if (!compiler.options.context) {
+      throw new Error('compiler.options.context is not defined');
+    }
+
+    const { runtimePlugins } = this.options;
+    if (!Array.isArray(runtimePlugins)) {
+      this.options.runtimePlugins = [];
+    }
+    this.options.runtimePlugins!.push(
+      path.resolve(__dirname, '../esm/plugin.js'),
+    );
+    this.options.runtimePlugins!.push(
+      path.resolve(__dirname, '../esm/shared/index.js'),
+    );
+    if (!this.options.dataPrefetch) {
+      return;
+    }
+
+    const prefetchs: Array<string> = [];
+    const exposeAlias = Object.keys(exposes);
+    exposeAlias.forEach((alias) => {
+      let exposePath;
+      // @ts-ignore
+      const exposeValue = exposes[alias];
+      if (typeof exposeValue === 'string') {
+        exposePath = exposeValue;
+      } else {
+        exposePath = exposeValue.import[0];
+      }
+      const targetPaths = fixPrefetchPath(exposePath);
+      for (const pathItem of targetPaths) {
+        const absolutePath = path.resolve(compiler.options.context!, pathItem);
+        if (fileExistsWithCaseSync(absolutePath)) {
+          prefetchs.push(pathItem);
+          const absoluteAlias = alias.replace('.', '');
+          this._reWriteExports += `export * as ${getPrefetchId(
+            `${name}${absoluteAlias}`,
+          )} from '${absolutePath}';\n`;
+          break;
+        }
+      }
+    });
+
+    if (!this._reWriteExports) {
+      return;
+    }
+
+    const encodedName = encodeName(name as string);
+    const asyncEntryPath = path.resolve(
+      compiler.options.context,
+      `node_modules/${TEMP_DIR}/${encodedName}/bootstrap.js`,
+    );
+    const tempDirRealPath = path.resolve(
+      compiler.options.context,
+      'node_modules',
+      TEMP_DIR,
+    );
+    if (!fs.existsSync(tempDirRealPath)) {
+      fs.mkdirSync(tempDirRealPath);
+    }
+    if (!fs.existsSync(`${tempDirRealPath}/${encodedName}`)) {
+      fs.mkdirSync(`${tempDirRealPath}/${encodedName}`);
+    }
+    fs.writeFileSync(asyncEntryPath, this._reWriteExports);
+    new compiler.webpack.DefinePlugin({
+      FederationDataPrefetch: JSON.stringify(asyncEntryPath),
+    }).apply(compiler);
+  }
+}

package/src/common/constant.ts

@@ -0,0 +1 @@
+export const TEMP_DIR = '.mf';

package/src/common/index.ts

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

package/src/common/node-utils.ts

@@ -0,0 +1,24 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+export const fileExistsWithCaseSync = (filepath: string): boolean => {
+  const dir = path.dirname(filepath);
+  if (filepath === '/' || filepath === '.') {
+    return true;
+  }
+  const filenames = fs.readdirSync(dir);
+  if (filenames.indexOf(path.basename(filepath)) === -1) {
+    return false;
+  }
+  return fileExistsWithCaseSync(dir);
+};
+
+export const fixPrefetchPath = (exposePath: string): Array<string> => {
+  const pathExt = ['.js', '.ts'];
+  const extReg = /\.(ts|js|tsx|jsx)$/;
+  if (extReg.test(exposePath)) {
+    return pathExt.map((ext) => exposePath.replace(extReg, `.prefetch${ext}`));
+  } else {
+    return pathExt.map((ext) => exposePath + `.prefetch${ext}`);
+  }
+};

package/src/common/runtime-utils.ts

@@ -0,0 +1,35 @@
+import {
+  encodeName,
+  ModuleInfo,
+  MFPrefetchCommon,
+} from '@module-federation/sdk';
+
+export const getScope = (id: string): string => {
+  const idArray = id.split('/');
+  if (idArray.length >= 2) {
+    idArray.pop();
+  }
+  const name = idArray.join('/');
+  return name;
+};
+
+export const getPrefetchId = (id: string): string =>
+  encodeName(`${id}/${MFPrefetchCommon.identifier}`);
+
+export const getSignalFromManifest = (remoteSnapshot: ModuleInfo): boolean => {
+  if (!remoteSnapshot) {
+    return false;
+  }
+
+  if (
+    !('prefetchEntry' in remoteSnapshot) &&
+    !('prefetchInterface' in remoteSnapshot)
+  ) {
+    return false;
+  }
+
+  if (!remoteSnapshot.prefetchEntry && !remoteSnapshot.prefetchInterface) {
+    return false;
+  }
+  return true;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './prefetch';
+export * from './plugin';

package/src/logger/index.ts

@@ -0,0 +1,3 @@
+import { Logger } from '@module-federation/sdk';
+
+export default new Logger('[Module Federation Data Prefetch]');