wrangler 0.0.0-e6733a3 → 0.0.0-e88a54e

package/src/inspect.ts

@@ -1,11 +1,14 @@
-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 { URL } from "node:url";
+
 import { useEffect, useRef, useState } from "react";
+import WebSocket, { WebSocketServer } from "ws";
 import { version } from "../package.json";
-
+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
@@ -51,23 +54,18 @@ interface InspectorProps {
 export default function useInspector(props: InspectorProps) {
   /** A unique ID for this session. */
   const inspectorIdRef = useRef(randomId());
+
+  /** The websocket from the devtools instance. */
+  const [localWebSocket, setLocalWebSocket] = useState<WebSocket>();
+  /**  The websocket from the edge */
+  const [remoteWebSocket, setRemoteWebSocket] = useState<WebSocket>();
+
   /**
    *  The local proxy server that acts as the bridge between
    *  the remote websocket and the local DevTools instance.
    */
   const serverRef = useRef<Server>();
-  /** The websocket server that runs on top of the proxy server. */
-  const wsServerRef = useRef<WebSocketServer>();
-
-  /** The websocket from the devtools instance. */
-  const [localWebSocket, setLocalWebSocket] = useState<WebSocket | undefined>();
-  /**  The websocket from the edge */
-  const [remoteWebSocket, setRemoteWebSocket] = useState<
-    WebSocket | undefined
-  >();
-
-  if (!serverRef.current) {
-    // Let's create the proxy server!
+  if (serverRef.current === undefined) {
     serverRef.current = createServer(
       (req: IncomingMessage, res: ServerResponse) => {
         switch (req.url) {
@@ -78,7 +76,7 @@ export default function useInspector(props: InspectorProps) {
             res.end(
               JSON.stringify({
                 Browser: `wrangler/v${version}`,
-                // TODO: (someday): The DevTools protocol should match that of edgeworker.
+                // TODO: (someday): The DevTools protocol should match that of Edge Worker.
                 // This could be exposed by the preview API.
                 "Protocol-Version": "1.3",
               })
@@ -118,44 +116,59 @@ export default function useInspector(props: InspectorProps) {
         }
       }
     );
+  }
+  const server = serverRef.current;
 
-    // Let's create the websocket server on top of the proxy server
+  /**
+   * The websocket server that runs on top of the proxy server.
+   */
+  const wsServerRef = useRef<WebSocketServer>();
+  if (wsServerRef.current === undefined) {
     wsServerRef.current = new WebSocketServer({
-      server: serverRef.current,
+      server,
       clientTracking: true,
     });
-    wsServerRef.current.on("connection", (ws: WebSocket) => {
-      if (wsServerRef.current.clients.size > 1) {
-        /** We only want to have one active Devtools instance at a time. */
-        console.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");
-      } else {
-        // As promised, save the created websocket in a state hook
-        setLocalWebSocket(ws);
-
-        ws.addEventListener("close", () => {
-          // And and cleanup when devtools closes
-          setLocalWebSocket(undefined);
-        });
-      }
-    });
   }
+  const wsServer = wsServerRef.current;
+
+  wsServer.on("connection", (ws: WebSocket) => {
+    if (wsServer.clients.size > 1) {
+      /** We only want to have one active Devtools instance at a time. */
+      console.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");
+    } else {
+      // As promised, save the created websocket in a state hook
+      setLocalWebSocket(ws);
+
+      ws.addEventListener("close", () => {
+        // And and cleanup when devtools closes
+        setLocalWebSocket(undefined);
+      });
+    }
+  });
 
   /**
    * We start and stop the server in an effect to take advantage
    * of the component lifecycle. Convenient.
    */
   useEffect(() => {
-    serverRef.current.listen(props.port);
+    async function startInspectorProxy() {
+      await waitForPortToBeAvailable(props.port, {
+        retryPeriod: 200,
+        timeout: 2000,
+      });
+      server.listen(props.port);
+    }
+    startInspectorProxy().catch((err) => console.error(err));
     return () => {
-      serverRef.current.close();
+      server.close();
       // Also disconnect any open websockets/devtools connections
-      wsServerRef.current.clients.forEach((ws) => ws.close());
-      wsServerRef.current.close();
+      wsServer.clients.forEach((ws) => ws.close());
+      wsServer.close();
     };
-  }, [props.port]);
+  }, [props.port, server, wsServer]);
 
   /**
    * When connecting to the remote websocket, if we don't start either
@@ -238,7 +251,7 @@ export default function useInspector(props: InspectorProps) {
               "🚨", // cheesy, but it works
               // maybe we could use color here too.
               params.exceptionDetails.text,
-              params.exceptionDetails.exception.description
+              params.exceptionDetails.exception?.description ?? ""
             );
           }
           if (evt.method === "Runtime.consoleAPICalled") {
@@ -284,7 +297,7 @@ export default function useInspector(props: InspectorProps) {
       clearInterval(keepAliveInterval);
       // Then we'll send a message to the devtools instance to
       // tell it to clear the console.
-      wsServerRef.current.clients.forEach((client) => {
+      wsServer.clients.forEach((client) => {
         // We could've used `localSocket` here, but
         // then we would have had to add it to the effect
         // change detection array, which would have made a
@@ -311,8 +324,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,
   ]);
 
   /**
@@ -350,9 +369,16 @@ export default function useInspector(props: InspectorProps) {
     /** Send a message from the local websocket to the remote websocket */
     function sendMessageToRemoteWebSocket(event: MessageEvent) {
       try {
+        assert(
+          remoteWebSocket,
+          "Trying to send a message to an undefined `remoteWebSocket`"
+        );
         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
@@ -367,6 +393,10 @@ export default function useInspector(props: InspectorProps) {
 
     /** Send a message from the local websocket to the remote websocket */
     function sendMessageToLocalWebSocket(event: MessageEvent) {
+      assert(
+        localWebSocket,
+        "Trying to send a message to an undefined `localWebSocket`"
+      );
       localWebSocket.send(event.data);
     }
 
@@ -419,8 +449,35 @@ 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 = [];
+  const args: string[] = [];
   for (const ro of evt.args) {
     switch (ro.type) {
       case "string":
@@ -432,13 +489,17 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
         args.push(ro.value);
         break;
       case "function":
-        args.push(`[Function: ${ro.description}]`);
+        args.push(`[Function: ${ro.description ?? "<no-description>"}]`);
         break;
       case "object":
         if (!ro.preview) {
-          args.push(ro.description);
+          args.push(
+            ro.subtype === "null"
+              ? "null"
+              : ro.description ?? "<no-description>"
+          );
         } else {
-          args.push(ro.preview.description);
+          args.push(ro.preview.description ?? "<no-description>");
 
           switch (ro.preview.subtype) {
             case "array":
@@ -454,12 +515,17 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
               );
 
               break;
+            case "weakmap":
             case "map":
               args.push(
                 "{\n" +
-                  ro.preview.entries
-                    .map(({ key, value }) => {
-                      return `  ${key.description} => ${value.description}`;
+                  // 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
+                      }`;
                     })
                     .join(",\n") +
                   (ro.preview.overflow ? "\n  ..." : "") +
@@ -467,38 +533,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(
@@ -520,5 +595,23 @@ 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 {
+    console.warn(`Unsupported console method: ${method}`);
+    console.log("console event:", evt);
+  }
 }

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

@@ -1,13 +1,17 @@
 import { URLSearchParams } from "node:url";
+import { fetchListResult, fetchResult, fetchKVGetValue } from "./cfetch";
 import type { Config } from "./config";
-import { fetchListResult, fetchResult } from "./cfetch";
+
+/** 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;
 };
 
 /**
@@ -82,7 +86,7 @@ export interface NamespaceKeyInfo {
 export async function listNamespaceKeys(
   accountId: string,
   namespaceId: string,
-  prefix?: string
+  prefix = ""
 ) {
   return await fetchListResult<NamespaceKeyInfo>(
     `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/keys`,
@@ -91,62 +95,130 @@ export async function listNamespaceKeys(
   );
 }
 
+/**
+ * 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",
+]);
+
+/**
+ * Is the given object a valid `KeyValue` type?
+ */
+export function isKeyValue(keyValue: object): keyValue is KeyValue {
+  const props = Object.keys(keyValue);
+  if (!props.includes("key") || !props.includes("value")) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Get all the properties on the `keyValue` that are not expected.
+ */
+export function unexpectedKeyValueProps(keyValue: KeyValue): string[] {
+  const props = Object.keys(keyValue);
+  return props.filter((prop) => !KeyValueKeys.has(prop));
+}
+
 export async function putKeyValue(
   accountId: string,
   namespaceId: string,
-  key: string,
-  value: string,
-  args?: { expiration?: number; expiration_ttl?: number }
+  keyValue: KeyValue
 ) {
+  let searchParams: URLSearchParams | undefined;
+  if (keyValue.expiration || keyValue.expiration_ttl) {
+    searchParams = new URLSearchParams();
+    if (keyValue.expiration) {
+      searchParams.set("expiration", `${keyValue.expiration}`);
+    }
+    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 },
-    args
-      ? new URLSearchParams({
-          expiration: args.expiration?.toString(),
-          expiration_ttl: args.expiration_ttl?.toString(),
-        })
-      : undefined
+    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${keyValue.key}`,
+    { method: "PUT", body: keyValue.value },
+    searchParams
   );
 }
 
+export async function getKeyValue(
+  accountId: string,
+  namespaceId: string,
+  key: string
+): Promise<string> {
+  return await fetchKVGetValue(accountId, namespaceId, key);
+}
+
 export async function putBulkKeyValue(
   accountId: string,
   namespaceId: string,
-  keyvalueStr: string
+  keyValues: KeyValue[],
+  progressCallback: (index: number, total: number) => void
 ) {
-  return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
-    {
-      method: "PUT",
-      body: keyvalueStr,
-      headers: { "Content-Type": "application/json" },
+  for (let index = 0; index < keyValues.length; index += BATCH_KEY_MAX) {
+    if (progressCallback && keyValues.length > BATCH_KEY_MAX) {
+      progressCallback(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 (progressCallback && keyValues.length > BATCH_KEY_MAX) {
+    progressCallback(keyValues.length, keyValues.length);
+  }
 }
 
 export async function deleteBulkKeyValue(
   accountId: string,
   namespaceId: string,
-  keyStr: string
+  keys: string[],
+  progressCallback: (index: number, total: number) => void
 ) {
-  return await fetchResult(
-    `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/bulk`,
-    {
-      method: "DELETE",
-      body: keyStr,
-      headers: { "Content-Type": "application/json" },
+  for (let index = 0; index < keys.length; index += BATCH_KEY_MAX) {
+    if (progressCallback && keys.length > BATCH_KEY_MAX) {
+      progressCallback(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 (progressCallback && keys.length > BATCH_KEY_MAX) {
+    progressCallback(keys.length, keys.length);
+  }
 }
 
-export function getNamespaceId({
-  preview,
-  binding,
-  config,
-  "namespace-id": namespaceId,
-  env,
-}: KvArgs): string {
+export function getNamespaceId(
+  { preview, binding, "namespace-id": namespaceId }: KvArgs,
+  config: Config
+): string {
   // nice
   if (namespaceId) {
     return namespaceId;
@@ -154,7 +226,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.");
   }
@@ -167,30 +239,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(
@@ -262,6 +310,10 @@ export function getNamespaceId({
 /**
  * KV namespace binding names must be valid JS identifiers.
  */
-export function isValidNamespaceBinding(binding: string): boolean {
-  return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(binding);
+export function isValidNamespaceBinding(
+  binding: string | undefined
+): binding is string {
+  return (
+    typeof binding === "string" && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(binding)
+  );
 }

package/src/miniflare-cli/README.md

@@ -0,0 +1,30 @@
+# Custom Miniflare CLI
+
+This directory contains a simple wrapper around the programmatic Miniflare API,
+which Wrangler spawns when running `wrangler dev` in local mode.
+
+## Building
+
+This CLI is built at the same time as Wrangler by running
+
+```
+npm run -w wrangler build
+```
+
+The output of the build is `miniflare-dist/index.mjs`.
+
+## Running
+
+The CLI expects a single command line argument which is the Miniflare options formatted as a string of JSON.
+
+```bash
+node --no-warnings ./packages/wrangler/miniflare-dist/index.mjs '{"watch": true, "script": ""}' --log VERBOSE
+```
+
+The `--log` argument is optional and takes one of Miniflare's LogLevels: "NONE", "ERROR", "WARN", "INFO", "DEBUG", "VERBOSE".
+It defaults to `INFO`.
+
+## Debugging
+
+Simply place a breakpoint in the code and run the above command in the VS Code "JavaScript Debug Terminal".
+The code will stop at the breakpoint as expected.

package/src/miniflare-cli/enum-keys.ts

@@ -0,0 +1,17 @@
+export type EnumKeys<Enum> = Exclude<keyof Enum, number>;
+
+export const enumObject = <Enum extends Record<string, number | string>>(
+  e: Enum
+) => {
+  const copy = { ...e } as { [K in EnumKeys<Enum>]: Enum[K] };
+  Object.values(e).forEach(
+    (value) => typeof value === "number" && delete copy[value]
+  );
+  return copy;
+};
+
+export const enumKeys = <Enum extends Record<string, number | string>>(
+  e: Enum
+) => {
+  return Object.keys(enumObject(e)) as EnumKeys<Enum>[];
+};