Step 2 - enable user-defined plugins similar to custom-esbuild.

Author: klerick

apps/host-application/project.json

@@ -14,7 +14,8 @@
       "options": {
         "mf": {
           "externalList": "build-external-list.json",
-          "skipList": "build-skip-list.json"
+          "skipList": "build-skip-list.json",
+          "esPlugins": ["tools/esbuild-plugin/test-external-plugin.ts"]
         },
         "outputPath": "dist/apps/host-application",
         "index": "apps/host-application/src/index.html",

libs/nx-angular-mf/src/builders/build/schema.json

@@ -678,6 +678,13 @@
               "type": "string"
             }
           ]
+        },
+        "esPlugins": {
+          "description": "List of esbuild plugins that should be applied to the build.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
         }
       },
       "additionalProperties": false

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

@@ -2,3 +2,4 @@ export * from './utils';
 export * from './prepare-config'
 export * from './dependencies'
 export * from './patch-builder-context'
+export * from './load-module'

libs/nx-angular-mf/src/builders/helpers/load-module.ts

@@ -0,0 +1,151 @@
+import * as path from 'node:path';
+import * as url from 'node:url';
+import type { logging } from '@angular-devkit/core';
+
+const _tsNodeRegister = (() => {
+  let lastTsConfig: string | undefined;
+  return (tsConfig: string, logger: logging.LoggerApi) => {
+    // Check if the function was previously called with the same tsconfig
+    if (lastTsConfig && lastTsConfig !== tsConfig) {
+      logger.warn(`Trying to register ts-node again with a different tsconfig - skipping the registration.
+                   tsconfig 1: ${lastTsConfig}
+                   tsconfig 2: ${tsConfig}`);
+    }
+
+    if (lastTsConfig) {
+      return;
+    }
+
+    lastTsConfig = tsConfig;
+
+    loadTsNode().register({
+      project: tsConfig,
+      compilerOptions: {
+        module: 'CommonJS',
+        types: [
+          'node', // NOTE: `node` is added because users scripts can also use pure node's packages as webpack or others
+        ],
+      },
+    });
+
+    const tsConfigPaths = loadTsConfigPaths();
+    const result = tsConfigPaths.loadConfig(tsConfig);
+    // The `loadConfig` returns a `ConfigLoaderResult` which must be guarded with
+    // the `resultType` check.
+    if (result.resultType === 'success') {
+      const { absoluteBaseUrl: baseUrl, paths } = result;
+
+      if (baseUrl && paths) {
+        tsConfigPaths.register({ baseUrl, paths });
+      }
+    }
+  };
+})();
+
+/**
+ * check for TS node registration
+ * @param file: file name or file directory are allowed
+ * @todo tsNodeRegistration: require ts-node if file extension is TypeScript
+ */
+function tsNodeRegister(
+  file = '',
+  tsConfig: string,
+  logger: logging.LoggerApi
+) {
+  if (file?.endsWith('.ts')) {
+    // Register TS compiler lazily
+    _tsNodeRegister(tsConfig, logger);
+  }
+}
+
+/**
+ * This uses a dynamic import to load a module which may be ESM.
+ * CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+ * will currently, unconditionally downlevel dynamic import into a require call.
+ * require calls cannot load ESM code and will result in a runtime error. To workaround
+ * this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+ * Once TypeScript provides support for keeping the dynamic import this workaround can
+ * be dropped.
+ *
+ * @param modulePath The path of the module to load.
+ * @returns A Promise that resolves to the dynamically imported module.
+ */
+function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
+  return new Function('modulePath', `return import(modulePath);`)(
+    modulePath
+  ) as Promise<T>;
+}
+
+/**
+ * Loads CJS and ESM modules based on extension
+ */
+export async function loadModule<T>(
+  modulePath: string,
+  tsConfig: string,
+  logger: logging.LoggerApi
+): Promise<T> {
+  tsNodeRegister(modulePath, tsConfig, logger);
+
+  switch (path.extname(modulePath)) {
+    case '.mjs':
+      // Load the ESM configuration file using the TypeScript dynamic import workaround.
+      // Once TypeScript provides support for keeping the dynamic import this workaround can be
+      // changed to a direct dynamic import.
+      return (
+        await loadEsmModule<{ default: T }>(url.pathToFileURL(modulePath))
+      ).default;
+    case '.cjs':
+      return require(modulePath);
+    case '.ts':
+      try {
+        // If it's a TS file then there are 2 cases for exporing an object.
+        // The first one is `export blah`, transpiled into `module.exports = { blah} `.
+        // The second is `export default blah`, transpiled into `{ default: { ... } }`.
+        return require(modulePath).default || require(modulePath);
+      } catch (e: any) {
+        if (e.code === 'ERR_REQUIRE_ESM') {
+          // Load the ESM configuration file using the TypeScript dynamic import workaround.
+          // Once TypeScript provides support for keeping the dynamic import this workaround can be
+          // changed to a direct dynamic import.
+          return (
+            await loadEsmModule<{ default: T }>(url.pathToFileURL(modulePath))
+          ).default;
+        }
+        throw e;
+      }
+    //.js
+    default:
+      // The file could be either CommonJS or ESM.
+      // CommonJS is tried first then ESM if loading fails.
+      try {
+        return require(modulePath);
+      } catch (e: any) {
+        if (e.code === 'ERR_REQUIRE_ESM') {
+          // Load the ESM configuration file using the TypeScript dynamic import workaround.
+          // Once TypeScript provides support for keeping the dynamic import this workaround can be
+          // changed to a direct dynamic import.
+          return (
+            await loadEsmModule<{ default: T }>(url.pathToFileURL(modulePath))
+          ).default;
+        }
+
+        throw e;
+      }
+  }
+}
+
+/**
+ * Loads `ts-node` lazily. Moved to a separate function to declare
+ * a return type, more readable than an inline variant.
+ */
+function loadTsNode(): typeof import('ts-node') {
+  return require('ts-node');
+}
+
+/**
+ * Loads `tsconfig-paths` lazily. Moved to a separate function to declare
+ * a return type, more readable than an inline variant.
+ */
+function loadTsConfigPaths(): typeof import('tsconfig-paths') {
+  return require('tsconfig-paths');
+}

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

@@ -15,6 +15,7 @@ export async function prepareConfig(
 ): Promise<ConfigMf> {
   const skipList: ConfigMf['skipList'] = [];
   const externalList: ConfigMf['externalList'] = [];
+  const esPlugins: ConfigMf['esPlugins'] = [];
 
   if (defaultOptions.skipList) {
     skipList.push(...(await checkIsFileOrArray(defaultOptions.skipList)));
@@ -27,14 +28,29 @@ export async function prepareConfig(
   const externalMapObject = externalMap(externalList);
   const shareObject = getFullShare(externalMapObject, skipList);
 
+  if (defaultOptions.esPlugins && Array.isArray(defaultOptions.esPlugins)) {
+    const tmpEsPlugins = [];
+    for (const pathToPlugin of defaultOptions.esPlugins) {
+      const fullPathToPlugin = join(workspaceRootPath, pathToPlugin);
+      const result = await fsPromise.lstat(fullPathToPlugin);
+      if (!result.isFile()) {
+        throw new Error(`Invalid plugin path: ${result}`);
+      }
+
+      tmpEsPlugins.push(pathToPlugin);
+    }
+    esPlugins.push(...tmpEsPlugins);
+  }
+
   return {
     skipList: skipList,
     externalList: externalList,
     shared: shareObject,
     sharedMappings: getSharedMappings().filter(
       (i) => !skipList.includes(i.key)
     ),
-    outPutFileNames: []
+    outPutFileNames: [],
+    esPlugins
   };
 }
 

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

@@ -2,5 +2,6 @@ export type SchemaMf = {
   mf?: {
     skipList?: string | string[];
     externalList?: string | string[];
+    esPlugins?: string[];
   };
 };

libs/nx-angular-mf/src/builders/schema/schema.json

@@ -34,6 +34,13 @@
               "type": "string"
             }
           ]
+        },
+        "esPlugins": {
+          "description": "List of esbuild plugins that should be applied to the build.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
         }
       },
       "additionalProperties": false

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

@@ -8,10 +8,11 @@ import {
   serveWithVite,
   buildApplicationInternal,
 } from '@angular/build/private';
+import { Plugin } from 'esbuild';
 
 import { ServeExecutorSchema } from './schema';
 import { BuildExecutorSchema } from '../build/schema';
-import { deepMergeObject, getMapName, patchBuilderContext, prepareConfig } from '../helpers';
+import { deepMergeObject, getMapName, loadModule, patchBuilderContext, prepareConfig } from '../helpers';
 import { entryPointForExtendDependencies } from '../es-plugin';
 
 
@@ -78,7 +79,13 @@ export async function* runBuilder(
     defaultOptions
   );
 
+  const esPluginPromise = optionsMfe.esPlugins.map((item) =>
+    loadModule<Plugin>(item, targetOptions.tsConfig, context.logger)
+  );
+  const esPlugins = await Promise.all(esPluginPromise);
+
   const resultEsBuild = [
+    ...esPlugins,
     entryPointForExtendDependencies(optionsMfe)
   ]
 

libs/nx-angular-mf/src/builders/serve/schema.json

@@ -169,6 +169,13 @@
               "type": "string"
             }
           ]
+        },
+        "esPlugins": {
+          "description": "List of esbuild plugins that should be applied to the build.",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
         }
       },
       "additionalProperties": false

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

@@ -4,6 +4,7 @@ export type ConfigMf = {
   shared: SharedMap;
   sharedMappings: { key: string; path: string }[];
   outPutFileNames: string[];
+  esPlugins: string[];
 };
 
 export type ShareOptions = {