fix(pfe-tools): use WDS plugin for TS redirect instead of koa middleware

tools/pfe-tools/dev-server/config.ts

@@ -1,4 +1,4 @@
-import type { Plugin, Context, Middleware } from '@web/dev-server-core';
+import type { Plugin, Context } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
 
 import { readdir, stat } from 'node:fs/promises';
@@ -85,25 +85,19 @@ async function cacheBusterMiddleware(ctx: Context, next: () => Promise<any>) {
   }
 }
 
-function liveReloadTsChangesMiddleware(
+function tsRedirectPlugin(
   config: ReturnType<typeof normalizeOptions>,
-): Middleware {
-  /**
-   * capture group 1:
-   *   Either config.elementsDir or `pfe-core`
-   * `/`
-   * **ANY** (_>= 0x_)
-   * `.js`
-   */
-  const TYPESCRIPT_SOURCES_RE = new RegExp(`(${config.elementsDir}|pfe-core)/.*\\.js`);
-
-  return function(ctx, next) {
-    if (!ctx.path.includes('node_modules') && ctx.path
-        .match(TYPESCRIPT_SOURCES_RE)) {
-      ctx.redirect(ctx.path.replace('.js', '.ts'));
-    } else {
-      return next();
-    }
+): Plugin {
+  const TYPESCRIPT_SOURCES_RE = new RegExp(`(${config.elementsDir}|pfe-core)/.*\\.js$`);
+  return {
+    name: 'pfe-ts-redirect',
+    serve(context) {
+      if (!context.path.includes('node_modules')
+          && TYPESCRIPT_SOURCES_RE.test(context.path)) {
+        // Rewrite .js to .ts so esbuild plugin can compile it
+        context.path = context.path.replace(/\.js$/, '.ts');
+      }
+    },
   };
 }
 
@@ -124,11 +118,13 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
     middleware: [
       cors,
       cacheBusterMiddleware,
-      liveReloadTsChangesMiddleware(config),
       ...config?.middleware ?? [],
     ],
 
     plugins: [
+      // Rewrite .js paths to .ts before static file serving
+      tsRedirectPlugin(config),
+
       // Dev server app which loads component demo files
       pfeDevServerPlugin(config),