feat(custom-esbuild): expose builder options to plugins

Enable plugins to access builder options and target information through factory functions. This is a non-breaking enhancement - existing plugins continue to work unchanged.

Plugins can now be defined as factory functions that receive builderOptions and target parameters, enabling more sophisticated plugins that can adapt their behavior based on the current build target and configuration.

Co-authored-by: Matt Lewis <[email protected]>

Author: just-jeb

packages/custom-esbuild/src/application/index.ts

@@ -1,8 +1,7 @@
 import * as path from 'node:path';
 import { BuilderContext, createBuilder } from '@angular-devkit/architect';
-import { buildApplication } from '@angular-devkit/build-angular';
+import { buildApplication } from '@angular/build';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
-import type { ApplicationBuilderExtensions } from '@angular/build/src/builders/application/options';
 import { defer, switchMap } from 'rxjs';
 
 import { loadPlugins } from '../load-plugins';
@@ -17,7 +16,14 @@ export function buildCustomEsbuildApplication(
   const tsConfig = path.join(workspaceRoot, options.tsConfig);
 
   return defer(async () => {
-    const codePlugins = await loadPlugins(options.plugins, workspaceRoot, tsConfig, context.logger);
+    const codePlugins = await loadPlugins(
+      options.plugins,
+      workspaceRoot,
+      tsConfig,
+      context.logger,
+      options,
+      context.target
+    );
 
     const indexHtmlTransformer = options.indexHtmlTransformer
       ? await loadIndexHtmlTransformer(
@@ -28,7 +34,7 @@ export function buildCustomEsbuildApplication(
         )
       : undefined;
 
-    return { codePlugins, indexHtmlTransformer } as ApplicationBuilderExtensions;
+    return { codePlugins, indexHtmlTransformer };
   }).pipe(switchMap(extensions => buildApplication(options, context, extensions)));
 }
 

packages/custom-esbuild/src/dev-server/index.ts

@@ -4,7 +4,7 @@ import {
   DevServerBuilderOptions,
   DevServerBuilderOutput,
   executeDevServerBuilder,
-} from '@angular-devkit/build-angular';
+} from '@angular/build';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { Observable, from, switchMap } from 'rxjs';
 import { loadModule } from '@angular-builders/common';
@@ -55,7 +55,9 @@ export function executeCustomDevServerBuilder(
         buildOptions.plugins,
         workspaceRoot,
         tsConfig,
-        context.logger
+        context.logger,
+        options,
+        context.target
       );
 
       const indexHtmlTransformer = buildOptions.indexHtmlTransformer
@@ -69,13 +71,10 @@ export function executeCustomDevServerBuilder(
 
       patchBuilderContext(context, buildTarget);
 
-      return {
-        transforms: { indexHtml: indexHtmlTransformer },
-        extensions: { middleware, buildPlugins },
-      };
+      return { middleware, buildPlugins, indexHtmlTransformer };
     }),
-    switchMap(({ transforms, extensions }) =>
-      executeDevServerBuilder(options, context, transforms, extensions)
+    switchMap((extensions) =>
+      executeDevServerBuilder(options, context, extensions)
     )
   );
 }

packages/custom-esbuild/src/load-plugin.spec.ts

@@ -1,4 +1,7 @@
 import { loadPlugins } from './load-plugins';
+import { Target } from '@angular-devkit/architect';
+import { Plugin } from 'esbuild';
+import { CustomEsbuildApplicationSchema } from './custom-esbuild-schema';
 
 describe('loadPlugin', () => {
   beforeEach(() => {
@@ -7,20 +10,54 @@ describe('loadPlugin', () => {
   });
 
   it('should load a plugin without configuration', async () => {
-    const pluginFactory = jest.fn();
+    const mockPlugin = { name: 'mock' } as Plugin;
+    jest.mock('test/test-plugin.js', () => mockPlugin, { virtual: true });
+    const plugin = await loadPlugins(
+      ['test-plugin.js'],
+      './test',
+      './tsconfig.json',
+      null as any,
+      {} as any,
+      {} as any
+    );
+
+    expect(plugin).toEqual([mockPlugin]);
+  });
+
+  it('should load a plugin factory without configuration and pass options and target', async () => {
+    const mockPlugin = { name: 'mock' } as Plugin;
+    const pluginFactory = jest.fn().mockReturnValue(mockPlugin);
+    const mockOptions = { tsConfig: './tsconfig.json' } as CustomEsbuildApplicationSchema;
+    const mockTarget = { target: 'test' } as Target;
     jest.mock('test/test-plugin.js', () => pluginFactory, { virtual: true });
-    const plugin = await loadPlugins(['test-plugin.js'], './test', './tsconfig.json', null as any);
+    const plugin = await loadPlugins(
+      ['test-plugin.js'],
+      './test',
+      './tsconfig.json',
+      null as any,
+      mockOptions,
+      mockTarget
+    );
 
-    expect(pluginFactory).not.toHaveBeenCalled();
-    expect(plugin).toBeDefined();
+    expect(pluginFactory).toHaveBeenCalledWith(mockOptions, mockTarget);
+    expect(plugin).toEqual([mockPlugin]);
   });
 
   it('should load a plugin with configuration', async () => {
     const pluginFactory = jest.fn();
+    const mockOptions = { tsConfig: './tsconfig.json' } as CustomEsbuildApplicationSchema;
+    const mockTarget = { target: 'test' } as Target;
     jest.mock('test/test-plugin.js', () => pluginFactory, { virtual: true });
-    const plugin = await loadPlugins([{ path: 'test-plugin.js', options: { test: 'test' } }], './test', './tsconfig.json', null as any);
+    const plugin = await loadPlugins(
+      [{ path: 'test-plugin.js', options: { test: 'test' } }],
+      './test',
+      './tsconfig.json',
+      null as any,
+      mockOptions,
+      mockTarget
+    );
 
-    expect(pluginFactory).toHaveBeenCalledWith({ test: 'test' });
+    expect(pluginFactory).toHaveBeenCalledWith({ test: 'test' }, mockOptions, mockTarget);
     expect(plugin).toBeDefined();
   });
 });

packages/custom-esbuild/src/load-plugins.ts

@@ -2,25 +2,46 @@ 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-esbuild-schema';
+import {
+  CustomEsbuildApplicationSchema,
+  CustomEsbuildDevServerSchema,
+  PluginConfig,
+} from './custom-esbuild-schema';
+import { Target } from '@angular-devkit/architect';
 
 export async function loadPlugins(
   pluginConfig: PluginConfig[] | undefined,
   workspaceRoot: string,
   tsConfig: string,
   logger: logging.LoggerApi,
+  builderOptions: CustomEsbuildApplicationSchema | CustomEsbuildDevServerSchema,
+  target: Target
 ): 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);
+      if (typeof pluginConfig === 'string') {
+        const pluginsOrFactory = await loadModule<
+          | Plugin
+          | Plugin[]
+          | ((
+              options: CustomEsbuildApplicationSchema | CustomEsbuildDevServerSchema,
+              target: Target
+            ) => Plugin | Plugin[])
+        >(path.join(workspaceRoot, pluginConfig), tsConfig, logger);
+        if (typeof pluginsOrFactory === 'function') {
+          return pluginsOrFactory(builderOptions, target);
         } else {
-          const pluginFactory = await loadModule<(...args: any[]) => Plugin>(path.join(workspaceRoot, pluginConfig.path), tsConfig, logger);
-          return pluginFactory(pluginConfig.options);
+          return pluginsOrFactory;
         }
-
-      },
-    ),
+      } else {
+        const pluginFactory = await loadModule<(...args: any[]) => Plugin>(
+          path.join(workspaceRoot, pluginConfig.path),
+          tsConfig,
+          logger
+        );
+        return pluginFactory(pluginConfig.options, builderOptions, target);
+      }
+    })
   );
 
   return plugins.flat();