feat(dev-server-esbuild): accept banner/footer setting to esbuild tra…

…nsformer (#2056)

.changeset/polite-monkeys-wink.md

@@ -0,0 +1,5 @@
+---
+'@web/dev-server-esbuild': minor
+---
+
+Expose banner/footer as a pass-through to esbuild transform

packages/dev-server-esbuild/src/EsbuildPlugin.ts

@@ -41,6 +41,8 @@ export interface EsbuildConfig {
   jsxFragment?: string;
   define?: { [key: string]: string };
   tsconfig?: string;
+  banner?: string;
+  footer?: string;
 }
 
 export class EsbuildPlugin implements Plugin {
@@ -181,6 +183,8 @@ export class EsbuildPlugin implements Plugin {
         jsxFragment: this.esbuildConfig.jsxFragment,
         define: this.esbuildConfig.define,
         tsconfigRaw: this.tsconfigRaw,
+        banner: this.esbuildConfig.banner,
+        footer: this.esbuildConfig.footer,
       };
 
       const { code: transformedCode, warnings } = await transform(code, transformOptions);

packages/dev-server-esbuild/src/esbuildPluginFactory.ts

@@ -14,6 +14,8 @@ export interface EsBuildPluginArgs {
   loaders?: Record<string, Loader>;
   define?: { [key: string]: string };
   tsconfig?: string;
+  banner?: string;
+  footer?: string;
 }
 
 export function esbuildPlugin(args: EsBuildPluginArgs = {}): Plugin {
@@ -61,5 +63,7 @@ export function esbuildPlugin(args: EsBuildPluginArgs = {}): Plugin {
     jsxFragment: args.jsxFragment,
     define: args.define,
     tsconfig: args.tsconfig,
+    banner: args.banner,
+    footer: args.footer,
   });
 }

packages/dev-server-esbuild/test/banner-footer.test.ts

@@ -0,0 +1,70 @@
+import { expect } from 'chai';
+import fetch from 'node-fetch';
+import { createTestServer } from '@web/dev-server-core/test-helpers';
+import { expectIncludes } from '@web/dev-server-core/test-helpers';
+
+import { esbuildPlugin } from '../src/index';
+
+describe('esbuildPlugin banner/footers', function () {
+  this.timeout(5000);
+
+  it('prepends custom banner', async () => {
+    const { server, host } = await createTestServer({
+      rootDir: __dirname,
+      plugins: [
+        {
+          name: 'test',
+          serve(context) {
+            if (context.path === '/foo.ts') {
+              return `export const foo = 5;`;
+            }
+          },
+        },
+        esbuildPlugin({ ts: true, banner: '/* hello there */' }),
+      ],
+    });
+
+    try {
+      const response = await fetch(`${host}/foo.ts`);
+      const text = await response.text();
+
+      const indexOfExpr = text.indexOf('export const foo = 5;');
+      const indexOfBanner = text.indexOf('/* hello there */');
+
+      expectIncludes(text, '/* hello there */');
+      expect(indexOfExpr).to.be.greaterThan(indexOfBanner);
+    } finally {
+      server.stop();
+    }
+  });
+
+  it('appends custom footer', async () => {
+    const { server, host } = await createTestServer({
+      rootDir: __dirname,
+      plugins: [
+        {
+          name: 'test',
+          serve(context) {
+            if (context.path === '/foo.ts') {
+              return `export const foo = 5;`;
+            }
+          },
+        },
+        esbuildPlugin({ ts: true, footer: '/* hello there */' }),
+      ],
+    });
+
+    try {
+      const response = await fetch(`${host}/foo.ts`);
+      const text = await response.text();
+
+      const indexOfExpr = text.indexOf('export const foo = 5;');
+      const indexOfFooter = text.indexOf('/* hello there */');
+
+      expectIncludes(text, '/* hello there */');
+      expect(indexOfFooter).to.be.greaterThan(indexOfExpr);
+    } finally {
+      server.stop();
+    }
+  });
+});