@webstir-io/webstir 0.1.1 → 0.1.3

package/src/compile-tests.ts

@@ -6,41 +6,46 @@ import ts from 'typescript';
 import type { TestModule } from '@webstir-io/webstir-testing';
 
 const TESTING_PACKAGE_SPECIFIER = '@webstir-io/webstir-testing';
-const TESTING_RUNTIME_SPECIFIER = import.meta.resolve(TESTING_PACKAGE_SPECIFIER);
+const TESTING_RUNTIME_SPECIFIER = import.meta.resolve('./testing-runtime.ts');
 
-export async function compileTestModules(workspaceRoot: string, modules: readonly TestModule[]): Promise<void> {
+export async function compileTestModules(
+  workspaceRoot: string,
+  modules: readonly TestModule[],
+): Promise<void> {
   const shimPath = await ensureTestingRuntimeShim(workspaceRoot);
 
-  await Promise.all(modules.map(async (module) => {
-    if (!module.compiledPath) {
-      return;
-    }
+  await Promise.all(
+    modules.map(async (module) => {
+      if (!module.compiledPath) {
+        return;
+      }
 
-    await mkdir(path.dirname(module.compiledPath), { recursive: true });
+      await mkdir(path.dirname(module.compiledPath), { recursive: true });
+
+      if (module.sourcePath.endsWith('.js')) {
+        const source = await readFile(module.sourcePath, 'utf8');
+        const rewritten = rewriteTestingImports(source, module.compiledPath, shimPath);
+        await writeFile(module.compiledPath, rewritten, 'utf8');
+        return;
+      }
 
-    if (module.sourcePath.endsWith('.js')) {
       const source = await readFile(module.sourcePath, 'utf8');
-      const rewritten = rewriteTestingImports(source, module.compiledPath, shimPath);
+      const output = ts.transpileModule(source, {
+        fileName: module.sourcePath,
+        compilerOptions: {
+          target: ts.ScriptTarget.ES2022,
+          module: ts.ModuleKind.ESNext,
+          moduleResolution: ts.ModuleResolutionKind.Bundler,
+          verbatimModuleSyntax: true,
+          rewriteRelativeImportExtensions: true,
+        },
+        reportDiagnostics: false,
+      });
+
+      const rewritten = rewriteTestingImports(output.outputText, module.compiledPath, shimPath);
       await writeFile(module.compiledPath, rewritten, 'utf8');
-      return;
-    }
-
-    const source = await readFile(module.sourcePath, 'utf8');
-    const output = ts.transpileModule(source, {
-      fileName: module.sourcePath,
-      compilerOptions: {
-        target: ts.ScriptTarget.ES2022,
-        module: ts.ModuleKind.ESNext,
-        moduleResolution: ts.ModuleResolutionKind.Bundler,
-        verbatimModuleSyntax: true,
-        rewriteRelativeImportExtensions: true,
-      },
-      reportDiagnostics: false,
-    });
-
-    const rewritten = rewriteTestingImports(output.outputText, module.compiledPath, shimPath);
-    await writeFile(module.compiledPath, rewritten, 'utf8');
-  }));
+    }),
+  );
 }
 
 async function ensureTestingRuntimeShim(workspaceRoot: string): Promise<string> {
@@ -52,7 +57,10 @@ async function ensureTestingRuntimeShim(workspaceRoot: string): Promise<string>
 }
 
 function rewriteTestingImports(source: string, compiledPath: string, shimPath: string): string {
-  const relativeShim = path.relative(path.dirname(compiledPath), shimPath).split(path.sep).join('/');
+  const relativeShim = path
+    .relative(path.dirname(compiledPath), shimPath)
+    .split(path.sep)
+    .join('/');
   const specifier = relativeShim.startsWith('.') ? relativeShim : `./${relativeShim}`;
 
   return source

package/src/dev-server.ts

@@ -1,6 +1,4 @@
 import path from 'node:path';
-import http, { type IncomingMessage, type ServerResponse } from 'node:http';
-import { createReadStream } from 'node:fs';
 import { access } from 'node:fs/promises';
 
 import type { HotUpdatePayload, WatchStatus } from './watch-events.ts';
@@ -41,14 +39,39 @@ const MIME_TYPES: Record<string, string> = {
 
 const RESERVED_PREFIXES = ['__webstir', 'api', 'fonts', 'images', 'media', 'pages', 'sse'];
 const STATIC_EXTENSIONS = new Set([
-  '.css', '.js', '.mjs', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico',
-  '.woff', '.woff2', '.ttf', '.otf', '.eot', '.mp3', '.m4a', '.wav', '.ogg', '.mp4',
-  '.webm', '.mov', '.json', '.txt', '.xml', '.map',
+  '.css',
+  '.js',
+  '.mjs',
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.svg',
+  '.webp',
+  '.ico',
+  '.woff',
+  '.woff2',
+  '.ttf',
+  '.otf',
+  '.eot',
+  '.mp3',
+  '.m4a',
+  '.wav',
+  '.ogg',
+  '.mp4',
+  '.webm',
+  '.mov',
+  '.json',
+  '.txt',
+  '.xml',
+  '.map',
 ]);
-const CONTENT_HASH_PATTERN = /\.[a-f0-9]{8,64}\.(css|js|png|jpg|jpeg|gif|svg|webp|ico|woff2?|ttf|otf|eot|mp3|m4a|wav|ogg|mp4|webm|mov)$/i;
+const CONTENT_HASH_PATTERN =
+  /\.[a-f0-9]{8,64}\.(css|js|png|jpg|jpeg|gif|svg|webp|ico|woff2?|ttf|otf|eot|mp3|m4a|wav|ogg|mp4|webm|mov)$/i;
 
 interface SseClient {
-  readonly response: ServerResponse<IncomingMessage>;
+  send(message: string): void;
+  close(): void;
 }
 
 export class DevServer {
@@ -57,7 +80,7 @@ export class DevServer {
   private readonly port: number;
   private readonly apiProxyOrigin?: string;
   private readonly clients = new Set<SseClient>();
-  private server?: http.Server;
+  private server?: ReturnType<typeof Bun.serve>;
 
   public constructor(options: DevServerOptions) {
     this.buildRoot = path.resolve(options.buildRoot);
@@ -71,16 +94,13 @@ export class DevServer {
       return this.getAddress();
     }
 
-    this.server = http.createServer((request, response) => {
-      void this.handleRequest(request, response);
-    });
-
-    await new Promise<void>((resolve, reject) => {
-      this.server!.once('error', reject);
-      this.server!.listen(this.port, this.host, () => {
-        this.server!.off('error', reject);
-        resolve();
-      });
+    this.server = Bun.serve({
+      hostname: this.host,
+      idleTimeout: 0,
+      port: this.port,
+      fetch: (request) => {
+        return this.handleRequest(request);
+      },
     });
 
     return this.getAddress();
@@ -90,7 +110,7 @@ export class DevServer {
     await this.broadcastRaw('data: shutdown\n\n');
 
     for (const client of this.clients) {
-      client.response.end();
+      client.close();
     }
     this.clients.clear();
 
@@ -100,16 +120,7 @@ export class DevServer {
 
     const server = this.server;
     this.server = undefined;
-    await new Promise<void>((resolve, reject) => {
-      server.close((error) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-
-        resolve();
-      });
-    });
+    server.stop();
   }
 
   public async publishStatus(status: WatchStatus): Promise<void> {
@@ -129,139 +140,127 @@ export class DevServer {
       throw new Error('Dev server has not started.');
     }
 
-    const address = this.server.address();
-    if (!address || typeof address === 'string') {
-      throw new Error('Dev server did not expose a TCP address.');
-    }
-
     const originHost = this.host === '0.0.0.0' ? '127.0.0.1' : this.host;
     return {
       host: originHost,
-      port: address.port,
-      origin: `http://${originHost}:${address.port}`,
+      port: this.server.port,
+      origin: `http://${originHost}:${this.server.port}`,
     };
   }
 
-  private async handleRequest(
-    request: IncomingMessage,
-    response: ServerResponse<IncomingMessage>
-  ): Promise<void> {
-    if (!request.url) {
-      this.writeText(response, 400, 'Bad request.');
-      return;
-    }
-
-    const method = request.method ?? 'GET';
-
-    const requestUrl = new URL(request.url, 'http://localhost');
+  private async handleRequest(request: Request): Promise<Response> {
+    const method = request.method || 'GET';
+    const requestUrl = new URL(request.url);
     const { pathname } = requestUrl;
+
     if (pathname === '/sse') {
-      this.handleSse(response);
-      return;
+      return this.handleSse(request);
     }
 
     const apiProxyPath = getApiProxyPath(pathname);
     if (apiProxyPath !== null && this.apiProxyOrigin) {
-      await this.handleApiProxy(request, response, requestUrl, apiProxyPath);
-      return;
+      return await this.handleApiProxy(request, requestUrl, apiProxyPath);
     }
 
     if (method !== 'GET' && method !== 'HEAD') {
-      this.writeText(response, 405, 'Method not allowed.');
-      return;
+      return textResponse(405, 'Method not allowed.');
     }
 
     const candidates = getStaticCandidatePaths(pathname);
     const resolved = await resolveStaticFile(this.buildRoot, candidates);
     if (!resolved) {
-      this.writeText(response, 404, 'Not found.');
-      return;
+      return textResponse(404, 'Not found.');
     }
 
     const lowerRelativePath = resolved.relativePath.toLowerCase();
     const extension = path.extname(lowerRelativePath).toLowerCase();
-    response.setHeader('Content-Type', MIME_TYPES[extension] ?? 'application/octet-stream');
-    setCacheHeaders(response, lowerRelativePath);
+    const headers = new Headers({
+      'Content-Type': MIME_TYPES[extension] ?? 'application/octet-stream',
+    });
+    setCacheHeaders(headers, lowerRelativePath);
 
     if (method === 'HEAD') {
-      response.statusCode = 200;
-      response.end();
-      return;
+      return new Response(null, {
+        status: 200,
+        headers,
+      });
     }
 
-    const stream = createReadStream(resolved.absolutePath);
-    stream.once('error', () => {
-      if (!response.headersSent) {
-        this.writeText(response, 500, 'Failed to read file.');
-      } else {
-        response.destroy();
-      }
+    return new Response(Bun.file(resolved.absolutePath), {
+      status: 200,
+      headers,
     });
-    stream.pipe(response);
   }
 
   private async handleApiProxy(
-    request: IncomingMessage,
-    response: ServerResponse<IncomingMessage>,
+    request: Request,
     requestUrl: URL,
-    apiProxyPath: string
-  ): Promise<void> {
+    apiProxyPath: string,
+  ): Promise<Response> {
     const targetUrl = new URL(apiProxyPath + requestUrl.search, this.apiProxyOrigin);
 
-    await new Promise<void>((resolve) => {
-      const proxyRequest = http.request(targetUrl, {
-        agent: false,
-        method: request.method,
-        headers: {
-          ...request.headers,
-          host: targetUrl.host,
-          connection: 'close',
-        },
-      }, (proxyResponse) => {
-        response.writeHead(proxyResponse.statusCode ?? 502, proxyResponse.headers);
-        proxyResponse.pipe(response);
-        proxyResponse.once('end', resolve);
-        proxyResponse.once('error', () => {
-          if (!response.headersSent) {
-            this.writeText(response, 502, 'Backend proxy read failed.');
-          } else {
-            response.destroy();
-          }
-          resolve();
-        });
-      });
+    try {
+      const requestInit = createProxyRequestInit(request, targetUrl);
+      const proxyResponse = await fetch(targetUrl, requestInit);
+      const headers = rewriteProxyResponseHeaders(proxyResponse.headers, targetUrl);
 
-      proxyRequest.once('error', () => {
-        if (!response.headersSent) {
-          this.writeText(response, 502, 'Backend proxy failed.');
-        } else {
-          response.destroy();
-        }
-        resolve();
+      return new Response(request.method !== 'HEAD' ? proxyResponse.body : null, {
+        status: proxyResponse.status || 502,
+        headers,
       });
+    } catch {
+      return textResponse(502, 'Backend proxy failed.');
+    }
+  }
 
-      if (request.method === 'GET' || request.method === 'HEAD') {
-        proxyRequest.end();
-        return;
-      }
+  private handleSse(request: Request): Response {
+    const encoder = new TextEncoder();
+    let client: SseClient | undefined;
 
-      request.pipe(proxyRequest);
-    });
-  }
+    const stream = new ReadableStream<Uint8Array>({
+      start: (controller) => {
+        const cleanup = () => {
+          if (!client) {
+            return;
+          }
 
-  private handleSse(response: ServerResponse<IncomingMessage>): void {
-    response.writeHead(200, {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      Connection: 'keep-alive',
+          this.clients.delete(client);
+          try {
+            controller.close();
+          } catch {
+            // The stream is already closed.
+          }
+          request.signal.removeEventListener('abort', cleanup);
+          client = undefined;
+        };
+
+        client = {
+          send: (message) => {
+            try {
+              controller.enqueue(encoder.encode(message));
+            } catch {
+              cleanup();
+            }
+          },
+          close: cleanup,
+        };
+
+        this.clients.add(client);
+        controller.enqueue(encoder.encode('\n'));
+        request.signal.addEventListener('abort', cleanup, { once: true });
+      },
+      cancel: () => {
+        client?.close();
+      },
     });
 
-    const client = { response };
-    this.clients.add(client);
-    response.write('\n');
-
-    response.once('close', () => {
-      this.clients.delete(client);
+    return new Response(stream, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      },
     });
   }
 
@@ -272,22 +271,13 @@ export class DevServer {
   private async broadcastRaw(message: string): Promise<void> {
     for (const client of Array.from(this.clients)) {
       try {
-        client.response.write(message);
+        client.send(message);
       } catch {
+        client.close();
         this.clients.delete(client);
       }
     }
   }
-
-  private writeText(
-    response: ServerResponse<IncomingMessage>,
-    statusCode: number,
-    body: string
-  ): void {
-    response.statusCode = statusCode;
-    response.setHeader('Content-Type', 'text/plain; charset=utf-8');
-    response.end(body);
-  }
 }
 
 export function getStaticCandidatePaths(pathname: string): readonly string[] {
@@ -309,7 +299,7 @@ export function getStaticCandidatePaths(pathname: string): readonly string[] {
     candidates.push(path.posix.join('pages', relativePath, 'index.html'));
   }
 
-  return Array.from(new Set(candidates.map(candidate => candidate.replace(/^\/+/, ''))));
+  return Array.from(new Set(candidates.map((candidate) => candidate.replace(/^\/+/, ''))));
 }
 
 export function getApiProxyPath(pathname: string): string | null {
@@ -325,9 +315,73 @@ export function getApiProxyPath(pathname: string): string | null {
   return null;
 }
 
+function rewriteProxyResponseHeaders(headers: Headers, targetUrl: URL): Headers {
+  const nextHeaders = new Headers(headers);
+  const location = headers.get('location');
+  if (location) {
+    nextHeaders.set('location', rewriteProxyLocation(location, targetUrl));
+  }
+
+  return nextHeaders;
+}
+
+function createProxyRequestInit(
+  request: Request,
+  targetUrl: URL,
+): RequestInit & { duplex?: 'half' } {
+  const headers = new Headers(request.headers);
+  headers.set('host', targetUrl.host);
+  headers.set('connection', 'close');
+
+  const requestInit: RequestInit & { duplex?: 'half' } = {
+    method: request.method,
+    headers,
+    redirect: 'manual',
+    signal: request.signal,
+  };
+
+  if (methodAllowsBody(request.method)) {
+    requestInit.body = request.body;
+    if (request.body) {
+      requestInit.duplex = 'half';
+    }
+  }
+
+  return requestInit;
+}
+
+function rewriteProxyLocation(value: string, targetUrl: URL): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return value;
+  }
+
+  if (trimmed.startsWith('/')) {
+    return prefixApiMount(trimmed);
+  }
+
+  try {
+    const resolved = new URL(trimmed, targetUrl.origin);
+    if (resolved.origin !== targetUrl.origin) {
+      return value;
+    }
+    return prefixApiMount(`${resolved.pathname}${resolved.search}${resolved.hash}`);
+  } catch {
+    return value;
+  }
+}
+
+function prefixApiMount(pathname: string): string {
+  if (pathname === '/api' || pathname.startsWith('/api/')) {
+    return pathname;
+  }
+
+  return pathname === '/' ? '/api' : `/api${pathname}`;
+}
+
 async function resolveStaticFile(
   buildRoot: string,
-  relativePaths: readonly string[]
+  relativePaths: readonly string[],
 ): Promise<{ absolutePath: string; relativePath: string } | null> {
   for (const relativePath of relativePaths) {
     const absolutePath = path.resolve(buildRoot, relativePath);
@@ -363,31 +417,48 @@ function getGenericFileCandidates(relativePath: string): readonly string[] {
 }
 
 function hasReservedPrefix(relativePath: string): boolean {
-  return RESERVED_PREFIXES.some((prefix) => relativePath === prefix || relativePath.startsWith(`${prefix}/`));
+  return RESERVED_PREFIXES.some(
+    (prefix) => relativePath === prefix || relativePath.startsWith(`${prefix}/`),
+  );
 }
 
-function setCacheHeaders(response: ServerResponse<IncomingMessage>, relativePath: string): void {
+function setCacheHeaders(headers: Headers, relativePath: string): void {
   if (CONTENT_HASH_PATTERN.test(relativePath)) {
-    response.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+    headers.set('Cache-Control', 'public, max-age=31536000, immutable');
     return;
   }
 
   if (relativePath.endsWith('refresh.js') || relativePath.endsWith('hmr.js')) {
-    response.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
-    response.setHeader('Pragma', 'no-cache');
-    response.setHeader('Expires', '0');
+    setNoCacheHeaders(headers);
     return;
   }
 
   const extension = path.extname(relativePath).toLowerCase();
-  if (extension === '.html' || extension === '') {
-    response.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
-    response.setHeader('Pragma', 'no-cache');
-    response.setHeader('Expires', '0');
+  if (extension === '.html' || extension === '' || extension === '.json') {
+    setNoCacheHeaders(headers);
     return;
   }
 
   if (STATIC_EXTENSIONS.has(extension)) {
-    response.setHeader('Cache-Control', 'no-cache, must-revalidate');
+    headers.set('Cache-Control', 'no-cache, must-revalidate');
   }
 }
+
+function setNoCacheHeaders(headers: Headers): void {
+  headers.set('Cache-Control', 'no-cache, no-store, must-revalidate');
+  headers.set('Pragma', 'no-cache');
+  headers.set('Expires', '0');
+}
+
+function textResponse(statusCode: number, body: string): Response {
+  return new Response(body, {
+    status: statusCode,
+    headers: {
+      'Content-Type': 'text/plain; charset=utf-8',
+    },
+  });
+}
+
+function methodAllowsBody(method: string): boolean {
+  return method !== 'GET' && method !== 'HEAD';
+}