dev-server-esbuild: option to specify path to tsconfig file

modernweb-dev · Apr 29, 2022 · 4b6d92b · 4b6d92b
1 parent 7156b23
commit 4b6d92b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 3 deletions.
diff --git a/packages/dev-server-esbuild/src/EsbuildPlugin.ts b/packages/dev-server-esbuild/src/EsbuildPlugin.ts
@@ -6,6 +6,7 @@ import {
   DevServerCoreConfig,
   getRequestFilePath,
 } from '@web/dev-server-core';
+import type { TransformOptions } from 'esbuild';
 import { Loader, Message, transform } from 'esbuild';
 import { promisify } from 'util';
 import path from 'path';
@@ -39,6 +40,7 @@ export interface EsbuildConfig {
   jsxFactory?: string;
   jsxFragment?: string;
   define?: { [key: string]: string };
+  tsconfig?: string;
 }
 
 export class EsbuildPlugin implements Plugin {
@@ -164,17 +166,23 @@ export class EsbuildPlugin implements Plugin {
     target: string | string[],
   ): Promise<string> {
     try {
-      const { code: transformedCode, warnings } = await transform(code, {
+
+      const tsconfigRaw = this.esbuildConfig.tsconfig ? await promisify(fs.readFile)(this.esbuildConfig.tsconfig, 'utf8') : undefined;
+
+      const transformOptions: TransformOptions = {
         sourcefile: filePath,
         sourcemap: 'inline',
         loader,
         target,
-        // don't set any format for JS-like formats, otherwise esbuild reformats the code unnecesarily
+        // don't set any format for JS-like formats, otherwise esbuild reformats the code unnecessarily
         format: ['js', 'jsx', 'ts', 'tsx'].includes(loader) ? undefined : 'esm',
         jsxFactory: this.esbuildConfig.jsxFactory,
         jsxFragment: this.esbuildConfig.jsxFragment,
         define: this.esbuildConfig.define,
-      });
+        tsconfigRaw
+      };
+
+      const { code: transformedCode, warnings } = await transform(code, transformOptions);
 
       if (warnings) {
         const relativePath = path.relative(process.cwd(), filePath);

diff --git a/packages/dev-server-esbuild/src/esbuildPluginFactory.ts b/packages/dev-server-esbuild/src/esbuildPluginFactory.ts
@@ -13,6 +13,7 @@ export interface EsBuildPluginArgs {
   jsxFragment?: string;
   loaders?: Record<string, Loader>;
   define?: { [key: string]: string };
+  tsconfig?: string;
 }
 
 export function esbuildPlugin(args: EsBuildPluginArgs = {}): Plugin {
@@ -59,5 +60,6 @@ export function esbuildPlugin(args: EsBuildPluginArgs = {}): Plugin {
     jsxFactory: args.jsxFactory,
     jsxFragment: args.jsxFragment,
     define: args.define,
+    tsconfig: args.tsconfig,
   });
 }
diff --git a/packages/dev-server-esbuild/test/fixture/a/b/foo.ts b/packages/dev-server-esbuild/test/fixture/a/b/foo.ts
@@ -1,3 +1,5 @@
+// a comment
+
 import 'some-lib/some-file.js';
 import '../../x.js';
 import '../y.js';

diff --git a/packages/dev-server-esbuild/test/fixture/tsconfig.json b/packages/dev-server-esbuild/test/fixture/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "removeComments": false
+  }
+}
diff --git a/packages/dev-server-esbuild/test/ts.test.ts b/packages/dev-server-esbuild/test/ts.test.ts
@@ -243,4 +243,31 @@ class Bar {
       server.stop();
     }
   });
+
+
+  it.only('reads tsconfig.json file', async () => {
+    const { server, host } = await createTestServer({
+      rootDir: path.join(__dirname, 'fixture'),
+      plugins: [
+        {
+          name: 'test',
+        },
+        esbuildPlugin({ ts: true, tsconfig: path.join(__dirname, 'fixture', 'tsconfig.json') }),
+      ],
+    });
+
+    try {
+      const response = await fetch(`${host}/a/b/foo.ts`);
+      const text = await response.text();
+
+      expect(response.status).to.equal(200);
+      expect(response.headers.get('content-type')).to.equal(
+        'application/javascript; charset=utf-8',
+      );
+
+      expectIncludes(text, '// a comment');
+    } finally {
+      server.stop();
+    }
+  });
 });