From a9a5086cf4d08800df633aa2b9d7c0db069068ba Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Mon, 25 Nov 2024 14:38:15 +0000 Subject: [PATCH] feat(custom-esbuild): expose current target to index html transform --- packages/custom-esbuild/README.md | 2 +- .../custom-esbuild/src/application/index.ts | 7 +++--- .../custom-esbuild/src/dev-server/index.ts | 9 +++---- .../src/load-index-html-transformer.spec.ts | 24 +++++++++++++++++++ .../src/load-index-html-transformer.ts | 18 ++++++++++++++ 5 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 packages/custom-esbuild/src/load-index-html-transformer.spec.ts create mode 100644 packages/custom-esbuild/src/load-index-html-transformer.ts diff --git a/packages/custom-esbuild/README.md b/packages/custom-esbuild/README.md index 4055b7833..76aa85da0 100644 --- a/packages/custom-esbuild/README.md +++ b/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; +(indexHtmlContent: string, target: Target) => string | Promise; ``` 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`. diff --git a/packages/custom-esbuild/src/application/index.ts b/packages/custom-esbuild/src/application/index.ts index faf9f1513..59f3bea99 100644 --- a/packages/custom-esbuild/src/application/index.ts +++ b/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; diff --git a/packages/custom-esbuild/src/dev-server/index.ts b/packages/custom-esbuild/src/dev-server/index.ts index 3ab9eab88..43687bc6e 100644 --- a/packages/custom-esbuild/src/dev-server/index.ts +++ b/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,11 +57,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; diff --git a/packages/custom-esbuild/src/load-index-html-transformer.spec.ts b/packages/custom-esbuild/src/load-index-html-transformer.spec.ts new file mode 100644 index 000000000..0d7307503 --- /dev/null +++ b/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); + }); +}); diff --git a/packages/custom-esbuild/src/load-index-html-transformer.ts b/packages/custom-esbuild/src/load-index-html-transformer.ts new file mode 100644 index 000000000..f62452261 --- /dev/null +++ b/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 { + const transformer = await loadModule<(indexHtml: string, target: Target) => Promise>( + indexHtmlTransformerPath, + tsConfig, + logger + ); + return (indexHtml: string) => transformer(indexHtml, target); +}