wrangler 0.0.0-bd89b54 → 0.0.0-beta.6

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/bin/wrangler.js

@@ -24,7 +24,7 @@ Consider using a Node.js version manager such as https://volta.sh/ or https://gi
       "--no-warnings",
       "--experimental-vm-modules",
       ...process.execArgv,
-      join(__dirname, "../wrangler-dist/index_node.js"),
+      join(__dirname, "../wrangler-dist/cli.js"),
       ...process.argv.slice(2),
     ],
     { stdio: "inherit" }

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "wrangler",
-  "version": "0.0.0-bd89b54",
+  "version": "0.0.0-beta.6",
   "author": "wrangler@cloudflare.com",
   "description": "Command-line interface for all things Cloudflare Workers",
-  "bin": "./bin/wrangler.js",
+  "bin": {
+    "wrangler": "./bin/wrangler.js",
+    "wrangler2": "./bin/wrangler.js"
+  },
   "license": "MIT OR Apache-2.0",
   "bugs": {
     "url": "https://github.com/cloudflare/wrangler/issues"
@@ -33,9 +36,9 @@
     "cli"
   ],
   "dependencies": {
-    "@cloudflare/pages-functions-compiler": "0.3.4",
+    "@cloudflare/pages-functions-compiler": "0.3.5",
     "esbuild": "0.13.12",
-    "miniflare": "2.0.0-rc.1",
+    "miniflare": "2.0.0-rc.2",
     "semiver": "^1.1.0",
     "serve": "^13.0.2"
   },
@@ -63,8 +66,9 @@
     "ink-select-input": "^4.2.0",
     "ink-table": "^3.0.0",
     "ink-text-input": "^4.0.1",
-    "node-fetch": "github:tekwiz/node-fetch#fix/redirect-with-empty-chunked-transfer-encoding",
+    "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",
@@ -86,22 +90,26 @@
     "bundle": "node -r esbuild-register scripts/bundle.ts",
     "build": "npm run clean && npm run bundle",
     "start": "npm run bundle && NODE_OPTIONS=--enable-source-maps ./bin/wrangler.js",
-    "test": "npm run build && NODE_OPTIONS=--enable-source-maps jest --silent=false"
+    "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": {
+    "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)"
+    ],
+    "moduleNameMapper": {
+      "clipboardy": "<rootDir>/src/__tests__/clipboardy-mock.js"
+    },
     "transform": {
-      "^.+\\.tsx?$": [
+      "^.+\\.c?(t|j)sx?$": [
         "esbuild-jest",
         {
-          "sourcemap": true,
-          "loaders": {
-            ".spec.ts": "tsx"
-          }
+          "sourcemap": true
         }
       ]
     }
   }
-}
+}

package/src/__tests__/clipboardy-mock.js

@@ -0,0 +1,4 @@
+// We use this mock during tests because we're having trouble
+// properly compiling clipboardy for jest
+// We can revisit this if and when we write tests that test
+// the copying part of `dev`

package/src/__tests__/index.test.ts

@@ -1,19 +1,53 @@
-import execa from "execa";
 import * as fs from "node:fs";
 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";
 
-async function w(cmd: string | string[] = []) {
-  return await execa(
-    path.join(__dirname, "../../bin/wrangler.js"),
-    typeof cmd === "string" ? cmd.split(" ") : cmd
-  );
+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 };
+}
+
+function tap() {
+  const oldLog = console.log;
+  const oldError = console.error;
+
+  const toReturn = {
+    off: () => {
+      console.log = oldLog;
+      console.error = oldError;
+    },
+    out: "",
+    err: "",
+  };
+
+  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);
+  };
+
+  return toReturn;
 }
 
 describe("wrangler", () => {
   it("should run", async () => {
-    expect((await w()).stdout).toMatchInlineSnapshot(`
+    const { stdout } = await w(undefined, { tap: true });
+
+    expect(stdout).toMatchInlineSnapshot(`
       "wrangler
 
       Commands:
@@ -52,32 +86,46 @@ describe("wrangler", () => {
     it("should create a wrangler.toml", async () => {
       await w("init");
       const parsed = TOML.parse(await fsp.readFile("./wrangler.toml", "utf-8"));
-      expect(parsed.name).toBe("init");
       expect(typeof parsed.compatibility_date).toBe("string");
     });
 
     it("should error when wrangler.toml already exists", async () => {
       fs.closeSync(fs.openSync("./wrangler.toml", "w"));
-      const { stderr } = await w("init");
+      const { stderr } = await w("init", { tap: true });
       expect(stderr.endsWith("wrangler.toml already exists.")).toBe(true);
     });
-
-    it("should create a named config", async () => {
-      await w("init xyz");
-      const parsed = TOML.parse(await fsp.readFile("./wrangler.toml", "utf-8"));
-      expect(parsed.name).toBe("xyz");
-    });
   });
 
   describe("kv:namespace", () => {
+    afterAll(() => {
+      unsetAllMocks();
+    });
+    let KVNamespaces: { title: string; id: string }[] = [];
     it("can create a namespace", async () => {
-      const { stdout } = await w('kv:namespace create "UnitTestNamespace"');
-      expect(stdout.includes(`{ binding = "UnitTestNamespace",`)).toBe(true);
+      setMock("/accounts/:accountId/storage/kv/namespaces", (uri, init) => {
+        expect(init.method === "POST");
+        const body = JSON.parse(init.body);
+        expect(body.title).toBe("worker-UnitTestNamespace");
+        KVNamespaces.push({ title: body.title, id: "some-namespace-id" });
+        return { id: "some-namespace-id" };
+      });
+
+      await w('kv:namespace create "UnitTestNamespace"');
+      expect(
+        KVNamespaces.find((ns) => ns.title === `worker-UnitTestNamespace`)
+      ).toBeTruthy();
     });
 
     let createdNamespace: { id: string; title: string };
     it("can list namespaces", async () => {
-      const { stdout } = await w("kv:namespace list");
+      setMock(
+        "/accounts/:accountId/storage/kv/namespaces\\?:qs",
+        (uri, init) => {
+          expect(init).toBe(undefined);
+          return KVNamespaces;
+        }
+      );
+      const { stdout } = await w("kv:namespace list", { tap: true });
       const namespaces = JSON.parse(stdout);
       createdNamespace = namespaces.find(
         (ns) => ns.title === "worker-UnitTestNamespace"
@@ -86,37 +134,20 @@ describe("wrangler", () => {
     });
 
     it("can delete a namespace", async () => {
-      const { stdout } = await w(
-        `kv:namespace delete --namespace-id ${createdNamespace.id}`
+      const namespaceIdToDelete = createdNamespace.id;
+      setMock(
+        "/accounts/:accountId/storage/kv/namespaces/:namespaceId",
+        (uri, init) => {
+          expect(init.method).toBe("DELETE");
+          KVNamespaces = KVNamespaces.filter(
+            (ns) => ns.id !== namespaceIdToDelete
+          );
+        }
+      );
+      await w(`kv:namespace delete --namespace-id ${namespaceIdToDelete}`);
+      expect(KVNamespaces.find((ns) => ns.id === namespaceIdToDelete)).toBe(
+        undefined
       );
-      console.log(stdout);
-    });
-  });
-  describe("kv:key", () => {
-    let namespaceId: string;
-    beforeAll(async () => {
-      await w('kv:namespace create "UnitTestNamespace"');
-      namespaceId = JSON.parse((await w("kv:namespace list")).stdout).find(
-        (ns) => ns.title === "worker-UnitTestNamespace"
-      ).id;
-    });
-    afterAll(async () => {
-      await w(`kv:namespace delete --namespace-id ${namespaceId}`);
     });
-    it("stub", () => {});
-    // it("can add a key", () => {});
-    // it("can read a key", () => {});
-    // it("can list keys", () => {});
-    // it("can delete a key", () => {});
   });
-
-  // describe("login", () => {
-  //   it("should show possible scopes", async () => {
-  //     const { stdout } = await w("login --scopes-list");
-  //     // UGH jest doesn't like wide text huh
-  //     expect(stdout).toMatchInlineSnapshot();
-  //   });
-  // });
-
-  // TODO: setup a "api server" to mock requests
 });

package/src/__tests__/mock-cfetch.js

@@ -0,0 +1,46 @@
+// This file mocks ../cfetch.ts
+// so we can insert whatever responses we want from it
+
+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) {
+  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.
+    }
+  }
+  throw new Error(`no mocks found for ${resource}`);
+}
+
+function setMock(resource, handler) {
+  const mock = {
+    resource,
+    handler,
+    regexp: pathToRegexp(resource),
+  };
+  mocks.push(mock);
+  return () => {
+    mocks = mocks.filter((x) => x !== mock);
+  };
+}
+
+function unsetAllMocks() {
+  mocks = [];
+}
+
+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,
+});

package/src/{index_node.ts → cli.ts}

@@ -1,6 +1,6 @@
 import { main } from ".";
 
-main().catch((cause) => {
+main(process.argv.slice(2)).catch((cause) => {
   const { name, message } = cause;
   if (name === "CloudflareError") {
     console.error("\x1b[31m", message);

package/src/config.ts

@@ -64,6 +64,8 @@ type Env = {
   route?: string; // inherited
   webpack_config?: string; // inherited
   site?: Site;
+  jsxFactory?: string; // inherited
+  jsxFragment?: string; // inherited
   // we should use typescript to parse cron patterns
   triggers?: { crons: Cron[] }; // inherited
   kv_namespaces?: KVNamespace[];
@@ -83,6 +85,8 @@ export type Config = {
   // -- end mutually exclusive stuff
   // @deprecated Don't use this
   webpack_config?: string; // inherited
+  jsxFactory?: string; // inherited
+  jsxFragment?: string; // inherited
   vars?: Vars;
   kv_namespaces?: KVNamespace[];
   site?: Site; // inherited

package/src/dev.tsx

@@ -32,9 +32,11 @@ type Props = {
   format: CfScriptFormat;
   accountId: void | string;
   initialMode: "local" | "remote";
-  variables?: { [name: string]: CfVariable };
-  public?: void | string;
-  site?: void | string;
+  jsxFactory: void | string;
+  jsxFragment: void | string;
+  variables: { [name: string]: CfVariable };
+  public: void | string;
+  site: void | string;
 };
 
 export function Dev(props: Props): JSX.Element {
@@ -47,7 +49,13 @@ export function Dev(props: Props): JSX.Element {
   const apiToken = getAPIToken();
   const directory = useTmpDir();
 
-  const bundle = useEsbuild(props.entry, directory, props.public);
+  const bundle = useEsbuild({
+    entry: props.entry,
+    destination: directory,
+    staticRoot: props.public,
+    jsxFactory: props.jsxFactory,
+    jsxFragment: props.jsxFragment,
+  });
   if (bundle && bundle.type === "commonjs" && !props.format && props.public) {
     throw new Error(
       "You cannot use the service worker format with a `public` directory."
@@ -322,11 +330,14 @@ type EsbuildBundle = {
   exports: string[];
 };
 
-function useEsbuild(
-  entry: string,
-  destination: string | void,
-  staticRoot: void | string
-): EsbuildBundle | void {
+function useEsbuild(props: {
+  entry: string;
+  destination: string | void;
+  staticRoot: void | string;
+  jsxFactory: string | void;
+  jsxFragment: string | void;
+}): EsbuildBundle | void {
+  const { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
     let result: esbuild.BuildResult;
@@ -339,6 +350,11 @@ function useEsbuild(
         metafile: true,
         format: "esm",
         sourcemap: true,
+        loader: {
+          ".js": "jsx",
+        },
+        ...(jsxFactory && { jsxFactory }),
+        ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
         // TODO: import.meta.url
         watch: {
@@ -431,6 +447,7 @@ function useWorker(props: {
           }; // TODO: cancellable?
 
       const content = await readFile(bundle.path, "utf-8");
+      console.log(content);
       const init: CfWorkerInit = {
         main: {
           name: name || path.basename(bundle.path),
@@ -565,15 +582,15 @@ function useTunnel(toggle: boolean) {
   // point them to a url where they can get docs to install it
   useEffect(() => {
     async function startTunnel() {
-      try {
-        await commandExists("cloudflared");
-      } catch (e) {
-        console.error(
-          "Please install `cloudflared` from https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation"
-        );
-        return;
-      }
       if (toggle) {
+        try {
+          await commandExists("cloudflared");
+        } catch (e) {
+          console.error(
+            "To share your worker on the internet, please install `cloudflared` from https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation"
+          );
+          return;
+        }
         console.log("⎔ Starting a tunnel...");
         tunnel.current = spawn("cloudflared", [
           "tunnel",

package/src/dialogs.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { useState } from "react";
+import { Box, Text, useInput, render } from "ink";
+import TextInput from "ink-text-input";
+type ConfirmProps = {
+  text: string;
+  onConfirm: (answer: boolean) => void | Promise<void>;
+};
+function Confirm(props: ConfirmProps) {
+  useInput((input: string) => {
+    if (input === "y") {
+      props.onConfirm(true);
+    } else if (input === "n") {
+      props.onConfirm(false);
+    } else {
+      console.log("Unrecognised input");
+    }
+  });
+  return (
+    <Box>
+      <Text>{props.text} (y/n) </Text>
+    </Box>
+  );
+}
+
+export function confirm(text: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <Confirm
+        text={text}
+        onConfirm={(answer: boolean) => {
+          unmount();
+          resolve(answer);
+        }}
+      />
+    );
+  });
+}
+
+type PromptProps = {
+  text: string;
+  type?: "text" | "password";
+  onSubmit: (text: string) => void;
+};
+
+export function Prompt(props: PromptProps) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Box>
+      <Text>{props.text} </Text>
+      <Box>
+        <TextInput
+          mask={props.type === "password" ? "*" : undefined}
+          value={value}
+          onChange={setValue}
+          onSubmit={props.onSubmit}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export async function prompt(text: string, type: "text" | "password" = "text") {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      <Prompt
+        text={text}
+        type={type}
+        onSubmit={(text) => {
+          unmount();
+          resolve(text);
+        }}
+      />
+    );
+  });
+}
+
+// this one feels a little non "standard"
+// export async function select(
+//   title: string,
+//   choices: { label: string; value: string }[]
+// ): Promise<{ label: string; value: string }>{
+
+// }