wrangler 0.0.0-c9dc473 → 0.0.0-ce2ef20

package/README.md

@@ -0,0 +1,51 @@
+## 🤠 wrangler
+
+`wrangler` is a command line tool for building [Cloudflare Workers](https://workers.cloudflare.com/).
+
+[(Read the full stack week launch blog post.)](https://blog.cloudflare.com/wrangler-v2-beta/)
+
+**DISCLAIMER**: This is a work in progress, and is NOT recommended for use in production. We are opening this preview for feedback from the community, and to openly share our [roadmap](https://github.com/cloudflare/wrangler2/issues/12) for the future. As such, expect APIs and documentation to change before the end of the preview.
+
+Further, we will NOT do a general release until we are both feature complete, and have a full backward compatibility and incremental migration plan in place. For more details, follow the [parent roadmap issue](https://github.com/cloudflare/wrangler2/issues/12).
+
+## Quick Start
+
+```bash
+# Make a javascript file
+$ echo "export default { fetch() { return new Response('hello world') } }" > index.js
+# try it out
+$ npx wrangler@beta dev index.js
+# and then publish it
+$ npx wrangler@beta publish index.js --name my-worker
+# visit https://my-worker.<your workers subdomain>.workers.dev
+```
+
+## Installation:
+
+```bash
+$ npm install wrangler@beta
+```
+
+## Commands
+
+### `wrangler init [name]`
+
+Creates a `wrangler.toml` configuration file. For more details on the configuration keys and values, refer to the [documentation](https://developers.cloudflare.com/workers/cli-wrangler/configuration).
+
+### `wrangler dev [script]`
+
+Start a local development server, with live reloading and devtools.
+
+### `wrangler publish [script] --name [name]`
+
+Publish the given script to the worldwide Cloudflare network.
+
+For more commands and options, refer to the [documentation](https://developers.cloudflare.com/workers/cli-wrangler/commands).
+
+### `wrangler pages dev [directory] [-- command]`
+
+Either serves a static build asset directory, or proxies itself in front of a command.
+
+Builds and runs functions from a `./functions` directory or uses a `_worker.js` file inside the static build asset directory.
+
+For more commands and options, refer to the [documentation](https://developers.cloudflare.com/pages/platform/functions#develop-and-preview-locally) or run `wrangler pages dev --help`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wrangler",
-  "version": "0.0.0-c9dc473",
+  "version": "0.0.0-ce2ef20",
   "author": "wrangler@cloudflare.com",
   "description": "Command-line interface for all things Cloudflare Workers",
   "bin": {
@@ -36,11 +36,10 @@
     "cli"
   ],
   "dependencies": {
-    "@cloudflare/pages-functions-compiler": "0.3.4",
-    "esbuild": "0.13.12",
-    "miniflare": "2.0.0-rc.2",
-    "semiver": "^1.1.0",
-    "serve": "^13.0.2"
+    "@cloudflare/pages-functions-compiler": "0.3.8",
+    "esbuild": "0.14.1",
+    "miniflare": "2.0.0-rc.3",
+    "semiver": "^1.1.0"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"
@@ -49,32 +48,33 @@
     "@iarna/toml": "^2.2.5",
     "@types/cloudflare": "^2.7.6",
     "@types/express": "^4.17.13",
-    "@types/react": "^17.0.34",
+    "@types/react": "^17.0.37",
     "@types/signal-exit": "^3.0.1",
-    "@types/ws": "^8.2.0",
-    "@types/yargs": "^17.0.5",
+    "@types/ws": "^8.2.1",
+    "@types/yargs": "^17.0.7",
+    "chokidar": "^3.5.2",
     "clipboardy": "^3.0.0",
     "command-exists": "^1.2.9",
-    "execa": "^5.1.1",
-    "express": "^4.17.1",
+    "execa": "^6.0.0",
     "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.0",
+    "ink-select-input": "^4.2.1",
     "ink-table": "^3.0.0",
-    "ink-text-input": "^4.0.1",
+    "ink-text-input": "^4.0.2",
     "node-fetch": "^3.1.0",
     "open": "^8.4.0",
     "path-to-regexp": "^6.2.0",
     "react": "^17.0.2",
     "serve-static": "^1.14.1",
-    "signal-exit": "^3.0.5",
+    "signal-exit": "^3.0.6",
     "tmp-promise": "^3.0.3",
-    "ws": "^8.2.3",
-    "yargs": "^17.2.1"
+    "undici": "^4.11.1",
+    "ws": "^8.3.0",
+    "yargs": "^17.3.0",
+    "react-error-boundary": "^3.1.4"
   },
   "files": [
     "src",
@@ -93,12 +93,13 @@
     "test": "CF_API_TOKEN=some-api-token CF_ACCOUNT_ID=some-account-id jest --silent=false --verbose=true"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "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)"
+      "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)"
     ],
     "moduleNameMapper": {
       "clipboardy": "<rootDir>/src/__tests__/clipboardy-mock.js"

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:
-        --config   Path to .toml configuration file  [string]
-        --help     Show help  [boolean]
-        --version  Show version number  [boolean]
-
-      Options:
-        --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."
+      `);
     });
   });
 
@@ -110,7 +206,7 @@ describe("wrangler", () => {
         return { id: "some-namespace-id" };
       });
 
-      await w('kv:namespace create "UnitTestNamespace"');
+      await w("kv:namespace create UnitTestNamespace");
       expect(
         KVNamespaces.find((ns) => ns.title === `worker-UnitTestNamespace`)
       ).toBeTruthy();
@@ -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/form_data.ts

@@ -3,8 +3,6 @@ import type {
   CfModuleType,
   CfVariable,
   CfModule,
-  CfKvNamespace,
-  CfCryptoKey,
 } from "./worker.js";
 import { FormData, Blob } from "formdata-node";
 
@@ -27,12 +25,26 @@ function toBinding(
     return { name, type: "plain_text", text: variable };
   }
 
-  const { namespaceId } = variable as CfKvNamespace;
-  if (namespaceId) {
-    return { name, type: "kv_namespace", namespace_id: namespaceId };
+  if ("namespaceId" in variable) {
+    return {
+      name,
+      type: "kv_namespace",
+      namespace_id: variable.namespaceId,
+    };
   }
 
-  const { format, algorithm, usages, data } = variable as CfCryptoKey;
+  if ("class_name" in variable) {
+    return {
+      name,
+      type: "durable_object_namespace",
+      class_name: variable.class_name,
+      ...(variable.script_name && {
+        script_name: variable.script_name,
+      }),
+    };
+  }
+
+  const { format, algorithm, usages, data } = variable;
   if (format) {
     let key_base64;
     let key_jwk;
@@ -84,7 +96,15 @@ function toModule(module: CfModule, entryType?: CfModuleType): Blob {
  */
 export function toFormData(worker: CfWorkerInit): FormData {
   const formData = new FormData();
-  const { main, modules, variables, usage_model, compatibility_date } = worker;
+  const {
+    main,
+    modules,
+    variables,
+    migrations,
+    usage_model,
+    compatibility_date,
+    compatibility_flags,
+  } = worker;
   const { name, type: mainType } = main;
 
   const bindings = [];
@@ -93,23 +113,19 @@ export function toFormData(worker: CfWorkerInit): FormData {
     bindings.push(binding);
   }
 
-  const singleton = mainType === "commonjs";
+  // TODO: this object should be typed
   const metadata = {
-    main_module: singleton ? undefined : name,
-    body_part: singleton ? name : undefined,
+    ...(mainType !== "commonjs" ? { main_module: name } : { body_part: name }),
     bindings,
+    ...(compatibility_date && { compatibility_date }),
+    ...(compatibility_flags && { compatibility_flags }),
+    ...(usage_model && { usage_model }),
+    ...(migrations && { migrations }),
   };
-  if (compatibility_date) {
-    // @ts-expect-error - we should type metadata
-    metadata.compatibility_date = compatibility_date;
-  }
-  if (usage_model) {
-    // @ts-expect-error - we should type metadata
-    metadata.usage_model = usage_model;
-  }
+
   formData.set("metadata", JSON.stringify(metadata));
 
-  if (singleton && modules && modules.length > 0) {
+  if (mainType === "commonjs" && modules && modules.length > 0) {
     throw new TypeError(
       "More than one module can only be specified when type = 'esm'"
     );

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/api/preview.ts

@@ -1,7 +1,7 @@
 import cfetch from "../cfetch";
-import { fetchJson } from "../util/fetch";
 import { toFormData } from "./form_data";
 import type { CfAccount, CfWorkerInit } from "./worker";
+import fetch from "node-fetch";
 
 /**
  * A preview mode.
@@ -9,7 +9,7 @@ import type { CfAccount, CfWorkerInit } from "./worker";
  * * If true, then using a `workers.dev` subdomain.
  * * Otherwise, a list of routes under a single zone.
  */
-export type CfPreviewMode = { workers_dev: boolean } | { routes: string[] };
+type CfPreviewMode = { workers_dev: boolean } | { routes: string[] };
 
 /**
  * A preview token.
@@ -60,17 +60,17 @@ async function sessionToken(account: CfAccount): Promise<CfPreviewToken> {
     ? `/zones/${zoneId}/workers/edge-preview`
     : `/accounts/${accountId}/workers/subdomain/edge-preview`;
 
-  const { exchange_url: tokenUrl } = await cfetch<{ exchange_url: string }>(
-    initUrl
-  );
-  const { inspector_websocket: url, token } = await fetchJson()(tokenUrl);
-  const { host } = new URL(url);
+  const { exchange_url } = await cfetch<{ exchange_url: string }>(initUrl);
+  const { inspector_websocket, token } = (await (
+    await fetch(exchange_url)
+  ).json()) as { inspector_websocket: string; token: string };
+  const { host } = new URL(inspector_websocket);
   const query = `cf_workers_preview_token=${token}`;
 
   return {
     value: token,
     host,
-    inspectorUrl: new URL(`${url}?${query}`),
+    inspectorUrl: new URL(`${inspector_websocket}?${query}`),
     prewarmUrl: new URL(
       `https://${host}/cdn-cgi/workers/preview/prewarm?${query}`
     ),
@@ -96,27 +96,32 @@ export async function previewToken(
   const { value, host, inspectorUrl, prewarmUrl } = await sessionToken(account);
 
   const { accountId, zoneId } = account;
-  const scriptId = zoneId ? randomId() : host.split(".")[0];
+  const scriptId = zoneId ? randomId() : worker.name || host.split(".")[0];
   const url = `/accounts/${accountId}/workers/scripts/${scriptId}/edge-preview`;
 
-  const mode = zoneId ? { routes: ["*/*"] } : { workers_dev: true };
+  const mode: CfPreviewMode = zoneId
+    ? { routes: ["*/*"] }
+    : { workers_dev: true };
+
   const formData = toFormData(worker);
   formData.set("wrangler-session-config", JSON.stringify(mode));
 
-  const { preview_token: token } = await cfetch<{ preview_token: string }>(
-    url,
-    {
-      method: "POST",
-      // @ts-expect-error TODO: fix this
-      body: formData,
-      headers: {
-        "cf-preview-upload-config-token": value,
-      },
-    }
-  );
+  const { preview_token } = await cfetch<{ preview_token: string }>(url, {
+    method: "POST",
+    // @ts-expect-error TODO: fix this
+    body: formData,
+    headers: {
+      "cf-preview-upload-config-token": value,
+    },
+  });
+
   return {
-    value: token,
-    host,
+    value: preview_token,
+    // TODO: verify this works with zoned workers
+    host:
+      worker.name && !zoneId
+        ? `${worker.name}.${host.split(".").slice(1).join(".")}`
+        : host,
     inspectorUrl,
     prewarmUrl,
   };