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/plugins/dom/index.ts

@@ -0,0 +1,35 @@
+import { FederationRuntimePlugin } from '../../type/plugin';
+import { loadEntryDom } from './loadEntry';
+
+export function domPlugin(): FederationRuntimePlugin {
+  return {
+    name: 'dom-plugin',
+    async loadEntry(args) {
+      const { createScriptHook, remoteInfo, remoteEntryExports } = args;
+      const { entry, entryGlobalName, name, type } = remoteInfo;
+
+      return loadEntryDom({
+        entry,
+        entryGlobalName,
+        name,
+        type,
+        remoteEntryExports,
+        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;
+        },
+      });
+    },
+  };
+}

packages/runtime/src/plugins/dom/loadEntry.ts

@@ -0,0 +1,127 @@
+import { CreateScriptHookDom, loadScript } from '@module-federation/sdk';
+import { assert } from '../../utils';
+import { RemoteEntryExports } from '../../type';
+import { getRemoteEntryExports } from '../../global';
+
+async function loadEsmEntry({
+  entry,
+  remoteEntryExports,
+}: {
+  entry: string;
+  remoteEntryExports: RemoteEntryExports | undefined;
+}): Promise<RemoteEntryExports> {
+  return new Promise<RemoteEntryExports>((resolve, reject) => {
+    try {
+      if (!remoteEntryExports) {
+        // eslint-disable-next-line no-eval
+        new Function(
+          'callbacks',
+          `import("${entry}").then(callbacks[0]).catch(callbacks[1])`,
+        )([resolve, reject]);
+      } else {
+        resolve(remoteEntryExports);
+      }
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
+async function loadSystemJsEntry({
+  entry,
+  remoteEntryExports,
+}: {
+  entry: string;
+  remoteEntryExports: RemoteEntryExports | undefined;
+}): Promise<RemoteEntryExports> {
+  return new Promise<RemoteEntryExports>((resolve, reject) => {
+    try {
+      if (!remoteEntryExports) {
+        // eslint-disable-next-line no-eval
+        new Function(
+          'callbacks',
+          `System.import("${entry}").then(callbacks[0]).catch(callbacks[1])`,
+        )([resolve, reject]);
+      } else {
+        resolve(remoteEntryExports);
+      }
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
+async function loadEntryScript({
+  name,
+  globalName,
+  entry,
+  createScriptHook,
+}: {
+  name: string;
+  globalName: string;
+  entry: string;
+  createScriptHook: CreateScriptHookDom;
+}): Promise<RemoteEntryExports> {
+  const { entryExports: remoteEntryExports } = getRemoteEntryExports(
+    name,
+    globalName,
+  );
+
+  if (remoteEntryExports) {
+    return remoteEntryExports;
+  }
+
+  return loadScript(entry, { attrs: {}, createScriptHook })
+    .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;
+    });
+}
+
+export async function loadEntryDom({
+  entry,
+  entryGlobalName,
+  remoteEntryExports,
+  name,
+  type,
+  createScriptHook,
+}: {
+  entry: string;
+  entryGlobalName: string;
+  remoteEntryExports: RemoteEntryExports | undefined;
+  name: string;
+  type: string;
+  createScriptHook: CreateScriptHookDom;
+}) {
+  switch (type) {
+    case 'esm':
+    case 'module':
+      return loadEsmEntry({ entry, remoteEntryExports });
+    case 'system':
+      return loadSystemJsEntry({ entry, remoteEntryExports });
+    default:
+      return loadEntryScript({
+        entry,
+        globalName: entryGlobalName,
+        name,
+        createScriptHook,
+      });
+  }
+}

packages/runtime/src/plugins/node/index.ts

@@ -0,0 +1,29 @@
+import { FederationRuntimePlugin } from '../../type/plugin';
+import { loadEntryNode } from './loadEntry';
+
+export function nodePlugin(): FederationRuntimePlugin {
+  return {
+    name: 'node-plugin',
+    async loadEntry(args) {
+      const { createScriptHook, remoteInfo } = args;
+      const { entry, entryGlobalName, name } = remoteInfo;
+
+      return loadEntryNode({
+        entry,
+        entryGlobalName,
+        name,
+        createScriptHook: (url, attrs) => {
+          const res = createScriptHook.emit({ url, attrs });
+
+          if (!res) return;
+
+          if ('url' in res) {
+            return res;
+          }
+
+          return;
+        },
+      });
+    },
+  };
+}

packages/runtime/src/plugins/node/loadEntry.ts

@@ -0,0 +1,70 @@
+import { CreateScriptHookNode, loadScriptNode } from '@module-federation/sdk';
+import { getRemoteEntryExports } from '../../global';
+import { RemoteEntryExports } from '../../type';
+import { assert } from '../../utils';
+
+async function loadEntryScript({
+  name,
+  globalName,
+  entry,
+  createScriptHook,
+}: {
+  name: string;
+  globalName: string;
+  entry: string;
+  createScriptHook: CreateScriptHookNode;
+}): Promise<RemoteEntryExports> {
+  const { entryExports: remoteEntryExports } = getRemoteEntryExports(
+    name,
+    globalName,
+  );
+
+  if (remoteEntryExports) {
+    return remoteEntryExports;
+  }
+
+  return loadScriptNode(entry, {
+    attrs: { name, globalName },
+    createScriptHook,
+  })
+    .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;
+    });
+}
+
+export async function loadEntryNode({
+  entry,
+  entryGlobalName,
+  name,
+  createScriptHook,
+}: {
+  entry: string;
+  entryGlobalName: string;
+  name: string;
+  createScriptHook: CreateScriptHookNode;
+}) {
+  return loadEntryScript({
+    entry,
+    globalName: entryGlobalName,
+    name,
+    createScriptHook,
+  });
+}

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) {