wrangler 0.0.0-e14e589 → 0.0.0-e928f94

package/src/dev.tsx

@@ -22,6 +22,7 @@ import commandExists from "command-exists";
 import assert from "assert";
 import { getAPIToken } from "./user";
 import fetch from "node-fetch";
+import makeModuleCollector from "./module-collection";
 
 type CfScriptFormat = void | "modules" | "service-worker";
 
@@ -32,9 +33,14 @@ 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;
+  compatibilityDate: void | string;
+  compatibilityFlags: void | string[];
+  usageModel: void | "bundled" | "unbound";
 };
 
 export function Dev(props: Props): JSX.Element {
@@ -47,7 +53,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."
@@ -90,6 +102,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}>
@@ -145,6 +160,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");
@@ -152,12 +170,15 @@ function Remote(props: {
     name: props.name,
     bundle: props.bundle,
     format: props.format,
-    modules: [],
+    modules: props.bundle ? props.bundle.modules : [],
     accountId: props.accountId,
     apiToken: props.apiToken,
     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 });
@@ -228,6 +249,7 @@ function useLocalWorker(props: {
         port.toString(),
         "--kv-persist",
         "--cache-persist",
+        "--do-persist",
         ...Object.entries(variables)
           .map(([varKey, varVal]) => {
             if (typeof varVal === "string") {
@@ -237,6 +259,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),
@@ -254,7 +278,7 @@ function useLocalWorker(props: {
         }
       });
 
-      local.current.stdout.on("data", (data: string) => {
+      local.current.stdout.on("data", (_data: string) => {
         // console.log(`stdout: ${data}`);
       });
 
@@ -269,7 +293,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;
@@ -320,18 +344,23 @@ type EsbuildBundle = {
   entry: string;
   type: "esm" | "commonjs";
   exports: string[];
+  modules: CfModule[];
 };
 
-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;
     async function build() {
       if (!destination) return;
+      const moduleCollector = makeModuleCollector();
       result = await esbuild.build({
         entryPoints: [entry],
         bundle: true,
@@ -339,7 +368,14 @@ function useEsbuild(
         metafile: true,
         format: "esm",
         sourcemap: true,
+        loader: {
+          ".js": "jsx",
+        },
+        ...(jsxFactory && { jsxFactory }),
+        ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
+        conditions: ["worker", "browser"],
+        plugins: [moduleCollector.plugin],
         // TODO: import.meta.url
         watch: {
           async onRebuild(error) {
@@ -363,13 +399,14 @@ function useEsbuild(
         path: chunks[0],
         type: chunks[1].exports.length > 0 ? "esm" : "commonjs",
         exports: chunks[1].exports,
+        modules: moduleCollector.modules,
       });
     }
     build();
     return () => {
       result?.stop();
     };
-  }, [entry, destination, staticRoot]);
+  }, [entry, destination, staticRoot, jsxFactory, jsxFragment]);
   return bundle;
 }
 
@@ -383,6 +420,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,
@@ -393,6 +433,9 @@ function useWorker(props: {
     apiToken,
     variables,
     sitesFolder,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
     port,
   } = props;
   const [token, setToken] = useState<CfPreviewToken>();
@@ -415,12 +458,11 @@ function useWorker(props: {
       } else {
         console.log("⎔ Starting server...");
       }
-      const scriptName = path.basename(bundle.path);
 
       const assets = sitesFolder
         ? await syncAssets(
             accountId,
-            scriptName,
+            path.basename(bundle.path),
             sitesFolder,
             true,
             undefined // TODO: env
@@ -432,13 +474,10 @@ function useWorker(props: {
 
       const content = await readFile(bundle.path, "utf-8");
       const init: CfWorkerInit = {
+        name,
         main: {
-          name: name || path.basename(bundle.path),
-          type:
-            format ||
-            (bundle.type === "esm" ? "modules" : "service-worker") === "modules"
-              ? "esm"
-              : "commonjs",
+          name: path.basename(bundle.path),
+          type: format || bundle.type === "esm" ? "esm" : "commonjs",
           content,
         },
         modules: assets.manifest
@@ -454,6 +493,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, {
@@ -464,7 +507,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;
 }
 
@@ -589,7 +643,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/dialogs.tsx

@@ -43,7 +43,7 @@ type PromptProps = {
   onSubmit: (text: string) => void;
 };
 
-export function Prompt(props: PromptProps) {
+function Prompt(props: PromptProps) {
   const [value, setValue] = useState("");
 
   return (

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 = {};
@@ -55,6 +55,44 @@ async function readConfig(path?: string): Promise<Config> {
     Object.assign(config, parsed);
   }
 
+  const inheritedFields = [
+    "name",
+    "account_id",
+    "workers_dev",
+    "compatibility_date",
+    "compatibility_flags",
+    "zone_id",
+    "routes",
+    "route",
+    "jsx_factory",
+    "jsx_fragment",
+    "site",
+    "triggers",
+    "usage_model",
+  ];
+
+  Object.keys(config.env || {}).forEach((env) => {
+    inheritedFields.forEach((field) => {
+      if (config[field] !== undefined && config.env[env][field] === undefined) {
+        config.env[env][field] = config[field]; // TODO: - shallow copy?
+      }
+    });
+  });
+
+  const mirroredFields = ["vars", "kv_namespaces", "durable_objects"];
+  Object.keys(config.env || {}).forEach((env) => {
+    mirroredFields.forEach((field) => {
+      // if it exists on top level, it should exist on env defns
+      Object.keys(config[field] || {}).forEach((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}".`
+          );
+        }
+      });
+    });
+  });
+
   // todo: validate, add defaults
   // let's just do some basics for now
 
@@ -155,8 +193,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?
@@ -356,7 +393,7 @@ export async function main(argv: string[]): Promise<void> {
         .option("host", {
           type: "string",
           describe:
-            "Host to forward requests to, defaults to the zone of project or to tutorial.cloudflareworkers.com if unauthenticated",
+            "Host to forward requests to, defaults to the zone of project",
         })
         .option("local-protocol", {
           default: "http",
@@ -376,6 +413,14 @@ export async function main(argv: string[]): Promise<void> {
           describe:
             "Protocol to forward requests to host on, defaults to https.",
           choices: ["http", "https"],
+        })
+        .option("jsx-factory", {
+          describe: "The function that is called for each JSX element",
+          type: "string",
+        })
+        .option("jsx-fragment", {
+          describe: "The function that is called for each JSX fragment",
+          type: "string",
         });
     },
     async (args) => {
@@ -402,7 +447,18 @@ 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;
+
+      // TODO: this error shouldn't actually happen,
+      // but we haven't fixed it internally yet
+      if ("durable_objects" in envRootObj) {
+        if (!(args.name || config.name)) {
+          console.warn(
+            'A worker with durable objects need to be named, or it may not work as expected. Add a "name" into wrangler.toml, or pass it in the command line with --name.'
+          );
+        }
+        // TODO: if not already published, publish a draft worker
+      }
 
       render(
         <Dev
@@ -410,10 +466,15 @@ export async function main(argv: string[]): Promise<void> {
           entry={filename}
           format={format}
           initialMode={args.local ? "local" : "remote"}
+          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}
           public={args.public}
+          compatibilityDate={config.compatibility_date}
+          compatibilityFlags={config.compatibility_flags}
+          usageModel={config.usage_model}
           variables={{
             ...(envRootObj?.vars || {}),
             ...(envRootObj?.kv_namespaces || []).reduce(
@@ -429,6 +490,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 } };
+              },
+              {}
+            ),
           }}
         />
       );
@@ -476,6 +543,14 @@ export async function main(argv: string[]): Promise<void> {
           type: "boolean",
           default: "false",
           hidden: true,
+        })
+        .option("jsx-factory", {
+          describe: "The function that is called for each JSX element",
+          type: "string",
+        })
+        .option("jsx-fragment", {
+          describe: "The function that is called for each JSX fragment",
+          type: "string",
         });
     },
     async (args) => {
@@ -510,6 +585,8 @@ export async function main(argv: string[]): Promise<void> {
         script: args.script,
         env: args.env,
         triggers: args.triggers,
+        jsxFactory: args["jsx-factory"],
+        jsxFragment: args["jsx-fragment"],
         routes: args.routes,
         public: args.public,
         site: args.site,
@@ -1095,7 +1172,7 @@ export async function main(argv: string[]): Promise<void> {
             console.log(
               `{ binding = "${args.namespace}", ${
                 args.preview ? "preview_" : ""
-              }id = ${response.id} }`
+              }id = "${response.id}" }`
             );
           }
         )
@@ -1175,7 +1252,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
@@ -1239,7 +1316,7 @@ export async function main(argv: string[]): Promise<void> {
     (yargs) => {
       return yargs
         .command(
-          "put <key> <value>",
+          "put <key> [value]",
           "Writes a single key/value pair to the given namespace.",
           (yargs) => {
             return yargs
@@ -1280,7 +1357,8 @@ export async function main(argv: string[]): Promise<void> {
               .option("path", {
                 type: "string",
                 describe: "Read value from the file at a given path.",
-              });
+              })
+              .check(demandOneOfOption("value", "path"));
           },
           async ({ key, ttl, expiration, ...args }) => {
             const namespaceId = getNamespaceId(args);
@@ -1289,7 +1367,16 @@ export async function main(argv: string[]): Promise<void> {
               : args.value;
             const config = args.config as Config;
 
-            console.log(`writing ${key}=${value} to namespace ${namespaceId}`);
+            if (args.path) {
+              console.log(
+                `writing the contents of ${args.path} to the key "${key}" on namespace ${namespaceId}`
+              );
+            } else {
+              console.log(
+                `writing the value "${value}" to key "${key}" on namespace ${namespaceId}`
+              );
+            }
+
             if (args.local) {
               const { Miniflare } = await import("miniflare");
               const mf = new Miniflare({
@@ -1501,6 +1588,10 @@ export async function main(argv: string[]): Promise<void> {
           async ({ key, ...args }) => {
             const namespaceId = getNamespaceId(args);
 
+            console.log(
+              `deleting the key "${key}" on namespace ${namespaceId}`
+            );
+
             if (args.local) {
               const { Miniflare } = await import("miniflare");
               const mf = new Miniflare({
@@ -1730,6 +1821,7 @@ export async function main(argv: string[]): Promise<void> {
 
   yargs
     .option("config", {
+      alias: "c",
       describe: "Path to .toml configuration file",
       type: "string",
       async coerce(arg) {
@@ -1737,18 +1829,30 @@ export async function main(argv: string[]): Promise<void> {
       },
     })
     .option("local", {
+      alias: "l",
       describe: "Run on my machine",
       type: "boolean",
       default: false, // I bet this will a point of contention. We'll revisit it.
     });
 
   yargs.group(["config", "help", "version"], "Flags:");
-
+  yargs.help().alias("h", "help");
+  yargs.version(wranglerVersion).alias("v", "version");
   await initialiseUserConfig();
-  await yargs.parse(argv, (err, argv, output) => {
-    if (output) {
-      console.log(output);
-    }
-  });
-  yargs.version(wranglerVersion);
+
+  await yargs.parse(
+    argv
+    /* TODO: we'd like to use the parse callback, 
+    but there's a serious bug with it 
+    https://github.com/yargs/yargs/issues/1975#issuecomment-874237906
+    
+    , (err, argv, output) => {
+      if (output) {
+        console.log(output);
+      }
+      console.log({ err });
+      console.log("what now");
+    } 
+  */
+  );
 }

package/src/kv.tsx

@@ -118,7 +118,7 @@ export function getNamespaceId({
   if (!config) {
     throw new Error(
       "Failed to find a config file.\n" +
-        "Either use --namespace to upload directly or create a configuration file with a binding."
+        "Either use --namespace-id to upload directly or create a configuration file with a binding."
     );
   }
 
@@ -149,7 +149,7 @@ export function getNamespaceId({
   // there's no KV namespaces
   if (!config.kv_namespaces || config.kv_namespaces.length === 0) {
     throw new Error(
-      "No KV Namespace to upload to! Either use --namespace to upload directly or add a KV namespace to your wrangler config file."
+      "No KV Namespace to upload to! Either use --namespace-id to upload directly or add a KV namespace to your wrangler config file."
     );
   }
 

package/src/module-collection.ts

@@ -0,0 +1,64 @@
+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";
+
+// This is a combination of an esbuild plugin and a mutable array
+// that we use to collect module references from source code.
+// There will be modules that _shouldn't_ be inlined directly into
+// the bundle. (eg. wasm modules, some text files, etc). We can include
+// those files as modules in the multi part forker form upload. This
+// 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(): {
+  modules: CfModule[];
+  plugin: esbuild.Plugin;
+} {
+  const modules: CfModule[] = [];
+  return {
+    modules,
+    plugin: {
+      name: "wrangler-module-collector",
+      setup(build) {
+        build.onStart(() => {
+          // reset the moduels collection
+          modules.splice(0);
+        });
+
+        build.onResolve(
+          // filter on "known" file types,
+          // we can expand this list later
+          { filter: /.*\.(pem|txt|html|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
+              .createHash("sha1")
+              .update(fileContent)
+              .digest("hex");
+            const fileName = `${fileHash}-${path.basename(args.path)}`;
+
+            // add the module to the array
+            modules.push({
+              name: fileName,
+              content: fileContent,
+              type: fileExt === ".wasm" ? "compiled-wasm" : "text",
+            });
+
+            return {
+              path: fileName, // change the reference to the changed module
+              external: true, // 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
+            };
+          }
+        );
+      },
+    },
+  };
+}