wrangler 0.0.0-beta.6 → 0.0.0-bf67bf2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wrangler",
-  "version": "0.0.0-beta.6",
+  "version": "0.0.0-bf67bf2",
   "author": "wrangler@cloudflare.com",
   "description": "Command-line interface for all things Cloudflare Workers",
   "bin": {
@@ -36,11 +36,13 @@
     "cli"
   ],
   "dependencies": {
-    "@cloudflare/pages-functions-compiler": "0.3.5",
-    "esbuild": "0.13.12",
+    "@cloudflare/pages-functions-compiler": "0.3.7",
+    "esbuild": "0.14.1",
     "miniflare": "2.0.0-rc.2",
     "semiver": "^1.1.0",
-    "serve": "^13.0.2"
+    "serve": "^13.0.2",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.2"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"
@@ -49,13 +51,13 @@
     "@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",
     "clipboardy": "^3.0.0",
     "command-exists": "^1.2.9",
-    "execa": "^5.1.1",
+    "execa": "^6.0.0",
     "express": "^4.17.1",
     "finalhandler": "^1.1.2",
     "find-up": "^6.2.0",
@@ -63,18 +65,18 @@
     "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"
+    "ws": "^8.3.0",
+    "yargs": "^17.3.0"
   },
   "files": [
     "src",
@@ -98,7 +100,7 @@
   "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)"
+      "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"
@@ -112,4 +114,4 @@
       ]
     }
   }
-}
+}

package/src/__tests__/index.test.ts

@@ -110,7 +110,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();

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,36 @@ export function toFormData(worker: CfWorkerInit): FormData {
     bindings.push(binding);
   }
 
-  const singleton = mainType === "commonjs";
-  const metadata = {
-    main_module: singleton ? undefined : name,
-    body_part: singleton ? name : undefined,
-    bindings,
-  };
+  const metadata =
+    mainType !== "commonjs"
+      ? {
+          main_module: name,
+          bindings,
+        }
+      : {
+          body_part: name,
+          bindings,
+        };
   if (compatibility_date) {
     // @ts-expect-error - we should type metadata
     metadata.compatibility_date = compatibility_date;
   }
+  if (compatibility_flags) {
+    // @ts-expect-error - we should type metadata
+    metadata.compatibility_flags = compatibility_flags;
+  }
   if (usage_model) {
     // @ts-expect-error - we should type metadata
     metadata.usage_model = usage_model;
   }
+  if (migrations) {
+    // @ts-expect-error - we should type metadata
+    metadata.migrations = migrations;
+  }
+
   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/worker.ts

@@ -72,6 +72,21 @@ export interface CfKvNamespace {
   namespaceId: string;
 }
 
+export interface CfDurableObject {
+  class_name: string;
+  script_name?: string;
+}
+
+interface CfDOMigrations {
+  old_tag?: string;
+  new_tag: string;
+  steps: {
+    new_classes?: string[];
+    renamed_classes?: string[];
+    deleted_classes?: string[];
+  }[];
+}
+
 /**
  * A `WebCrypto` key.
  *
@@ -99,7 +114,7 @@ export interface CfCryptoKey {
 /**
  * A variable (aka. environment variable).
  */
-export type CfVariable = string | CfKvNamespace | CfCryptoKey;
+export type CfVariable = string | CfKvNamespace | CfCryptoKey | CfDurableObject;
 
 /**
  * Options for creating a `CfWorker`.
@@ -117,8 +132,10 @@ export interface CfWorkerInit {
    * The map of names to variables. (aka. environment variables)
    */
   variables?: { [name: string]: CfVariable };
-  compatibility_date?: string;
-  usage_model?: void | "bundled" | "unbound";
+  migrations: void | CfDOMigrations;
+  compatibility_date: string | void;
+  compatibility_flags: void | string[];
+  usage_model: void | "bundled" | "unbound";
 }
 
 /**

package/src/config.ts

@@ -1,6 +1,13 @@
 // we're going to manually write both the type definition AND
 // the validator for the config, so that we can give better error messages
 
+type DOMigration = {
+  tag: string;
+  new_classes?: string[];
+  renamed_classes?: string[];
+  deleted_classes?: string[];
+};
+
 type Project = "webpack" | "javascript" | "rust";
 
 type Site = {
@@ -28,6 +35,12 @@ type KVNamespace = {
   id: string;
 };
 
+type DurableObject = {
+  name: string;
+  class_name: string;
+  script_name?: string;
+};
+
 type Build = {
   command?: string;
   cwd?: string;
@@ -59,16 +72,22 @@ type Env = {
   name?: string; // inherited
   account_id?: string; // inherited
   workers_dev?: boolean; // inherited
+  compatibility_date?: string; // inherited
+  compatibility_flags?: string[]; // inherited
   zone_id?: string; // inherited
   routes?: string[]; // inherited
   route?: string; // inherited
   webpack_config?: string; // inherited
   site?: Site;
-  jsxFactory?: string; // inherited
-  jsxFragment?: string; // inherited
+  jsx_factory?: string; // inherited
+  jsx_fragment?: string; // inherited
+  polyfill_node?: boolean; //inherited
   // we should use typescript to parse cron patterns
   triggers?: { crons: Cron[] }; // inherited
+  vars?: Vars;
+  durable_objects?: { bindings: DurableObject[] };
   kv_namespaces?: KVNamespace[];
+  usage_model?: UsageModel; // inherited
 };
 
 export type Config = {
@@ -76,6 +95,8 @@ export type Config = {
   account_id?: string; // inherited
   // @deprecated Don't use this
   type?: Project; // top level
+  compatibility_date?: string; // inherited
+  compatibility_flags?: string[]; // inherited
   // -- there's some mutually exclusive logic for this next block,
   // but I didn't bother for now
   workers_dev?: boolean; // inherited
@@ -85,9 +106,12 @@ export type Config = {
   // -- end mutually exclusive stuff
   // @deprecated Don't use this
   webpack_config?: string; // inherited
-  jsxFactory?: string; // inherited
-  jsxFragment?: string; // inherited
+  jsx_factory?: string; // inherited
+  jsx_fragment?: string; // inherited
+  polyfill_node?: boolean; //inherited
   vars?: Vars;
+  migrations?: DOMigration[];
+  durable_objects?: { bindings: DurableObject[] };
   kv_namespaces?: KVNamespace[];
   site?: Site; // inherited
   // we should use typescript to parse cron patterns
@@ -96,5 +120,5 @@ export type Config = {
   usage_model?: UsageModel; // inherited
   // top level
   build?: Build;
-  env?: { [envName: string]: Env };
+  env?: { [envName: string]: void | Env };
 };

package/src/dev.tsx

@@ -22,6 +22,8 @@ import commandExists from "command-exists";
 import assert from "assert";
 import { getAPIToken } from "./user";
 import fetch from "node-fetch";
+import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
+import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
 
 type CfScriptFormat = void | "modules" | "service-worker";
 
@@ -37,6 +39,10 @@ type Props = {
   variables: { [name: string]: CfVariable };
   public: void | string;
   site: void | string;
+  compatibilityDate: void | string;
+  compatibilityFlags: void | string[];
+  usageModel: void | "bundled" | "unbound";
+  polyfillNode: void | boolean;
 };
 
 export function Dev(props: Props): JSX.Element {
@@ -55,6 +61,7 @@ export function Dev(props: Props): JSX.Element {
     staticRoot: props.public,
     jsxFactory: props.jsxFactory,
     jsxFragment: props.jsxFragment,
+    polyfillNode: props.polyfillNode,
   });
   if (bundle && bundle.type === "commonjs" && !props.format && props.public) {
     throw new Error(
@@ -98,6 +105,9 @@ export function Dev(props: Props): JSX.Element {
           site={props.site}
           public={props.public}
           port={props.port}
+          compatibilityDate={props.compatibilityDate}
+          compatibilityFlags={props.compatibilityFlags}
+          usageModel={props.usageModel}
         />
       )}
       <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
@@ -153,6 +163,9 @@ function Remote(props: {
   accountId: void | string;
   apiToken: void | string;
   variables: { [name: string]: CfVariable };
+  compatibilityDate: string | void;
+  compatibilityFlags: void | string[];
+  usageModel: void | "bundled" | "unbound";
 }) {
   assert(props.accountId, "accountId is required");
   assert(props.apiToken, "apiToken is required");
@@ -166,6 +179,9 @@ function Remote(props: {
     variables: props.variables,
     sitesFolder: props.site,
     port: props.port,
+    compatibilityDate: props.compatibilityDate,
+    compatibilityFlags: props.compatibilityFlags,
+    usageModel: props.usageModel,
   });
 
   useProxy({ token, publicRoot: props.public, port: props.port });
@@ -236,6 +252,7 @@ function useLocalWorker(props: {
         port.toString(),
         "--kv-persist",
         "--cache-persist",
+        "--do-persist",
         ...Object.entries(variables)
           .map(([varKey, varVal]) => {
             if (typeof varVal === "string") {
@@ -245,6 +262,8 @@ function useLocalWorker(props: {
               typeof varVal.namespaceId === "string"
             ) {
               return `--kv ${varKey}`;
+            } else if ("class_name" in varVal) {
+              return `--do ${varKey}=${varVal.class_name}`;
             }
           })
           .filter(Boolean),
@@ -262,7 +281,7 @@ function useLocalWorker(props: {
         }
       });
 
-      local.current.stdout.on("data", (data: string) => {
+      local.current.stdout.on("data", (_data: string) => {
         // console.log(`stdout: ${data}`);
       });
 
@@ -277,7 +296,7 @@ function useLocalWorker(props: {
         }
       });
 
-      removeSignalExitListener.current = onExit((code, signal) => {
+      removeSignalExitListener.current = onExit((_code, _signal) => {
         console.log("⎔ Shutting down local server.");
         local.current?.kill();
         local.current = undefined;
@@ -336,8 +355,16 @@ function useEsbuild(props: {
   staticRoot: void | string;
   jsxFactory: string | void;
   jsxFragment: string | void;
+  polyfillNode: boolean | void;
 }): EsbuildBundle | void {
-  const { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
+  const {
+    entry,
+    destination,
+    staticRoot,
+    jsxFactory,
+    jsxFragment,
+    polyfillNode,
+  } = props;
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
     let result: esbuild.BuildResult;
@@ -345,6 +372,9 @@ function useEsbuild(props: {
       if (!destination) return;
       result = await esbuild.build({
         entryPoints: [entry],
+        define: {
+          ...(polyfillNode && { global: "globalThis" }),
+        },
         bundle: true,
         outdir: destination,
         metafile: true,
@@ -353,6 +383,9 @@ function useEsbuild(props: {
         loader: {
           ".js": "jsx",
         },
+        plugins: polyfillNode
+          ? [NodeGlobalsPolyfills({ buffer: true }), NodeModulesPolyfills()]
+          : undefined,
         ...(jsxFactory && { jsxFactory }),
         ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
@@ -385,7 +418,7 @@ function useEsbuild(props: {
     return () => {
       result?.stop();
     };
-  }, [entry, destination, staticRoot]);
+  }, [entry, destination, staticRoot, jsxFactory, jsxFragment, polyfillNode]);
   return bundle;
 }
 
@@ -399,6 +432,9 @@ function useWorker(props: {
   variables: { [name: string]: CfVariable };
   sitesFolder: void | string;
   port: number;
+  compatibilityDate: string | void;
+  compatibilityFlags: string[] | void;
+  usageModel: void | "bundled" | "unbound";
 }): CfPreviewToken | void {
   const {
     name,
@@ -409,6 +445,9 @@ function useWorker(props: {
     apiToken,
     variables,
     sitesFolder,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
     port,
   } = props;
   const [token, setToken] = useState<CfPreviewToken>();
@@ -447,15 +486,10 @@ 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),
-          type:
-            format ||
-            (bundle.type === "esm" ? "modules" : "service-worker") === "modules"
-              ? "esm"
-              : "commonjs",
+          type: format || bundle.type === "esm" ? "esm" : "commonjs",
           content,
         },
         modules: assets.manifest
@@ -471,6 +505,10 @@ function useWorker(props: {
               __STATIC_CONTENT: { namespaceId: assets.namespace },
             }
           : variables,
+        migrations: undefined, // no migrations in dev
+        compatibility_date: compatibilityDate,
+        compatibility_flags: compatibilityFlags,
+        usage_model: usageModel,
       };
       setToken(
         await createWorker(init, {
@@ -481,7 +519,18 @@ function useWorker(props: {
       console.log(`⬣ Listening at http://localhost:${port}`);
     }
     start();
-  }, [name, bundle, format, accountId, apiToken, port, sitesFolder]);
+  }, [
+    name,
+    bundle,
+    format,
+    accountId,
+    apiToken,
+    port,
+    sitesFolder,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
+  ]);
   return token;
 }
 
@@ -606,7 +655,7 @@ function useTunnel(toggle: boolean) {
           }
         });
 
-        removeSignalExitListener.current = onExit((code, signal) => {
+        removeSignalExitListener.current = onExit((_code, _signal) => {
           console.log("⎔ Shutting down local tunnel.");
           tunnel.current?.kill();
           tunnel.current = undefined;

package/src/index.tsx

@@ -40,7 +40,7 @@ import { createTail } from "./tail";
 import onExit from "signal-exit";
 import { setTimeout } from "node:timers/promises";
 import * as fs from "node:fs";
-import execa from "execa";
+import { execa } from "execa";
 
 async function readConfig(path?: string): Promise<Config> {
   const config: Config = {};
@@ -59,11 +59,14 @@ async function readConfig(path?: string): Promise<Config> {
     "name",
     "account_id",
     "workers_dev",
+    "compatibility_date",
+    "compatibility_flags",
     "zone_id",
     "routes",
     "route",
-    "jsxFactory",
-    "jsxFragment",
+    "jsx_factory",
+    "jsx_fragment",
+    "polyfill_node",
     "site",
     "triggers",
     "usage_model",
@@ -82,7 +85,7 @@ async function readConfig(path?: string): Promise<Config> {
     mirroredFields.forEach((field) => {
       // if it exists on top level, it should exist on env defns
       Object.keys(config[field] || {}).forEach((fieldKey) => {
-        if (!config.env[env][field]?.[fieldKey]) {
+        if (!(fieldKey in config.env[env][field])) {
           console.error(
             `In your configuration, "${field}.${fieldKey}" exists at a top level, but not on "env.${env}". This is not what you probably want, since the field "${field}" is not inherited by environments. Please add "${field}.${fieldKey}" to "env.${env}".`
           );
@@ -191,8 +194,7 @@ export async function main(argv: string[]): Promise<void> {
         try {
           await writeFile(
             destination,
-            `compatibility_date = "${compatibilityDate}"
-  `
+            `compatibility_date = "${compatibilityDate}"` + "\n"
           );
           console.log(`✨ Succesfully created wrangler.toml`);
           // TODO: suggest next steps?
@@ -420,6 +422,10 @@ export async function main(argv: string[]): Promise<void> {
         .option("jsx-fragment", {
           describe: "The function that is called for each JSX fragment",
           type: "string",
+        })
+        .option("polyfill-node", {
+          describe: "Try to polyfill node builtins",
+          type: "boolean",
         });
     },
     async (args) => {
@@ -446,7 +452,14 @@ export async function main(argv: string[]): Promise<void> {
 
       // -- snip, end --
 
-      const envRootObj = args.env ? config[`env.${args.env}`] : config;
+      const envRootObj = args.env ? config.env[args.env] || {} : config;
+
+      const polyfillNode = args["polyfill-node"] ?? config.polyfill_node;
+      if (polyfillNode) {
+        console.warn(
+          "Using polyfills for node builtin modules. These are not meant to be completely reliable, and have serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details."
+        );
+      }
 
       render(
         <Dev
@@ -454,12 +467,16 @@ export async function main(argv: string[]): Promise<void> {
           entry={filename}
           format={format}
           initialMode={args.local ? "local" : "remote"}
-          jsxFactory={args["jsx-factory"] || envRootObj.jsxFactory}
-          jsxFragment={args["jsx-fragment"] || envRootObj.jsxFragment}
+          jsxFactory={args["jsx-factory"] || envRootObj?.jsx_factory}
+          jsxFragment={args["jsx-fragment"] || envRootObj?.jsx_fragment}
           accountId={config.account_id}
           site={args.site || config.site?.bucket}
           port={args.port || config.dev?.port}
+          polyfillNode={polyfillNode}
           public={args.public}
+          compatibilityDate={config.compatibility_date}
+          compatibilityFlags={config.compatibility_flags}
+          usageModel={config.usage_model}
           variables={{
             ...(envRootObj?.vars || {}),
             ...(envRootObj?.kv_namespaces || []).reduce(
@@ -475,6 +492,12 @@ export async function main(argv: string[]): Promise<void> {
               },
               {}
             ),
+            ...(envRootObj?.durable_objects?.bindings || []).reduce(
+              (obj, { name, class_name, script_name }) => {
+                return { ...obj, [name]: { class_name, script_name } };
+              },
+              {}
+            ),
           }}
         />
       );
@@ -530,6 +553,10 @@ export async function main(argv: string[]): Promise<void> {
         .option("jsx-fragment", {
           describe: "The function that is called for each JSX fragment",
           type: "string",
+        })
+        .option("polyfill-node", {
+          describe: "Try to polyfill node builtins",
+          type: "boolean",
         });
     },
     async (args) => {
@@ -558,6 +585,13 @@ export async function main(argv: string[]): Promise<void> {
 
       // -- snip, end --
 
+      const polyfillNode = args["polyfill-node"] ?? config.polyfill_node;
+      if (polyfillNode) {
+        console.warn(
+          "Using polyfills for node builtin modules. These are not meant to be completely reliable, and have serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details."
+        );
+      }
+
       await publish({
         config: args.config as Config,
         name: args.name,
@@ -566,6 +600,7 @@ export async function main(argv: string[]): Promise<void> {
         triggers: args.triggers,
         jsxFactory: args["jsx-factory"],
         jsxFragment: args["jsx-fragment"],
+        polyfillNode: args["polyfill-node"],
         routes: args.routes,
         public: args.public,
         site: args.site,
@@ -1151,7 +1186,7 @@ export async function main(argv: string[]): Promise<void> {
             console.log(
               `{ binding = "${args.namespace}", ${
                 args.preview ? "preview_" : ""
-              }id = ${response.id} }`
+              }id = "${response.id}" }`
             );
           }
         )
@@ -1231,7 +1266,7 @@ export async function main(argv: string[]): Promise<void> {
             const id =
               args["namespace-id"] ||
               (args.env
-                ? config[`env.${args.env}`]
+                ? config.env[args.env] || {}
                 : config
               ).kv_namespaces.find(
                 (namespace) => namespace.binding === args.binding