feat(custom-esbuild): allow exporting list of plugins (#1658)

arturovt · web-flow · commit 08c3bde178ae · 2024-02-04T15:00:13.000+02:00
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/e2e/src/app.e2e-spec.ts b/examples/custom-esbuild/sanity-esbuild-app-esm/e2e/src/app.e2e-spec.ts
@@ -9,12 +9,10 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
+    page.getTitle().should('have.text', 'sanity-esbuild-app-esm (compilation provided)');
     page
-      .getTitle()
-      .should(
-        'have.text',
-        'Welcome to sanity-esbuild-app-esm: This text is provided during the compilation!'
-      );
+      .getSubtitle()
+      .should('have.text', 'sanity-esbuild-app-esm subtitle (compilation provided)');
   });
 
   it('should display text from custom middleware', () => {
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/e2e/src/app.po.ts b/examples/custom-esbuild/sanity-esbuild-app-esm/e2e/src/app.po.ts
@@ -6,4 +6,8 @@ export class AppPage {
   getTitle() {
     return cy.get('app-root h1');
   }
+
+  getSubtitle() {
+    return cy.get('app-root h2');
+  }
 }
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/esbuild/define-text-plugin.cjs b/examples/custom-esbuild/sanity-esbuild-app-esm/esbuild/define-text-plugin.cjs
@@ -1,9 +1,19 @@
-const defineTextPlugin = {
-  name: 'define-text',
+const defineTitlePlugin = {
+  name: 'define-title',
   setup(build) {
     const options = build.initialOptions;
-    options.define.buildText = JSON.stringify('This text is provided during the compilation');
+    options.define.title = JSON.stringify('sanity-esbuild-app-esm (compilation provided)');
   },
 };
 
-module.exports = defineTextPlugin;
+const defineSubtitlePlugin = {
+  name: 'define-subtitle',
+  setup(build) {
+    const options = build.initialOptions;
+    options.define.subtitle = JSON.stringify(
+      'sanity-esbuild-app-esm subtitle (compilation provided)'
+    );
+  },
+};
+
+module.exports = [defineTitlePlugin, defineSubtitlePlugin];
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/esbuild/define-text-plugin.js b/examples/custom-esbuild/sanity-esbuild-app-esm/esbuild/define-text-plugin.js
@@ -1,9 +1,19 @@
-const defineTextPlugin = {
-  name: 'define-text',
+const defineTitlePlugin = {
+  name: 'define-title',
   setup(build) {
     const options = build.initialOptions;
-    options.define.buildText = JSON.stringify('This text is provided during the compilation');
+    options.define.title = JSON.stringify('sanity-esbuild-app-esm (compilation provided)');
   },
 };
 
-export default defineTextPlugin;
+const defineSubtitlePlugin = {
+  name: 'define-subtitle',
+  setup(build) {
+    const options = build.initialOptions;
+    options.define.subtitle = JSON.stringify(
+      'sanity-esbuild-app-esm subtitle (compilation provided)'
+    );
+  },
+};
+
+export default [defineTitlePlugin, defineSubtitlePlugin];
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/esbuild/define-text-plugin.ts b/examples/custom-esbuild/sanity-esbuild-app-esm/esbuild/define-text-plugin.ts
@@ -1,11 +1,21 @@
 import type { Plugin, PluginBuild } from 'esbuild';
 
-const defineTextPlugin: Plugin = {
-  name: 'define-text',
+const defineTitlePlugin: Plugin = {
+  name: 'define-title',
   setup(build: PluginBuild) {
     const options = build.initialOptions;
-    options.define!['buildText'] = JSON.stringify('This text is provided during the compilation');
+    options.define!['title'] = JSON.stringify('sanity-esbuild-app-esm (compilation provided)');
   },
 };
 
-export default defineTextPlugin;
+const defineSubtitlePlugin: Plugin = {
+  name: 'define-subtitle',
+  setup(build: PluginBuild) {
+    const options = build.initialOptions;
+    options.define!['subtitle'] = JSON.stringify(
+      'sanity-esbuild-app-esm subtitle (compilation provided)'
+    );
+  },
+};
+
+export default [defineTitlePlugin, defineSubtitlePlugin];
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/src/app/app.component.html b/examples/custom-esbuild/sanity-esbuild-app-esm/src/app/app.component.html
@@ -1,21 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align: center">
-  <h1>Welcome to {{ title }}!</h1>
-  <img
-    width="300"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-</div>
-<h2>Here are some links to help you start:</h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h1>{{ title }}</h1>
+<h2>{{ subtitle }}</h2>
diff --git a/examples/custom-esbuild/sanity-esbuild-app-esm/src/app/app.component.ts b/examples/custom-esbuild/sanity-esbuild-app-esm/src/app/app.component.ts
@@ -1,17 +1,20 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
-declare const buildText: string;
+declare const title: string;
+declare const subtitle: string;
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [CommonModule],
 })
 export class AppComponent {
-  buildText = typeof buildText !== 'undefined' ? buildText : '';
+  title: string;
+  subtitle: string;
 
-  title = this.buildText ? `sanity-esbuild-app-esm: ${this.buildText}` : 'sanity-esbuild-app-esm';
+  constructor() {
+    this.title = typeof title !== 'undefined' ? title : 'sanity-esbuild-app-esm';
+    this.subtitle = typeof subtitle !== 'undefined' ? subtitle : 'sanity-esbuild-app-esm subtitle';
+  }
 }
diff --git a/examples/custom-esbuild/sanity-esbuild-app/e2e/src/app.e2e-spec.ts b/examples/custom-esbuild/sanity-esbuild-app/e2e/src/app.e2e-spec.ts
@@ -9,12 +9,8 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    page
-      .getTitle()
-      .should(
-        'have.text',
-        'Welcome to sanity-esbuild-app: This text is provided during the compilation!'
-      );
+    page.getTitle().should('have.text', 'sanity-esbuild-app (compilation provided)');
+    page.getSubtitle().should('have.text', 'sanity-esbuild-app subtitle (compilation provided)');
   });
 
   it('should display text from custom middleware', () => {
diff --git a/examples/custom-esbuild/sanity-esbuild-app/e2e/src/app.po.ts b/examples/custom-esbuild/sanity-esbuild-app/e2e/src/app.po.ts
@@ -6,4 +6,8 @@ export class AppPage {
   getTitle() {
     return cy.get('app-root h1');
   }
+
+  getSubtitle() {
+    return cy.get('app-root h2');
+  }
 }
diff --git a/examples/custom-esbuild/sanity-esbuild-app/esbuild/define-text-plugin.js b/examples/custom-esbuild/sanity-esbuild-app/esbuild/define-text-plugin.js
@@ -1,9 +1,17 @@
-const defineTextPlugin = {
-  name: 'define-text',
+const defineTitlePlugin = {
+  name: 'define-title',
   setup(build) {
     const options = build.initialOptions;
-    options.define.buildText = JSON.stringify('This text is provided during the compilation');
+    options.define.title = JSON.stringify('sanity-esbuild-app (compilation provided)');
   },
 };
 
-module.exports = defineTextPlugin;
+const defineSubtitlePlugin = {
+  name: 'define-subtitle',
+  setup(build) {
+    const options = build.initialOptions;
+    options.define.subtitle = JSON.stringify('sanity-esbuild-app subtitle (compilation provided)');
+  },
+};
+
+module.exports = [defineTitlePlugin, defineSubtitlePlugin];
diff --git a/examples/custom-esbuild/sanity-esbuild-app/esbuild/define-text-plugin.mjs b/examples/custom-esbuild/sanity-esbuild-app/esbuild/define-text-plugin.mjs
@@ -1,9 +1,17 @@
-const defineTextPlugin = {
-  name: 'define-text',
+const defineTitlePlugin = {
+  name: 'define-title',
   setup(build) {
     const options = build.initialOptions;
-    options.define.buildText = JSON.stringify('This text is provided during the compilation');
+    options.define.title = JSON.stringify('sanity-esbuild-app (compilation provided)');
   },
 };
 
-export default defineTextPlugin;
+const defineSubtitlePlugin = {
+  name: 'define-subtitle',
+  setup(build) {
+    const options = build.initialOptions;
+    options.define.subtitle = JSON.stringify('sanity-esbuild-app subtitle (compilation provided)');
+  },
+};
+
+export default [defineTitlePlugin, defineSubtitlePlugin];
diff --git a/examples/custom-esbuild/sanity-esbuild-app/src/app/app.component.html b/examples/custom-esbuild/sanity-esbuild-app/src/app/app.component.html
@@ -1,21 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align: center">
-  <h1>Welcome to {{ title }}!</h1>
-  <img
-    width="300"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-</div>
-<h2>Here are some links to help you start:</h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h1>{{ title }}</h1>
+<h2>{{ subtitle }}</h2>
diff --git a/examples/custom-esbuild/sanity-esbuild-app/src/app/app.component.spec.ts b/examples/custom-esbuild/sanity-esbuild-app/src/app/app.component.spec.ts
@@ -24,6 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to sanity-esbuild-app!');
+    expect(compiled.querySelector('h1').textContent).toContain('sanity-esbuild-app');
   });
 });
diff --git a/examples/custom-esbuild/sanity-esbuild-app/src/app/app.component.ts b/examples/custom-esbuild/sanity-esbuild-app/src/app/app.component.ts
@@ -1,17 +1,20 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
-declare const buildText: string;
+declare const title: string;
+declare const subtitle: string;
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [CommonModule],
 })
 export class AppComponent {
-  buildText = typeof buildText !== 'undefined' ? buildText : '';
+  title: string;
+  subtitle: string;
 
-  title = this.buildText ? `sanity-esbuild-app: ${this.buildText}` : 'sanity-esbuild-app';
+  constructor() {
+    this.title = typeof title !== 'undefined' ? title : 'sanity-esbuild-app';
+    this.subtitle = typeof subtitle !== 'undefined' ? subtitle : 'sanity-esbuild-app subtitle';
+  }
 }
diff --git a/packages/custom-esbuild/README.md b/packages/custom-esbuild/README.md
@@ -100,7 +100,7 @@ Builder options:
   "build": {
     "builder": "@angular-builders/custom-esbuild:application",
     "options": {
-      "plugins": ["./esbuild/plugin-1.js", "./esbuild/plugin-2.js"],
+      "plugins": ["./esbuild/plugins.ts", "./esbuild/plugin-2.js"],
       "indexHtmlTransformer": "./esbuild/index-html-transformer.js",
       "outputPath": "dist/my-cool-client",
       "index": "src/index.html",
@@ -112,6 +112,49 @@ Builder options:
 
 In the above example, we specify the list of `plugins` that should implement the ESBuild plugin schema. These plugins are custom user plugins and are added to the original ESBuild Angular configuration. Additionally, the `indexHtmlTransformer` property is used to specify the path to the file that exports the function used to modify the `index.html`.
 
+The plugin file can export either a single plugin or a list of plugins:
+
+```ts
+// esbuild/plugins.ts
+import type { Plugin, PluginBuild } from 'esbuild';
+
+const defineTextPlugin: Plugin = {
+  name: 'define-text',
+  setup(build: PluginBuild) {
+    const options = build.initialOptions;
+    options.define.buildText = JSON.stringify('This text is provided during the compilation');
+  },
+};
+
+export default defineTextPlugin;
+```
+
+Or:
+
+```ts
+// esbuild/plugins.ts
+import type { Plugin, PluginBuild } from 'esbuild';
+
+const defineTextPlugin: Plugin = {
+  name: 'define-text',
+  setup(build: PluginBuild) {
+    const options = build.initialOptions;
+    options.define.buildText = JSON.stringify('This text is provided during the compilation');
+  },
+};
+
+const updateExternalPlugin: Plugin = {
+  name: 'update-external',
+  setup(build: PluginBuild) {
+    const options = build.initialOptions;
+    options.external ??= [];
+    options.external.push('elysia');
+  },
+};
+
+export default [defineTextPlugin, updateExternalPlugin];
+```
+
 ## Custom ESBuild `dev-server`
 
 The `@angular-builders/custom-esbuild:dev-server` is an enhanced version of the `@angular-devkit/build-angular:dev-server` builder that allows the specification of `middlewares` (Vite's `Connect` functions). It also obtains `plugins` and `indexHtmlTransformer` from the `:application` configuration to run the Vite server with all the necessary configuration applied.
diff --git a/packages/custom-esbuild/src/application/index.ts b/packages/custom-esbuild/src/application/index.ts
@@ -1,25 +1,23 @@
+import * as path from 'node:path';
 import { BuilderContext, createBuilder } from '@angular-devkit/architect';
 import { buildApplication } from '@angular-devkit/build-angular';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { ApplicationBuilderExtensions } from '@angular-devkit/build-angular/src/builders/application/options';
 import { defer, switchMap } from 'rxjs';
-import type { Plugin } from 'esbuild';
 
 import { loadModule } from '../utils';
+import { loadPlugins } from '../load-plugins';
 import { CustomEsbuildApplicationSchema } from '../custom-esbuild-schema';
 
 export function buildCustomEsbuildApplication(
   options: CustomEsbuildApplicationSchema,
   context: BuilderContext
 ) {
   const workspaceRoot = normalize(context.workspaceRoot);
-  const tsConfig = `${getSystemPath(workspaceRoot)}/${options.tsConfig}`;
+  const tsConfig = path.join(getSystemPath(workspaceRoot), options.tsConfig);
 
   return defer(async () => {
-    const paths = options.plugins || [];
-    const codePlugins = await Promise.all(
-      paths.map(path => loadModule<Plugin>(workspaceRoot, path, tsConfig, context.logger))
-    );
+    const codePlugins = await loadPlugins(options.plugins, workspaceRoot, tsConfig, context.logger);
 
     const indexHtmlTransformer = options.indexHtmlTransformer
       ? await loadModule(workspaceRoot, options.indexHtmlTransformer, tsConfig, context.logger)
diff --git a/packages/custom-esbuild/src/dev-server/index.ts b/packages/custom-esbuild/src/dev-server/index.ts
@@ -8,10 +8,10 @@ import {
 import { IndexHtmlTransform } from '@angular-devkit/build-angular/src/utils/index-file/index-html-generator';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { Observable, from, switchMap } from 'rxjs';
-import type { Plugin } from 'esbuild';
 import type { Connect } from 'vite';
 
 import { loadModule } from '../utils';
+import { loadPlugins } from '../load-plugins';
 import { patchBuilderContext } from './patch-builder-context';
 import {
   CustomEsbuildApplicationSchema,
@@ -46,10 +46,11 @@ export function executeCustomDevServerBuilder(
         )
       );
 
-      const buildPlugins = await Promise.all(
-        (buildOptions.plugins || []).map(path =>
-          loadModule<Plugin>(workspaceRoot, path, tsConfig, context.logger)
-        )
+      const buildPlugins = await loadPlugins(
+        buildOptions.plugins,
+        workspaceRoot,
+        tsConfig,
+        context.logger
       );
 
       const indexHtmlTransformer: IndexHtmlTransform = buildOptions.indexHtmlTransformer
diff --git a/packages/custom-esbuild/src/load-plugins.ts b/packages/custom-esbuild/src/load-plugins.ts

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,8 @@ export class AppPage {`
`6`	`6`	`getTitle() {`
`7`	`7`	`return cy.get('app-root h1');`
`8`	`8`	`}`
	`9`	`+`
	`10`	`+ getSubtitle() {`
	`11`	`+ return cy.get('app-root h2');`
	`12`	`+ }`
`9`	`13`	`}`