added support for esbuild plugins

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

@@ -1,11 +1,11 @@
-import * as path from 'path';
 import * as fs from 'fs';
 import * as mrmime from 'mrmime';
+import * as path from 'path';
 
-import { buildApplication, ApplicationBuilderOptions } from '@angular/build';
+import { ApplicationBuilderOptions, buildApplication } from '@angular/build';
 import {
-  serveWithVite,
   buildApplicationInternal,
+  serveWithVite,
 } from '@angular/build/private';
 
 import {
@@ -14,37 +14,33 @@ import {
   createBuilder,
 } from '@angular-devkit/architect';
 
-import { DevServerBuilderOptions } from '@angular-devkit/build-angular';
 import { normalizeOptions } from '@angular-devkit/build-angular/src/builders/dev-server/options';
 
-import { setLogLevel, logger } from '@softarc/native-federation/build';
+import { logger, setLogLevel } from '@softarc/native-federation/build';
 
-import { FederationOptions } from '@softarc/native-federation/build';
-import { setBuildAdapter } from '@softarc/native-federation/build';
+import { targetFromTargetString } from '@angular-devkit/architect';
+import { buildForFederation, FederationOptions, getExternals, loadFederationConfig, setBuildAdapter } from '@softarc/native-federation/build';
 import {
   createAngularBuildAdapter,
   setMemResultHandler,
 } from '../../utils/angular-esbuild-adapter';
-import { getExternals } from '@softarc/native-federation/build';
-import { loadFederationConfig } from '@softarc/native-federation/build';
-import { buildForFederation } from '@softarc/native-federation/build';
-import { targetFromTargetString } from '@angular-devkit/architect';
 
-import { NfBuilderSchema } from './schema';
-import { reloadBrowser, reloadShell, setError } from '../../utils/dev-server';
-import { RebuildHubs } from '../../utils/rebuild-events';
-import { updateIndexHtml, updateScriptTags } from '../../utils/updateIndexHtml';
+import { JsonObject } from '@angular-devkit/core';
 import { existsSync, mkdirSync, rmSync } from 'fs';
+import { reloadBrowser, reloadShell, setError } from '../../utils/dev-server';
 import {
   EsBuildResult,
   MemResults,
   NgCliAssetResult,
 } from '../../utils/mem-resuts';
-import { JsonObject } from '@angular-devkit/core';
+import { RebuildHubs } from '../../utils/rebuild-events';
 import { createSharedMappingsPlugin } from '../../utils/shared-mappings-plugin';
+import { updateIndexHtml, updateScriptTags } from '../../utils/updateIndexHtml';
+import { NfBuilderSchema } from './schema';
 // import { NextHandleFunction } from 'vite';
-import { PluginBuild } from 'esbuild';
 import { FederationInfo } from '@softarc/native-federation-runtime';
+import { PluginBuild } from 'esbuild';
+import { addCustomPlugins } from '../../utils/custom-plugins/add-custom-plugins';
 
 function _buildApplication(options, context, pluginsOrExtensions) {
   let extensions;
@@ -174,6 +170,11 @@ export async function* runBuilder(
     },
   ];
 
+  // Add custom plugins
+  if (nfOptions.plugins) {
+    await addCustomPlugins(plugins, nfOptions.plugins, context.workspaceRoot, options.tsConfig, context.logger);
+  }
+
   // SSR build fails when externals are provided via the plugin
   if (activateSsr) {
     options.externalDependencies = externals;
@@ -243,21 +244,21 @@ export async function* runBuilder(
 
   const builderRun = nfOptions.dev
     ? serveWithVite(
-        normOuterOptions,
-        appBuilderName,
-        _buildApplication,
-        context,
-        nfOptions.skipHtmlTransform
-          ? {}
-          : { indexHtml: transformIndexHtml(nfOptions) },
-        {
-          buildPlugins: plugins as any,
-          middleware,
-        }
-      )
+      normOuterOptions,
+      appBuilderName,
+      _buildApplication,
+      context,
+      nfOptions.skipHtmlTransform
+        ? {}
+        : { indexHtml: transformIndexHtml(nfOptions) },
+      {
+        buildPlugins: plugins as any,
+        middleware,
+      }
+    )
     : buildApplication(options, context, {
-        codePlugins: plugins as any,
-      });
+      codePlugins: plugins as any,
+    });
 
   // builderRun.output.subscribe(async (output) => {
   for await (const output of builderRun) {

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

@@ -1,5 +1,6 @@
 import { JsonObject } from '@angular-devkit/core';
 import type { ESMSInitOptions } from 'es-module-shims';
+import { PluginConfig } from '../../utils/custom-plugins/custom-plugins.entity';
 
 export interface NfBuilderSchema extends JsonObject {
   target: string;
@@ -13,4 +14,5 @@ export interface NfBuilderSchema extends JsonObject {
   esmsInitOptions: ESMSInitOptions;
   baseHref?: string;
   ssr: boolean;
+  plugins?: PluginConfig[];
 } // eslint-disable-line

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

@@ -10,6 +10,13 @@
       "type": "string",
       "description": "target configured for the esbuild builder"
     },
+    "plugins": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "plugins configured for the esbuild builder"
+    },
     "dev": {
       "type": "boolean",
       "description": "Set this to true to start the builder in dev mode",
@@ -59,4 +66,4 @@
       "default": false
     }
   }
-}
+}

libs/native-federation/src/utils/custom-plugins/add-custom-plugins.ts

@@ -0,0 +1,20 @@
+import { logging } from "@angular-devkit/core";
+import { loadCustomPlugins } from "./load-custom-plugins";
+import { Plugin } from "esbuild";
+import { PluginConfig } from "./custom-plugins.entity";
+
+/**
+ * Add custom plugins to the plugins array
+ * @param plugins The array of plugins to add to
+ * @param pluginConfig The plugin configuration
+ * @param workspaceRoot The workspace root
+ * @param tsConfig The tsconfig path
+ * @param logger The logger
+ */
+export async function addCustomPlugins(plugins: Plugin[], pluginConfig: PluginConfig[] | undefined,
+    workspaceRoot: string,
+    tsConfig: string,
+    logger: logging.LoggerApi): Promise<void> {
+    const codePlugins = await loadCustomPlugins(pluginConfig, workspaceRoot, tsConfig, logger);
+    plugins.push(...codePlugins);
+}

libs/native-federation/src/utils/custom-plugins/custom-plugins.entity.ts

@@ -0,0 +1,5 @@
+/*
+ * Stolen from https://github.com/just-jeb/angular-builders/blob/master/packages/custom-esbuild/src/load-plugins.ts
+ */
+
+export type PluginConfig = string | { path: string; options?: Record<string, unknown> };

libs/native-federation/src/utils/custom-plugins/load-custom-plugins.ts

@@ -0,0 +1,40 @@
+import * as path from 'node:path';
+import type { Plugin } from 'esbuild';
+import type { logging } from '@angular-devkit/core';
+import { loadModule } from '@angular-builders/common';
+import { PluginConfig } from './custom-plugins.entity';
+
+/*
+ * Stolen from https://github.com/just-jeb/angular-builders/blob/master/packages/custom-esbuild/src/load-plugins.ts
+ */
+
+/**
+ * Load custom plugins from the plugin configuration array
+ * @param plugins The array of plugins to add to
+ * @param pluginConfig The plugin configuration
+ * @param workspaceRoot The workspace root
+ * @param tsConfig The tsconfig path
+ * @param logger The logger
+ * @returns The loaded plugins
+ */
+export async function loadCustomPlugins(
+    pluginConfig: PluginConfig[] | undefined,
+    workspaceRoot: string,
+    tsConfig: string,
+    logger: logging.LoggerApi,
+): Promise<Plugin[]> {
+    const plugins = await Promise.all(
+        (pluginConfig || [])
+            .map(async pluginConfig => {
+                if (typeof pluginConfig === 'string') {
+                    return loadModule<Plugin | Plugin[]>(path.join(workspaceRoot, pluginConfig), tsConfig, logger);
+                } else {
+                    const pluginFactory = await loadModule<(...args: any[]) => Plugin>(path.join(workspaceRoot, pluginConfig.path), tsConfig, logger);
+                    return pluginFactory(pluginConfig.options);
+                }
+
+            }),
+    );
+
+    return plugins.flat();
+}