wrangler 0.0.0-e2a26a0 → 0.0.0-e3278fa

package/src/inspect.ts

@@ -1,10 +1,14 @@
 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";
@@ -41,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
@@ -133,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");
@@ -153,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]);
 
@@ -239,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 ?? ""
             );
@@ -253,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);
         }
       });
     }
@@ -272,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
@@ -367,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
@@ -375,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);
         }
       }
     }
@@ -587,10 +606,57 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
   const method = mapConsoleAPIMessageTypeToConsoleMethod[evt.type];
 
   if (method in console) {
-    // eslint-disable-next-line prefer-spread
-    console[method].apply(console, args);
+    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 {
-    console.warn(`Unsupported console method: ${method}`);
-    console.log("console event:", evt);
+    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[];
+  };
+}

package/src/{kv.tsx → kv.ts}

@@ -1,13 +1,18 @@
 import { URLSearchParams } from "node:url";
 import { fetchListResult, fetchResult, fetchKVGetValue } from "./cfetch";
+import { logger } from "./logger";
 import type { Config } from "./config";
 
+/** The largest number of kv items we can pass to the API in a single request. */
+const API_MAX = 10000;
+// The const below are halved from the API's true capacity to help avoid
+// hammering it with large requests.
+const BATCH_KEY_MAX = API_MAX / 2;
+
 type KvArgs = {
   binding?: string;
   "namespace-id"?: string;
-  env?: string;
   preview?: boolean;
-  config?: Config;
 };
 
 /**
@@ -15,7 +20,7 @@ type KvArgs = {
  *
  * @returns the generated id of the created namespace.
  */
-export async function createNamespace(
+export async function createKVNamespace(
   accountId: string,
   title: string
 ): Promise<string> {
@@ -47,7 +52,7 @@ export interface KVNamespaceInfo {
 /**
  * Fetch a list of all the namespaces under the given `accountId`.
  */
-export async function listNamespaces(
+export async function listKVNamespaces(
   accountId: string
 ): Promise<KVNamespaceInfo[]> {
   const pageSize = 100;
@@ -79,7 +84,7 @@ export interface NamespaceKeyInfo {
   metadata?: { [key: string]: unknown };
 }
 
-export async function listNamespaceKeys(
+export async function listKVNamespaceKeys(
   accountId: string,
   namespaceId: string,
   prefix = ""
@@ -91,75 +96,218 @@ export async function listNamespaceKeys(
   );
 }
 
-export async function putKeyValue(
+export async function deleteKVNamespace(
+  accountId: string,
+  namespaceId: string
+) {
+  return await fetchResult<{ id: string }>(
+    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}`,
+    { method: "DELETE" }
+  );
+}
+
+/**
+ * Information about a key-value pair, including its "metadata" fields.
+ */
+export interface KeyValue {
+  key: string;
+  value: string;
+  expiration?: number;
+  expiration_ttl?: number;
+  metadata?: object;
+  base64?: boolean;
+}
+
+const KeyValueKeys = new Set([
+  "key",
+  "value",
+  "expiration",
+  "expiration_ttl",
+  "metadata",
+  "base64",
+]);
+
+/**
+ * The object has the specified property.
+ */
+function hasProperty<T extends object>(
+  obj: object,
+  property: keyof T
+): obj is T {
+  return property in obj;
+}
+
+/**
+ * The object has a required property of the specified type.
+ */
+function hasTypedProperty<T extends object>(
+  obj: object,
+  property: keyof T,
+  type: string
+): obj is T {
+  return hasProperty(obj, property) && typeof obj[property] === type;
+}
+
+/**
+ * The object an optional property, of the specified type.
+ */
+function hasOptionalTypedProperty<T extends object>(
+  obj: object,
+  property: keyof T,
+  type: string
+): obj is Omit<T, typeof property> | T {
+  return !hasProperty(obj, property) || typeof obj[property] === type;
+}
+
+/**
+ * Is the given object a valid `KeyValue` type?
+ */
+export function isKVKeyValue(keyValue: unknown): keyValue is KeyValue {
+  if (
+    keyValue === null ||
+    typeof keyValue !== "object" ||
+    !hasTypedProperty(keyValue, "key", "string") ||
+    !hasTypedProperty(keyValue, "value", "string") ||
+    !hasOptionalTypedProperty(keyValue, "expiration", "number") ||
+    !hasOptionalTypedProperty(keyValue, "expiration_ttl", "number") ||
+    !hasOptionalTypedProperty(keyValue, "base64", "boolean") ||
+    !hasOptionalTypedProperty(keyValue, "metadata", "object")
+  ) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Get all the properties on the `keyValue` that are not expected.
+ */
+export function unexpectedKVKeyValueProps(keyValue: KeyValue): string[] {
+  const props = Object.keys(keyValue);
+  return props.filter((prop) => !KeyValueKeys.has(prop));
+}
+
+export async function putKVKeyValue(
   accountId: string,
   namespaceId: string,
-  key: string,
-  value: string,
-  args?: { expiration?: number; expiration_ttl?: number }
+  keyValue: KeyValue
 ) {
   let searchParams: URLSearchParams | undefined;
-  if (args) {
+  if (keyValue.expiration || keyValue.expiration_ttl) {
     searchParams = new URLSearchParams();
-    if (args.expiration) {
-      searchParams.set("expiration", `${args.expiration}`);
+    if (keyValue.expiration) {
+      searchParams.set("expiration", `${keyValue.expiration}`);
     }
-    if (args.expiration_ttl) {
-      searchParams.set("expiration_ttl", `${args.expiration_ttl}`);
+    if (keyValue.expiration_ttl) {
+      searchParams.set("expiration_ttl", `${keyValue.expiration_ttl}`);
     }
   }
   return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${key}`,
-    { method: "PUT", body: value },
+    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${encodeURIComponent(
+      keyValue.key
+    )}`,
+    { method: "PUT", body: keyValue.value },
     searchParams
   );
 }
 
-export async function getKeyValue(
+export async function getKVKeyValue(
   accountId: string,
   namespaceId: string,
   key: string
 ): Promise<string> {
-  return await fetchKVGetValue(accountId, namespaceId, key);
+  return await fetchKVGetValue(accountId, namespaceId, encodeURIComponent(key));
 }
 
-export async function putBulkKeyValue(
+export async function deleteKVKeyValue(
   accountId: string,
   namespaceId: string,
-  keyvalueStr: string
+  key: string
 ) {
   return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
-    {
-      method: "PUT",
-      body: keyvalueStr,
-      headers: { "Content-Type": "application/json" },
-    }
+    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${encodeURIComponent(
+      key
+    )}`,
+    { method: "DELETE" }
   );
 }
 
-export async function deleteBulkKeyValue(
+/**
+ * Formatter for converting e.g. 5328 --> 5,328
+ */
+const formatNumber = new Intl.NumberFormat("en-US", {
+  notation: "standard",
+}).format;
+
+/**
+ * Helper function for bulk requests, logs ongoing output to console.
+ */
+function logBulkProgress(
+  operation: "put" | "delete",
+  index: number,
+  total: number
+) {
+  logger.log(
+    `${operation === "put" ? "Uploaded" : "Deleted"} ${Math.floor(
+      (100 * index) / total
+    )}% (${formatNumber(index)} out of ${formatNumber(total)})`
+  );
+}
+
+export async function putKVBulkKeyValue(
   accountId: string,
   namespaceId: string,
-  keyStr: string
+  keyValues: KeyValue[],
+  quiet = false
 ) {
-  return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
-    {
-      method: "DELETE",
-      body: keyStr,
-      headers: { "Content-Type": "application/json" },
+  for (let index = 0; index < keyValues.length; index += BATCH_KEY_MAX) {
+    if (!quiet && keyValues.length > BATCH_KEY_MAX) {
+      logBulkProgress("put", index, keyValues.length);
     }
-  );
+
+    await fetchResult(
+      `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
+      {
+        method: "PUT",
+        body: JSON.stringify(keyValues.slice(index, index + BATCH_KEY_MAX)),
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+
+  if (!quiet && keyValues.length > BATCH_KEY_MAX) {
+    logBulkProgress("put", keyValues.length, keyValues.length);
+  }
 }
 
-export function getNamespaceId({
-  preview,
-  binding,
-  config,
-  "namespace-id": namespaceId,
-  env,
-}: KvArgs): string {
+export async function deleteKVBulkKeyValue(
+  accountId: string,
+  namespaceId: string,
+  keys: string[],
+  quiet = false
+) {
+  for (let index = 0; index < keys.length; index += BATCH_KEY_MAX) {
+    if (!quiet && keys.length > BATCH_KEY_MAX) {
+      logBulkProgress("delete", index, keys.length);
+    }
+
+    await fetchResult(
+      `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
+      {
+        method: "DELETE",
+        body: JSON.stringify(keys.slice(index, index + BATCH_KEY_MAX)),
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+  if (!quiet && keys.length > BATCH_KEY_MAX) {
+    logBulkProgress("delete", keys.length, keys.length);
+  }
+}
+
+export function getKVNamespaceId(
+  { preview, binding, "namespace-id": namespaceId }: KvArgs,
+  config: Config
+): string {
   // nice
   if (namespaceId) {
     return namespaceId;
@@ -167,7 +315,7 @@ export function getNamespaceId({
 
   // begin pre-flight checks
 
-  // `--binding` is only valid if there's a wrangler configuration file.
+  // `--binding` is only valid if there's a wrangler configuration.
   if (binding && !config) {
     throw new Error("--binding specified, but no config file was found.");
   }
@@ -180,30 +328,6 @@ export function getNamespaceId({
     );
   }
 
-  // they want to use an environment, actually
-  if (env) {
-    if (!config.env || !config.env[env]) {
-      throw new Error(
-        `Failed to find environment "${env}" in configuration file!`
-      );
-    }
-
-    // TODO: either a bespoke arg type for this function to avoid `undefined`s or an `EnvOrConfig` type
-    return getNamespaceId({
-      binding,
-      "namespace-id": namespaceId,
-      env: undefined,
-      preview,
-      config: {
-        env: undefined,
-        build: undefined,
-        name: undefined,
-        account_id: undefined,
-        ...config.env[env],
-      },
-    });
-  }
-
   // there's no KV namespaces
   if (!config.kv_namespaces || config.kv_namespaces.length === 0) {
     throw new Error(
@@ -275,7 +399,7 @@ export function getNamespaceId({
 /**
  * KV namespace binding names must be valid JS identifiers.
  */
-export function isValidNamespaceBinding(
+export function isValidKVNamespaceBinding(
   binding: string | undefined
 ): binding is string {
   return (