wrangler 0.0.0-e3cab74 → 0.0.0-e452a35

package/src/parse.ts

@@ -62,8 +62,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 ";
 
@@ -75,9 +73,11 @@ type TomlError = Error & {
 /**
  * A wrapper around `TOML.parse` that throws a `ParseError`.
  */
-export function parseTOML(input: string, file?: string): object {
+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 +98,29 @@ export function parseTOML(input: string, file?: string): object {
 
 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) {

package/src/proxy.ts

@@ -1,17 +1,23 @@
-import { createServer } from "node:http";
+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 type { CfPreviewToken } from "./api/preview";
+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,
   IncomingMessage,
   ServerResponse,
-  Server,
+  Server as HttpServer,
 } from "node:http";
 import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
+import type { Server as HttpsServer } from "node:https";
 import type ws from "ws";
 
 interface IWebsocket extends ws {
@@ -47,30 +53,61 @@ function addCfPreviewTokenHeader(
 function rewriteRemoteHostToLocalHostInHeaders(
   headers: IncomingHttpHeaders,
   remoteHost: string,
-  localPort: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   for (const [name, value] of Object.entries(headers)) {
     // Rewrite the remote host to the local host.
     if (typeof value === "string" && value.includes(remoteHost)) {
       headers[name] = value
-        .replaceAll(`https://${remoteHost}`, `http://localhost:${localPort}`)
+        .replaceAll(
+          `https://${remoteHost}`,
+          `${localProtocol}://localhost:${localPort}`
+        )
         .replaceAll(remoteHost, `localhost:${localPort}`);
     }
   }
 }
 
+type PreviewProxy = {
+  server: HttpServer | HttpsServer;
+  terminator: HttpTerminator;
+};
+
 export function usePreviewServer({
   previewToken,
   publicRoot,
-  port,
+  localProtocol,
+  localPort: port,
+  ip,
 }: {
   previewToken: CfPreviewToken | undefined;
-  publicRoot: undefined | string;
-  port: number;
+  publicRoot: string | undefined;
+  localProtocol: "https" | "http";
+  localPort: number;
+  ip: string;
 }) {
   /** Creates an HTTP/1 proxy that sends requests over HTTP/2. */
-  const proxyServer = useRef<Server>();
-  const proxy = (proxyServer.current ??= createProxyServer());
+  const [proxy, setProxy] = useState<PreviewProxy>();
+
+  /**
+   * Create the instance of the local proxy server that will pass on
+   * requests to the preview worker.
+   */
+  useEffect(() => {
+    if (proxy === undefined) {
+      createProxyServer(localProtocol)
+        .then((server) => {
+          setProxy({
+            server,
+            terminator: createHttpTerminator({ server }),
+          });
+        })
+        .catch(async (err) => {
+          logger.error("Failed to create proxy server:", err);
+        });
+    }
+  }, [proxy, localProtocol]);
 
   /**
    * When we're not connected / getting a fresh token on changes,
@@ -98,6 +135,10 @@ export function usePreviewServer({
   }
 
   useEffect(() => {
+    if (proxy === undefined) {
+      return;
+    }
+
     // If we don't have a token, that means either we're just starting up,
     // or we're refreshing the token.
     if (!previewToken) {
@@ -109,8 +150,8 @@ export function usePreviewServer({
         // store the stream in a buffer so we can replay it later
         streamBufferRef.current.push({ stream, headers });
       };
-      proxy.on("stream", bufferStream);
-      cleanupListeners.push(() => proxy.off("stream", bufferStream));
+      proxy.server.on("stream", bufferStream);
+      cleanupListeners.push(() => proxy.server.off("stream", bufferStream));
 
       const bufferRequestResponse = (
         request: IncomingMessage,
@@ -120,8 +161,10 @@ export function usePreviewServer({
         requestResponseBufferRef.current.push({ request, response });
       };
 
-      proxy.on("request", bufferRequestResponse);
-      cleanupListeners.push(() => proxy.off("request", bufferRequestResponse));
+      proxy.server.on("request", bufferRequestResponse);
+      cleanupListeners.push(() =>
+        proxy.server.off("request", bufferRequestResponse)
+      );
       return () => {
         cleanupListeners.forEach((cleanup) => cleanup());
       };
@@ -142,9 +185,14 @@ export function usePreviewServer({
     cleanupListeners.push(() => remote.off("close", retryServerSetup));
 
     /** HTTP/2 -> HTTP/2  */
-    const handleStream = createStreamHandler(previewToken, remote, port);
-    proxy.on("stream", handleStream);
-    cleanupListeners.push(() => proxy.off("stream", handleStream));
+    const handleStream = createStreamHandler(
+      previewToken,
+      remote,
+      port,
+      localProtocol
+    );
+    proxy.server.on("stream", handleStream);
+    cleanupListeners.push(() => proxy.server.off("stream", handleStream));
 
     // flush and replay buffered streams
     streamBufferRef.current.forEach((buffer) =>
@@ -174,10 +222,15 @@ 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,
-          port
+          port,
+          localProtocol
         );
         for (const name of Object.keys(responseHeaders)) {
           if (name.startsWith(":")) {
@@ -195,8 +248,10 @@ export function usePreviewServer({
       ? createHandleAssetsRequest(assetPath, handleRequest)
       : handleRequest;
 
-    proxy.on("request", actualHandleRequest);
-    cleanupListeners.push(() => proxy.off("request", actualHandleRequest));
+    proxy.server.on("request", actualHandleRequest);
+    cleanupListeners.push(() =>
+      proxy.server.off("request", actualHandleRequest)
+    );
 
     // flush and replay buffered requests
     requestResponseBufferRef.current.forEach(({ request, response }) =>
@@ -227,8 +282,8 @@ export function usePreviewServer({
         remoteWebsocketClient.close();
       });
     };
-    proxy.on("upgrade", handleUpgrade);
-    cleanupListeners.push(() => proxy.off("upgrade", handleUpgrade));
+    proxy.server.on("upgrade", handleUpgrade);
+    cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));
 
     return () => {
       cleanupListeners.forEach((cleanup) => cleanup());
@@ -237,6 +292,7 @@ export function usePreviewServer({
     previewToken,
     publicRoot,
     port,
+    localProtocol,
     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
@@ -248,19 +304,35 @@ export function usePreviewServer({
   // Start/stop the server whenever the
   // containing component is mounted/unmounted.
   useEffect(() => {
-    waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 })
+    const abortController = new AbortController();
+    if (proxy === undefined) {
+      return;
+    }
+
+    waitForPortToBeAvailable(port, {
+      retryPeriod: 200,
+      timeout: 2000,
+      abortSignal: abortController.signal,
+    })
       .then(() => {
-        proxy.listen(port);
-        console.log(`⬣ Listening at http://localhost:${port}`);
+        proxy.server.on("listening", () => {
+          logger.log(`⬣ Listening at ${localProtocol}://${ip}:${port}`);
+        });
+        proxy.server.listen(port, ip);
       })
       .catch((err) => {
-        console.error(`⬣ Failed to start server: ${err}`);
+        if ((err as { code: string }).code !== "ABORT_ERR") {
+          logger.error(`Failed to start server: ${err}`);
+        }
       });
 
     return () => {
-      proxy.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();
     };
-  }, [port, proxy]);
+  }, [port, ip, proxy, localProtocol]);
 }
 
 function createHandleAssetsRequest(
@@ -288,20 +360,18 @@ const HTTP1_HEADERS = new Set([
   "http2-settings",
 ]);
 
-function createProxyServer() {
-  return createServer()
-    .on("request", function (req, res) {
-      // log all requests
-      console.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        res.statusCode
-      );
-    })
+async function createProxyServer(
+  localProtocol: "https" | "http"
+): Promise<HttpServer | HttpsServer> {
+  const server: HttpServer | HttpsServer =
+    localProtocol === "https"
+      ? createHttpsServer(await getHttpsOptions())
+      : createHttpServer();
+
+  return server
     .on("upgrade", (req) => {
       // log all websocket connections
-      console.log(
+      logger.log(
         new Date().toLocaleTimeString(),
         req.method,
         req.url,
@@ -311,14 +381,15 @@ function createProxyServer() {
     })
     .on("error", (err) => {
       // log all connection errors
-      console.error(new Date().toLocaleTimeString(), err);
+      logger.error(new Date().toLocaleTimeString(), err);
     });
 }
 
 function createStreamHandler(
   previewToken: CfPreviewToken,
   remote: ClientHttp2Session,
-  port: number
+  localPort: number,
+  localProtocol: "https" | "http"
 ) {
   return function handleStream(
     stream: ServerHttp2Stream,
@@ -331,7 +402,8 @@ function createStreamHandler(
       rewriteRemoteHostToLocalHostInHeaders(
         responseHeaders,
         previewToken.host,
-        port
+        localPort,
+        localProtocol
       );
       stream.respond(responseHeaders);
       request.pipe(stream, { end: true });
@@ -344,33 +416,50 @@ function createStreamHandler(
  */
 export async function waitForPortToBeAvailable(
   port: number,
-  options: { retryPeriod: number; timeout: number }
+  options: { retryPeriod: number; timeout: number; abortSignal: AbortSignal }
 ): Promise<void> {
   return new Promise((resolve, reject) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    options.abortSignal.addEventListener("abort", () => {
+      const abortError = new Error("waitForPortToBeAvailable() aborted");
+      (abortError as Error & { code: string }).code = "ABORT_ERR";
+      doReject(abortError);
+    });
+
     const timeout = setTimeout(() => {
-      reject(new Error(`Timed out waiting for port ${port}`));
+      doReject(new Error(`Timed out waiting for port ${port}`));
     }, options.timeout);
 
+    const interval = setInterval(checkPort, options.retryPeriod);
+    checkPort();
+
+    function doResolve() {
+      clearTimeout(timeout);
+      clearInterval(interval);
+      resolve();
+    }
+
+    function doReject(err: unknown) {
+      clearInterval(interval);
+      clearTimeout(timeout);
+      reject(err);
+    }
+
     function checkPort() {
       // Testing whether a port is 'available' involves simply
       // trying to make a server listen on that port, and retrying
       // until it succeeds.
-      const server = createServer();
+      const server = createHttpServer();
       server.on("error", (err) => {
         // @ts-expect-error non standard property on Error
-        if (err.code === "EADDRINUSE") {
-          setTimeout(checkPort, options.retryPeriod);
-        } else {
-          reject(err);
+        if (err.code !== "EADDRINUSE") {
+          doReject(err);
         }
       });
       server.listen(port, () => {
         server.close();
-        clearTimeout(timeout);
-        resolve();
+        doResolve();
       });
     }
-
-    checkPort();
   });
 }