Step 2 - Pre-generate importmap to bypass es-module-shims.

Author: klerick

libs/nx-angular-mf/src/builders/helpers/index.ts

@@ -3,3 +3,5 @@ export * from './prepare-config'
 export * from './dependencies'
 export * from './patch-builder-context'
 export * from './load-module'
+export * from './init-import-map-utils'
+export * from './transform-html'

libs/nx-angular-mf/src/builders/helpers/init-import-map-utils.ts

@@ -0,0 +1,77 @@
+export function addToPathName(currentPathname, addPathname) {
+  return [
+    ...currentPathname.split('/').filter((i) => !!i),
+    ...addPathname.split('/').filter((i) => !!i),
+  ].join('/');
+}
+
+export async function fetchImportMap(host: string) {
+  const urlHost = new URL(host);
+  const pathName = addToPathName(urlHost.pathname, 'importmap.json');
+  const url = new URL(pathName, urlHost.origin).toString();
+  try {
+    const r = await fetch(url);
+    return await r.json();
+  } catch (e) {
+    console.log(url);
+    throw e;
+  }
+}
+
+export async function getResultImportMap(mainImportMap) {
+  const resultImportMap = {
+    imports: mainImportMap['imports'],
+    scopes: {},
+  };
+
+  if (
+    mainImportMap['remoteEntry'] &&
+    typeof mainImportMap['remoteEntry'] === 'object'
+  ) {
+    const resultPromise = Object.entries<string>(
+      mainImportMap['remoteEntry']
+    ).map(([key, value]) => {
+      return fetchImportMap(value).then((r) => {
+        return {
+          imports: Object.entries<string>(r.exposes).reduce((acum, [k, v]) => {
+            const UrlRemote = new URL(value);
+
+            acum[`${key}/${k}`] = new URL(
+              addToPathName(UrlRemote.pathname, v),
+              UrlRemote.origin
+            ).toString();
+            return acum;
+          }, {}),
+          scopes: {
+            [value]: Object.entries(r.imports)
+              .filter(([k, v]) => {
+                if (!resultImportMap['imports'][k]) {
+                  return true;
+                }
+                const path = resultImportMap['imports'][k];
+                // @ts-expect-error should be using as string function
+                return !path.endsWith(v.split('/').at(-1));
+              })
+              .reduce((acum, [k, v]) => {
+                acum[k] = v;
+                return acum;
+              }, {}),
+          },
+        };
+      });
+    });
+
+    const result = await Promise.all(resultPromise);
+    for (const resultItem of result) {
+      resultImportMap['imports'] = {
+        ...resultImportMap['imports'],
+        ...resultItem['imports'],
+      };
+      resultImportMap['scopes'] = {
+        ...resultImportMap['scopes'],
+        ...resultItem['scopes'],
+      };
+    }
+  }
+  return resultImportMap;
+}

libs/nx-angular-mf/src/builders/helpers/prepare-config.ts

@@ -50,7 +50,8 @@ export async function prepareConfig(
       (i) => !skipList.includes(i.key)
     ),
     outPutFileNames: [],
-    esPlugins
+    esPlugins,
+    allImportMap: {},
   };
 }
 

libs/nx-angular-mf/src/builders/helpers/transform-html.ts

@@ -0,0 +1,100 @@
+import { parse, serialize, parseFragment } from 'parse5';
+
+import { getDataForImportMap } from './utils';
+import { ConfigMf } from '../types';
+import { getResultImportMap } from './init-import-map-utils';
+
+function findBody(node) {
+  let bodyNode = null;
+  const innerFunction = (node) => {
+    if (!node.childNodes) return;
+
+    for (const child of node.childNodes) {
+      if (child.tagName === 'body') {
+        bodyNode = child;
+        break;
+      }
+      innerFunction(child);
+    }
+  };
+  innerFunction(node);
+  return bodyNode;
+}
+
+function removeScriptModules(node) {
+  const scriptModules = [];
+  let bodyNode = null;
+  const innerFunction = (node) => {
+    if (!node.childNodes) return;
+
+    node.childNodes = node.childNodes.filter((child) => {
+      const isPreloadLink =
+        child['tagName'] === 'link' &&
+        child['attrs'].some(
+          (attr) => attr.name === 'rel' && attr.value === 'modulepreload'
+        );
+
+      if (isPreloadLink) {
+        scriptModules.push(child);
+        return !isPreloadLink;
+      }
+
+      const isModuleScript =
+        child['tagName'] === 'script' &&
+        (child['attrs'] || []).some(
+          (attr) => attr.name === 'type' && attr.value === 'module'
+        );
+
+      if (child.tagName === 'body') {
+        bodyNode = child;
+      }
+
+      if (isModuleScript) {
+        scriptModules.push(child);
+      }
+      return !isModuleScript;
+    });
+    for (const child of node.childNodes) {
+      innerFunction(child);
+    }
+  };
+
+  innerFunction(node);
+
+  return { scriptModules, bodyNode };
+}
+
+export async function indexHtml(
+  mfeConfig: ConfigMf,
+): Promise<(input: string) => Promise<string>> {
+  const dataImport = getDataForImportMap(mfeConfig);
+  const allImportMap = await getResultImportMap(dataImport);
+  mfeConfig.allImportMap = allImportMap;
+  return async (input: string) => {
+    const importMapStr = JSON.stringify(allImportMap);
+
+    const importScriptElement = {
+      nodeName: 'script',
+      tagName: 'script',
+      attrs: [
+        {
+          name: 'type',
+          value: 'importmap',
+        },
+      ],
+      namespaceURI: 'http://www.w3.org/1999/xhtml',
+      childNodes: [
+        {
+          nodeName: '#text',
+          value: importMapStr,
+        },
+      ],
+      parentNode: null,
+    };
+
+    const document = parse(input);
+    const { bodyNode, scriptModules } = removeScriptModules(document);
+    bodyNode.childNodes.push(...[importScriptElement, ...scriptModules]);
+    return serialize(document);
+  };
+}

libs/nx-angular-mf/src/builders/helpers/utils.ts

@@ -50,7 +50,7 @@ export function getDataForImportMap(
   return {
     imports: [...mapShareObject.entries()].reduce((acum, [key, val]) => {
 
-      acum[val.packageName] = key + '.js';
+      acum[val.packageName] = `./${key}.js`;
 
       return acum;
     }, {}),

libs/nx-angular-mf/src/builders/serve/index.ts

@@ -12,7 +12,7 @@ import { Plugin } from 'esbuild';
 
 import { ServeExecutorSchema } from './schema';
 import { BuildExecutorSchema } from '../build/schema';
-import { deepMergeObject, getMapName, loadModule, patchBuilderContext, prepareConfig } from '../helpers';
+import { deepMergeObject, getMapName, indexHtml, loadModule, patchBuilderContext, prepareConfig } from '../helpers';
 import { entryPointForExtendDependencies } from '../es-plugin';
 
 
@@ -94,10 +94,11 @@ export async function* runBuilder(
     buildPlugins: resultEsBuild,
   };
 
+  const mainTransform = await indexHtml(optionsMfe);
+
+
   const transforms = {
-    indexHtml: async (input: string) => {
-      return input;
-    },
+    indexHtml: mainTransform,
   };
 
   const runServer = serveWithVite(

libs/nx-angular-mf/src/builders/types.ts

@@ -5,6 +5,7 @@ export type ConfigMf = {
   sharedMappings: { key: string; path: string }[];
   outPutFileNames: string[];
   esPlugins: string[];
+  allImportMap: Record<string, unknown>;
 };
 
 export type ShareOptions = {