wrangler 0.0.0-e928f94 → 0.0.0-e9a1820

package/src/kv.tsx

@@ -10,20 +10,57 @@ type KvArgs = {
   config?: Config;
 };
 
-export async function listNamespaces(accountId: string) {
-  let page = 1,
-    done = false,
-    results = [];
-  while (!(done || results.length % 100 !== 0)) {
-    const json = await cfetch<
-      { id: string; title: string; supports_url_encoding: boolean }[]
-    >(
-      `/accounts/${accountId}/storage/kv/namespaces?per_page=100&order=title&direction=asc&page=${page}`
+/**
+ * Create a new namespace under the given `accountId` with the given `title`.
+ *
+ * @returns the generated id of the created namespace.
+ */
+export async function createNamespace(
+  accountId: string,
+  title: string
+): Promise<string> {
+  const response = await cfetch<{ id: string }>(
+    `/accounts/${accountId}/storage/kv/namespaces`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        title,
+      }),
+    }
+  );
+
+  return response.id;
+}
+
+/**
+ * The information about a namespace that is returned from `listNamespaces()`.
+ */
+export interface KVNamespaceInfo {
+  id: string;
+  title: string;
+  supports_url_encoding?: boolean;
+}
+
+/**
+ * Fetch a list of all the namespaces under the given `accountId`.
+ */
+export async function listNamespaces(
+  accountId: string
+): Promise<KVNamespaceInfo[]> {
+  const pageSize = 100;
+  let page = 1;
+  const results: KVNamespaceInfo[] = [];
+  while (results.length % pageSize === 0) {
+    const json = await cfetch<KVNamespaceInfo[]>(
+      `/accounts/${accountId}/storage/kv/namespaces?per_page=${pageSize}&order=title&direction=asc&page=${page}`
     );
     page++;
-    results = [...results, ...json];
-    if (json.length === 0) {
-      done = true;
+    results.push(...json);
+    if (json.length < pageSize) {
+      break;
     }
   }
   return results;
@@ -130,7 +167,7 @@ export function getNamespaceId({
       );
     }
 
-    // TODO: either a bespoke arg type for this function to avoid undefineds or a EnvOrConfig type
+    // TODO: either a bespoke arg type for this function to avoid `undefined`s or an `EnvOrConfig` type
     return getNamespaceId({
       binding,
       "namespace-id": namespaceId,
@@ -153,9 +190,7 @@ export function getNamespaceId({
     );
   }
 
-  const namespace = config.kv_namespaces.find(
-    (namespace) => namespace.binding === binding
-  );
+  const namespace = config.kv_namespaces.find((ns) => ns.binding === binding);
 
   // we couldn't find a namespace with that binding
   if (!namespace) {
@@ -164,10 +199,12 @@ export function getNamespaceId({
 
   // end pre-flight checks
 
-  // we're in preview mode, `--preview true` or `--preivew` was passed
+  // we're in preview mode, `--preview true` or `--preview` was passed
   if (preview && namespace.preview_id) {
     namespaceId = namespace.preview_id;
-  } else {
+    // We don't want to execute code below if preview is set to true, so we just return. Otherwise we will get errors!
+    return namespaceId;
+  } else if (preview) {
     throw new Error(
       `No preview ID found for ${binding}. Add one to your wrangler config file to use a separate namespace for previewing your worker.`
     );
@@ -180,7 +217,9 @@ export function getNamespaceId({
   // --preview false was passed
   if (previewIsDefined && namespace.id) {
     namespaceId = namespace.id;
-  } else {
+    // We don't want to execute code below if preview is set to true, so we just return. Otherwise we can get error!
+    return namespaceId;
+  } else if (previewIsDefined) {
     throw new Error(
       `No namespace ID found for ${binding}. Add one to your wrangler config file to use a separate namespace for previewing your worker.`
     );
@@ -209,3 +248,10 @@ export function getNamespaceId({
 
   return namespaceId;
 }
+
+/**
+ * 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);
+}

package/src/pages.tsx

@@ -1,14 +1,22 @@
+/* eslint-disable no-shadow */
+
+import assert from "assert";
 import type { BuilderCallback } from "yargs";
 import { join } from "path";
 import { tmpdir } from "os";
 import { existsSync, lstatSync, readFileSync } from "fs";
 import { execSync, spawn } from "child_process";
-import { Headers, Request, Response } from "undici";
-import type { MiniflareOptions } from "miniflare";
-import type { RequestInfo, RequestInit } from "@miniflare/core";
+import { URL } from "url";
+import { getType } from "mime";
 import open from "open";
 import { watch } from "chokidar";
 
+// Defer importing miniflare until we really need it. This takes ~0.5s
+// and also modifies some `stream/web` and `undici` prototypes, so we
+// don't want to do this if pages commands aren't being called.
+import type { Headers, Request, fetch } from "@miniflare/core";
+import type { MiniflareOptions } from "miniflare";
+
 type Exit = (message?: string) => undefined;
 
 const isWindows = () => process.platform === "win32";
@@ -370,6 +378,9 @@ const hasFileExtension = (pathname: string) =>
 const generateAssetsFetch = async (
   directory: string
 ): Promise<typeof fetch> => {
+  // Defer importing miniflare until we really need it
+  const { Headers, Request, Response } = await import("@miniflare/core");
+
   const headersFile = join(directory, "_headers");
   const redirectsFile = join(directory, "_redirects");
   const workerFile = join(directory, "_worker.js");
@@ -466,14 +477,25 @@ const generateAssetsFetch = async (
         if ((asset = getAsset(`${cwd}/404.html`))) {
           deconstructedResponse.status = 404;
           deconstructedResponse.body = serveAsset(asset);
+          deconstructedResponse.headers.set(
+            "Content-Type",
+            getType(asset) || "application/octet-stream"
+          );
           return deconstructedResponse;
         }
       }
 
       if ((asset = getAsset(`/index.html`))) {
         deconstructedResponse.body = serveAsset(asset);
+        deconstructedResponse.headers.set(
+          "Content-Type",
+          getType(asset) || "application/octet-stream"
+        );
         return deconstructedResponse;
       }
+
+      deconstructedResponse.status = 404;
+      return deconstructedResponse;
     };
 
     let asset;
@@ -481,6 +503,10 @@ const generateAssetsFetch = async (
     if (url.pathname.endsWith("/")) {
       if ((asset = getAsset(`${url.pathname}/index.html`))) {
         deconstructedResponse.body = serveAsset(asset);
+        deconstructedResponse.headers.set(
+          "Content-Type",
+          getType(asset) || "application/octet-stream"
+        );
         return deconstructedResponse;
       } else if (
         (asset = getAsset(`${url.pathname.replace(/\/$/, ".html")}`))
@@ -508,6 +534,10 @@ const generateAssetsFetch = async (
         const extensionlessPath = url.pathname.slice(0, -".html".length);
         if (getAsset(extensionlessPath) || extensionlessPath === "/") {
           deconstructedResponse.body = serveAsset(asset);
+          deconstructedResponse.headers.set(
+            "Content-Type",
+            getType(asset) || "application/octet-stream"
+          );
           return deconstructedResponse;
         } else {
           deconstructedResponse.status = 301;
@@ -519,6 +549,10 @@ const generateAssetsFetch = async (
         }
       } else {
         deconstructedResponse.body = serveAsset(asset);
+        deconstructedResponse.headers.set(
+          "Content-Type",
+          getType(asset) || "application/octet-stream"
+        );
         return deconstructedResponse;
       }
     } else if (hasFileExtension(url.pathname)) {
@@ -528,6 +562,10 @@ const generateAssetsFetch = async (
 
     if ((asset = getAsset(`${url.pathname}.html`))) {
       deconstructedResponse.body = serveAsset(asset);
+      deconstructedResponse.headers.set(
+        "Content-Type",
+        getType(asset) || "application/octet-stream"
+      );
       return deconstructedResponse;
     }
 
@@ -569,7 +607,7 @@ const generateAssetsFetch = async (
     });
   };
 
-  return (async (input, init) => {
+  return async (input, init) => {
     const request = new Request(input, init);
     const deconstructedResponse = generateResponse(request);
     attachHeaders(request, deconstructedResponse);
@@ -584,7 +622,7 @@ const generateAssetsFetch = async (
       headers,
       status: deconstructedResponse.status,
     });
-  }) as any;
+  };
 };
 
 export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
@@ -710,56 +748,23 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         };
       }
 
+      // Defer importing miniflare until we really need it
       const { Miniflare, Log, LogLevel } = await import("miniflare");
-      const { fetch } = await import("@miniflare/core");
-
-      class MiniflareLogger extends Log {
-        logWithLevel(level: number, message: string) {
-          if (level <= this.level) {
-            switch (level) {
-              case LogLevel.NONE: {
-                break;
-              }
-              case LogLevel.ERROR: {
-                console.error(message);
-                break;
-              }
-              case LogLevel.WARN: {
-                console.warn(message);
-                break;
-              }
-              case LogLevel.INFO: {
-                console.info(message);
-                break;
-              }
-              case LogLevel.DEBUG: {
-                console.debug(message);
-                break;
-              }
-              case LogLevel.VERBOSE: {
-                console.debug(message);
-                break;
-              }
-            }
-          }
-        }
-
-        log(message: string) {}
-
-        error(message: Error) {
-          this.logWithLevel(
-            LogLevel.ERROR,
-            message.stack ? message.stack : `${message}`
-          );
-        }
-      }
+      const { Response, fetch } = await import("@miniflare/core");
 
+      // Should only be called if no proxyPort, using `assert.fail()` here
+      // means the type of `assetsFetch` is still `typeof fetch`
+      const assetsFetch = proxyPort
+        ? () => assert.fail()
+        : await generateAssetsFetch(directory);
       const miniflare = new Miniflare({
         port,
         watch: true,
         modules: true,
 
-        log: new MiniflareLogger(LogLevel.ERROR),
+        log: new Log(LogLevel.ERROR, { prefix: "pages" }),
+        logUnhandledRejections: true,
+        sourceMap: true,
 
         kvNamespaces: kvs.map((kv) => kv.toString()),
 
@@ -769,50 +774,43 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           )
         ),
 
+        // User bindings
         bindings: {
-          // User bindings
           ...Object.fromEntries(
             bindings.map((binding) => binding.toString().split("="))
           ),
+        },
 
-          // env.ASSETS.fetch
-          ASSETS: {
-            fetch: async (
-              input: RequestInfo,
-              init?: RequestInit | undefined
-            ) => {
-              if (proxyPort) {
-                try {
-                  let request = new Request(input as any, init);
-                  const url = new URL(request.url);
-                  url.host = `127.0.0.1:${proxyPort}`;
-                  request = new Request(url.toString(), request);
-                  return await fetch(request);
-                } catch (thrown) {
-                  console.error(`Could not proxy request: ${thrown}`);
-
-                  // TODO: Pretty error page
-                  return new Response(
-                    `[wrangler] Could not proxy request: ${thrown}`,
-                    { status: 502 }
-                  );
-                }
-              } else {
-                try {
-                  return await (
-                    await generateAssetsFetch(directory)
-                  )(input as any, init as any);
-                } catch (thrown) {
-                  console.error(`Could not serve static asset: ${thrown}`);
-
-                  // TODO: Pretty error page
-                  return new Response(
-                    `[wrangler] Could not serve static asset: ${thrown}`,
-                    { status: 502 }
-                  );
-                }
+        // env.ASSETS.fetch
+        serviceBindings: {
+          async ASSETS(request) {
+            if (proxyPort) {
+              try {
+                const url = new URL(request.url);
+                url.host = `127.0.0.1:${proxyPort}`;
+                return await fetch(url, request);
+              } catch (thrown) {
+                console.error(`Could not proxy request: ${thrown}`);
+
+                // TODO: Pretty error page
+                return new Response(
+                  `[wrangler] Could not proxy request: ${thrown}`,
+                  { status: 502 }
+                );
+              }
+            } else {
+              try {
+                return await assetsFetch(request);
+              } catch (thrown) {
+                console.error(`Could not serve static asset: ${thrown}`);
+
+                // TODO: Pretty error page
+                return new Response(
+                  `[wrangler] Could not serve static asset: ${thrown}`,
+                  { status: 502 }
+                );
               }
-            },
+            }
           },
         },
 
@@ -823,21 +821,31 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         ...miniflareArgs,
       });
 
-      const server = await miniflare.startServer();
-      console.log(`Serving at http://127.0.0.1:${port}/`);
+      try {
+        // `startServer` might throw if user code contains errors
+        const server = await miniflare.startServer();
+        console.log(`Serving at http://127.0.0.1:${port}/`);
 
-      if (process.env.BROWSER !== "none") {
-        open(`http://127.0.0.1:${port}/`);
-      }
+        if (process.env.BROWSER !== "none") {
+          await open(`http://127.0.0.1:${port}/`);
+        }
 
-      process.on("SIGINT", () => {
-        server.close();
-        miniflare.dispose();
-      });
-      process.on("SIGTERM", () => {
-        server.close();
-        miniflare.dispose();
-      });
+        process.on("SIGINT", () => {
+          server.close();
+          miniflare.dispose().catch((err) => {
+            miniflare.log.error(err);
+          });
+        });
+        process.on("SIGTERM", () => {
+          server.close();
+          miniflare.dispose().catch((err) => {
+            miniflare.log.error(err);
+          });
+        });
+      } catch (e) {
+        miniflare.log.error(e);
+        process.exitCode = 1;
+      }
     }
   );
 };

package/src/proxy.ts

@@ -0,0 +1,103 @@
+import { connect } from "node:http2";
+import { createServer } from "node:http";
+import type { Server, IncomingHttpHeaders, RequestListener } from "node:http";
+import WebSocket from "faye-websocket";
+import serveStatic from "serve-static";
+
+export interface HttpProxyInit {
+  host: string;
+  assetPath?: string | null;
+  onRequest?: (headers: IncomingHttpHeaders) => void;
+  onResponse?: (headers: IncomingHttpHeaders) => void;
+}
+
+/**
+ * Creates a HTTP/1 proxy that sends requests over HTTP/2.
+ */
+export function createHttpProxy(init: HttpProxyInit): Server {
+  const { host, assetPath, onRequest = () => {}, onResponse = () => {} } = init;
+  const remote = connect(`https://${host}`);
+  const local = createServer();
+  // HTTP/2 -> HTTP/2
+  local.on("stream", (stream, headers: IncomingHttpHeaders) => {
+    onRequest(headers);
+    headers[":authority"] = host;
+    const request = stream.pipe(remote.request(headers));
+    request.on("response", (responseHeaders: IncomingHttpHeaders) => {
+      onResponse(responseHeaders);
+      stream.respond(responseHeaders);
+      request.pipe(stream, { end: true });
+    });
+  });
+  // HTTP/1 -> HTTP/2
+  const handleRequest: RequestListener = (message, response) => {
+    const { httpVersionMajor, headers, method, url } = message;
+    if (httpVersionMajor >= 2) {
+      return; // Already handled by the "stream" event.
+    }
+    onRequest(headers);
+    headers[":method"] = method;
+    headers[":path"] = url;
+    headers[":authority"] = host;
+    headers[":scheme"] = "https";
+    for (const name of Object.keys(headers)) {
+      if (HTTP1_HEADERS.has(name.toLowerCase())) {
+        delete headers[name];
+      }
+    }
+    const request = message.pipe(remote.request(headers));
+    request.on("response", (responseHeaders) => {
+      const status = responseHeaders[":status"];
+      onResponse(responseHeaders);
+      for (const name of Object.keys(responseHeaders)) {
+        if (name.startsWith(":")) {
+          delete responseHeaders[name];
+        }
+      }
+      response.writeHead(status, responseHeaders);
+      request.pipe(response, { end: true });
+    });
+  };
+  // If an asset path is defined, check the file system
+  // for a file first and serve if it exists.
+  if (assetPath) {
+    const handleAsset = serveStatic(assetPath, {
+      cacheControl: false,
+    });
+    local.on("request", (request, response) => {
+      handleAsset(request, response, () => {
+        handleRequest(request, response);
+      });
+    });
+  } else {
+    local.on("request", handleRequest);
+  }
+  // HTTP/1 -> WebSocket (over HTTP/1)
+  local.on("upgrade", (message, socket, body) => {
+    const { headers, url } = message;
+    onRequest(headers);
+    headers["host"] = host;
+    const localWebsocket = new WebSocket(message, socket, body);
+    // TODO(soon): Custom WebSocket protocol is not working?
+    const remoteWebsocketClient = new WebSocket.Client(
+      `wss://${host}${url}`,
+      [],
+      { headers }
+    );
+    localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
+  });
+  remote.on("close", () => {
+    local.close();
+  });
+  return local;
+}
+
+const HTTP1_HEADERS = new Set([
+  "host",
+  "connection",
+  "upgrade",
+  "keep-alive",
+  "proxy-connection",
+  "transfer-encoding",
+  "http2-settings",
+]);

package/src/publish.ts

@@ -9,6 +9,7 @@ import cfetch from "./cfetch";
 import assert from "node:assert";
 import { syncAssets } from "./sites";
 import makeModuleCollector from "./module-collection";
+import { execa } from "execa";
 
 type CfScriptFormat = void | "modules" | "service-worker";
 
@@ -76,6 +77,17 @@ export default async function publish(props: Props): Promise<void> {
 
   const destination = await tmp.dir({ unsafeCleanup: true });
 
+  if (props.config.build?.command) {
+    // TODO: add a deprecation message here?
+    console.log("running:", props.config.build.command);
+    const buildCommandPieces = props.config.build.command.split(" ");
+    await execa(buildCommandPieces[0], buildCommandPieces.slice(1), {
+      stdout: "inherit",
+      stderr: "inherit",
+      ...(props.config.build?.cwd && { cwd: props.config.build.cwd }),
+    });
+  }
+
   const moduleCollector = makeModuleCollector();
   const result = await esbuild.build({
     ...(props.public
@@ -137,7 +149,7 @@ export default async function publish(props: Props): Promise<void> {
   }
 
   const content = await readFile(chunks[0], { encoding: "utf-8" });
-  destination.cleanup();
+  await destination.cleanup();
 
   // if config.migrations
   // get current migration tag
@@ -146,7 +158,7 @@ export default async function publish(props: Props): Promise<void> {
     const scripts = await cfetch<{ id: string; migration_tag: string }[]>(
       `/accounts/${accountId}/workers/scripts`
     );
-    const script = scripts.find((script) => script.id === scriptName);
+    const script = scripts.find(({ id }) => id === scriptName);
     if (script?.migration_tag) {
       // was already published once
       const foundIndex = config.migrations.findIndex(
@@ -154,7 +166,7 @@ export default async function publish(props: Props): Promise<void> {
       );
       if (foundIndex === -1) {
         console.warn(
-          `The published script ${scriptName} has a migration tag "${script.migration_tag}, which was not found in wrangler.toml. You may have already delated it. Applying all available migrations to the script...`
+          `The published script ${scriptName} has a migration tag "${script.migration_tag}, which was not found in wrangler.toml. You may have already deleted it. Applying all available migrations to the script...`
         );
         migrations = {
           old_tag: script.migration_tag,
@@ -189,6 +201,16 @@ export default async function publish(props: Props): Promise<void> {
       : { manifest: undefined, namespace: undefined };
 
   const envRootObj = props.env ? config.env[props.env] || {} : config;
+  const bindings: CfWorkerInit["bindings"] = {
+    kv_namespaces: envRootObj.kv_namespaces?.concat(
+      assets.namespace
+        ? { binding: "__STATIC_CONTENT", id: assets.namespace }
+        : []
+    ),
+    vars: envRootObj.vars,
+    durable_objects: envRootObj.durable_objects,
+    services: envRootObj.experimental_services,
+  };
 
   const worker: CfWorkerInit = {
     name: scriptName,
@@ -197,35 +219,17 @@ export default async function publish(props: Props): Promise<void> {
       content: content,
       type: bundle.type === "esm" ? "esm" : "commonjs",
     },
-    variables: {
-      ...(envRootObj?.vars || {}),
-      ...(envRootObj?.kv_namespaces || []).reduce(
-        (obj, { binding, preview_id: _preview_id, id }) => {
-          return { ...obj, [binding]: { namespaceId: id } };
-        },
-        {}
-      ),
-      ...(envRootObj?.durable_objects?.bindings || []).reduce(
-        (obj, { name, class_name, script_name }) => {
-          return {
-            ...obj,
-            [name]: { class_name, ...(script_name && { script_name }) },
-          };
-        },
-        {}
-      ),
-      ...(assets.namespace
-        ? { __STATIC_CONTENT: { namespaceId: assets.namespace } }
-        : {}),
-    },
+    bindings,
     ...(migrations && { migrations }),
-    modules: assets.manifest
-      ? moduleCollector.modules.concat({
-          name: "__STATIC_CONTENT_MANIFEST",
-          content: JSON.stringify(assets.manifest),
-          type: "text",
-        })
-      : moduleCollector.modules,
+    modules: moduleCollector.modules.concat(
+      assets.manifest
+        ? {
+            name: "__STATIC_CONTENT_MANIFEST",
+            content: JSON.stringify(assets.manifest),
+            type: "text",
+          }
+        : []
+    ),
     compatibility_date: config.compatibility_date,
     compatibility_flags: config.compatibility_flags,
     usage_model: config.usage_model,
@@ -283,8 +287,8 @@ export default async function publish(props: Props): Promise<void> {
         // This is to prevent an issue where a negative cache-hit
         // causes the subdomain to be unavailable for 30 seconds.
         // This is a temporary measure until we fix this on the edge.
-        .then((url) => {
-          sleep(3000);
+        .then(async (url) => {
+          await sleep(3000);
           return url;
         })
     );