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

Author: mattlewis92

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,
@@ -20,10 +20,11 @@ export function buildCustomEsbuildApplication(
     const codePlugins = await loadPlugins(options.plugins, workspaceRoot, tsConfig, context.logger);
 
     const indexHtmlTransformer = options.indexHtmlTransformer
-      ? await loadModule(
+      ? await loadIndexHtmlTransformer(
           path.join(workspaceRoot, options.indexHtmlTransformer),
           tsConfig,
-          context.logger
+          context.logger,
+          context.target
         )
       : undefined;
 

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 { loadModule } from '@angular-builders/common';
@@ -17,6 +16,7 @@ import {
   CustomEsbuildApplicationSchema,
   CustomEsbuildDevServerSchema,
 } from '../custom-esbuild-schema';
+import { loadIndexHtmlTransformer } from '../load-index-html-transformer';
 
 export function executeCustomDevServerBuilder(
   options: CustomEsbuildDevServerSchema,
@@ -58,11 +58,12 @@ export function executeCustomDevServerBuilder(
         context.logger
       );
 
-      const indexHtmlTransformer: IndexHtmlTransform = buildOptions.indexHtmlTransformer
-        ? await loadModule(
+      const indexHtmlTransformer = buildOptions.indexHtmlTransformer
+        ? await loadIndexHtmlTransformer(
             path.join(workspaceRoot, buildOptions.indexHtmlTransformer),
             tsConfig,
-            context.logger
+            context.logger,
+            context.target
           )
         : undefined;
 

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

@@ -0,0 +1,24 @@
+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<(indexHtml: string, target: Target) => Promise<string>>(
+    indexHtmlTransformerPath,
+    tsConfig,
+    logger
+  );
+  return (indexHtml: string) => transformer(indexHtml, target);
+}