feat(custom-esbuild): expose current target to index html transform

packages/custom-esbuild/README.md

@@ -212,7 +212,7 @@ The `@angular-builders/custom-esbuild:dev-server` is an enhanced version of the
 Since Angular 8, `index.html` is not generated as part of the build. If you want to modify your `index.html`, you should use the `indexHtmlTransformer` option. `indexHtmlTransformer` is a path (relative to the workspace root) to a `.js` or `.ts` file that exports a transformation function for `index.html`. If `indexHtmlTransformer` is written in TypeScript, the application's `tsConfig` file will be used by `tsnode` for its execution:
 
 ```typescript
-(indexHtmlContent: string) => string | Promise<string>;
+(indexHtmlContent: string, target: Target) => string | Promise<string>;
 ```
 
 or, in other words, the function receives target options and original `index.html` content (generated by Angular CLI) and returns a new content as `string` or `Promise<string>`.

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

@@ -4,10 +4,10 @@ import { buildApplication } from '@angular-devkit/build-angular';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import type { ApplicationBuilderExtensions } from '@angular/build/src/builders/application/options';
 import { defer, switchMap } from 'rxjs';
-import { loadModule } from '@angular-builders/common';
 
 import { loadPlugins } from '../load-plugins';
 import { CustomEsbuildApplicationSchema } from '../custom-esbuild-schema';
+import { loadIndexHtmlTransformer } from '../load-index-html-transformer';
 
 export function buildCustomEsbuildApplication(
   options: CustomEsbuildApplicationSchema,
@@ -19,13 +19,12 @@ export function buildCustomEsbuildApplication(
   return defer(async () => {
     const codePlugins = await loadPlugins(options.plugins, workspaceRoot, tsConfig, context.logger);
 
-    const indexHtmlTransformer = options.indexHtmlTransformer
-      ? await loadModule(
-          path.join(workspaceRoot, options.indexHtmlTransformer),
-          tsConfig,
-          context.logger
-        )
-      : undefined;
+    const indexHtmlTransformer = options.indexHtmlTransformer ? await loadIndexHtmlTransformer(
+      path.join(workspaceRoot, options.indexHtmlTransformer),
+      tsConfig,
+      context.logger,
+      context.target,
+    ) : undefined;
 
     return { codePlugins, indexHtmlTransformer } as ApplicationBuilderExtensions;
   }).pipe(switchMap(extensions => buildApplication(options, context, extensions)));

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

@@ -5,7 +5,6 @@ import {
   DevServerBuilderOutput,
   executeDevServerBuilder,
 } from '@angular-devkit/build-angular';
-import type { IndexHtmlTransform } from '@angular/build/src/utils/index-file/index-html-generator';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { Observable, from, switchMap } from 'rxjs';
 import type { Connect } from 'vite';
@@ -17,6 +16,7 @@ import {
   CustomEsbuildApplicationSchema,
   CustomEsbuildDevServerSchema,
 } from '../custom-esbuild-schema';
+import { loadIndexHtmlTransformer } from '../load-index-html-transformer';
 
 export function executeCustomDevServerBuilder(
   options: CustomEsbuildDevServerSchema,
@@ -57,13 +57,12 @@ export function executeCustomDevServerBuilder(
         context.logger
       );
 
-      const indexHtmlTransformer: IndexHtmlTransform = buildOptions.indexHtmlTransformer
-        ? await loadModule(
-            path.join(workspaceRoot, buildOptions.indexHtmlTransformer),
-            tsConfig,
-            context.logger
-          )
-        : undefined;
+      const indexHtmlTransformer = buildOptions.indexHtmlTransformer ? await loadIndexHtmlTransformer(
+        path.join(workspaceRoot, buildOptions.indexHtmlTransformer),
+        tsConfig,
+        context.logger,
+        context.target,
+      ) : undefined;
 
       patchBuilderContext(context, buildTarget);
 

packages/custom-esbuild/src/load-index-html-transformer.spec.ts

@@ -0,0 +1,19 @@
+import { loadIndexHtmlTransformer } from './load-index-html-transformer';
+import { Target } from '@angular-devkit/architect';
+
+describe('loadIndexHtmlTransformer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.clearAllMocks();
+  });
+
+  it('should pass the target to the transformer', async () => {
+    const transformIndexHtml = jest.fn();
+    jest.mock('test/test-index-transform.js', () => transformIndexHtml, { virtual: true });
+    const mockTarget = { project: 'test', target: 'test' } as Target;
+    const transform = await loadIndexHtmlTransformer('test/test-index-transform.js', './tsconfig.json', null as any, mockTarget);
+
+    await transform('Hello world!');
+    expect(transformIndexHtml).toHaveBeenCalledWith('Hello world!', mockTarget);
+  });
+});

packages/custom-esbuild/src/load-index-html-transformer.ts

@@ -0,0 +1,18 @@
+import { loadModule } from '@angular-builders/common';
+import { logging } from '@angular-devkit/core';
+import { Target } from '@angular-devkit/architect';
+import type { IndexHtmlTransform } from '@angular/build/src/utils/index-file/index-html-generator';
+
+export async function loadIndexHtmlTransformer(
+  indexHtmlTransformerPath: string,
+  tsConfig: string,
+  logger: logging.LoggerApi,
+  target: Target
+): Promise<IndexHtmlTransform> {
+  const transformer = await loadModule(
+    indexHtmlTransformerPath,
+    tsConfig,
+    logger
+  ) as (indexHtml: string, target: Target) => Promise<string>;
+  return (indexHtml: string) => transformer(indexHtml, target);
+}