feat(nf): Add esmsInitOptions to Angular builder to inject additional sms-module-shims options into index.html

Author: jogelin

libs/native-federation/src/builders/build/builder.ts

@@ -207,7 +207,7 @@ export async function* runBuilder(
         nfOptions.skipHtmlTransform
           ? {}
           : {
-              indexHtml: transformIndexHtml,
+              indexHtml: transformIndexHtml(nfOptions),
             },
         {
           buildPlugins: plugins,
@@ -239,7 +239,7 @@ export async function* runBuilder(
     }
 
     if (write && !nfOptions.dev && !nfOptions.skipHtmlTransform) {
-      updateIndexHtml(fedOptions);
+      updateIndexHtml(fedOptions, nfOptions);
     }
 
     if (first && runServer) {
@@ -283,8 +283,13 @@ function infereConfigPath(tsConfig: string): string {
   return relConfigPath;
 }
 
-function transformIndexHtml(content: string): Promise<string> {
-  return Promise.resolve(updateScriptTags(content, 'main.js', 'polyfills.js'));
+function transformIndexHtml(
+  nfOptions: NfBuilderSchema
+): (content: string) => Promise<string> {
+  return (content: string): Promise<string> =>
+    Promise.resolve(
+      updateScriptTags(content, 'main.js', 'polyfills.js', nfOptions)
+    );
 }
 
 function addDebugInformation(fileName: string, rawBody: string): string {

libs/native-federation/src/builders/build/schema.d.ts

@@ -1,4 +1,5 @@
 import { JsonObject } from '@angular-devkit/core';
+import type { ESMSInitOptions } from 'es-module-shims';
 
 export interface NfBuilderSchema extends JsonObject {
   target: string;
@@ -9,4 +10,5 @@ export interface NfBuilderSchema extends JsonObject {
   shell: string;
   watch: boolean;
   skipHtmlTransform: boolean;
+  esmsInitOptions: ESMSInitOptions;
 } // eslint-disable-line

libs/native-federation/src/builders/build/schema.json

@@ -42,6 +42,13 @@
     "skipHtmlTransform": {
       "type": "boolean",
       "default": false
+    },
+    "esmsInitOptions": {
+      "type": "object",
+      "description": "Options for esms-module-shims https://github.com/guybedford/es-module-shims?tab=readme-ov-file#init-options",
+      "default": {
+        "shimMode": true
+      }
     }
   }
 }

libs/native-federation/src/utils/dev-server.ts

@@ -34,7 +34,7 @@ export function startServer(
 
         if (result) {
           const mimeType = lookup(extname(key)) || 'text/javascript';
-          const body = getBody(result, memResults);
+          const body = getBody(result, memResults, options);
           res.writeHead(200, {
             'Content-Type': mimeType,
           });
@@ -77,7 +77,11 @@ export function reloadShell(shellProjectName: string): void {
   }
 }
 
-function modifyIndexHtml(content: string, fileNames: string[]): string {
+function modifyIndexHtml(
+  content: string,
+  fileNames: string[],
+  nfOptions: NfBuilderSchema
+): string {
   if (buildError) {
     const errorHtml = `
     <div style="position: absolute; filter: opacity(80%); top:0; bottom:0; left:0; right:0; padding:20px; background-color:black; color:white; ">
@@ -94,18 +98,19 @@ function modifyIndexHtml(content: string, fileNames: string[]): string {
     (f) => f.startsWith('polyfills.') && f.endsWith('.js')
   );
 
-  const index = updateScriptTags(content, mainName, polyfillsName);
+  const index = updateScriptTags(content, mainName, polyfillsName, nfOptions);
   return index;
 }
 
 function getBody(
   result: BuildResult,
-  memResults: MemResults
+  memResults: MemResults,
+  nfOptions: NfBuilderSchema
 ): Uint8Array | Buffer | string {
   const body = result.get();
   if (result.fileName === 'index.html') {
     const content = new TextDecoder().decode(body);
-    return modifyIndexHtml(content, memResults.getFileNames());
+    return modifyIndexHtml(content, memResults.getFileNames(), nfOptions);
   } else {
     return body;
   }

libs/native-federation/src/utils/updateIndexHtml.ts

@@ -1,8 +1,12 @@
 import * as path from 'path';
 import * as fs from 'fs';
 import { FederationOptions } from '@softarc/native-federation/build';
+import { NfBuilderSchema } from '../builders/build/schema';
 
-export function updateIndexHtml(fedOptions: FederationOptions) {
+export function updateIndexHtml(
+  fedOptions: FederationOptions,
+  nfOptions: NfBuilderSchema
+) {
   const outputPath = path.join(fedOptions.workspaceRoot, fedOptions.outputPath);
   const indexPath = path.join(outputPath, 'index.html');
   const mainName = fs
@@ -14,21 +18,28 @@ export function updateIndexHtml(fedOptions: FederationOptions) {
 
   let indexContent = fs.readFileSync(indexPath, 'utf-8');
 
-  indexContent = updateScriptTags(indexContent, mainName, polyfillsName);
+  indexContent = updateScriptTags(
+    indexContent,
+    mainName,
+    polyfillsName,
+    nfOptions
+  );
   fs.writeFileSync(indexPath, indexContent, 'utf-8');
 }
 
 export function updateScriptTags(
   indexContent: string,
   mainName: string,
-  polyfillsName: string
+  polyfillsName: string,
+  nfOptions: NfBuilderSchema
 ) {
+  const esmsOptions = {
+    shimMode: true,
+    ...nfOptions.esmsInitOptions,
+  };
+
   const htmlFragment = `
-<script type="esms-options">
-{
-  "shimMode": true
-}
-</script>
+<script type="esms-options">${JSON.stringify(esmsOptions)}</script>
 
 <script type="module" src="${polyfillsName}"></script>
 <script type="module-shim" src="${mainName}"></script>