feat: support node esmodule and mf-manifest esmodule (#2934) (#3013)

Co-authored-by: zhn <[email protected]>
Co-authored-by: 张洪恩 <[email protected]>

Author: 3 people

.github/workflows/release.yml

@@ -47,7 +47,7 @@ jobs:
       - name: Install deps
         run: pnpm install
 
-      - name: Build and test Packages
+      - name: Build Packages
         run: pnpm run build:pkg
 
       - name: Release

package.json

@@ -22,6 +22,7 @@
     "nx": "nx",
     "commit": "cz",
     "docs": "typedoc",
+    "f": "nx format:write",
     "lint": "nx run-many --target=lint",
     "test": "nx run-many --target=test",
     "build": "nx run-many --target=build --parallel=5  --projects=tag:type:pkg",

packages/runtime/src/plugins/generate-preload-assets.ts

@@ -328,7 +328,7 @@ export const generatePreloadAssetsPlugin: () => FederationRuntimePlugin =
                 moduleInfo: {
                   name: remoteInfo.name,
                   entry: remote.entry,
-                  type: 'global',
+                  type: remoteInfo.type || 'global',
                   entryGlobalName: '',
                   shareScope: '',
                 },

packages/runtime/src/utils/load.ts

@@ -147,7 +147,7 @@ async function loadEntryNode({
   remoteInfo: RemoteInfo;
   createScriptHook: FederationHost['loaderHook']['lifecycle']['createScript'];
 }) {
-  const { entry, entryGlobalName: globalName, name } = remoteInfo;
+  const { entry, entryGlobalName: globalName, name, type } = remoteInfo;
   const { entryExports: remoteEntryExports } = getRemoteEntryExports(
     name,
     globalName,
@@ -158,7 +158,7 @@ async function loadEntryNode({
   }
 
   return loadScriptNode(entry, {
-    attrs: { name, globalName },
+    attrs: { name, globalName, type },
     createScriptHook: (url, attrs) => {
       const res = createScriptHook.emit({ url, attrs });
 

packages/sdk/src/dom.ts

@@ -47,8 +47,9 @@ export function createScript(info: {
   }
 
   if (!script) {
+    const attrs = info.attrs;
     script = document.createElement('script');
-    script.type = 'text/javascript';
+    script.type = attrs?.['type'] === 'module' ? 'module' : 'text/javascript';
     script.src = info.url;
     let createScriptRes: CreateScriptHookReturnDom = undefined;
     if (info.createScriptHook) {
@@ -65,7 +66,6 @@ export function createScript(info: {
         }
       }
     }
-    const attrs = info.attrs;
     if (attrs && !createScriptRes) {
       Object.keys(attrs).forEach((name) => {
         if (script) {

packages/sdk/src/generateSnapshotFromManifest.ts

@@ -190,7 +190,8 @@ export function generateSnapshotFromManifest(
       ssrRemoteEntry.name,
     );
     remoteSnapshot.ssrRemoteEntry = fullSSRRemoteEntry;
-    remoteSnapshot.ssrRemoteEntryType = 'commonjs-module';
+    remoteSnapshot.ssrRemoteEntryType =
+      ssrRemoteEntry.type || 'commonjs-module';
   }
 
   return remoteSnapshot;

packages/sdk/src/node.ts

@@ -133,7 +133,26 @@ export function createScriptNode(
   };
 
   getFetch()
-    .then((f) => handleScriptFetch(f, urlObj))
+    .then(async (f) => {
+      if (attrs?.['type'] === 'esm' || attrs?.['type'] === 'module') {
+        return loadModule(urlObj.href, {
+          fetch: f,
+          vm: await importNodeModule<typeof import('vm')>('vm'),
+        })
+          .then(async (module) => {
+            await module.evaluate();
+            cb(undefined, module.namespace);
+          })
+          .catch((e) => {
+            cb(
+              e instanceof Error
+                ? e
+                : new Error(`Script execution error: ${e}`),
+            );
+          });
+      }
+      handleScriptFetch(f, urlObj);
+    })
     .catch((err) => {
       cb(err);
     });
@@ -166,3 +185,31 @@ export function loadScriptNode(
     );
   });
 }
+
+async function loadModule(
+  url: string,
+  options: {
+    vm: any;
+    fetch: any;
+  },
+) {
+  const { fetch, vm } = options;
+  const response = await fetch(url);
+  const code = await response.text();
+
+  const module: any = new vm.SourceTextModule(code, {
+    // @ts-ignore
+    importModuleDynamically: async (specifier, script) => {
+      const resolvedUrl = new URL(specifier, url).href;
+      return loadModule(resolvedUrl, options);
+    },
+  });
+
+  await module.link(async (specifier: string) => {
+    const resolvedUrl = new URL(specifier, url).href;
+    const module = await loadModule(resolvedUrl, options);
+    return module;
+  });
+
+  return module;
+}