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

package/CHANGELOG.md

@@ -1,11 +1,9 @@
 @module-federation/data-prefetch
 
-## 0.0.0-next-20240701101956
+## 0.0.0-next-20240808065005
 
 ### Patch Changes
 
 - 3ddab21: feat(@module-federation/data-prefetch): support data prefetch in Module Federation
-- Updated dependencies [09b792d]
-- Updated dependencies [09b792d]
-  - @module-federation/sdk@0.0.0-next-20240701101956
-  - @module-federation/runtime@0.0.0-next-20240701101956
+  - @module-federation/runtime@0.0.0-next-20240808065005
+  - @module-federation/sdk@0.0.0-next-20240808065005

package/__tests__/prefetch.spec.ts

@@ -1,11 +1,19 @@
 // Import the necessary modules and functions
 import { MFDataPrefetch } from '../src/prefetch';
-import { loadScript } from '@module-federation/sdk';
+import {
+  loadScript,
+  MFPrefetchCommon,
+  encodeName,
+} from '@module-federation/sdk';
 
 // Mock loadScript function from SDK
-jest.mock('@module-federation/sdk', () => ({
-  loadScript: jest.fn(() => Promise.resolve()),
-}));
+jest.mock('@module-federation/sdk', () => {
+  const originalModule = jest.requireActual('@module-federation/sdk');
+  return {
+    ...originalModule,
+    loadScript: jest.fn(() => Promise.resolve()),
+  };
+});
 
 describe('MF Data Prefetch', () => {
   let prefetch: MFDataPrefetch;
@@ -17,6 +25,7 @@ describe('MF Data Prefetch', () => {
       globalName: 'TestGlobalName',
     },
   };
+  const exposeId = `${options.name}/button/${MFPrefetchCommon.identifier}`;
 
   beforeEach(() => {
     globalThis.__FEDERATION__.__PREFETCH__ = {
@@ -53,20 +62,22 @@ describe('MF Data Prefetch', () => {
       nyPrefetch: () => {},
     };
     const projectExport = {
-      [options.name]: exposeExport,
+      [encodeName(exposeId)]: exposeExport,
     };
     globalThis.__FEDERATION__.__PREFETCH__.__PREFETCH_EXPORTS__[options.name] =
       Promise.resolve(projectExport);
 
     await prefetch.getProjectExports();
-    expect(prefetch.getExposeExports(options.name)).toEqual(exposeExport);
+    expect(prefetch.getExposeExports(`${options.name}/button`)).toEqual(
+      exposeExport,
+    );
   });
   // Prefetching with memory and executing prefetch function
   it('executes prefetch using prefetch function with and without memory', async () => {
     const id = options.name;
     const functionId = 'nyPrefetch';
     const refetchParams = 'testParams';
-    const prefetchOptions = { id, functionId, refetchParams };
+    const prefetchOptions = { id: `${id}/button`, functionId, refetchParams };
 
     // Creating a mock prefetch function
     const executePrefetch = jest.fn(() => 'Expected Result');
@@ -75,7 +86,7 @@ describe('MF Data Prefetch', () => {
     // Mock Project Exports
     globalThis.__FEDERATION__.__PREFETCH__.__PREFETCH_EXPORTS__[id] =
       Promise.resolve({
-        [id]: prefetchExports,
+        [encodeName(exposeId)]: prefetchExports,
       });
 
     await prefetch.getProjectExports();

package/__tests__/react.spec.ts

@@ -57,8 +57,9 @@ describe('usePrefetch', () => {
     const exposeExport = {
       [functionId]: executePrefetch,
     };
+    const exposeId = `${options.name}/button/${ModuleFederationSDK.MFPrefetchCommon.identifier}`;
     const projectExport = {
-      [options.name]: exposeExport,
+      [ModuleFederationSDK.encodeName(exposeId)]: exposeExport,
     };
     globalThis.__FEDERATION__.__PREFETCH__.__PREFETCH_EXPORTS__[options.name] =
       Promise.resolve(projectExport);
@@ -76,7 +77,7 @@ describe('usePrefetch', () => {
 
   it('should prefetch data on first mount', async () => {
     const { result } = renderHook(() =>
-      usePrefetch({ id: options.name, functionId }),
+      usePrefetch({ id: `${options.name}/button`, functionId }),
     );
     await result.current[0];
     expect(executePrefetch).toHaveBeenCalled();
@@ -86,14 +87,14 @@ describe('usePrefetch', () => {
 
   it('should refetch data when refreshExecutor is called', async () => {
     const { result } = renderHook(() =>
-      usePrefetch({ id: options.name, functionId }),
+      usePrefetch({ id: `${options.name}/button`, functionId }),
     );
 
     await result.current[0];
     expect(executePrefetch).toHaveBeenCalled();
     executePrefetch.mockClear();
     const { result: newCallResult } = renderHook(() =>
-      usePrefetch({ id: options.name, functionId }),
+      usePrefetch({ id: `${options.name}/button`, functionId }),
     );
     await newCallResult.current[0];
     expect(executePrefetch).not.toHaveBeenCalled();

package/dist/cli/babel.d.ts

@@ -4,7 +4,7 @@ interface BabelPluginOptions {
     hook_id: string;
     import_pkg: string;
     attribute: string;
-    mf_name: string;
+    name: string;
     exposes: moduleFederationPlugin.ModuleFederationPluginOptions['exposes'];
 }
 declare const _default: (babel: {

package/dist/cli/babel.js

@@ -37,7 +37,7 @@ var babel_default = (babel, options) => {
   const t = babel.types;
   let shouldHandle = false;
   let scope = "";
-  const { mf_name: name, exposes } = options;
+  const { name, exposes } = options;
   if (!exposes) {
     return {};
   }

package/dist/cli/index.js

@@ -88,6 +88,14 @@ var PrefetchPlugin = class {
     this.options.runtimePlugins.push(
       import_path2.default.resolve(__dirname, "../esm/shared/index.js")
     );
+    const encodedName = (0, import_sdk2.encodeName)(name);
+    const asyncEntryPath = import_path2.default.resolve(
+      compiler.options.context,
+      `node_modules/${TEMP_DIR}/${encodedName}/bootstrap.js`
+    );
+    if (import_fs_extra2.default.existsSync(asyncEntryPath)) {
+      import_fs_extra2.default.unlinkSync(asyncEntryPath);
+    }
     if (!this.options.dataPrefetch) {
       return;
     }
@@ -118,11 +126,6 @@ var PrefetchPlugin = class {
     if (!this._reWriteExports) {
       return;
     }
-    const encodedName = (0, import_sdk2.encodeName)(name);
-    const asyncEntryPath = import_path2.default.resolve(
-      compiler.options.context,
-      `node_modules/${TEMP_DIR}/${encodedName}/bootstrap.js`
-    );
     const tempDirRealPath = import_path2.default.resolve(
       compiler.options.context,
       "node_modules",

package/dist/esm/{chunk-VJO2H3UO.js → chunk-WLE6YNDH.js}

@@ -9,6 +9,7 @@ import {
 } from "./chunk-EWCGK4XA.js";
 
 // src/plugin.ts
+import { Module } from "@module-federation/runtime";
 import { getResourceUrl } from "@module-federation/sdk";
 var loadingArray = [];
 var strategy = "loaded-first";
@@ -111,6 +112,21 @@ var prefetchPlugin = () => ({
       return options;
     }
     const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      let module = origin.moduleCache.get(remote.name);
+      const moduleOptions = {
+        host: origin,
+        remoteInfo: remote
+      };
+      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;

package/dist/esm/cli/babel.js

@@ -7,7 +7,7 @@ var babel_default = (babel, options) => {
   const t = babel.types;
   let shouldHandle = false;
   let scope = "";
-  const { mf_name: name, exposes } = options;
+  const { name, exposes } = options;
   if (!exposes) {
     return {};
   }

package/dist/esm/cli/index.js

@@ -60,6 +60,14 @@ var PrefetchPlugin = class {
     this.options.runtimePlugins.push(
       path2.resolve(__dirname, "../esm/shared/index.js")
     );
+    const encodedName = encodeName(name);
+    const asyncEntryPath = path2.resolve(
+      compiler.options.context,
+      `node_modules/${TEMP_DIR}/${encodedName}/bootstrap.js`
+    );
+    if (fs2.existsSync(asyncEntryPath)) {
+      fs2.unlinkSync(asyncEntryPath);
+    }
     if (!this.options.dataPrefetch) {
       return;
     }
@@ -90,11 +98,6 @@ var PrefetchPlugin = class {
     if (!this._reWriteExports) {
       return;
     }
-    const encodedName = encodeName(name);
-    const asyncEntryPath = path2.resolve(
-      compiler.options.context,
-      `node_modules/${TEMP_DIR}/${encodedName}/bootstrap.js`
-    );
     const tempDirRealPath = path2.resolve(
       compiler.options.context,
       "node_modules",

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import {
   prefetchPlugin
-} from "./chunk-VJO2H3UO.js";
+} from "./chunk-WLE6YNDH.js";
 import "./chunk-TTJJJ2WZ.js";
 import {
   MFDataPrefetch

package/dist/esm/plugin.js

@@ -1,7 +1,7 @@
 import {
   plugin_default,
   prefetchPlugin
-} from "./chunk-VJO2H3UO.js";
+} from "./chunk-WLE6YNDH.js";
 import "./chunk-TTJJJ2WZ.js";
 import "./chunk-JEPJP5O3.js";
 import "./chunk-EWCGK4XA.js";

package/dist/index.js

@@ -192,6 +192,7 @@ var MFDataPrefetch = class {
 };
 
 // src/plugin.ts
+var import_runtime2 = require("@module-federation/runtime");
 var import_sdk4 = require("@module-federation/sdk");
 
 // src/logger/index.ts
@@ -300,6 +301,21 @@ var prefetchPlugin = () => ({
       return options;
     }
     const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      let module2 = origin.moduleCache.get(remote.name);
+      const moduleOptions = {
+        host: origin,
+        remoteInfo: remote
+      };
+      if (!module2) {
+        module2 = new import_runtime2.Module(moduleOptions);
+        origin.moduleCache.set(remote.name, module2);
+      }
+      const idPart = id.split("/");
+      let expose = idPart[idPart.length - 1];
+      if (expose !== ".") {
+        expose = `./${expose}`;
+      }
+      await module2.get(id, expose, {}, remoteSnapshot);
       const projectExports = instance.getProjectExports();
       if (projectExports instanceof Promise) {
         await projectExports;

package/dist/plugin.js

@@ -24,6 +24,7 @@ __export(plugin_exports, {
   prefetchPlugin: () => prefetchPlugin
 });
 module.exports = __toCommonJS(plugin_exports);
+var import_runtime2 = require("@module-federation/runtime");
 var import_sdk4 = require("@module-federation/sdk");
 
 // src/common/runtime-utils.ts
@@ -296,6 +297,21 @@ var prefetchPlugin = () => ({
       return options;
     }
     const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      let module2 = origin.moduleCache.get(remote.name);
+      const moduleOptions = {
+        host: origin,
+        remoteInfo: remote
+      };
+      if (!module2) {
+        module2 = new import_runtime2.Module(moduleOptions);
+        origin.moduleCache.set(remote.name, module2);
+      }
+      const idPart = id.split("/");
+      let expose = idPart[idPart.length - 1];
+      if (expose !== ".") {
+        expose = `./${expose}`;
+      }
+      await module2.get(id, expose, {}, remoteSnapshot);
       const projectExports = instance.getProjectExports();
       if (projectExports instanceof Promise) {
         await projectExports;

package/jest.config.js

@@ -21,7 +21,7 @@ module.exports = {
     '/node_modules/(?!((@byted/garfish-)|(byted-tea-sdk))).+\\.js$',
   ],
   transform: {
-    '^.+\\.(t|j)sx?$': ['@swc/jest'],
+    '^.+\\.(t|j)sx?$': ['@swc/jest', { swcrc: false }],
   },
   rootDir: __dirname,
   testMatch: ['<rootDir>__tests__/**/**.spec.[jt]s?(x)'],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/data-prefetch",
   "description": "Module Federation Data Prefetch",
-  "version": "0.0.0-next-20240701101956",
+  "version": "0.0.0-next-20240808065005",
   "author": "nieyan <nyqykk@foxmail.com>",
   "homepage": "https://github.com/module-federation/core",
   "license": "MIT",
@@ -85,8 +85,8 @@
   },
   "dependencies": {
     "fs-extra": "9.1.0",
-    "@module-federation/sdk": "0.0.0-next-20240701101956",
-    "@module-federation/runtime": "0.0.0-next-20240701101956"
+    "@module-federation/sdk": "0.0.0-next-20240808065005",
+    "@module-federation/runtime": "0.0.0-next-20240808065005"
   },
   "scripts": {
     "dev": "cross-env WATCH=true tsup",

package/src/cli/babel.ts

@@ -9,7 +9,7 @@ interface BabelPluginOptions {
   hook_id: string;
   import_pkg: string;
   attribute: string;
-  mf_name: string;
+  name: string;
   exposes: moduleFederationPlugin.ModuleFederationPluginOptions['exposes'];
 }
 
@@ -18,7 +18,7 @@ export default (babel: { types: any }, options: BabelPluginOptions) => {
   const t = babel.types;
   let shouldHandle = false;
   let scope = '';
-  const { mf_name: name, exposes } = options;
+  const { name, exposes } = options;
   if (!exposes) {
     return {};
   }

package/src/cli/index.ts

@@ -41,6 +41,14 @@ export class PrefetchPlugin implements WebpackPluginInstance {
     this.options.runtimePlugins!.push(
       path.resolve(__dirname, '../esm/shared/index.js'),
     );
+    const encodedName = encodeName(name as string);
+    const asyncEntryPath = path.resolve(
+      compiler.options.context,
+      `node_modules/${TEMP_DIR}/${encodedName}/bootstrap.js`,
+    );
+    if (fs.existsSync(asyncEntryPath)) {
+      fs.unlinkSync(asyncEntryPath);
+    }
     if (!this.options.dataPrefetch) {
       return;
     }
@@ -73,12 +81,6 @@ export class PrefetchPlugin implements WebpackPluginInstance {
     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',

package/src/plugin.ts

@@ -1,4 +1,8 @@
-import type { FederationRuntimePlugin } from '@module-federation/runtime/types';
+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';
@@ -150,6 +154,22 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
     }
 
     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;

package/src/prefetch.ts

@@ -106,7 +106,8 @@ export class MFDataPrefetch {
       globalThis.__FEDERATION__.__PREFETCH__.__PREFETCH_EXPORTS__?.[name];
     const resolve = exportsPromise.then(
       (exports: Record<string, Record<string, any>> = {}) => {
-        // 根据函数名后缀匹配 prefetch，以便后续拓展其他能力，不应直接将所有函数都识别为 prefetch 函数
+        // Match prefetch based on the function name suffix so that other capabilities can be expanded later.
+        // Not all functions should be directly identified as prefetch functions
         const memory: Record<string, Record<string, any>> = {};
         Object.keys(exports).forEach((key) => {
           memory[key] = {};