feat(runtime): add loadEntry hook

.changeset/modern-suns-arrive.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/runtime': minor
+'@module-federation/sdk': patch
+---
+
+feat(runtime): add loadEntry hook

packages/runtime/src/module/index.ts

@@ -30,31 +30,9 @@ class Module {
 
     // Get remoteEntry.js
     const remoteEntryExports = await getRemoteEntry({
+      origin: this.host,
       remoteInfo: this.remoteInfo,
       remoteEntryExports: this.remoteEntryExports,
-      createScriptHook: (url: string, attrs: any) => {
-        const res = this.host.loaderHook.lifecycle.createScript.emit({
-          url,
-          attrs,
-        });
-
-        if (!res) return;
-
-        if (typeof document === 'undefined') {
-          //todo: needs real fix
-          return res as HTMLScriptElement;
-        }
-
-        if (res instanceof HTMLScriptElement) {
-          return res;
-        }
-
-        if ('script' in res || 'timeout' in res) {
-          return res;
-        }
-
-        return;
-      },
     });
     assert(
       remoteEntryExports,

packages/runtime/src/remote/index.ts

@@ -13,6 +13,7 @@ import {
   PreloadRemoteArgs,
   Remote,
   RemoteInfo,
+  RemoteEntryExports,
 } from '../type';
 import { FederationHost } from '../core';
 import {
@@ -131,6 +132,16 @@ export class RemoteHandler {
       options: Options;
       origin: FederationHost;
     }>(),
+    loadEntry: new AsyncHook<
+      [
+        {
+          createScriptHook: FederationHost['loaderHook']['lifecycle']['createScript'];
+          remoteInfo: RemoteInfo;
+          remoteEntryExports?: RemoteEntryExports;
+        },
+      ],
+      Promise<RemoteEntryExports>
+    >(),
   });
 
   constructor(host: FederationHost) {

packages/runtime/src/utils/load.ts

@@ -1,15 +1,16 @@
 import {
-  composeKeyWithSeparator,
   loadScript,
   loadScriptNode,
-  CreateScriptHookReturn,
+  composeKeyWithSeparator,
+  isBrowserEnv,
 } from '@module-federation/sdk';
-import { assert } from '../utils/logger';
-import { getRemoteEntryExports, globalLoading } from '../global';
-import { Remote, RemoteEntryExports, RemoteInfo } from '../type';
 import { DEFAULT_REMOTE_TYPE, DEFAULT_SCOPE } from '../constant';
+import { FederationHost } from '../core';
+import { globalLoading, getRemoteEntryExports } from '../global';
+import { Remote, RemoteEntryExports, RemoteInfo } from '../type';
+import { assert } from '../utils';
 
-export async function loadEsmEntry({
+async function loadEsmEntry({
   entry,
   remoteEntryExports,
 }: {
@@ -33,7 +34,7 @@ export async function loadEsmEntry({
   });
 }
 
-export async function loadSystemJsEntry({
+async function loadSystemJsEntry({
   entry,
   remoteEntryExports,
 }: {
@@ -57,7 +58,7 @@ export async function loadSystemJsEntry({
   });
 }
 
-export async function loadEntryScript({
+async function loadEntryScript({
   name,
   globalName,
   entry,
@@ -66,10 +67,7 @@ export async function loadEntryScript({
   name: string;
   globalName: string;
   entry: string;
-  createScriptHook?: (
-    url: string,
-    attrs?: Record<string, any> | undefined,
-  ) => CreateScriptHookReturn;
+  createScriptHook: FederationHost['loaderHook']['lifecycle']['createScript'];
 }): Promise<RemoteEntryExports> {
   const { entryExports: remoteEntryExports } = getRemoteEntryExports(
     name,
@@ -80,35 +78,99 @@ export async function loadEntryScript({
     return remoteEntryExports;
   }
 
-  if (typeof document === 'undefined') {
-    return loadScriptNode(entry, {
-      attrs: { name, globalName },
-      createScriptHook,
+  return loadScript(entry, {
+    attrs: {},
+    createScriptHook: (url, attrs) => {
+      const res = createScriptHook.emit({ url, attrs });
+
+      if (!res) return;
+
+      if (res instanceof HTMLScriptElement) {
+        return res;
+      }
+
+      if ('script' in res || 'timeout' in res) {
+        return res;
+      }
+
+      return;
+    },
+  })
+    .then(() => {
+      const { remoteEntryKey, entryExports } = getRemoteEntryExports(
+        name,
+        globalName,
+      );
+
+      assert(
+        entryExports,
+        `
+      Unable to use the ${name}'s '${entry}' URL with ${remoteEntryKey}'s globalName to get remoteEntry exports.
+      Possible reasons could be:\n
+      1. '${entry}' is not the correct URL, or the remoteEntry resource or name is incorrect.\n
+      2. ${remoteEntryKey} cannot be used to get remoteEntry exports in the window object.
+    `,
+      );
+
+      return entryExports;
     })
-      .then(() => {
-        const { remoteEntryKey, entryExports } = getRemoteEntryExports(
-          name,
-          globalName,
-        );
-
-        assert(
-          entryExports,
-          `
-        Unable to use the ${name}'s '${entry}' URL with ${remoteEntryKey}'s globalName to get remoteEntry exports.
-        Possible reasons could be:\n
-        1. '${entry}' is not the correct URL, or the remoteEntry resource or name is incorrect.\n
-        2. ${remoteEntryKey} cannot be used to get remoteEntry exports in the window object.
-      `,
-        );
-
-        return entryExports;
-      })
-      .catch((e) => {
-        throw e;
-      });
+    .catch((e) => {
+      throw e;
+    });
+}
+
+async function loadEntryDom({
+  remoteInfo,
+  remoteEntryExports,
+  createScriptHook,
+}: {
+  remoteInfo: RemoteInfo;
+  remoteEntryExports?: RemoteEntryExports;
+  createScriptHook: FederationHost['loaderHook']['lifecycle']['createScript'];
+}) {
+  const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
+  switch (type) {
+    case 'esm':
+    case 'module':
+      return loadEsmEntry({ entry, remoteEntryExports });
+    case 'system':
+      return loadSystemJsEntry({ entry, remoteEntryExports });
+    default:
+      return loadEntryScript({ entry, globalName, name, createScriptHook });
+  }
+}
+
+async function loadEntryNode({
+  remoteInfo,
+  createScriptHook,
+}: {
+  remoteInfo: RemoteInfo;
+  createScriptHook: FederationHost['loaderHook']['lifecycle']['createScript'];
+}) {
+  const { entry, entryGlobalName: globalName, name } = remoteInfo;
+  const { entryExports: remoteEntryExports } = getRemoteEntryExports(
+    name,
+    globalName,
+  );
+
+  if (remoteEntryExports) {
+    return remoteEntryExports;
   }
 
-  return loadScript(entry, { attrs: {}, createScriptHook })
+  return loadScriptNode(entry, {
+    attrs: { name, globalName },
+    createScriptHook: (url, attrs) => {
+      const res = createScriptHook.emit({ url, attrs });
+
+      if (!res) return;
+
+      if ('url' in res) {
+        return res;
+      }
+
+      return;
+    },
+  })
     .then(() => {
       const { remoteEntryKey, entryExports } = getRemoteEntryExports(
         name,
@@ -138,43 +200,46 @@ export function getRemoteEntryUniqueKey(remoteInfo: RemoteInfo): string {
 }
 
 export async function getRemoteEntry({
+  origin,
   remoteEntryExports,
   remoteInfo,
-  createScriptHook,
 }: {
+  origin: FederationHost;
   remoteInfo: RemoteInfo;
   remoteEntryExports?: RemoteEntryExports | undefined;
-  createScriptHook?: (
-    url: string,
-    attrs?: Record<string, any> | undefined,
-  ) => CreateScriptHookReturn;
-}): Promise<RemoteEntryExports | void> {
-  const { entry, name, type, entryGlobalName } = remoteInfo;
+}): Promise<RemoteEntryExports | false | void> {
   const uniqueKey = getRemoteEntryUniqueKey(remoteInfo);
   if (remoteEntryExports) {
     return remoteEntryExports;
   }
 
   if (!globalLoading[uniqueKey]) {
-    if (['esm', 'module'].includes(type)) {
-      globalLoading[uniqueKey] = loadEsmEntry({
-        entry,
-        remoteEntryExports,
-      });
-    } else if (type === 'system') {
-      globalLoading[uniqueKey] = loadSystemJsEntry({
-        entry,
-        remoteEntryExports,
-      });
+    const loadEntryHook = origin.remoteHandler.hooks.lifecycle.loadEntry;
+    if (loadEntryHook.listeners.size) {
+      globalLoading[uniqueKey] = loadEntryHook
+        .emit({
+          createScriptHook: origin.loaderHook.lifecycle.createScript,
+          remoteInfo,
+          remoteEntryExports,
+        })
+        .then((res) => res || undefined);
     } else {
-      globalLoading[uniqueKey] = loadEntryScript({
-        name,
-        globalName: entryGlobalName,
-        entry,
-        createScriptHook,
-      });
+      const createScriptHook = origin.loaderHook.lifecycle.createScript;
+      if (!isBrowserEnv()) {
+        globalLoading[uniqueKey] = loadEntryNode({
+          remoteInfo,
+          createScriptHook,
+        });
+      } else {
+        globalLoading[uniqueKey] = loadEntryDom({
+          remoteInfo,
+          remoteEntryExports,
+          createScriptHook,
+        });
+      }
     }
   }
+
   return globalLoading[uniqueKey];
 }
 

packages/runtime/src/utils/preload.ts

@@ -80,57 +80,15 @@ export function preloadAssets(
       const module = host.moduleCache.get(remoteInfo.name);
       if (module) {
         getRemoteEntry({
+          origin: host,
           remoteInfo: moduleInfo,
           remoteEntryExports: module.remoteEntryExports,
-          createScriptHook: (url: string, attrs: any) => {
-            const res = host.loaderHook.lifecycle.createScript.emit({
-              url,
-              attrs,
-            });
-            if (!res) return;
-
-            if (typeof document === 'undefined') {
-              //todo: needs real fix
-              return res as HTMLScriptElement;
-            }
-
-            if (res instanceof HTMLScriptElement) {
-              return res;
-            }
-
-            if ('script' in res || 'timeout' in res) {
-              return res;
-            }
-
-            return;
-          },
         });
       } else {
         getRemoteEntry({
+          origin: host,
           remoteInfo: moduleInfo,
           remoteEntryExports: undefined,
-          createScriptHook: (url: string, attrs: any) => {
-            const res = host.loaderHook.lifecycle.createScript.emit({
-              url,
-              attrs,
-            });
-            if (!res) return;
-
-            if (typeof document === 'undefined') {
-              //todo: needs real fix
-              return res as HTMLScriptElement;
-            }
-
-            if (res instanceof HTMLScriptElement) {
-              return res;
-            }
-
-            if ('script' in res || 'timeout' in res) {
-              return res;
-            }
-
-            return;
-          },
         });
       }
     });