wrangler 0.0.0-e22f9d7 → 0.0.0-e2a26a0

package/src/inspect.ts

@@ -1,12 +1,13 @@
-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 { URL } from "node:url";
+
 import { useEffect, useRef, useState } from "react";
+import WebSocket, { WebSocketServer } from "ws";
 import { version } from "../package.json";
-
 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
@@ -315,9 +316,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,
   ]);
 
   /**
@@ -432,6 +438,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 +482,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 +504,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 +522,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 +584,13 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
     }
   }
 
-  console[evt.type](...args);
+  const method = mapConsoleAPIMessageTypeToConsoleMethod[evt.type];
+
+  if (method in console) {
+    // eslint-disable-next-line prefer-spread
+    console[method].apply(console, args);
+  } else {
+    console.warn(`Unsupported console method: ${method}`);
+    console.log("console event:", evt);
+  }
 }

package/src/kv.tsx

@@ -1,6 +1,6 @@
 import { URLSearchParams } from "node:url";
+import { fetchListResult, fetchResult, fetchKVGetValue } from "./cfetch";
 import type { Config } from "./config";
-import { fetchListResult, fetchResult } from "./cfetch";
 
 type KvArgs = {
   binding?: string;
@@ -115,6 +115,14 @@ export async function putKeyValue(
   );
 }
 
+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,

package/src/module-collection.ts

@@ -1,8 +1,8 @@
+import crypto from "node:crypto";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
 import type { CfModule } from "./api/worker";
 import type esbuild from "esbuild";
-import path from "node:path";
-import { readFile } from "node:fs/promises";
-import crypto from "node:crypto";
 
 // This is a combination of an esbuild plugin and a mutable array
 // that we use to collect module references from source code.
@@ -30,11 +30,10 @@ export default function makeModuleCollector(): {
         build.onResolve(
           // filter on "known" file types,
           // we can expand this list later
-          { filter: /.*\.(pem|txt|html|wasm)$/ },
+          { filter: /.*\.(wasm)$/ },
           async (args: esbuild.OnResolveArgs) => {
             // take the file and massage it to a
             // transportable/manageable format
-            const fileExt = path.extname(args.path);
             const filePath = path.join(args.resolveDir, args.path);
             const fileContent = await readFile(filePath);
             const fileHash = crypto
@@ -47,7 +46,7 @@ export default function makeModuleCollector(): {
             modules.push({
               name: fileName,
               content: fileContent,
-              type: fileExt === ".wasm" ? "compiled-wasm" : "text",
+              type: "compiled-wasm",
             });
 
             return {

package/src/package-manager.ts

@@ -0,0 +1,120 @@
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { execa, execaCommandSync } from "execa";
+
+export interface PackageManager {
+  addDevDeps(...packages: string[]): Promise<void>;
+  install(): Promise<void>;
+}
+
+export async function getPackageManager(root: string): Promise<PackageManager> {
+  const [hasYarn, hasNpm] = await Promise.all([supportsYarn(), supportsNpm()]);
+  const hasYarnLock = existsSync(join(root, "yarn.lock"));
+  const hasNpmLock = existsSync(join(root, "package-lock.json"));
+
+  if (hasNpmLock) {
+    if (hasNpm) {
+      console.log(
+        "Using npm as package manager, as there is already a package-lock.json file."
+      );
+      return NpmPackageManager;
+    } else if (hasYarn) {
+      console.log("Using yarn as package manager.");
+      console.warn(
+        "There is already a package-lock.json file but could not find npm on the PATH."
+      );
+      return YarnPackageManager;
+    }
+  } else if (hasYarnLock) {
+    if (hasYarn) {
+      console.log(
+        "Using yarn as package manager, as there is already a yarn.lock file."
+      );
+      return YarnPackageManager;
+    } else if (hasNpm) {
+      console.log("Using npm as package manager.");
+      console.warn(
+        "There is already a yarn.lock file but could not find yarn on the PATH."
+      );
+      return NpmPackageManager;
+    }
+  }
+
+  if (hasNpm) {
+    console.log("Using npm as package manager.");
+    return NpmPackageManager;
+  } else if (hasYarn) {
+    console.log("Using yarn as package manager.");
+    return YarnPackageManager;
+  } else {
+    throw new Error(
+      "Unable to find a package manager. Supported managers are: npm and yarn."
+    );
+  }
+}
+
+/**
+ * Get the name of the given `packageManager`.
+ */
+export function getPackageManagerName(packageManager: unknown): string {
+  return packageManager === NpmPackageManager
+    ? "npm"
+    : packageManager === YarnPackageManager
+    ? "yarn"
+    : "unknown";
+}
+
+/**
+ * Manage packages using npm
+ */
+const NpmPackageManager: PackageManager = {
+  /** Add and install a new devDependency into the local package.json. */
+  async addDevDeps(...packages: string[]): Promise<void> {
+    await execa("npm", ["install", ...packages, "--save-dev"], {
+      stdio: "inherit",
+    });
+  },
+
+  /** Install all the dependencies in the local package.json. */
+  async install(): Promise<void> {
+    await execa("npm", ["install"], {
+      stdio: "inherit",
+    });
+  },
+};
+
+/**
+ * Manage packages using yarn
+ */
+const YarnPackageManager: PackageManager = {
+  /** Add and install a new devDependency into the local package.json. */
+  async addDevDeps(...packages: string[]): Promise<void> {
+    await execa("yarn", ["add", ...packages, "--dev"], {
+      stdio: "inherit",
+    });
+  },
+
+  /** Install all the dependencies in the local package.json. */
+  async install(): Promise<void> {
+    await execa("yarn", ["install"], {
+      stdio: "inherit",
+    });
+  },
+};
+
+async function supports(name: string): Promise<boolean> {
+  try {
+    execaCommandSync(`${name} --version`, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function supportsYarn(): Promise<boolean> {
+  return supports("yarn");
+}
+
+function supportsNpm(): Promise<boolean> {
+  return supports("npm");
+}

package/src/pages.tsx

@@ -1,28 +1,28 @@
 /* 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, writeFileSync } from "fs";
-import { execSync, spawn } from "child_process";
-import { URL } from "url";
+import { execSync, spawn } from "node:child_process";
+import { existsSync, lstatSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { URL } from "node:url";
+import { watch } from "chokidar";
 import { getType } from "mime";
 import open from "open";
-import { watch } from "chokidar";
-import type { BuildResult } from "esbuild";
 import { buildWorker } from "../pages/functions/buildWorker";
-import type { Config } from "../pages/functions/routes";
-import { writeRoutesModule } from "../pages/functions/routes";
 import { generateConfigFromFileTree } from "../pages/functions/filepath-routing";
+import { writeRoutesModule } from "../pages/functions/routes";
+import { toUrlPath } from "./paths";
+import type { Config } from "../pages/functions/routes";
+import type { Headers, Request, fetch } from "@miniflare/core";
+import type { BuildResult } from "esbuild";
+import type { MiniflareOptions } from "miniflare";
+import type { BuilderCallback } from "yargs";
 
 // 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";
 
-const EXIT_CALLBACKS = [];
+const EXIT_CALLBACKS: (() => void)[] = [];
 const EXIT = (message?: string, code?: number) => {
   if (message) console.log(message);
   if (code) process.exitCode = code;
@@ -122,7 +122,9 @@ async function spawnProxyProcess({
       },
     }
   );
-  EXIT_CALLBACKS.push(() => proxy.kill());
+  EXIT_CALLBACKS.push(() => {
+    proxy.kill();
+  });
 
   proxy.stdout.on("data", (data) => {
     console.log(`[proxy]: ${data}`);
@@ -664,16 +666,17 @@ async function buildFunctions({
   );
 
   const routesModule = join(tmpdir(), "./functionsRoutes.mjs");
+  const baseURL = toUrlPath("/");
 
   const config: Config = await generateConfigFromFileTree({
     baseDir: functionsDirectory,
-    baseURL: "/",
+    baseURL,
   });
 
   if (outputConfigPath) {
     writeFileSync(
       outputConfigPath,
-      JSON.stringify({ ...config, baseURL: "/" }, null, 2)
+      JSON.stringify({ ...config, baseURL }, null, 2)
     );
   }
 
@@ -827,6 +830,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             scriptPath,
           };
         } else {
+          scriptReadyResolve();
+
           const scriptPath =
             directory !== undefined
               ? join(directory, singleWorkerScriptPath)
@@ -862,11 +867,13 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         // internally just waits for that promise to resolve.
         await scriptReadyPromise;
 
-        // 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);
+        // `assetsFetch()` will only be called if there is `proxyPort` defined.
+        // We only define `proxyPort`, above, when there is no `directory` defined.
+        const assetsFetch =
+          directory !== undefined
+            ? await generateAssetsFetch(directory)
+            : invalidAssetsFetch;
+
         const miniflare = new Miniflare({
           port,
           watch: true,
@@ -897,7 +904,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
               if (proxyPort) {
                 try {
                   const url = new URL(request.url);
-                  url.host = `127.0.0.1:${proxyPort}`;
+                  url.host = `localhost:${proxyPort}`;
                   return await fetch(url, request);
                 } catch (thrown) {
                   console.error(`Could not proxy request: ${thrown}`);
@@ -935,10 +942,10 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         try {
           // `startServer` might throw if user code contains errors
           const server = await miniflare.startServer();
-          console.log(`Serving at http://127.0.0.1:${port}/`);
+          console.log(`Serving at http://localhost:${port}/`);
 
           if (process.env.BROWSER !== "none") {
-            const childProcess = await open(`http://127.0.0.1:${port}/`);
+            const childProcess = await open(`http://localhost:${port}/`);
             // fail silently if the open command doesn't work (e.g. in GitHub Codespaces)
             childProcess.on("error", (_err) => {});
           }
@@ -962,7 +969,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
         }
       }
     )
-    .command("functions", "Cloudflare Pages Functions", (yargs) =>
+    .command("functions", false, (yargs) =>
+      // we hide this command from help output because
+      // it's not meant to be used directly right now
       yargs.command(
         "build [directory]",
         "Compile a folder of Cloudflare Pages Functions into a single Worker",
@@ -1029,3 +1038,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
       )
     );
 };
+
+const invalidAssetsFetch: typeof fetch = () => {
+  throw new Error(
+    "Trying to fetch assets directly when there is no `directory` option specified, and not in `local` mode."
+  );
+};

package/src/paths.ts

@@ -0,0 +1,26 @@
+import { assert } from "console";
+
+type DiscriminatedPath<Discriminator extends string> = string & {
+  _discriminator: Discriminator;
+};
+
+/**
+ * A branded string that expects to be URL compatible.
+ *
+ * Require this type when you want callers to ensure that they have converted file-path strings into URL-safe paths.
+ */
+export type UrlPath = DiscriminatedPath<"UrlPath">;
+
+/**
+ * Convert a file-path string to a URL-path string.
+ *
+ * Use this helper to convert a `string` to a `UrlPath` when it is not clear whether the string needs normalizing.
+ * Replaces all back-slashes with forward-slashes, and throws an error if the path contains a drive letter (e.g. `C:`).
+ */
+export function toUrlPath(path: string): UrlPath {
+  assert(
+    !/^[a-z]:/i.test(path),
+    "Tried to convert a Windows file path with a drive to a URL path."
+  );
+  return path.replace(/\\/g, "/") as UrlPath;
+}

package/src/proxy.ts

@@ -1,6 +1,9 @@
-import { connect } from "node:http2";
-import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
 import { createServer } from "node:http";
+import { connect } from "node:http2";
+import WebSocket from "faye-websocket";
+import { useEffect, useRef, useState } from "react";
+import serveStatic from "serve-static";
+import type { CfPreviewToken } from "./api/preview";
 import type {
   IncomingHttpHeaders,
   RequestListener,
@@ -8,10 +11,7 @@ import type {
   ServerResponse,
   Server,
 } from "node:http";
-import WebSocket from "faye-websocket";
-import serveStatic from "serve-static";
-import type { CfPreviewToken } from "./api/preview";
-import { useEffect, useRef } from "react";
+import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2";
 
 /**
  * `usePreviewServer` is a React hook that creates a local development
@@ -80,6 +80,17 @@ export function usePreviewServer({
     { request: IncomingMessage; response: ServerResponse }[]
   >([]);
 
+  /**
+   * The session doesn't last forever, and will evetually drop
+   * (usually within 5-15 minutes). When that happens, we simply
+   * restart the effect, effectively restarting the server. We use
+   * a state sigil as an effect dependency to do so.
+   */
+  const [retryServerSetupSigil, setRetryServerSetupSigil] = useState<number>(0);
+  function retryServerSetup() {
+    setRetryServerSetupSigil((x) => x + 1);
+  }
+
   useEffect(() => {
     // If we don't have a token, that means either we're just starting up,
     // or we're refreshing the token.
@@ -119,6 +130,11 @@ export function usePreviewServer({
     const remote = connect(`https://${previewToken.host}`);
     cleanupListeners.push(() => remote.destroy());
 
+    // As mentioned above, the session may die at any point,
+    // so we need to restart the effect.
+    remote.on("close", retryServerSetup);
+    cleanupListeners.push(() => remote.off("close", retryServerSetup));
+
     /** HTTP/2 -> HTTP/2  */
     const handleStream = createStreamHandler(previewToken, remote, port);
     proxy.on("stream", handleStream);
@@ -209,15 +225,31 @@ export function usePreviewServer({
     cleanupListeners.push(() => proxy.off("upgrade", handleUpgrade));
 
     return () => {
-      cleanupListeners.forEach((d) => d());
+      cleanupListeners.forEach((cleanup) => cleanup());
     };
-  }, [previewToken, publicRoot, port, proxy]);
+  }, [
+    previewToken,
+    publicRoot,
+    port,
+    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
+    // 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.
+    retryServerSetupSigil,
+  ]);
 
   // Start/stop the server whenever the
   // containing component is mounted/unmounted.
   useEffect(() => {
-    proxy.listen(port);
-    console.log(`⬣ Listening at http://localhost:${port}`);
+    waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 })
+      .then(() => {
+        proxy.listen(port);
+        console.log(`⬣ Listening at http://localhost:${port}`);
+      })
+      .catch((err) => {
+        console.error(`⬣ Failed to start server: ${err}`);
+      });
 
     return () => {
       proxy.close();
@@ -300,3 +332,39 @@ function createStreamHandler(
     });
   };
 }
+
+/**
+ * A helper function that waits for a port to be available.
+ */
+export async function waitForPortToBeAvailable(
+  port: number,
+  options: { retryPeriod: number; timeout: number }
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error(`Timed out waiting for port ${port}`));
+    }, options.timeout);
+
+    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();
+      server.on("error", (err) => {
+        // @ts-expect-error non standard property on Error
+        if (err.code === "EADDRINUSE") {
+          setTimeout(checkPort, options.retryPeriod);
+        } else {
+          reject(err);
+        }
+      });
+      server.listen(port, () => {
+        server.close();
+        clearTimeout(timeout);
+        resolve();
+      });
+    }
+
+    checkPort();
+  });
+}