wrangler 0.0.0-cd05d20 → 0.0.0-ce2ef20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wrangler",
-  "version": "0.0.0-cd05d20",
+  "version": "0.0.0-ce2ef20",
   "author": "wrangler@cloudflare.com",
   "description": "Command-line interface for all things Cloudflare Workers",
   "bin": {
@@ -39,8 +39,7 @@
     "@cloudflare/pages-functions-compiler": "0.3.8",
     "esbuild": "0.14.1",
     "miniflare": "2.0.0-rc.3",
-    "semiver": "^1.1.0",
-    "serve": "^13.0.2"
+    "semiver": "^1.1.0"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"
@@ -53,15 +52,14 @@
     "@types/signal-exit": "^3.0.1",
     "@types/ws": "^8.2.1",
     "@types/yargs": "^17.0.7",
+    "chokidar": "^3.5.2",
     "clipboardy": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^6.0.0",
-    "express": "^4.17.1",
     "finalhandler": "^1.1.2",
     "find-up": "^6.2.0",
     "formdata-node": "^4.3.1",
     "http-proxy": "^1.18.1",
-    "http-proxy-middleware": "^2.0.1",
     "ink": "^3.2.0",
     "ink-select-input": "^4.2.1",
     "ink-table": "^3.0.0",
@@ -73,8 +71,10 @@
     "serve-static": "^1.14.1",
     "signal-exit": "^3.0.6",
     "tmp-promise": "^3.0.3",
+    "undici": "^4.11.1",
     "ws": "^8.3.0",
-    "yargs": "^17.3.0"
+    "yargs": "^17.3.0",
+    "react-error-boundary": "^3.1.4"
   },
   "files": [
     "src",
@@ -96,6 +96,7 @@
     "node": ">=16.7.0"
   },
   "jest": {
+    "restoreMocks": true,
     "testRegex": ".*.(test|spec)\\.[jt]sx?$",
     "transformIgnorePatterns": [
       "node_modules/(?!node-fetch|fetch-blob|find-up|locate-path|p-locate|p-limit|yocto-queue|path-exists|data-uri-to-buffer|formdata-polyfill|execa|strip-final-newline|npm-run-path|path-key|onetime|mimic-fn|human-signals|is-stream)"

package/src/__tests__/index.test.ts

@@ -3,72 +3,119 @@ import * as fsp from "node:fs/promises";
 import * as path from "node:path";
 import * as TOML from "@iarna/toml";
 import { main } from "../index";
-// @ts-expect-error we're mocking cfetch, so of course setMock isn't a thing
-import { setMock, unsetAllMocks } from "../cfetch";
+import { setMock, unsetAllMocks } from "./mock-cfetch";
+import { existsSync } from "node:fs";
+import { confirm } from "../dialogs";
 
-jest.mock("../cfetch", () => {
-  return jest.requireActual("./mock-cfetch");
-});
-
-async function w(cmd: void | string, options?: { tap: boolean }) {
-  const tapped = options?.tap ? tap() : undefined;
-  await main([...(cmd ? cmd.split(" ") : [])]);
-  tapped?.off();
-  return { stdout: tapped?.out, stderr: tapped?.err };
-}
+jest.mock("../cfetch", () => jest.requireActual("./mock-cfetch"));
 
-function tap() {
-  const oldLog = console.log;
-  const oldError = console.error;
-
-  const toReturn = {
-    off: () => {
-      console.log = oldLog;
-      console.error = oldError;
-    },
-    out: "",
-    err: "",
+jest.mock("../dialogs", () => {
+  return {
+    ...jest.requireActual<object>("../dialogs"),
+    confirm: jest.fn().mockName("confirmMock"),
   };
+});
 
-  console.log = (...args) => {
-    toReturn.out += args.join("");
-    oldLog.apply(console, args);
-    // console.trace(...args); // use this if you want to find the true source of your console.log
-  };
-  console.error = (...args) => {
-    toReturn.err += args.join("");
-    oldError.apply(console, args);
-  };
+/**
+ * Mock the implementation of `confirm()` that will respond with configured results
+ * for configured confirmation text messages.
+ *
+ * If there is a call to `confirm()` that does not match any of the expectations
+ * then an error is thrown.
+ */
+function mockConfirm(...expectations: { text: string; result: boolean }[]) {
+  (confirm as jest.Mock).mockImplementationOnce((text: string) => {
+    for (const { text: expectedText, result } of expectations) {
+      if (text === expectedText) {
+        return result;
+      }
+    }
+    throw new Error(`Unexpected confirmation message: ${text}`);
+  });
+}
 
-  return toReturn;
+async function w(cmd?: string) {
+  const logSpy = jest.spyOn(console, "log").mockImplementation();
+  const errorSpy = jest.spyOn(console, "error").mockImplementation();
+  const warnSpy = jest.spyOn(console, "warn").mockImplementation();
+  try {
+    await main(cmd?.split(" ") ?? []);
+    return {
+      stdout: logSpy.mock.calls.flat(2).join("\n"),
+      stderr: errorSpy.mock.calls.flat(2).join("\n"),
+      warnings: warnSpy.mock.calls.flat(2).join("\n"),
+    };
+  } finally {
+    logSpy.mockRestore();
+    errorSpy.mockRestore();
+    warnSpy.mockRestore();
+  }
 }
 
 describe("wrangler", () => {
-  it("should run", async () => {
-    const { stdout } = await w(undefined, { tap: true });
-
-    expect(stdout).toMatchInlineSnapshot(`
-      "wrangler
-
-      Commands:
-        wrangler init [name]       📥 Create a wrangler.toml configuration file
-        wrangler dev <filename>    👂 Start a local server for developing your worker
-        wrangler publish [script]  🆙 Publish your Worker to Cloudflare.
-        wrangler tail [name]       🦚 Starts a log tailing session for a deployed Worker.
-        wrangler secret            🤫 Generate a secret that can be referenced in the worker script
-        wrangler kv:namespace      🗂️  Interact with your Workers KV Namespaces
-        wrangler kv:key            🔑 Individually manage Workers KV key-value pairs
-        wrangler kv:bulk           💪 Interact with multiple Workers KV key-value pairs at once
-        wrangler pages             ⚡️ Configure Cloudflare Pages
-
-      Flags:
-        -c, --config   Path to .toml configuration file  [string]
-        -h, --help     Show help  [boolean]
-        -v, --version  Show version number  [boolean]
-
-      Options:
-        -l, --local  Run on my machine  [boolean] [default: false]"
-    `);
+  describe("no command", () => {
+    it("should display a list of available commands", async () => {
+      const { stdout, stderr } = await w();
+
+      expect(stdout).toMatchInlineSnapshot(`
+        "wrangler
+
+        Commands:
+          wrangler init [name]       📥 Create a wrangler.toml configuration file
+          wrangler dev <filename>    👂 Start a local server for developing your worker
+          wrangler publish [script]  🆙 Publish your Worker to Cloudflare.
+          wrangler tail [name]       🦚 Starts a log tailing session for a deployed Worker.
+          wrangler secret            🤫 Generate a secret that can be referenced in the worker script
+          wrangler kv:namespace      🗂️  Interact with your Workers KV Namespaces
+          wrangler kv:key            🔑 Individually manage Workers KV key-value pairs
+          wrangler kv:bulk           💪 Interact with multiple Workers KV key-value pairs at once
+          wrangler pages             ⚡️ Configure Cloudflare Pages
+
+        Flags:
+          -c, --config   Path to .toml configuration file  [string]
+          -h, --help     Show help  [boolean]
+          -v, --version  Show version number  [boolean]
+
+        Options:
+          -l, --local  Run on my machine  [boolean] [default: false]"
+      `);
+
+      expect(stderr).toMatchInlineSnapshot(`""`);
+    });
+  });
+
+  describe("invalid command", () => {
+    it("should display an error", async () => {
+      const { stdout, stderr } = await w("invalid-command");
+
+      expect(stdout).toMatchInlineSnapshot(`
+        "wrangler
+
+        Commands:
+          wrangler init [name]       📥 Create a wrangler.toml configuration file
+          wrangler dev <filename>    👂 Start a local server for developing your worker
+          wrangler publish [script]  🆙 Publish your Worker to Cloudflare.
+          wrangler tail [name]       🦚 Starts a log tailing session for a deployed Worker.
+          wrangler secret            🤫 Generate a secret that can be referenced in the worker script
+          wrangler kv:namespace      🗂️  Interact with your Workers KV Namespaces
+          wrangler kv:key            🔑 Individually manage Workers KV key-value pairs
+          wrangler kv:bulk           💪 Interact with multiple Workers KV key-value pairs at once
+          wrangler pages             ⚡️ Configure Cloudflare Pages
+
+        Flags:
+          -c, --config   Path to .toml configuration file  [string]
+          -h, --help     Show help  [boolean]
+          -v, --version  Show version number  [boolean]
+
+        Options:
+          -l, --local  Run on my machine  [boolean] [default: false]"
+      `);
+
+      expect(stderr).toMatchInlineSnapshot(`
+        "
+        Unknown command: invalid-command."
+      `);
+    });
   });
 
   describe("init", () => {
@@ -79,7 +126,9 @@ describe("wrangler", () => {
     });
 
     afterEach(async () => {
-      await fsp.rm("./wrangler.toml");
+      if (existsSync("./wrangler.toml")) {
+        await fsp.rm("./wrangler.toml");
+      }
       process.chdir(ogcwd);
     });
 
@@ -89,10 +138,57 @@ describe("wrangler", () => {
       expect(typeof parsed.compatibility_date).toBe("string");
     });
 
-    it("should error when wrangler.toml already exists", async () => {
+    it("should display warning when wrangler.toml already exists, and exit if user does not want to carry on", async () => {
       fs.closeSync(fs.openSync("./wrangler.toml", "w"));
-      const { stderr } = await w("init", { tap: true });
-      expect(stderr.endsWith("wrangler.toml already exists.")).toBe(true);
+      mockConfirm({
+        text: "Do you want to continue initializing this project?",
+        result: false,
+      });
+      const { stderr } = await w("init");
+      expect(stderr).toContain("wrangler.toml file already exists!");
+      const parsed = TOML.parse(await fsp.readFile("./wrangler.toml", "utf-8"));
+      expect(typeof parsed.compatibility_date).toBe("undefined");
+    });
+
+    it("should display warning when wrangler.toml already exists, but continue if user does want to carry on", async () => {
+      fs.closeSync(fs.openSync("./wrangler.toml", "w"));
+      mockConfirm({
+        text: "Do you want to continue initializing this project?",
+        result: true,
+      });
+      const { stderr } = await w("init");
+      expect(stderr).toContain("wrangler.toml file already exists!");
+      const parsed = TOML.parse(await fsp.readFile("./wrangler.toml", "utf-8"));
+      expect(typeof parsed.compatibility_date).toBe("string");
+    });
+
+    it("should error if `--type` is used", async () => {
+      const noValue = await w("init --type");
+      expect(noValue.stderr).toMatchInlineSnapshot(
+        `"The --type option is no longer supported."`
+      );
+    });
+
+    it("should error if `--type javascript` is used", async () => {
+      const javascriptValue = await w("init --type javascript");
+      expect(javascriptValue.stderr).toMatchInlineSnapshot(
+        `"The --type option is no longer supported."`
+      );
+    });
+
+    it("should error if `--type rust` is used", async () => {
+      const rustValue = await w("init --type rust");
+      expect(rustValue.stderr).toMatchInlineSnapshot(
+        `"The --type option is no longer supported."`
+      );
+    });
+
+    it("should error if `--type webpack` is used", async () => {
+      const webpackValue = await w("init --type webpack");
+      expect(webpackValue.stderr).toMatchInlineSnapshot(`
+        "The --type option is no longer supported.
+        If you wish to use webpack then you will need to create a custom build."
+      `);
     });
   });
 
@@ -125,7 +221,7 @@ describe("wrangler", () => {
           return KVNamespaces;
         }
       );
-      const { stdout } = await w("kv:namespace list", { tap: true });
+      const { stdout } = await w("kv:namespace list");
       const namespaces = JSON.parse(stdout);
       createdNamespace = namespaces.find(
         (ns) => ns.title === "worker-UnitTestNamespace"

package/src/__tests__/mock-cfetch.js

@@ -1,14 +1,14 @@
 // This file mocks ../cfetch.ts
 // so we can insert whatever responses we want from it
 
-const pathToRegexp = require("path-to-regexp");
+const { pathToRegexp } = require("path-to-regexp");
 // TODO: add jsdoc style types here
 
 // type MockHandler = (resource: string, init?: RequestInit) => any; // TODO: use a generic here
 
 let mocks = [];
 
-function mockCfetch(resource, init) {
+export function mockCfetch(resource, init) {
   for (const { regexp, handler } of mocks) {
     if (regexp.test(resource)) {
       return handler(resource, init); // should we have some kind of fallthrough system? we'll see.
@@ -17,7 +17,7 @@ function mockCfetch(resource, init) {
   throw new Error(`no mocks found for ${resource}`);
 }
 
-function setMock(resource, handler) {
+export function setMock(resource, handler) {
   const mock = {
     resource,
     handler,
@@ -29,18 +29,11 @@ function setMock(resource, handler) {
   };
 }
 
-function unsetAllMocks() {
+export function unsetAllMocks() {
   mocks = [];
 }
 
-const CF_API_BASE_URL =
+export const CF_API_BASE_URL =
   process.env.CF_API_BASE_URL || "https://api.cloudflare.com/client/v4";
 
-Object.assign(module.exports, {
-  __esModule: true,
-  default: mockCfetch,
-  mockCfetch,
-  setMock,
-  unsetAllMocks,
-  CF_API_BASE_URL,
-});
+export default mockCfetch;

package/src/api/inspect.ts

@@ -140,17 +140,6 @@ export type DtEvent = DtLogEvent | DtExceptionEvent;
  */
 export type DtListener = (event: DtEvent) => void;
 
-interface DtProtocolRequest<T> {
-  id: number;
-  method: string;
-  params?: T;
-}
-
-interface DtProtocolResponse<T> {
-  id: number;
-  result: T;
-}
-
 /**
  * A DevTools inspector that listens to logs and debug events from a Worker.
  *

package/src/dev.tsx

@@ -23,6 +23,7 @@ import assert from "assert";
 import { getAPIToken } from "./user";
 import fetch from "node-fetch";
 import makeModuleCollector from "./module-collection";
+import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
 
 type CfScriptFormat = void | "modules" | "service-worker";
 
@@ -43,7 +44,7 @@ type Props = {
   usageModel: void | "bundled" | "unbound";
 };
 
-export function Dev(props: Props): JSX.Element {
+function Dev(props: Props): JSX.Element {
   if (props.public && props.format === "service-worker") {
     throw new Error(
       "You cannot use the service worker format with a `public` directory."
@@ -233,6 +234,7 @@ function useLocalWorker(props: {
       }
 
       console.log("⎔ Starting a local server...");
+      // TODO: just use execa for this
       local.current = spawn("node", [
         "--experimental-vm-modules",
         "--inspect",
@@ -293,6 +295,17 @@ function useLocalWorker(props: {
         }
       });
 
+      local.current.on("exit", (code) => {
+        if (code !== 0) {
+          console.error(`miniflare process exited with code ${code}`);
+        }
+      });
+
+      local.current.on("error", (error: Error) => {
+        console.error(`miniflare process failed to spawn`);
+        console.error(error);
+      });
+
       removeSignalExitListener.current = onExit((_code, _signal) => {
         console.log("⎔ Shutting down local server.");
         local.current?.kill();
@@ -300,7 +313,9 @@ function useLocalWorker(props: {
       });
     }
 
-    startLocalWorker();
+    startLocalWorker().catch((err) => {
+      console.error("local worker:", err);
+    });
 
     return () => {
       if (local.current) {
@@ -317,6 +332,7 @@ function useLocalWorker(props: {
 
 function useTmpDir(): string | void {
   const [directory, setDirectory] = useState<DirectoryResult>();
+  const handleError = useErrorHandler();
   useEffect(() => {
     let dir: DirectoryResult;
     async function create() {
@@ -326,15 +342,22 @@ function useTmpDir(): string | void {
         return;
       } catch (err) {
         console.error("failed to create tmp dir");
-        console.error(err);
         throw err;
       }
     }
-    create();
+    create().catch((err) => {
+      // we want to break here
+      // we can't do much without a temp dir anyway
+      handleError(err);
+    });
     return () => {
-      dir.cleanup();
+      dir.cleanup().catch(() => {
+        // extremely unlikely,
+        // but it's 2021 after all
+        console.error("failed to cleanup tmp dir");
+      });
     };
-  }, []);
+  }, [handleError]);
   return directory?.path;
 }
 
@@ -374,6 +397,7 @@ function useEsbuild(props: {
         ...(jsxFactory && { jsxFactory }),
         ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
+        conditions: ["worker", "browser"],
         plugins: [moduleCollector.plugin],
         // TODO: import.meta.url
         watch: {
@@ -401,7 +425,12 @@ function useEsbuild(props: {
         modules: moduleCollector.modules,
       });
     }
-    build();
+    build().catch((_err) => {
+      // esbuild already logs errors to stderr
+      // and we don't want to end the process
+      // on build errors anyway
+      // so this is a no-op error handler
+    });
     return () => {
       result?.stop();
     };
@@ -505,7 +534,11 @@ function useWorker(props: {
       );
       console.log(`⬣ Listening at http://localhost:${port}`);
     }
-    start();
+    start().catch((err) => {
+      // we want to log the error, but not end the process
+      // since it could recover after the developer fixes whatever's wrong
+      console.error("remote worker:", err);
+    });
   }, [
     name,
     bundle,
@@ -649,12 +682,14 @@ function useTunnel(toggle: boolean) {
         });
 
         const hostName = await findTunnelHostname();
-        clipboardy.write(hostName);
+        await clipboardy.write(hostName);
         console.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
       }
     }
 
-    startTunnel();
+    startTunnel().catch((err) => {
+      console.error("tunnel:", err);
+    });
 
     return () => {
       if (tunnel.current) {
@@ -676,14 +711,14 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
   // UGH, we should put port in context instead
   const [toggles, setToggles] = useState(initial);
   useInput(
-    (
+    async (
       input,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       key
     ) => {
       switch (input) {
         case "b": // open browser
-          open(
+          await open(
             `http://localhost:${port}/`
             // {
             //   app: {
@@ -693,7 +728,7 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
           );
           break;
         case "d": // toggle inspector
-          open(
+          await open(
             `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:9229/ws`
             // {
             //   app: {
@@ -721,3 +756,21 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
   );
   return toggles;
 }
+
+function ErrorFallback(props: {
+  error: Error;
+  resetErrorBoundary: () => void;
+}) {
+  useEffect(() => {
+    console.error(props.error);
+    process.exit(1);
+  });
+  return (
+    <Box>
+      <Text>Something went wrong:</Text>
+      <Text>{props.error.message}</Text>
+    </Box>
+  );
+}
+
+export default withErrorBoundary(Dev, { FallbackComponent: ErrorFallback });

package/src/dialogs.tsx

@@ -4,7 +4,7 @@ import { Box, Text, useInput, render } from "ink";
 import TextInput from "ink-text-input";
 type ConfirmProps = {
   text: string;
-  onConfirm: (answer: boolean) => void | Promise<void>;
+  onConfirm: (answer: boolean) => void;
 };
 function Confirm(props: ConfirmProps) {
   useInput((input: string) => {
@@ -75,11 +75,3 @@ export async function prompt(text: string, type: "text" | "password" = "text") {
     );
   });
 }
-
-// this one feels a little non "standard"
-// export async function select(
-//   title: string,
-//   choices: { label: string; value: string }[]
-// ): Promise<{ label: string; value: string }>{
-
-// }