From 8224625188d5f2ce13595d2a03b9869df2755971 Mon Sep 17 00:00:00 2001
From: arturovt <arthurandrosovich@gmail.com>
Date: Mon, 4 Mar 2024 23:51:23 +0200
Subject: [PATCH] docs(custom-esbuild): align the HTML transformer signature
---
packages/custom-esbuild/README.md | 32 ++++++++++---------------------
1 file changed, 10 insertions(+), 22 deletions(-)
diff --git a/packages/custom-esbuild/README.md b/packages/custom-esbuild/README.md
index 878e2570d..18281226e 100644
--- a/packages/custom-esbuild/README.md
+++ b/packages/custom-esbuild/README.md
@@ -187,19 +187,10 @@ 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
-(options: TargetOptions, indexHtmlContent: string) => string | Promise<string>;
+(indexHtmlContent: string) => 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>`.
-`TargetOptions` follows `target` definition from [this](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/architect/src/input-schema.json) schema and looks like this:
-
-```typescript
-export interface Target {
- configuration?: string;
- project: string;
- target: 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>`.
It is useful when you want to transform your `index.html` according to the build options.
@@ -221,11 +212,12 @@ It is useful when you want to transform your `index.html` according to the build
`index-html-transformer.js`:
```js
-module.exports = (targetOptions, indexHtml) => {
+module.exports = indexHtml => {
+ const gitSha = process.env.GIT_SHA;
const i = indexHtml.indexOf('</body>');
- const config = `<p>Configuration: ${targetOptions.configuration}</p>`;
+ const lastCommitSha = `<p>Last commit SHA: ${gitSha}</p>`;
return `${indexHtml.slice(0, i)}
- ${config}
+ ${lastCommitSha}
${indexHtml.slice(i)}`;
};
```
@@ -233,16 +225,12 @@ module.exports = (targetOptions, indexHtml) => {
Alternatively, using TypeScript:
```ts
-import { Target } from '@angular-devkit/architect/src/input-schema';
-import { json } from '@angular-devkit/core';
-
-type TargetOptions = json.JsonObject & Target;
-
-export default (targetOptions: TargetOptions, indexHtml: string) => {
+export default (indexHtml: string) => {
+ const gitSha = process.env['GIT_SHA'];
const i = indexHtml.indexOf('</body>');
- const config = `<p>Configuration: ${targetOptions.configuration}</p>`;
+ const lastCommitSha = `<p>Last commit SHA1: ${gitSha}</p>`;
return `${indexHtml.slice(0, i)}
- ${config}
+ ${lastCommitSha}
${indexHtml.slice(i)}`;
};
```