wrangler 0.0.0-e2f9bb2 → 0.0.0-e322475

package/src/parse.ts

@@ -2,6 +2,7 @@ import * as fs from "node:fs";
 import { resolve } from "node:path";
 import TOML from "@iarna/toml";
 import { formatMessagesSync } from "esbuild";
+import { logger } from "./logger";
 
 export type Message = {
   text: string;
@@ -38,7 +39,7 @@ export function formatMessage(
   const lines = formatMessagesSync([input], {
     color,
     kind: kind,
-    terminalWidth: process.stderr.columns,
+    terminalWidth: logger.columns,
   });
   return lines.join("\n");
 }
@@ -62,8 +63,6 @@ export class ParseError extends Error implements Message {
   }
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 const TOML_ERROR_NAME = "TomlError";
 const TOML_ERROR_SUFFIX = " at row ";
 
@@ -77,7 +76,9 @@ type TomlError = Error & {
  */
 export function parseTOML(input: string, file?: string): TOML.JsonMap | never {
   try {
-    return TOML.parse(input);
+    // Normalize CRLF to LF to avoid hitting https://github.com/iarna/iarna-toml/issues/33.
+    const normalizedInput = input.replace(/\r\n/g, "\n");
+    return TOML.parse(normalizedInput);
   } catch (err) {
     const { name, message, line, col } = err as TomlError;
     if (name !== TOML_ERROR_NAME) {
@@ -98,10 +99,29 @@ export function parseTOML(input: string, file?: string): TOML.JsonMap | never {
 
 const JSON_ERROR_SUFFIX = " in JSON at position ";
 
+/**
+ * A minimal type describing a package.json file.
+ */
+export type PackageJSON = {
+  devDependencies?: Record<string, unknown>;
+  dependencies?: Record<string, unknown>;
+  scripts?: Record<string, unknown>;
+};
+
+/**
+ * A typed version of `parseJSON()`.
+ */
+export function parsePackageJSON<T extends PackageJSON = PackageJSON>(
+  input: string,
+  file?: string
+): T {
+  return parseJSON<T>(input, file);
+}
+
 /**
  * A wrapper around `JSON.parse` that throws a `ParseError`.
  */
-export function parseJSON(input: string, file?: string): any {
+export function parseJSON<T>(input: string, file?: string): T {
   try {
     return JSON.parse(input);
   } catch (err) {
@@ -119,6 +139,25 @@ export function parseJSON(input: string, file?: string): any {
   }
 }
 
+/**
+ * Reads a file into a node Buffer.
+ */
+export function readFileSyncToBuffer(file: string): Buffer {
+  try {
+    return fs.readFileSync(file);
+  } catch (err) {
+    const { message } = err as Error;
+    throw new ParseError({
+      text: `Could not read file: ${file}`,
+      notes: [
+        {
+          text: message.replace(file, resolve(file)),
+        },
+      ],
+    });
+  }
+}
+
 /**
  * Reads a file and parses it based on its type.
  */

package/src/proxy.ts

@@ -2,11 +2,13 @@ import { createServer as createHttpServer } from "node:http";
 import { connect } from "node:http2";
 import { createServer as createHttpsServer } from "node:https";
 import WebSocket from "faye-websocket";
+import { createHttpTerminator } from "http-terminator";
 import { useEffect, useRef, useState } from "react";
 import serveStatic from "serve-static";
 import { getHttpsOptions } from "./https-options";
 import { logger } from "./logger";
 import type { CfPreviewToken } from "./create-worker-preview";
+import type { HttpTerminator } from "http-terminator";
 import type {
   IncomingHttpHeaders,
   RequestListener,
@@ -67,35 +69,48 @@ function rewriteRemoteHostToLocalHostInHeaders(
   }
 }
 
+type PreviewProxy = {
+  server: HttpServer | HttpsServer;
+  terminator: HttpTerminator;
+};
+
 export function usePreviewServer({
   previewToken,
-  publicRoot,
+  assetDirectory,
   localProtocol,
   localPort: port,
   ip,
 }: {
   previewToken: CfPreviewToken | undefined;
-  publicRoot: string | undefined;
+  assetDirectory: string | undefined;
   localProtocol: "https" | "http";
   localPort: number;
   ip: string;
 }) {
   /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
-  const [proxyServer, setProxyServer] = useState<HttpServer | HttpsServer>();
+  const [proxy, setProxy] = useState<PreviewProxy>();
 
   /**
    * Create the instance of the local proxy server that will pass on
    * requests to the preview worker.
    */
   useEffect(() => {
-    if (proxyServer === undefined) {
+    if (proxy === undefined) {
       createProxyServer(localProtocol)
-        .then((proxy) => setProxyServer(proxy))
+        .then((server) => {
+          setProxy({
+            server,
+            terminator: createHttpTerminator({
+              server,
+              gracefulTerminationTimeout: 0,
+            }),
+          });
+        })
         .catch(async (err) => {
           logger.error("Failed to create proxy server:", err);
         });
     }
-  }, [proxyServer, localProtocol]);
+  }, [proxy, localProtocol]);
 
   /**
    * When we're not connected / getting a fresh token on changes,
@@ -123,7 +138,7 @@ export function usePreviewServer({
   }
 
   useEffect(() => {
-    if (proxyServer === undefined) {
+    if (proxy === undefined) {
       return;
     }
 
@@ -138,8 +153,8 @@ export function usePreviewServer({
         // store the stream in a buffer so we can replay it later
         streamBufferRef.current.push({ stream, headers });
       };
-      proxyServer.on("stream", bufferStream);
-      cleanupListeners.push(() => proxyServer.off("stream", bufferStream));
+      proxy.server.on("stream", bufferStream);
+      cleanupListeners.push(() => proxy.server.off("stream", bufferStream));
 
       const bufferRequestResponse = (
         request: IncomingMessage,
@@ -149,9 +164,9 @@ export function usePreviewServer({
         requestResponseBufferRef.current.push({ request, response });
       };
 
-      proxyServer.on("request", bufferRequestResponse);
+      proxy.server.on("request", bufferRequestResponse);
       cleanupListeners.push(() =>
-        proxyServer.off("request", bufferRequestResponse)
+        proxy.server.off("request", bufferRequestResponse)
       );
       return () => {
         cleanupListeners.forEach((cleanup) => cleanup());
@@ -161,8 +176,6 @@ export function usePreviewServer({
     // We have a token. Let's proxy requests to the preview end point.
     const cleanupListeners: (() => void)[] = [];
 
-    const assetPath = typeof publicRoot === "string" ? publicRoot : null;
-
     // create a ClientHttp2Session
     const remote = connect(`https://${previewToken.host}`);
     cleanupListeners.push(() => remote.destroy());
@@ -179,8 +192,8 @@ export function usePreviewServer({
       port,
       localProtocol
     );
-    proxyServer.on("stream", handleStream);
-    cleanupListeners.push(() => proxyServer.off("stream", handleStream));
+    proxy.server.on("stream", handleStream);
+    cleanupListeners.push(() => proxy.server.off("stream", handleStream));
 
     // flush and replay buffered streams
     streamBufferRef.current.forEach((buffer) =>
@@ -210,6 +223,10 @@ export function usePreviewServer({
       const request = message.pipe(remote.request(headers));
       request.on("response", (responseHeaders) => {
         const status = responseHeaders[":status"] ?? 500;
+
+        // log all requests to terminal
+        logger.log(new Date().toLocaleTimeString(), method, url, status);
+
         rewriteRemoteHostToLocalHostInHeaders(
           responseHeaders,
           previewToken.host,
@@ -228,13 +245,13 @@ export function usePreviewServer({
 
     // If an asset path is defined, check the file system
     // for a file first and serve if it exists.
-    const actualHandleRequest = assetPath
-      ? createHandleAssetsRequest(assetPath, handleRequest)
+    const actualHandleRequest = assetDirectory
+      ? createHandleAssetsRequest(assetDirectory, handleRequest)
       : handleRequest;
 
-    proxyServer.on("request", actualHandleRequest);
+    proxy.server.on("request", actualHandleRequest);
     cleanupListeners.push(() =>
-      proxyServer.off("request", actualHandleRequest)
+      proxy.server.off("request", actualHandleRequest)
     );
 
     // flush and replay buffered requests
@@ -266,18 +283,18 @@ export function usePreviewServer({
         remoteWebsocketClient.close();
       });
     };
-    proxyServer.on("upgrade", handleUpgrade);
-    cleanupListeners.push(() => proxyServer.off("upgrade", handleUpgrade));
+    proxy.server.on("upgrade", handleUpgrade);
+    cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));
 
     return () => {
       cleanupListeners.forEach((cleanup) => cleanup());
     };
   }, [
     previewToken,
-    publicRoot,
+    assetDirectory,
     port,
     localProtocol,
-    proxyServer,
+    proxy,
     // We use a state value as a sigil to trigger reconnecting the server.
     // It's not used inside the effect, so react-hooks/exhaustive-deps
     // doesn't complain if it's not included in the dependency array.
@@ -289,7 +306,7 @@ export function usePreviewServer({
   // containing component is mounted/unmounted.
   useEffect(() => {
     const abortController = new AbortController();
-    if (proxyServer === undefined) {
+    if (proxy === undefined) {
       return;
     }
 
@@ -299,8 +316,10 @@ export function usePreviewServer({
       abortSignal: abortController.signal,
     })
       .then(() => {
-        proxyServer.listen(port, ip);
-        logger.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
+        proxy.server.on("listening", () => {
+          logger.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
+        });
+        proxy.server.listen(port, ip);
       })
       .catch((err) => {
         if ((err as { code: string }).code !== "ABORT_ERR") {
@@ -309,17 +328,21 @@ export function usePreviewServer({
       });
 
     return () => {
-      proxyServer.close();
       abortController.abort();
+      // Running `proxy.server.close()` does not close open connections, preventing the process from exiting.
+      // So we use this `terminator` to close all the connections and force the server to shutdown.
+      proxy.terminator
+        .terminate()
+        .catch(() => logger.error("Failed to terminate the proxy server."));
     };
-  }, [port, ip, proxyServer, localProtocol]);
+  }, [port, ip, proxy, localProtocol]);
 }
 
 function createHandleAssetsRequest(
-  assetPath: string,
+  assetDirectory: string,
   handleRequest: RequestListener
 ) {
-  const handleAsset = serveStatic(assetPath, {
+  const handleAsset = serveStatic(assetDirectory, {
     cacheControl: false,
   });
   return (request: IncomingMessage, response: ServerResponse) => {
@@ -349,15 +372,6 @@ async function createProxyServer(
       : createHttpServer();
 
   return server
-    .on("request", function (req, res) {
-      // log all requests
-      logger.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        res.statusCode
-      );
-    })
     .on("upgrade", (req) => {
       // log all websocket connections
       logger.log(
@@ -409,7 +423,7 @@ export async function waitForPortToBeAvailable(
 ): Promise<void> {
   return new Promise((resolve, reject) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (options.abortSignal as any).addEventListener("abort", () => {
+    options.abortSignal.addEventListener("abort", () => {
       const abortError = new Error("waitForPortToBeAvailable() aborted");
       (abortError as Error & { code: string }).code = "ABORT_ERR";
       doReject(abortError);
@@ -439,16 +453,24 @@ export async function waitForPortToBeAvailable(
       // trying to make a server listen on that port, and retrying
       // until it succeeds.
       const server = createHttpServer();
+      const terminator = createHttpTerminator({
+        server,
+        gracefulTerminationTimeout: 0, // default 1000
+      });
+
       server.on("error", (err) => {
         // @ts-expect-error non standard property on Error
         if (err.code !== "EADDRINUSE") {
           doReject(err);
         }
       });
-      server.listen(port, () => {
-        server.close();
-        doResolve();
-      });
+      server.listen(port, () =>
+        terminator
+          .terminate()
+          .then(doResolve, () =>
+            logger.error("Failed to terminate the port checker.")
+          )
+      );
     }
   });
 }