wrangler 0.0.13 → 0.0.17

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,
   ]);
 
   /**
@@ -361,7 +367,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
@@ -581,8 +590,18 @@ 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);

package/src/kv.tsx

@@ -1,13 +1,12 @@
 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;
   "namespace-id"?: string;
   env?: string;
   preview?: boolean;
-  config?: Config;
 };
 
 /**
@@ -115,6 +114,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,
@@ -145,13 +152,10 @@ export async function deleteBulkKeyValue(
   );
 }
 
-export function getNamespaceId({
-  preview,
-  binding,
-  config,
-  "namespace-id": namespaceId,
-  env,
-}: KvArgs): string {
+export function getNamespaceId(
+  { preview, binding, "namespace-id": namespaceId, env }: KvArgs,
+  config: Config
+): string {
   // nice
   if (namespaceId) {
     return namespaceId;
@@ -181,19 +185,21 @@ export function getNamespaceId({
     }
 
     // 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: {
+    return getNamespaceId(
+      {
+        binding,
+        "namespace-id": namespaceId,
+        env: undefined,
+        preview,
+      },
+      {
         env: undefined,
         build: undefined,
         name: undefined,
         account_id: undefined,
         ...config.env[env],
-      },
-    });
+      }
+    );
   }
 
   // there's no KV namespaces

package/src/module-collection.ts

@@ -1,8 +1,8 @@
-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";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import type { CfModule, CfScriptFormat } from "./api/worker";
+import type esbuild from "esbuild";
 
 // This is a combination of an esbuild plugin and a mutable array
 // that we use to collect module references from source code.
@@ -12,7 +12,9 @@ import crypto from "node:crypto";
 // plugin+array is used to collect references to these modules, reference
 // them correctly in the bundle, and add them to the form upload.
 
-export default function makeModuleCollector(): {
+export default function makeModuleCollector(props: {
+  format: CfScriptFormat;
+}): {
   modules: CfModule[];
   plugin: esbuild.Plugin;
 } {
@@ -23,18 +25,17 @@ export default function makeModuleCollector(): {
       name: "wrangler-module-collector",
       setup(build) {
         build.onStart(() => {
-          // reset the moduels collection
+          // reset the module collection array
           modules.splice(0);
         });
 
         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
@@ -45,19 +46,38 @@ export default function makeModuleCollector(): {
 
             // add the module to the array
             modules.push({
-              name: fileName,
+              name: "./" + fileName,
               content: fileContent,
-              type: fileExt === ".wasm" ? "compiled-wasm" : "text",
+              type: "compiled-wasm",
             });
 
             return {
-              path: fileName, // change the reference to the changed module
-              external: true, // mark it as external in the bundle
+              path: "./" + fileName, // change the reference to the changed module
+              external: props.format === "modules", // mark it as external in the bundle
               namespace: "wrangler-module-collector-ns", // just a tag, this isn't strictly necessary
               watchFiles: [filePath], // we also add the file to esbuild's watch list
             };
           }
         );
+
+        if (props.format !== "modules") {
+          build.onLoad(
+            { filter: /.*\.(wasm)$/ },
+            async (args: esbuild.OnLoadArgs) => {
+              return {
+                // We replace the the wasm module with an identifier
+                // that we'll separately add to the form upload
+                // as part of [wasm_modules]. This identifier has to be a valid
+                // JS identifier, so we replace all non alphanumeric characters
+                // with an underscore.
+                contents: `export default ${args.path.replace(
+                  /[^a-zA-Z0-9_$]/g,
+                  "_"
+                )};`,
+              };
+            }
+          );
+        }
       },
     },
   };

package/src/open-in-browser.ts

@@ -0,0 +1,13 @@
+import open from "open";
+/**
+ * An extremely simple wrapper around the open command.
+ * Specifically, it adds an 'error' event handler so that when this function
+ * is called in environments where we can't open the browser (e.g. github codespaces,
+ * stackblitz, remote servers), it doesn't just crash the process.
+ */
+export default async function openInBrowser(url: string): Promise<void> {
+  const childProcess = await open(url);
+  childProcess.on("error", () => {
+    console.warn(`Failed to open ${url} in a browser`);
+  });
+}

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,25 +1,26 @@
 /* eslint-disable no-shadow */
 
-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 { getType } from "mime";
-import open from "open";
+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 type { BuildResult } from "esbuild";
+import { getType } from "mime";
 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 openInBrowser from "./open-in-browser";
+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: (() => void)[] = [];
 const EXIT = (message?: string, code?: number) => {
@@ -665,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)
     );
   }
 
@@ -793,8 +795,8 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
         let miniflareArgs: MiniflareOptions = {};
 
-        let scriptReadyResolve;
-        const scriptReadyPromise = new Promise(
+        let scriptReadyResolve: () => void;
+        const scriptReadyPromise = new Promise<void>(
           (resolve) => (scriptReadyResolve = resolve)
         );
 
@@ -828,6 +830,9 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             scriptPath,
           };
         } else {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          scriptReadyResolve!();
+
           const scriptPath =
             directory !== undefined
               ? join(directory, singleWorkerScriptPath)
@@ -896,7 +901,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
 
           // env.ASSETS.fetch
           serviceBindings: {
-            async ASSETS(request) {
+            async ASSETS(request: Request) {
               if (proxyPort) {
                 try {
                   const url = new URL(request.url);
@@ -941,9 +946,7 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
           console.log(`Serving at http://localhost:${port}/`);
 
           if (process.env.BROWSER !== "none") {
-            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) => {});
+            await openInBrowser(`http://localhost:${port}/`);
           }
 
           if (directory !== undefined && liveReload) {
@@ -960,12 +963,14 @@ export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
             miniflare.dispose().catch((err) => miniflare.log.error(err));
           });
         } catch (e) {
-          miniflare.log.error(e);
+          miniflare.log.error(e as Error);
           EXIT("Could not start Miniflare.", 1);
         }
       }
     )
-    .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",

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,13 @@ 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";
+import type ws from "ws";
+
+interface IWebsocket extends ws {
+  // Pipe implements .on("message", ...)
+  pipe<T>(fn: T): IWebsocket;
+}
 
 /**
  * `usePreviewServer` is a React hook that creates a local development
@@ -80,6 +86,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 +136,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);
@@ -191,33 +213,49 @@ export function usePreviewServer({
       const { headers, url } = message;
       addCfPreviewTokenHeader(headers, previewToken.value);
       headers["host"] = previewToken.host;
-      const localWebsocket = new WebSocket(message, socket, body);
+      const localWebsocket = new WebSocket(message, socket, body) as IWebsocket;
       // TODO(soon): Custom WebSocket protocol is not working?
       const remoteWebsocketClient = new WebSocket.Client(
         `wss://${previewToken.host}${url}`,
         [],
         { headers }
-      );
+      ) as IWebsocket;
       localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket);
       // We close down websockets whenever we refresh the token.
       cleanupListeners.push(() => {
-        localWebsocket.destroy();
-        remoteWebsocketClient.destroy();
+        localWebsocket.close();
+        remoteWebsocketClient.close();
       });
     };
     proxy.on("upgrade", handleUpgrade);
     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 +338,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();
+  });
+}