@module-federation/data-prefetch 0.0.0-next-20240808083234 → 0.0.0-next-20240909073915

package/CHANGELOG.md

@@ -1,9 +1,9 @@
 @module-federation/data-prefetch
 
-## 0.0.0-next-20240808083234
+## 0.0.0-next-20240909073915
 
 ### Patch Changes
 
 - 3ddab21: feat(@module-federation/data-prefetch): support data prefetch in Module Federation
-  - @module-federation/runtime@0.0.0-next-20240808083234
-  - @module-federation/sdk@0.0.0-next-20240808083234
+  - @module-federation/runtime@0.0.0-next-20240909073915
+  - @module-federation/sdk@0.0.0-next-20240909073915

package/dist/esm/{chunk-XYNYYK45.js → chunk-57ZXBP7D.js}

@@ -45,17 +45,9 @@ var MFDataPrefetch = class {
       const remoteInfo = getRemoteInfo(remote);
       const module = origin.moduleCache.get(remoteInfo.name);
       return getRemoteEntry({
+        origin,
         remoteInfo,
-        remoteEntryExports: module ? module.remoteEntryExports : void 0,
-        createScriptHook: (url) => {
-          const res = origin.loaderHook.lifecycle.createScript.emit({
-            url
-          });
-          if (res instanceof HTMLScriptElement) {
-            return res;
-          }
-          return;
-        }
+        remoteEntryExports: module ? module.remoteEntryExports : void 0
       });
     }
   }

package/dist/esm/{chunk-V2LJYA45.js → chunk-OIIVUMED.js}

@@ -1,6 +1,6 @@
 import {
   MFDataPrefetch
-} from "./chunk-XYNYYK45.js";
+} from "./chunk-57ZXBP7D.js";
 import {
   getScope
 } from "./chunk-VWDP6NMM.js";

package/dist/esm/{chunk-TW3B6M25.js → chunk-YXTPJG2M.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TTJJJ2WZ.js";
 import {
   MFDataPrefetch
-} from "./chunk-XYNYYK45.js";
+} from "./chunk-57ZXBP7D.js";
 import {
   getSignalFromManifest
 } from "./chunk-VWDP6NMM.js";
@@ -50,7 +50,71 @@ var prefetchPlugin = () => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance.getExposeExports(id);
-        logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger_default.info(
+          `1. Start Prefetch initContainer: ${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;
+  },
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot;
+    const { name } = remoteInfo;
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      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) {
+      prefetchUrl = getResourceUrl(snapshot, snapshot.prefetchEntry);
+    }
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    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_default.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance.prefetch({
             id,

package/dist/esm/index.js

@@ -1,10 +1,10 @@
 import {
   prefetchPlugin
-} from "./chunk-TW3B6M25.js";
+} from "./chunk-YXTPJG2M.js";
 import "./chunk-TTJJJ2WZ.js";
 import {
   MFDataPrefetch
-} from "./chunk-XYNYYK45.js";
+} from "./chunk-57ZXBP7D.js";
 import "./chunk-VWDP6NMM.js";
 export {
   MFDataPrefetch,

package/dist/esm/plugin.js

@@ -1,9 +1,9 @@
 import {
   plugin_default,
   prefetchPlugin
-} from "./chunk-TW3B6M25.js";
+} from "./chunk-YXTPJG2M.js";
 import "./chunk-TTJJJ2WZ.js";
-import "./chunk-XYNYYK45.js";
+import "./chunk-57ZXBP7D.js";
 import "./chunk-VWDP6NMM.js";
 export {
   plugin_default as default,

package/dist/esm/react/index.js

@@ -1,12 +1,12 @@
 import {
   prefetch
-} from "../chunk-V2LJYA45.js";
+} from "../chunk-OIIVUMED.js";
 import {
   logger_default
 } from "../chunk-TTJJJ2WZ.js";
 import {
   MFDataPrefetch
-} from "../chunk-XYNYYK45.js";
+} from "../chunk-57ZXBP7D.js";
 import {
   getScope
 } from "../chunk-VWDP6NMM.js";

package/dist/esm/universal/index.js

@@ -1,7 +1,7 @@
 import {
   prefetch
-} from "../chunk-V2LJYA45.js";
-import "../chunk-XYNYYK45.js";
+} from "../chunk-OIIVUMED.js";
+import "../chunk-57ZXBP7D.js";
 import "../chunk-VWDP6NMM.js";
 export {
   prefetch

package/dist/index.js

@@ -81,17 +81,9 @@ var MFDataPrefetch = class {
       const remoteInfo = (0, import_runtime.getRemoteInfo)(remote);
       const module2 = origin.moduleCache.get(remoteInfo.name);
       return (0, import_runtime.getRemoteEntry)({
+        origin,
         remoteInfo,
-        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0,
-        createScriptHook: (url) => {
-          const res = origin.loaderHook.lifecycle.createScript.emit({
-            url
-          });
-          if (res instanceof HTMLScriptElement) {
-            return res;
-          }
-          return;
-        }
+        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0
       });
     }
   }
@@ -242,7 +234,71 @@ var prefetchPlugin = () => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance.getExposeExports(id);
-        logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger_default.info(
+          `1. Start Prefetch initContainer: ${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;
+  },
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot;
+    const { name } = remoteInfo;
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      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) {
+      prefetchUrl = (0, import_sdk4.getResourceUrl)(snapshot, snapshot.prefetchEntry);
+    }
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    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_default.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance.prefetch({
             id,

package/dist/plugin.js

@@ -80,17 +80,9 @@ var MFDataPrefetch = class {
       const remoteInfo = (0, import_runtime.getRemoteInfo)(remote);
       const module2 = origin.moduleCache.get(remoteInfo.name);
       return (0, import_runtime.getRemoteEntry)({
+        origin,
         remoteInfo,
-        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0,
-        createScriptHook: (url) => {
-          const res = origin.loaderHook.lifecycle.createScript.emit({
-            url
-          });
-          if (res instanceof HTMLScriptElement) {
-            return res;
-          }
-          return;
-        }
+        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0
       });
     }
   }
@@ -238,7 +230,71 @@ var prefetchPlugin = () => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance.getExposeExports(id);
-        logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger_default.info(
+          `1. Start Prefetch initContainer: ${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;
+  },
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot;
+    const { name } = remoteInfo;
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      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) {
+      prefetchUrl = (0, import_sdk4.getResourceUrl)(snapshot, snapshot.prefetchEntry);
+    }
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    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_default.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance.prefetch({
             id,

package/dist/react/index.js

@@ -83,17 +83,9 @@ var MFDataPrefetch = class {
       const remoteInfo = (0, import_runtime.getRemoteInfo)(remote);
       const module2 = origin.moduleCache.get(remoteInfo.name);
       return (0, import_runtime.getRemoteEntry)({
+        origin,
         remoteInfo,
-        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0,
-        createScriptHook: (url) => {
-          const res = origin.loaderHook.lifecycle.createScript.emit({
-            url
-          });
-          if (res instanceof HTMLScriptElement) {
-            return res;
-          }
-          return;
-        }
+        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0
       });
     }
   }

package/dist/universal/index.js

@@ -76,17 +76,9 @@ var MFDataPrefetch = class {
       const remoteInfo = (0, import_runtime.getRemoteInfo)(remote);
       const module2 = origin.moduleCache.get(remoteInfo.name);
       return (0, import_runtime.getRemoteEntry)({
+        origin,
         remoteInfo,
-        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0,
-        createScriptHook: (url) => {
-          const res = origin.loaderHook.lifecycle.createScript.emit({
-            url
-          });
-          if (res instanceof HTMLScriptElement) {
-            return res;
-          }
-          return;
-        }
+        remoteEntryExports: module2 ? module2.remoteEntryExports : void 0
       });
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/data-prefetch",
   "description": "Module Federation Data Prefetch",
-  "version": "0.0.0-next-20240808083234",
+  "version": "0.0.0-next-20240909073915",
   "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-20240808083234",
-    "@module-federation/runtime": "0.0.0-next-20240808083234"
+    "@module-federation/sdk": "0.0.0-next-20240909073915",
+    "@module-federation/runtime": "0.0.0-next-20240909073915"
   },
   "scripts": {
     "dev": "cross-env WATCH=true tsup",

package/src/plugin.ts

@@ -55,7 +55,6 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
     if (exist) {
       return options;
     }
-    // @ts-ignore
     const promise = instance.loadEntry(prefetchUrl).then(async () => {
       const projectExports = instance!.getProjectExports();
       if (projectExports instanceof Promise) {
@@ -63,7 +62,9 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance!.getExposeExports(id);
-        logger.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger.info(
+          `1. Start Prefetch initContainer: ${id} - ${performance.now()}`,
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance!.prefetch({
             id,
@@ -87,6 +88,80 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
     return options;
   },
 
+  afterResolve(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;
+    }
+
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      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 index = loadingArray.findIndex((loading) => loading.id === id);
+    // clear cache
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    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 afterResolve: ${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;

package/src/prefetch.ts

@@ -82,17 +82,9 @@ export class MFDataPrefetch {
       const remoteInfo = getRemoteInfo(remote as Remote);
       const module = origin!.moduleCache.get(remoteInfo.name);
       return getRemoteEntry({
+        origin: origin!,
         remoteInfo,
         remoteEntryExports: module ? module.remoteEntryExports : undefined,
-        createScriptHook: (url: string) => {
-          const res = origin!.loaderHook.lifecycle.createScript.emit({
-            url,
-          });
-          if (res instanceof HTMLScriptElement) {
-            return res;
-          }
-          return;
-        },
       });
     }
   }