wrangler 0.0.0-e22f9d7 → 0.0.0-e273e09

package/src/inspect.ts

@@ -1,12 +1,17 @@
-import assert from "assert";
-import type { MessageEvent } from "ws";
-import WebSocket, { WebSocketServer } from "ws";
-import type { IncomingMessage, Server, ServerResponse } from "http";
-import { createServer } from "http";
+import assert from "node:assert";
+import { createServer } from "node:http";
+import os from "node:os";
+import { URL } from "node:url";
+
+import open from "open";
 import { useEffect, useRef, useState } from "react";
+import WebSocket, { WebSocketServer } from "ws";
 import { version } from "../package.json";
-
+import { logger } from "./logger";
+import { waitForPortToBeAvailable } from "./proxy";
 import type Protocol from "devtools-protocol";
+import type { IncomingMessage, Server, ServerResponse } from "node:http";
+import type { MessageEvent } from "ws";
 
 /**
  * `useInspector` is a hook for debugging Workers applications
@@ -40,7 +45,7 @@ interface InspectorProps {
   /**
    * The websocket URL exposed by Workers that the inspector should connect to.
    */
-  inspectorUrl: undefined | string;
+  inspectorUrl: string | undefined;
   /**
    * Whether console statements and exceptions should be logged to the terminal.
    * (We don't log them in local mode because they're already getting
@@ -132,7 +137,7 @@ export default function useInspector(props: InspectorProps) {
   wsServer.on("connection", (ws: WebSocket) => {
     if (wsServer.clients.size > 1) {
       /** We only want to have one active Devtools instance at a time. */
-      console.error(
+      logger.error(
         "Tried to open a new devtools window when a previous one was already open."
       );
       ws.close(1013, "Too many clients; only one can be connected at a time");
@@ -152,12 +157,26 @@ export default function useInspector(props: InspectorProps) {
    * of the component lifecycle. Convenient.
    */
   useEffect(() => {
-    server.listen(props.port);
+    const abortController = new AbortController();
+    async function startInspectorProxy() {
+      await waitForPortToBeAvailable(props.port, {
+        retryPeriod: 200,
+        timeout: 2000,
+        abortSignal: abortController.signal,
+      });
+      server.listen(props.port);
+    }
+    startInspectorProxy().catch((err) => {
+      if ((err as { code: string }).code !== "ABORT_ERR") {
+        logger.error("Failed to start inspector:", err);
+      }
+    });
     return () => {
       server.close();
       // Also disconnect any open websockets/devtools connections
       wsServer.clients.forEach((ws) => ws.close());
       wsServer.close();
+      abortController.abort();
     };
   }, [props.port, server, wsServer]);
 
@@ -238,9 +257,7 @@ export default function useInspector(props: InspectorProps) {
           const evt = JSON.parse(event.data);
           if (evt.method === "Runtime.exceptionThrown") {
             const params = evt.params as Protocol.Runtime.ExceptionThrownEvent;
-            console.error(
-              "🚨", // cheesy, but it works
-              // maybe we could use color here too.
+            logger.error(
               params.exceptionDetails.text,
               params.exceptionDetails.exception?.description ?? ""
             );
@@ -252,7 +269,7 @@ export default function useInspector(props: InspectorProps) {
           }
         } else {
           // We should never get here, but who know is 2022...
-          console.error("unrecognised devtools event:", event);
+          logger.error("Unrecognised devtools event:", event);
         }
       });
     }
@@ -271,7 +288,7 @@ export default function useInspector(props: InspectorProps) {
     });
 
     ws.on("unexpected-response", () => {
-      console.log("waiting for connection...");
+      logger.log("Waiting for connection...");
       /**
        * This usually means the worker is not "ready" yet
        * so we'll just retry the connection process
@@ -315,9 +332,14 @@ export default function useInspector(props: InspectorProps) {
     };
   }, [
     props.inspectorUrl,
-    retryRemoteWebSocketConnectionSigil,
     props.logToTerminal,
     wsServer,
+    // We use a state value as a sigil to trigger a retry of the
+    // remote websocket connection. It's not used inside the effect,
+    // so react-hooks/exhaustive-deps doesn't complain if it's not
+    // included in the dependency array. But its presence is critical,
+    // so do NOT remove it from the dependency list.
+    retryRemoteWebSocketConnectionSigil,
   ]);
 
   /**
@@ -361,7 +383,10 @@ export default function useInspector(props: InspectorProps) {
         );
         remoteWebSocket.send(event.data);
       } catch (e) {
-        if (e.message !== "WebSocket is not open: readyState 0 (CONNECTING)") {
+        if (
+          (e as Error).message !==
+          "WebSocket is not open: readyState 0 (CONNECTING)"
+        ) {
           /**
            * ^ this just means we haven't opened a websocket yet
            * usually happens until there's at least one request
@@ -369,7 +394,7 @@ export default function useInspector(props: InspectorProps) {
            * happens on the first request. Maybe we should buffer
            * these messages too?
            */
-          console.error(e);
+          logger.error(e);
         }
       }
     }
@@ -432,6 +457,33 @@ function randomId(): string {
  * we're just doing a little bit of the work of the devtools console,
  * directly in the terminal.
  */
+
+export const mapConsoleAPIMessageTypeToConsoleMethod: {
+  [key in Protocol.Runtime.ConsoleAPICalledEvent["type"]]: Exclude<
+    keyof Console,
+    "Console"
+  >;
+} = {
+  log: "log",
+  debug: "debug",
+  info: "info",
+  warning: "warn",
+  error: "error",
+  dir: "dir",
+  dirxml: "dirxml",
+  table: "table",
+  trace: "trace",
+  clear: "clear",
+  count: "count",
+  assert: "assert",
+  profile: "profile",
+  profileEnd: "profileEnd",
+  timeEnd: "timeEnd",
+  startGroup: "group",
+  startGroupCollapsed: "groupCollapsed",
+  endGroup: "groupEnd",
+};
+
 function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
   const args: string[] = [];
   for (const ro of evt.args) {
@@ -449,7 +501,11 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
         break;
       case "object":
         if (!ro.preview) {
-          args.push(ro.description ?? "<no-description>");
+          args.push(
+            ro.subtype === "null"
+              ? "null"
+              : ro.description ?? "<no-description>"
+          );
         } else {
           args.push(ro.preview.description ?? "<no-description>");
 
@@ -467,11 +523,14 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
               );
 
               break;
+            case "weakmap":
             case "map":
               args.push(
                 "{\n" +
-                  ro.preview.entries
-                    .map(({ key, value }) => {
+                  // Maps always have entries
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  ro.preview
+                    .entries!.map(({ key, value }) => {
                       return `  ${key?.description ?? "<unknown>"} => ${
                         value.description
                       }`;
@@ -482,38 +541,47 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
               );
 
               break;
+            case "weakset":
             case "set":
               args.push(
                 "{ " +
-                  ro.preview.entries
-                    .map(({ value }) => {
+                  // Sets always have entries
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  ro.preview
+                    .entries!.map(({ value }) => {
                       return `${value.description}`;
                     })
                     .join(", ") +
                   (ro.preview.overflow ? ", ..." : "") +
                   " }"
               );
-
               break;
-            case "null":
-              args.push("null");
-              break;
-            case "node":
             case "regexp":
+              break;
             case "date":
-            case "weakmap":
-            case "weakset":
-            case "iterator":
+              break;
             case "generator":
-            case "error":
-            case "proxy":
+              args.push(ro.preview.properties[0].value || "");
+              break;
             case "promise":
+              if (ro.preview.properties[0].value === "pending") {
+                args.push(`{<${ro.preview.properties[0].value}>}`);
+              } else {
+                args.push(
+                  `{<${ro.preview.properties[0].value}>: ${ro.preview.properties[1].value}}`
+                );
+              }
+              break;
+            case "node":
+            case "iterator":
+            case "proxy":
             case "typedarray":
             case "arraybuffer":
             case "dataview":
             case "webassemblymemory":
             case "wasmvalue":
               break;
+            case "error":
             default:
               // just a pojo
               args.push(
@@ -535,5 +603,60 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
     }
   }
 
-  console[evt.type](...args);
+  const method = mapConsoleAPIMessageTypeToConsoleMethod[evt.type];
+
+  if (method in console) {
+    switch (method) {
+      case "dir":
+        console.dir(args);
+        break;
+      case "table":
+        console.table(args);
+        break;
+      default:
+        // eslint-disable-next-line prefer-spread
+        console[method].apply(console, args);
+        break;
+    }
+  } else {
+    logger.warn(`Unsupported console method: ${method}`);
+    logger.warn("console event:", evt);
+  }
 }
+
+/**
+ * Opens the chrome debugger
+ */
+export const openInspector = async (inspectorPort: number) => {
+  const url = `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`;
+  const errorMessage =
+    "Failed to open inspector.\nInspector depends on having a Chromium-based browser installed, maybe you need to install one?";
+
+  // see: https://github.com/sindresorhus/open/issues/177#issue-610016699
+  let braveBrowser: string;
+  switch (os.platform()) {
+    case "darwin":
+    case "win32":
+      braveBrowser = "Brave";
+      break;
+    default:
+      braveBrowser = "brave";
+  }
+
+  const childProcess = await open(url, {
+    app: [
+      {
+        name: open.apps.chrome,
+      },
+      {
+        name: braveBrowser,
+      },
+      {
+        name: open.apps.edge,
+      },
+    ],
+  });
+  childProcess.on("error", () => {
+    logger.warn(errorMessage);
+  });
+};

package/src/intl-polyfill.d.ts

@@ -0,0 +1,139 @@
+/**
+ * TODO Remove once https://github.com/microsoft/TypeScript/pull/47254 lands
+ */
+declare namespace Intl {
+  interface DateTimeFormatOptions {
+    formatMatcher?: "basic" | "best fit" | "best fit" | undefined;
+    dateStyle?: "full" | "long" | "medium" | "short" | undefined;
+    timeStyle?: "full" | "long" | "medium" | "short" | undefined;
+    dayPeriod?: "narrow" | "short" | "long" | undefined;
+    fractionalSecondDigits?: 0 | 1 | 2 | 3 | undefined;
+  }
+
+  interface ResolvedDateTimeFormatOptions {
+    formatMatcher?: "basic" | "best fit" | "best fit";
+    dateStyle?: "full" | "long" | "medium" | "short";
+    timeStyle?: "full" | "long" | "medium" | "short";
+    hourCycle?: "h11" | "h12" | "h23" | "h24";
+    dayPeriod?: "narrow" | "short" | "long";
+    fractionalSecondDigits?: 0 | 1 | 2 | 3;
+  }
+
+  interface NumberFormat {
+    formatRange(startDate: number | bigint, endDate: number | bigint): string;
+    formatRangeToParts(
+      startDate: number | bigint,
+      endDate: number | bigint
+    ): NumberFormatPart[];
+  }
+
+  /**
+   * The locale matching algorithm to use.
+   *
+   * [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation).
+   */
+  type ListFormatLocaleMatcher = "lookup" | "best fit";
+
+  /**
+   * The format of output message.
+   *
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters).
+   */
+  type ListFormatType = "conjunction" | "disjunction" | "unit";
+
+  /**
+   * The length of the formatted message.
+   *
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters).
+   */
+  type ListFormatStyle = "long" | "short" | "narrow";
+
+  /**
+   * An object with some or all properties of the `Intl.ListFormat` constructor `options` parameter.
+   *
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters).
+   */
+  interface ListFormatOptions {
+    /** The locale matching algorithm to use. For information about this option, see [Intl page](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation). */
+    localeMatcher?: ListFormatLocaleMatcher;
+    /** The format of output message. */
+    type?: ListFormatType;
+    /** The length of the internationalized message. */
+    style?: ListFormatStyle;
+  }
+
+  interface ListFormat {
+    /**
+     * Returns a string with a language-specific representation of the list.
+     *
+     * @param list - An iterable object, such as an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).
+     *
+     * @throws `TypeError` if `list` includes something other than the possible values.
+     *
+     * @returns {string} A language-specific formatted string representing the elements of the list.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format).
+     */
+    format(list: Iterable<string>): string;
+
+    /**
+     * Returns an Array of objects representing the different components that can be used to format a list of values in a locale-aware fashion.
+     *
+     * @param list - An iterable object, such as an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), to be formatted according to a locale.
+     *
+     * @throws `TypeError` if `list` includes something other than the possible values.
+     *
+     * @returns {{ type: "element" | "literal", value: string; }[]} An Array of components which contains the formatted parts from the list.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts).
+     */
+    formatToParts(
+      list: Iterable<string>
+    ): { type: "element" | "literal"; value: string }[];
+  }
+
+  const ListFormat: {
+    prototype: ListFormat;
+
+    /**
+     * Creates [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat) objects that
+     * enable language-sensitive list formatting.
+     *
+     * @param locales - A string with a [BCP 47 language tag](http://tools.ietf.org/html/rfc5646), or an array of such strings.
+     *  For the general form and interpretation of the `locales` argument,
+     *  see the [`Intl` page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
+     *
+     * @param options - An [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat#parameters)
+     *  with some or all options of `ListFormatOptions`.
+     *
+     * @returns [Intl.ListFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat) object.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat).
+     */
+    new (
+      locales?: BCP47LanguageTag | BCP47LanguageTag[],
+      options?: ListFormatOptions
+    ): ListFormat;
+
+    /**
+     * Returns an array containing those of the provided locales that are
+     * supported in list formatting without having to fall back to the runtime's default locale.
+     *
+     * @param locales - A string with a [BCP 47 language tag](http://tools.ietf.org/html/rfc5646), or an array of such strings.
+     *  For the general form and interpretation of the `locales` argument,
+     *  see the [`Intl` page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
+     *
+     * @param options - An [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf#parameters).
+     *  with some or all possible options.
+     *
+     * @returns An array of strings representing a subset of the given locale tags that are supported in list
+     *  formatting without having to fall back to the runtime's default locale.
+     *
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf).
+     */
+    supportedLocalesOf(
+      locales: BCP47LanguageTag | BCP47LanguageTag[],
+      options?: Pick<ListFormatOptions, "localeMatcher">
+    ): BCP47LanguageTag[];
+  };
+}