Skip to content

Commit 4b95cc3

Browse files
committed
fix(pfe-tools): use WDS plugin for TS redirect instead of koa middleware
The liveReloadTsChangesMiddleware ran as koa middleware, which executes AFTER WDS static file serving (koa-send). When a .js file didn't exist on disk, koa-send returned 404 before the middleware could redirect to the .ts source. Convert to a WDS plugin with a serve hook, which runs BEFORE static file resolution. This fixes 404 errors for elements that only have .ts source files (no pre-compiled .js). Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2914145 commit 4b95cc3

1 file changed

Lines changed: 16 additions & 20 deletions

File tree

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

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Plugin, Context, Middleware } from '@web/dev-server-core';
1+
import type { Plugin, Context } from '@web/dev-server-core';
22
import type { DevServerConfig } from '@web/dev-server';
33

44
import { readdir, stat } from 'node:fs/promises';
@@ -85,25 +85,19 @@ async function cacheBusterMiddleware(ctx: Context, next: () => Promise<any>) {
8585
}
8686
}
8787

88-
function liveReloadTsChangesMiddleware(
88+
function tsRedirectPlugin(
8989
config: ReturnType<typeof normalizeOptions>,
90-
): Middleware {
91-
/**
92-
* capture group 1:
93-
* Either config.elementsDir or `pfe-core`
94-
* `/`
95-
* **ANY** (_>= 0x_)
96-
* `.js`
97-
*/
98-
const TYPESCRIPT_SOURCES_RE = new RegExp(`(${config.elementsDir}|pfe-core)/.*\\.js`);
99-
100-
return function(ctx, next) {
101-
if (!ctx.path.includes('node_modules') && ctx.path
102-
.match(TYPESCRIPT_SOURCES_RE)) {
103-
ctx.redirect(ctx.path.replace('.js', '.ts'));
104-
} else {
105-
return next();
106-
}
90+
): Plugin {
91+
const TYPESCRIPT_SOURCES_RE = new RegExp(`(${config.elementsDir}|pfe-core)/.*\\.js$`);
92+
return {
93+
name: 'pfe-ts-redirect',
94+
serve(context) {
95+
if (!context.path.includes('node_modules')
96+
&& TYPESCRIPT_SOURCES_RE.test(context.path)) {
97+
// Rewrite .js to .ts so esbuild plugin can compile it
98+
context.path = context.path.replace(/\.js$/, '.ts');
99+
}
100+
},
107101
};
108102
}
109103

@@ -124,11 +118,13 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
124118
middleware: [
125119
cors,
126120
cacheBusterMiddleware,
127-
liveReloadTsChangesMiddleware(config),
128121
...config?.middleware ?? [],
129122
],
130123

131124
plugins: [
125+
// Rewrite .js paths to .ts before static file serving
126+
tsRedirectPlugin(config),
127+
132128
// Dev server app which loads component demo files
133129
pfeDevServerPlugin(config),
134130

0 commit comments

Comments
 (0)