chore: added esbuild plugin to support ts for local dev and test

hsuehic · hsuehic · commit 7d7ef8fe8e8d · 2023-03-21T18:37:19.000+08:00
diff --git a/dev/index.html b/dev/index.html
@@ -4,9 +4,7 @@
   <head>
     <meta charset="utf-8" />
     <title>&lt;my-element> Demo</title>
-    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="../node_modules/lit/polyfill-support.js"></script>
-    <script type="module" src="../my-element.js"></script>
+    <script type="module" src="../src/my-element.ts"></script>
     <style>
       p {
         border: solid 1px blue;
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "@web/dev-server": "^0.1.31",
+    "@web/dev-server-esbuild": "^0.3.4",
     "@web/dev-server-legacy": "^1.0.0",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
@@ -5,6 +5,7 @@
  */
 
 import {legacyPlugin} from '@web/dev-server-legacy';
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 
 const mode = process.env.MODE || 'dev';
 if (!['dev', 'prod'].includes(mode)) {
@@ -15,6 +16,15 @@ export default {
   nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
   preserveSymlinks: true,
   plugins: [
+    esbuildPlugin({
+      js: true,
+      jsx: true,
+      ts: true,
+      tsx: true,
+      jsxFactory: 'React.createElement',
+      jsxFragment: 'Fragment',
+      target: 'es2020',
+    }),
     legacyPlugin({
       polyfills: {
         // Manually imported in index.html file
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {legacyPlugin} from '@web/dev-server-legacy';
+import { legacyPlugin } from '@web/dev-server-legacy';
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 import {playwrightLauncher} from '@web/test-runner-playwright';
 
 const mode = process.env.MODE || 'dev';
@@ -91,7 +92,7 @@ try {
 // https://modern-web.dev/docs/test-runner/cli-and-configuration/
 export default {
   rootDir: '.',
-  files: ['./test/**/*_test.js'],
+  files: ['./src/test/**/*_test.ts'],
   nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
   preserveSymlinks: true,
   browsers: commandLineBrowsers ?? Object.values(browsers),
@@ -120,5 +121,9 @@ export default {
         ],
       },
     }),
+    esbuildPlugin({
+      ts: true,
+      target: 'es2020',
+    }),
   ],
 };
