wrangler 0.0.0-e2f9bb2 → 0.0.0-e3278fa

package/src/index.tsx

@@ -4,6 +4,7 @@ import path from "node:path";
 import { setTimeout } from "node:timers/promises";
 import TOML from "@iarna/toml";
 import chalk from "chalk";
+import { watch } from "chokidar";
 import { execa } from "execa";
 import { findUp } from "find-up";
 import getPort from "get-port";
@@ -11,28 +12,31 @@ import { render } from "ink";
 import React from "react";
 import onExit from "signal-exit";
 import supportsColor from "supports-color";
+import { setGlobalDispatcher, ProxyAgent } from "undici";
 import makeCLI from "yargs";
 import { version as wranglerVersion } from "../package.json";
 import { fetchResult } from "./cfetch";
-import { findWranglerToml, readConfig } from "./config";
+import { findWranglerToml, printBindings, readConfig } from "./config";
 import { createWorkerUploadForm } from "./create-worker-upload-form";
 import Dev from "./dev/dev";
 import { getVarsForDev } from "./dev/dev-vars";
-import { confirm, prompt } from "./dialogs";
+import { confirm, prompt, select } from "./dialogs";
 import { getEntry } from "./entry";
 import { DeprecationError } from "./errors";
 import {
-  getNamespaceId,
-  listNamespaces,
-  listNamespaceKeys,
-  putKeyValue,
-  putBulkKeyValue,
-  deleteBulkKeyValue,
-  createNamespace,
-  isValidNamespaceBinding,
-  getKeyValue,
-  isKeyValue,
-  unexpectedKeyValueProps,
+  getKVNamespaceId,
+  listKVNamespaces,
+  listKVNamespaceKeys,
+  putKVKeyValue,
+  putKVBulkKeyValue,
+  deleteKVBulkKeyValue,
+  createKVNamespace,
+  isValidKVNamespaceBinding,
+  getKVKeyValue,
+  isKVKeyValue,
+  unexpectedKVKeyValueProps,
+  deleteKVNamespace,
+  deleteKVKeyValue,
 } from "./kv";
 import { logger } from "./logger";
 import { getPackageManager } from "./package-manager";
@@ -41,6 +45,7 @@ import {
   formatMessage,
   ParseError,
   parseJSON,
+  parsePackageJSON,
   parseTOML,
   readFileSync,
 } from "./parse";
@@ -62,6 +67,7 @@ import {
   requireAuth,
 } from "./user";
 import { whoami } from "./whoami";
+import { getZoneIdFromHost, getZoneForRoute } from "./zones";
 
 import type { Config } from "./config";
 import type { TailCLIFilters } from "./tail";
@@ -73,6 +79,18 @@ type ConfigPath = string | undefined;
 
 const resetColor = "\x1b[0m";
 const fgGreenColor = "\x1b[32m";
+const DEFAULT_LOCAL_PORT = 8787;
+
+const proxy =
+  process.env.https_proxy ||
+  process.env.HTTPS_PROXY ||
+  process.env.http_proxy ||
+  process.env.HTTP_PROXY ||
+  undefined;
+
+if (proxy) {
+  setGlobalDispatcher(new ProxyAgent(proxy));
+}
 
 function getRules(config: Config): Config["rules"] {
   const rules = config.rules ?? config.build?.upload?.rules ?? [];
@@ -203,9 +221,17 @@ function demandOneOfOption(...options: string[]) {
   };
 }
 
+/**
+ * Remove trailing white space from inputs.
+ * Matching Wrangler legacy behavior with handling inputs
+ */
+function trimTrailingWhitespace(str: string) {
+  return str.trimEnd();
+}
+
 class CommandLineArgsError extends Error {}
 
-export async function main(argv: string[]): Promise<void> {
+function createCLIParser(argv: string[]) {
   const wrangler = makeCLI(argv)
     .strict()
     // We handle errors ourselves in a try-catch around `yargs.parse`.
@@ -322,6 +348,9 @@ export async function main(argv: string[]): Promise<void> {
         throw new CommandLineArgsError(message);
       }
 
+      const devDepsToInstall: string[] = [];
+      const instructions: string[] = [];
+      let shouldRunPackageManagerInstall = false;
       const creationDirectory = path.resolve(process.cwd(), args.name ?? "");
 
       if (args.site) {
@@ -359,7 +388,12 @@ export async function main(argv: string[]): Promise<void> {
       let justCreatedWranglerToml = false;
 
       if (fs.existsSync(wranglerTomlDestination)) {
-        logger.warn(`${wranglerTomlDestination} file already exists!`);
+        logger.warn(
+          `${path.relative(
+            process.cwd(),
+            wranglerTomlDestination
+          )} already exists!`
+        );
         const shouldContinue = await confirm(
           "Do you want to continue initializing this project?"
         );
@@ -379,34 +413,63 @@ export async function main(argv: string[]): Promise<void> {
             }) + "\n"
           );
 
-          logger.log(`✨ Successfully created wrangler.toml`);
+          logger.log(
+            `✨ Created ${path.relative(
+              process.cwd(),
+              wranglerTomlDestination
+            )}`
+          );
           justCreatedWranglerToml = true;
         } catch (err) {
           throw new Error(
-            `Failed to create wrangler.toml.\n${(err as Error).message ?? err}`
+            `Failed to create ${path.relative(
+              process.cwd(),
+              wranglerTomlDestination
+            )}.\n${(err as Error).message ?? err}`
           );
         }
       }
 
       const yesFlag = args.yes ?? false;
 
-      const isInsideGitProject = Boolean(await findUp(".git"));
-      const isGitInstalled = (await execa("git", ["--version"])).exitCode === 0;
+      const isInsideGitProject = Boolean(
+        await findUp(".git", { cwd: creationDirectory, type: "directory" })
+      );
+      let isGitInstalled;
+      try {
+        isGitInstalled = (await execa("git", ["--version"])).exitCode === 0;
+      } catch (err) {
+        isGitInstalled = false;
+      }
       if (!isInsideGitProject && isGitInstalled) {
         const shouldInitGit =
           yesFlag ||
           (await confirm("Would you like to use git to manage this Worker?"));
         if (shouldInitGit) {
-          await execa("git", ["init"], { cwd: creationDirectory });
+          await execa("git", ["init"], {
+            cwd: creationDirectory,
+          });
+          await execa("git", ["branch", "-m", "main"], {
+            cwd: creationDirectory,
+          });
           await writeFile(
             path.join(creationDirectory, ".gitignore"),
             readFileSync(path.join(__dirname, "../templates/gitignore"))
           );
-          logger.log(`✨ Initialized git repository`);
+          logger.log(
+            args.name && args.name !== "."
+              ? `✨ Initialized git repository at ${path.relative(
+                  process.cwd(),
+                  creationDirectory
+                )}`
+              : `✨ Initialized git repository`
+          );
         }
       }
 
-      let pathToPackageJson = await findUp("package.json");
+      let pathToPackageJson = await findUp("package.json", {
+        cwd: creationDirectory,
+      });
       let shouldCreatePackageJson = false;
 
       if (!pathToPackageJson) {
@@ -434,16 +497,18 @@ export async function main(argv: string[]): Promise<void> {
             ) + "\n"
           );
 
-          await packageManager.install();
-          logger.log(`✨ Created package.json`);
+          shouldRunPackageManagerInstall = true;
           pathToPackageJson = path.join(creationDirectory, "package.json");
+          logger.log(
+            `✨ Created ${path.relative(process.cwd(), pathToPackageJson)}`
+          );
         } else {
           return;
         }
       } else {
         // If package.json exists and wrangler isn't installed,
         // then ask to add wrangler to devDependencies
-        const packageJson = parseJSON(
+        const packageJson = parsePackageJSON(
           readFileSync(pathToPackageJson),
           pathToPackageJson
         );
@@ -456,17 +521,21 @@ export async function main(argv: string[]): Promise<void> {
           const shouldInstall =
             yesFlag ||
             (await confirm(
-              "Would you like to install wrangler into your package.json?"
+              `Would you like to install wrangler into ${path.relative(
+                process.cwd(),
+                pathToPackageJson
+              )}?`
             ));
           if (shouldInstall) {
-            await packageManager.addDevDeps(`wrangler@${wranglerVersion}`);
-            logger.log(`✨ Installed wrangler`);
+            devDepsToInstall.push(`wrangler@${wranglerVersion}`);
           }
         }
       }
 
       let isTypescriptProject = false;
-      let pathToTSConfig = await findUp("tsconfig.json");
+      let pathToTSConfig = await findUp("tsconfig.json", {
+        cwd: creationDirectory,
+      });
       if (!pathToTSConfig) {
         // If there's no tsconfig, offer to create one
         // and install @cloudflare/workers-types
@@ -476,21 +545,18 @@ export async function main(argv: string[]): Promise<void> {
             path.join(creationDirectory, "./tsconfig.json"),
             readFileSync(path.join(__dirname, "../templates/tsconfig.json"))
           );
-          await packageManager.addDevDeps(
-            "@cloudflare/workers-types",
-            "typescript"
-          );
-
+          devDepsToInstall.push("@cloudflare/workers-types");
+          devDepsToInstall.push("typescript");
+          pathToTSConfig = path.join(creationDirectory, "tsconfig.json");
           logger.log(
-            `✨ Created tsconfig.json, installed @cloudflare/workers-types into devDependencies`
+            `✨ Created ${path.relative(process.cwd(), pathToTSConfig)}`
           );
-          pathToTSConfig = path.join(creationDirectory, "tsconfig.json");
         }
       } else {
         isTypescriptProject = true;
         // If there's a tsconfig, check if @cloudflare/workers-types
         // is already installed, and offer to install it if not
-        const packageJson = parseJSON(
+        const packageJson = parsePackageJSON(
           readFileSync(pathToPackageJson),
           pathToPackageJson
         );
@@ -504,19 +570,22 @@ export async function main(argv: string[]): Promise<void> {
             "Would you like to install the type definitions for Workers into your package.json?"
           );
           if (shouldInstall) {
-            await packageManager.addDevDeps("@cloudflare/workers-types");
+            devDepsToInstall.push("@cloudflare/workers-types");
             // We don't update the tsconfig.json because
             // it could be complicated in existing projects
             // and we don't want to break them. Instead, we simply
             // tell the user that they need to update their tsconfig.json
-            logger.log(
-              `✨ Installed @cloudflare/workers-types.\nPlease add "@cloudflare/workers-types" to compilerOptions.types in your tsconfig.json`
+            instructions.push(
+              `🚨 Please add "@cloudflare/workers-types" to compilerOptions.types in ${path.relative(
+                process.cwd(),
+                pathToTSConfig
+              )}`
             );
           }
         }
       }
 
-      const packageJsonContent = parseJSON(
+      const packageJsonContent = parsePackageJSON(
         readFileSync(pathToPackageJson),
         pathToPackageJson
       );
@@ -525,25 +594,60 @@ export async function main(argv: string[]): Promise<void> {
         !packageJsonContent.scripts?.publish &&
         shouldCreatePackageJson;
 
+      /*
+       * Passes the array of accumulated devDeps to install through to
+       * the package manager. Also generates a human-readable list
+       * of packages it installed.
+       * If there are no devDeps to install, optionally runs
+       * the package manager's install command.
+       */
+      async function installPackages(
+        shouldRunInstall: boolean,
+        depsToInstall: string[]
+      ) {
+        //lets install the devDeps they asked for
+        //and run their package manager's install command if needed
+        if (depsToInstall.length > 0) {
+          const formatter = new Intl.ListFormat("en", {
+            style: "long",
+            type: "conjunction",
+          });
+          await packageManager.addDevDeps(...depsToInstall);
+          const versionlessPackages = depsToInstall.map((dep) =>
+            dep === `wrangler@${wranglerVersion}` ? "wrangler" : dep
+          );
+
+          logger.log(
+            `✨ Installed ${formatter.format(
+              versionlessPackages
+            )} into devDependencies`
+          );
+        } else {
+          if (shouldRunInstall) {
+            await packageManager.install();
+          }
+        }
+      }
+
       async function writePackageJsonScriptsAndUpdateWranglerToml(
         isWritingScripts: boolean,
         isCreatingWranglerToml: boolean,
         packagePath: string,
-        scriptPath: string
+        scriptPath: string,
+        extraToml: TOML.JsonMap
       ) {
         if (isCreatingWranglerToml) {
-          // rewrite wrangler.toml with main = "path/to/script"
+          // rewrite wrangler.toml with main = "path/to/script" and any additional config specified in `extraToml`
           const parsedWranglerToml = parseTOML(
             readFileSync(wranglerTomlDestination)
           );
-          fs.writeFileSync(
-            wranglerTomlDestination,
-            TOML.stringify({
-              name: parsedWranglerToml.name,
-              main: scriptPath,
-              compatibility_date: parsedWranglerToml.compatibility_date,
-            })
-          );
+          const newToml = {
+            name: parsedWranglerToml.name,
+            main: scriptPath,
+            compatibility_date: parsedWranglerToml.compatibility_date,
+            ...extraToml,
+          };
+          fs.writeFileSync(wranglerTomlDestination, TOML.stringify(newToml));
         }
         const isNamedWorker =
           isCreatingWranglerToml && path.dirname(packagePath) !== process.cwd();
@@ -559,7 +663,7 @@ export async function main(argv: string[]): Promise<void> {
                   start: isCreatingWranglerToml
                     ? `wrangler dev`
                     : `wrangler dev ${scriptPath}`,
-                  publish: isCreatingWranglerToml
+                  deploy: isCreatingWranglerToml
                     ? `wrangler publish`
                     : `wrangler publish ${scriptPath}`,
                 },
@@ -568,21 +672,21 @@ export async function main(argv: string[]): Promise<void> {
               2
             ) + "\n"
           );
-          logger.log(
+          instructions.push(
             `\nTo start developing your Worker, run \`${
               isNamedWorker ? `cd ${args.name} && ` : ""
             }npm start\``
           );
-          logger.log(
-            `To publish your Worker to the Internet, run \`npm run publish\``
+          instructions.push(
+            `To publish your Worker to the Internet, run \`npm run deploy\``
           );
         } else {
-          logger.log(
+          instructions.push(
             `\nTo start developing your Worker, run \`npx wrangler dev\`${
               isCreatingWranglerToml ? "" : ` ${scriptPath}`
             }`
           );
-          logger.log(
+          instructions.push(
             `To publish your Worker to the Internet, run \`npx wrangler publish\`${
               isCreatingWranglerToml ? "" : ` ${scriptPath}`
             }`
@@ -590,60 +694,147 @@ export async function main(argv: string[]): Promise<void> {
         }
       }
 
+      async function getNewWorkerType(newWorkerFilename: string) {
+        return select(
+          `Would you like to create a Worker at ${newWorkerFilename}?`,
+          [
+            {
+              value: "none",
+              label: "None",
+            },
+            {
+              value: "fetch",
+              label: "Fetch handler",
+            },
+            {
+              value: "scheduled",
+              label: "Scheduled handler",
+            },
+          ],
+          1
+        ) as Promise<"none" | "fetch" | "scheduled">;
+      }
+
+      function getNewWorkerTemplate(
+        lang: "js" | "ts",
+        workerType: "fetch" | "scheduled"
+      ) {
+        const templates = {
+          "js-fetch": "new-worker.js",
+          "js-scheduled": "new-worker-scheduled.js",
+          "ts-fetch": "new-worker.ts",
+          "ts-scheduled": "new-worker-scheduled.ts",
+        };
+
+        return templates[`${lang}-${workerType}`];
+      }
+
+      function getNewWorkerToml(
+        workerType: "fetch" | "scheduled"
+      ): TOML.JsonMap {
+        if (workerType === "scheduled") {
+          return {
+            triggers: {
+              crons: ["1 * * * *"],
+            },
+          };
+        }
+
+        return {};
+      }
+
       if (isTypescriptProject) {
         if (!fs.existsSync(path.join(creationDirectory, "./src/index.ts"))) {
-          let shouldCreateSource = false;
+          const newWorkerFilename = path.relative(
+            process.cwd(),
+            path.join(creationDirectory, "./src/index.ts")
+          );
 
-          shouldCreateSource =
-            yesFlag ||
-            (await confirm(
-              `Would you like to create a Worker at src/index.ts?`
-            ));
+          const newWorkerType = yesFlag
+            ? "fetch"
+            : await getNewWorkerType(newWorkerFilename);
+
+          if (newWorkerType !== "none") {
+            const template = getNewWorkerTemplate("ts", newWorkerType);
 
-          if (shouldCreateSource) {
             await mkdir(path.join(creationDirectory, "./src"), {
               recursive: true,
             });
             await writeFile(
               path.join(creationDirectory, "./src/index.ts"),
-              readFileSync(path.join(__dirname, "../templates/new-worker.ts"))
+              readFileSync(path.join(__dirname, `../templates/${template}`))
             );
 
-            logger.log(`✨ Created src/index.ts`);
+            logger.log(
+              `✨ Created ${path.relative(
+                process.cwd(),
+                path.join(creationDirectory, "./src/index.ts")
+              )}`
+            );
 
             await writePackageJsonScriptsAndUpdateWranglerToml(
               shouldWritePackageJsonScripts,
               justCreatedWranglerToml,
               pathToPackageJson,
-              "src/index.ts"
+              "src/index.ts",
+              getNewWorkerToml(newWorkerType)
             );
           }
         }
       } else {
-        if (!fs.existsSync("./src/index.js")) {
-          const shouldCreateSource = await confirm(
-            `Would you like to create a Worker at src/index.js?`
+        if (!fs.existsSync(path.join(creationDirectory, "./src/index.js"))) {
+          const newWorkerFilename = path.relative(
+            process.cwd(),
+            path.join(creationDirectory, "./src/index.js")
           );
-          if (shouldCreateSource) {
+
+          const newWorkerType = yesFlag
+            ? "fetch"
+            : await getNewWorkerType(newWorkerFilename);
+
+          if (newWorkerType !== "none") {
+            const template = getNewWorkerTemplate("js", newWorkerType);
+
             await mkdir(path.join(creationDirectory, "./src"), {
               recursive: true,
             });
             await writeFile(
-              path.join(path.join(creationDirectory, "./src/index.js")),
-              readFileSync(path.join(__dirname, "../templates/new-worker.js"))
+              path.join(creationDirectory, "./src/index.js"),
+              readFileSync(path.join(__dirname, `../templates/${template}`))
             );
 
-            logger.log(`✨ Created src/index.js`);
+            logger.log(
+              `✨ Created ${path.relative(
+                process.cwd(),
+                path.join(creationDirectory, "./src/index.js")
+              )}`
+            );
 
             await writePackageJsonScriptsAndUpdateWranglerToml(
               shouldWritePackageJsonScripts,
               justCreatedWranglerToml,
               pathToPackageJson,
-              "src/index.js"
+              "src/index.js",
+              getNewWorkerToml(newWorkerType)
             );
           }
         }
       }
+      // install packages as the final step of init
+      try {
+        await installPackages(shouldRunPackageManagerInstall, devDepsToInstall);
+      } catch (e) {
+        // fetching packages could fail due to loss of internet, etc
+        // we should let folks know we failed to fetch, but their
+        // workers project is still ready to go
+        logger.error(e instanceof Error ? e.message : e);
+        instructions.push(
+          "\n🚨 wrangler was unable to fetch your npm packages, but your project is ready to go"
+        );
+      }
+
+      // let users know what to do now
+      instructions.forEach((instruction) => logger.log(instruction));
     }
   );
 
@@ -654,13 +845,34 @@ export async function main(argv: string[]): Promise<void> {
     (yargs) => {
       return yargs.option("env", {
         describe: "Perform on a specific environment",
+        type: "string",
       });
     },
-    () => {
+    async (buildArgs) => {
       // "[DEPRECATED] 🦀 Build your project (if applicable)",
-      throw new DeprecationError(
-        "`wrangler build` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#build for alternatives"
+
+      const envFlag = buildArgs.env ? ` --env=${buildArgs.env}` : "";
+      logger.log(
+        formatMessage({
+          kind: "warning",
+          text: "Deprecation: `wrangler build` has been deprecated.",
+          notes: [
+            {
+              text: "Please refer to https://developers.cloudflare.com/workers/wrangler/migration/deprecations/#build for more information.",
+            },
+            {
+              text: `Attempting to run \`wrangler publish --dry-run --outdir=dist${envFlag}\` for you instead:`,
+            },
+          ],
+        })
       );
+
+      await createCLIParser([
+        "publish",
+        "--dry-run",
+        "--outdir=dist",
+        ...(buildArgs.env ? ["--env", buildArgs.env] : []),
+      ]).parse();
     }
   );
 
@@ -672,7 +884,7 @@ export async function main(argv: string[]): Promise<void> {
     () => {
       // "🕵️  Authenticate Wrangler with a Cloudflare API Token",
       throw new DeprecationError(
-        "`wrangler config` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#config for alternatives"
+        "`wrangler config` has been deprecated, please refer to https://developers.cloudflare.com/workers/wrangler/migration/deprecations/#config for alternatives"
       );
     }
   );
@@ -816,181 +1028,112 @@ export async function main(argv: string[]): Promise<void> {
           describe: "Enable dev tools",
           type: "boolean",
           deprecated: true,
+        })
+        .option("legacy-env", {
+          type: "boolean",
+          describe: "Use legacy environments",
+          hidden: true,
         });
     },
     async (args) => {
-      await printWranglerBanner();
-      const configPath =
-        (args.config as ConfigPath) ||
-        (args.script && findWranglerToml(path.dirname(args.script)));
-      const config = readConfig(configPath, args);
-      const entry = await getEntry(args, config, "dev");
-
-      if (args.inspect) {
-        logger.warn(
-          "Passing --inspect is unnecessary, now you can always connect to devtools."
-        );
-      }
-
-      if (args["experimental-public"]) {
-        logger.warn(
-          "The --experimental-public field is experimental and will change in the future."
-        );
-      }
-
-      if (args.public) {
-        throw new Error(
-          "The --public field has been renamed to --experimental-public, and will change behaviour in the future."
-        );
-      }
-
-      const upstreamProtocol =
-        args["upstream-protocol"] || config.dev.upstream_protocol;
-      if (upstreamProtocol === "http") {
-        logger.warn(
-          "Setting upstream-protocol to http is not currently implemented.\n" +
-            "If this is required in your project, please add your use case to the following issue:\n" +
-            "https://github.com/cloudflare/wrangler2/issues/583."
-        );
-      }
+      let watcher: ReturnType<typeof watch> | undefined;
+      try {
+        await printWranglerBanner();
+        const configPath =
+          (args.config as ConfigPath) ||
+          ((args.script &&
+            findWranglerToml(path.dirname(args.script))) as ConfigPath);
+        let config = readConfig(configPath, args);
+
+        if (config.configPath) {
+          watcher = watch(config.configPath, {
+            persistent: true,
+          }).on("change", async (_event) => {
+            // TODO: Do we need to handle different `_event` types differently?
+            //       e.g. what if the file is deleted, or added?
+            config = readConfig(configPath, args);
+            if (config.configPath) {
+              logger.log(`${path.basename(config.configPath)} changed...`);
+              rerender(await getDevReactElement(config));
+            }
+          });
+        }
 
-      const accountId = !args.local ? await requireAuth(config) : undefined;
+        const entry = await getEntry(args, config, "dev");
 
-      // TODO: if worker_dev = false and no routes, then error (only for dev)
+        if (config.services && config.services.length > 0) {
+          logger.warn(
+            `This worker is bound to live services: ${config.services
+              .map(
+                (service) =>
+                  `${service.binding} (${service.service}${
+                    service.environment ? `@${service.environment}` : ""
+                  })`
+              )
+              .join(", ")}`
+          );
+        }
 
-      /**
-       * Given something that resembles a URL,
-       * try to extract a host from it
-       */
-      function getHost(urlLike: string): string | undefined {
-        if (
-          !(urlLike.startsWith("http://") || urlLike.startsWith("https://"))
-        ) {
-          urlLike = "http://" + urlLike;
+        if (args.inspect) {
+          logger.warn(
+            "Passing --inspect is unnecessary, now you can always connect to devtools."
+          );
         }
-        return new URL(urlLike).host;
-      }
 
-      /**
-       * Given something that resembles a host,
-       * try to infer a zone id from it
-       */
-      async function getZoneId(host: string): Promise<string | undefined> {
-        const zones = await fetchResult<{ id: string }[]>(
-          `/zones`,
-          {},
-          new URLSearchParams({ name: host })
-        );
-        return zones[0]?.id;
-      }
+        if (args["experimental-public"]) {
+          logger.warn(
+            "The --experimental-public field is experimental and will change in the future."
+          );
+        }
 
-      // When we're given a host (in one of the above ways), we do 2 things:
-      // - We try to extract a host from it
-      // - We try to get a zone id from the host
-      //
-      // So it turns out it's particularly hard to get a 'valid' domain
-      // from a string, so we don't even try to validate TLDs, etc.
-      // Once we get something that looks like w.x.y.z-ish, we then try to
-      // get a zone id for it, by lopping off subdomains until we get a hit
-      // from the API. That's it!
-
-      let zone: { host: string; id: string } | undefined;
-
-      if (!args.local) {
-        const hostLike =
-          args.host ||
-          config.dev.host ||
-          (args.routes && args.routes[0]) ||
-          config.route ||
-          (config.routes && config.routes[0]);
-
-        let zoneId: string | undefined =
-          typeof hostLike === "object" && "zone_id" in hostLike
-            ? hostLike.zone_id
-            : undefined;
-
-        const host =
-          typeof hostLike === "string"
-            ? getHost(hostLike)
-            : typeof hostLike === "object"
-            ? "zone_name" in hostLike
-              ? getHost(hostLike.zone_name)
-              : getHost(hostLike.pattern)
-            : undefined;
-
-        const hostPieces =
-          typeof host === "string" ? host.split(".") : undefined;
-
-        while (!zoneId && hostPieces && hostPieces.length > 1) {
-          zoneId = await getZoneId(hostPieces.join("."));
-          hostPieces.shift();
+        if (args.public) {
+          throw new Error(
+            "The --public field has been renamed to --experimental-public, and will change behaviour in the future."
+          );
         }
 
-        if (host && !zoneId) {
-          throw new Error(`Could not find zone for ${hostLike}`);
+        const upstreamProtocol =
+          args["upstream-protocol"] || config.dev.upstream_protocol;
+        if (upstreamProtocol === "http") {
+          logger.warn(
+            "Setting upstream-protocol to http is not currently implemented.\n" +
+              "If this is required in your project, please add your use case to the following issue:\n" +
+              "https://github.com/cloudflare/wrangler2/issues/583."
+          );
         }
 
-        zone =
-          typeof zoneId === "string" && typeof host === "string"
-            ? {
-                host,
-                id: zoneId,
-              }
-            : undefined;
-      }
+        // TODO: if worker_dev = false and no routes, then error (only for dev)
 
-      const nodeCompat = args.nodeCompat ?? config.node_compat;
-      if (nodeCompat) {
-        logger.warn(
-          "Enabling node.js compatibility mode for builtins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details."
-        );
-      }
+        // Compute zone info from the `host` and `route` args and config;
+        let host = args.host || config.dev.host;
+        let zoneId: string | undefined;
 
-      const { waitUntilExit } = render(
-        <Dev
-          name={getScriptName(args, config)}
-          entry={entry}
-          env={args.env}
-          zone={zone}
-          rules={getRules(config)}
-          legacyEnv={isLegacyEnv(config)}
-          minify={args.minify ?? config.minify}
-          nodeCompat={nodeCompat}
-          build={config.build || {}}
-          initialMode={args.local ? "local" : "remote"}
-          jsxFactory={args["jsx-factory"] || config.jsx_factory}
-          jsxFragment={args["jsx-fragment"] || config.jsx_fragment}
-          tsconfig={args.tsconfig ?? config.tsconfig}
-          upstreamProtocol={upstreamProtocol}
-          localProtocol={args["local-protocol"] || config.dev.local_protocol}
-          enableLocalPersistence={
-            args["experimental-enable-local-persistence"] || false
-          }
-          accountId={accountId}
-          assetPaths={getAssetPaths(
-            config,
-            args.site,
-            args.siteInclude,
-            args.siteExclude
-          )}
-          port={
-            args.port || config.dev?.port || (await getPort({ port: 8787 }))
-          }
-          ip={args.ip || config.dev.ip}
-          inspectorPort={
-            args["inspector-port"] ?? (await getPort({ port: 9229 }))
+        if (!args.local) {
+          if (host) {
+            zoneId = await getZoneIdFromHost(host);
           }
-          public={args["experimental-public"]}
-          compatibilityDate={getDevCompatibilityDate(
-            config,
-            args["compatibility-date"]
-          )}
-          compatibilityFlags={
-            args["compatibility-flags"] || config.compatibility_flags
+          const routes = args.routes || config.route || config.routes;
+          if (!zoneId && routes) {
+            const firstRoute = Array.isArray(routes) ? routes[0] : routes;
+            const zone = await getZoneForRoute(firstRoute);
+            if (zone) {
+              zoneId = zone.id;
+              host = zone.host;
+            }
           }
-          usageModel={config.usage_model}
-          bindings={{
-            kv_namespaces: config.kv_namespaces?.map(
+        }
+
+        const nodeCompat = args.nodeCompat ?? config.node_compat;
+        if (nodeCompat) {
+          logger.warn(
+            "Enabling node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details."
+          );
+        }
+
+        // eslint-disable-next-line no-inner-declarations
+        async function getBindings(configParam: Config) {
+          return {
+            kv_namespaces: configParam.kv_namespaces?.map(
               ({ binding, preview_id, id: _id }) => {
                 // In `dev`, we make folks use a separate kv namespace called
                 // `preview_id` instead of `id` so that they don't
@@ -1011,12 +1154,13 @@ export async function main(argv: string[]): Promise<void> {
                 };
               }
             ),
-            vars: getVarsForDev(config),
-            wasm_modules: config.wasm_modules,
-            text_blobs: config.text_blobs,
-            data_blobs: config.data_blobs,
-            durable_objects: config.durable_objects,
-            r2_buckets: config.r2_buckets?.map(
+            // Use a copy of combinedVars since we're modifying it later
+            vars: getVarsForDev(configParam),
+            wasm_modules: configParam.wasm_modules,
+            text_blobs: configParam.text_blobs,
+            data_blobs: configParam.data_blobs,
+            durable_objects: configParam.durable_objects,
+            r2_buckets: configParam.r2_buckets?.map(
               ({ binding, preview_bucket_name, bucket_name: _bucket_name }) => {
                 // same idea as kv namespace preview id,
                 // same copy-on-write TODO
@@ -1031,12 +1175,90 @@ export async function main(argv: string[]): Promise<void> {
                 };
               }
             ),
-            unsafe: config.unsafe?.bindings,
-          }}
-          crons={config.triggers.crons}
-        />
-      );
-      await waitUntilExit();
+            services: configParam.services,
+            unsafe: configParam.unsafe?.bindings,
+          };
+        }
+
+        const getLocalPort = memoizeGetPort(DEFAULT_LOCAL_PORT);
+        const getInspectorPort = memoizeGetPort(9229);
+
+        // eslint-disable-next-line no-inner-declarations
+        async function getDevReactElement(configParam: Config) {
+          // now log all available bindings into the terminal
+          const bindings = await getBindings(configParam);
+          // mask anything that was overridden in .dev.vars
+          // so that we don't log potential secrets into the terminal
+          const maskedVars = { ...bindings.vars };
+          for (const key of Object.keys(maskedVars)) {
+            if (maskedVars[key] !== configParam.vars[key]) {
+              // This means it was overridden in .dev.vars
+              // so let's mask it
+              maskedVars[key] = "(hidden)";
+            }
+          }
+
+          printBindings({
+            ...bindings,
+            vars: maskedVars,
+          });
+
+          return (
+            <Dev
+              name={getScriptName(args, config)}
+              entry={entry}
+              env={args.env}
+              zone={zoneId}
+              host={host}
+              rules={getRules(config)}
+              legacyEnv={isLegacyEnv(config)}
+              minify={args.minify ?? config.minify}
+              nodeCompat={nodeCompat}
+              build={config.build || {}}
+              initialMode={args.local ? "local" : "remote"}
+              jsxFactory={args["jsx-factory"] || config.jsx_factory}
+              jsxFragment={args["jsx-fragment"] || config.jsx_fragment}
+              tsconfig={args.tsconfig ?? config.tsconfig}
+              upstreamProtocol={upstreamProtocol}
+              localProtocol={
+                args["local-protocol"] || config.dev.local_protocol
+              }
+              enableLocalPersistence={
+                args["experimental-enable-local-persistence"] || false
+              }
+              accountId={config.account_id}
+              assetPaths={getAssetPaths(
+                config,
+                args.site,
+                args.siteInclude,
+                args.siteExclude
+              )}
+              port={args.port || config.dev.port || (await getLocalPort())}
+              ip={args.ip || config.dev.ip}
+              inspectorPort={
+                args["inspector-port"] ?? (await getInspectorPort())
+              }
+              public={args["experimental-public"]}
+              compatibilityDate={getDevCompatibilityDate(
+                config,
+                args["compatibility-date"]
+              )}
+              compatibilityFlags={
+                args["compatibility-flags"] || config.compatibility_flags
+              }
+              usageModel={config.usage_model}
+              bindings={bindings}
+              crons={config.triggers.crons}
+            />
+          );
+        }
+        const { waitUntilExit, rerender } = render(
+          await getDevReactElement(config)
+        );
+        await waitUntilExit();
+      } finally {
+        await watcher?.close();
+      }
     }
   );
 
@@ -1153,6 +1375,11 @@ export async function main(argv: string[]): Promise<void> {
         .option("dry-run", {
           describe: "Don't actually publish",
           type: "boolean",
+        })
+        .option("legacy-env", {
+          type: "boolean",
+          describe: "Use legacy environments",
+          hidden: true,
         });
     },
     async (args) => {
@@ -1180,7 +1407,7 @@ export async function main(argv: string[]): Promise<void> {
         );
       }
 
-      const accountId = await requireAuth(config);
+      const accountId = args.dryRun ? undefined : await requireAuth(config);
 
       const assetPaths = getAssetPaths(
         config,
@@ -1188,6 +1415,7 @@ export async function main(argv: string[]): Promise<void> {
         args.siteInclude,
         args.siteExclude
       );
+
       await publish({
         config,
         accountId,
@@ -1274,6 +1502,11 @@ export async function main(argv: string[]): Promise<void> {
           default: false,
           describe:
             "If a log would have been filtered out, send it through anyway alongside the filter which would have blocked it.",
+        })
+        .option("legacy-env", {
+          type: "boolean",
+          describe: "Use legacy environments",
+          hidden: true,
         });
     },
     async (args) => {
@@ -1410,6 +1643,7 @@ export async function main(argv: string[]): Promise<void> {
           rules={getRules(config)}
           env={args.env}
           zone={undefined}
+          host={undefined}
           legacyEnv={isLegacyEnv(config)}
           build={config.build || {}}
           minify={undefined}
@@ -1423,7 +1657,9 @@ export async function main(argv: string[]): Promise<void> {
           enableLocalPersistence={false}
           accountId={accountId}
           assetPaths={undefined}
-          port={config.dev?.port}
+          port={
+            config.dev.port || (await getPort({ port: DEFAULT_LOCAL_PORT }))
+          }
           ip={config.dev.ip}
           public={undefined}
           compatibilityDate={getDevCompatibilityDate(config)}
@@ -1471,6 +1707,7 @@ export async function main(argv: string[]): Promise<void> {
                 };
               }
             ),
+            services: config.services,
             unsafe: config.unsafe?.bindings,
           }}
           crons={config.triggers.crons}
@@ -1570,7 +1807,7 @@ export async function main(argv: string[]): Promise<void> {
     },
     () => {
       throw new DeprecationError(
-        "`wrangler subdomain` has been deprecated, please refer to https://github.com/cloudflare/wrangler2/blob/main/docs/deprecations.md#subdomain for alternatives"
+        "`wrangler subdomain` has been deprecated, please refer to https://developers.cloudflare.com/workers/wrangler/migration/deprecations/#subdomain for alternatives"
       );
     }
   );
@@ -1582,6 +1819,11 @@ export async function main(argv: string[]): Promise<void> {
     (secretYargs) => {
       return secretYargs
         .command(subHelp)
+        .option("legacy-env", {
+          type: "boolean",
+          describe: "Use legacy environments",
+          hidden: true,
+        })
         .command(
           "put <key>",
           "Create or update a secret variable for a script",
@@ -1616,9 +1858,11 @@ export async function main(argv: string[]): Promise<void> {
             const accountId = await requireAuth(config);
 
             const isInteractive = process.stdin.isTTY;
-            const secretValue = isInteractive
-              ? await prompt("Enter a secret value:", "password")
-              : await readFromStdin();
+            const secretValue = trimTrailingWhitespace(
+              isInteractive
+                ? await prompt("Enter a secret value:", "password")
+                : await readFromStdin()
+            );
 
             logger.log(
               `🌀 Creating the secret for script ${scriptName} ${
@@ -1663,6 +1907,7 @@ export async function main(argv: string[]): Promise<void> {
                       vars: {},
                       durable_objects: { bindings: [] },
                       r2_buckets: [],
+                      services: [],
                       wasm_modules: {},
                       text_blobs: {},
                       data_blobs: {},
@@ -1831,7 +2076,7 @@ export async function main(argv: string[]): Promise<void> {
           async (args) => {
             await printWranglerBanner();
 
-            if (!isValidNamespaceBinding(args.namespace)) {
+            if (!isValidKVNamespaceBinding(args.namespace)) {
               throw new CommandLineArgsError(
                 `The namespace binding name "${args.namespace}" is invalid. It can only have alphanumeric and _ characters, and cannot begin with a number.`
               );
@@ -1854,7 +2099,7 @@ export async function main(argv: string[]): Promise<void> {
             // TODO: generate a binding name stripping non alphanumeric chars
 
             logger.log(`🌀 Creating namespace with title "${title}"`);
-            const namespaceId = await createNamespace(accountId, title);
+            const namespaceId = await createKVNamespace(accountId, title);
 
             logger.log("✨ Success!");
             const envString = args.env ? ` under [env.${args.env}]` : "";
@@ -1881,7 +2126,7 @@ export async function main(argv: string[]): Promise<void> {
             // TODO: we should show bindings if they exist for given ids
 
             logger.log(
-              JSON.stringify(await listNamespaces(accountId), null, "  ")
+              JSON.stringify(await listKVNamespaces(accountId), null, "  ")
             );
           }
         )
@@ -1918,7 +2163,7 @@ export async function main(argv: string[]): Promise<void> {
 
             let id;
             try {
-              id = getNamespaceId(args, config);
+              id = getKVNamespaceId(args, config);
             } catch (e) {
               throw new CommandLineArgsError(
                 "Not able to delete namespace.\n" + ((e as Error).message ?? e)
@@ -1927,10 +2172,7 @@ export async function main(argv: string[]): Promise<void> {
 
             const accountId = await requireAuth(config);
 
-            await fetchResult<{ id: string }>(
-              `/accounts/${accountId}/storage/kv/namespaces/${id}`,
-              { method: "DELETE" }
-            );
+            await deleteKVNamespace(accountId, id);
 
             // TODO: recommend they remove it from wrangler.toml
 
@@ -2015,7 +2257,7 @@ export async function main(argv: string[]): Promise<void> {
           async ({ key, ttl, expiration, ...args }) => {
             await printWranglerBanner();
             const config = readConfig(args.config as ConfigPath, args);
-            const namespaceId = getNamespaceId(args, config);
+            const namespaceId = getKVNamespaceId(args, config);
             // One of `args.path` and `args.value` must be defined
             const value = args.path
               ? readFileSync(args.path)
@@ -2034,7 +2276,7 @@ export async function main(argv: string[]): Promise<void> {
 
             const accountId = await requireAuth(config);
 
-            await putKeyValue(accountId, namespaceId, {
+            await putKVKeyValue(accountId, namespaceId, {
               key,
               value,
               expiration,
@@ -2079,11 +2321,11 @@ export async function main(argv: string[]): Promise<void> {
           async ({ prefix, ...args }) => {
             // TODO: support for limit+cursor (pagination)
             const config = readConfig(args.config as ConfigPath, args);
-            const namespaceId = getNamespaceId(args, config);
+            const namespaceId = getKVNamespaceId(args, config);
 
             const accountId = await requireAuth(config);
 
-            const results = await listNamespaceKeys(
+            const results = await listKVNamespaceKeys(
               accountId,
               namespaceId,
               prefix
@@ -2131,11 +2373,11 @@ export async function main(argv: string[]): Promise<void> {
           },
           async ({ key, ...args }) => {
             const config = readConfig(args.config as ConfigPath, args);
-            const namespaceId = getNamespaceId(args, config);
+            const namespaceId = getKVNamespaceId(args, config);
 
             const accountId = await requireAuth(config);
 
-            logger.log(await getKeyValue(accountId, namespaceId, key));
+            logger.log(await getKVKeyValue(accountId, namespaceId, key));
           }
         )
         .command(
@@ -2173,7 +2415,7 @@ export async function main(argv: string[]): Promise<void> {
           async ({ key, ...args }) => {
             await printWranglerBanner();
             const config = readConfig(args.config as ConfigPath, args);
-            const namespaceId = getNamespaceId(args, config);
+            const namespaceId = getKVNamespaceId(args, config);
 
             logger.log(
               `Deleting the key "${key}" on namespace ${namespaceId}.`
@@ -2181,10 +2423,7 @@ export async function main(argv: string[]): Promise<void> {
 
             const accountId = await requireAuth(config);
 
-            await fetchResult(
-              `/accounts/${accountId}/storage/kv/namespaces/${namespaceId}/values/${key}`,
-              { method: "DELETE" }
-            );
+            await deleteKVKeyValue(accountId, namespaceId, key);
           }
         );
     }
@@ -2236,7 +2475,7 @@ export async function main(argv: string[]): Promise<void> {
             // but we'll do that in the future if needed.
 
             const config = readConfig(args.config as ConfigPath, args);
-            const namespaceId = getNamespaceId(args, config);
+            const namespaceId = getKVNamespaceId(args, config);
             const content = parseJSON(readFileSync(filename), filename);
 
             if (!Array.isArray(content)) {
@@ -2250,18 +2489,12 @@ export async function main(argv: string[]): Promise<void> {
             const warnings: string[] = [];
             for (let i = 0; i < content.length; i++) {
               const keyValue = content[i];
-              if (typeof keyValue !== "object") {
-                errors.push(
-                  `The item at index ${i} is type: "${typeof keyValue}" - ${JSON.stringify(
-                    keyValue
-                  )}`
-                );
-              } else if (!isKeyValue(keyValue)) {
+              if (!isKVKeyValue(keyValue)) {
                 errors.push(
                   `The item at index ${i} is ${JSON.stringify(keyValue)}`
                 );
               } else {
-                const props = unexpectedKeyValueProps(keyValue);
+                const props = unexpectedKVKeyValueProps(keyValue);
                 if (props.length > 0) {
                   warnings.push(
                     `The item at index ${i} contains unexpected properties: ${JSON.stringify(
@@ -2294,14 +2527,7 @@ export async function main(argv: string[]): Promise<void> {
             }
 
             const accountId = await requireAuth(config);
-            await putBulkKeyValue(
-              accountId,
-              namespaceId,
-              content,
-              (index, total) => {
-                logger.log(`Uploaded ${index} of ${total}.`);
-              }
-            );
+            await putKVBulkKeyValue(accountId, namespaceId, content);
 
             logger.log("Success!");
           }
@@ -2346,7 +2572,7 @@ export async function main(argv: string[]): Promise<void> {
           async ({ filename, ...args }) => {
             await printWranglerBanner();
             const config = readConfig(args.config as ConfigPath, args);
-            const namespaceId = getNamespaceId(args, config);
+            const namespaceId = getKVNamespaceId(args, config);
 
             if (!args.force) {
               const result = await confirm(
@@ -2391,14 +2617,7 @@ export async function main(argv: string[]): Promise<void> {
 
             const accountId = await requireAuth(config);
 
-            await deleteBulkKeyValue(
-              accountId,
-              namespaceId,
-              content,
-              (index, total) => {
-                logger.log(`Deleted ${index} of ${total}.`);
-              }
-            );
+            await deleteKVBulkKeyValue(accountId, namespaceId, content);
 
             logger.log("Success!");
           }
@@ -2551,41 +2770,43 @@ export async function main(argv: string[]): Promise<void> {
     }
   );
 
-  wrangler
-    .option("legacy-env", {
-      type: "boolean",
-      describe: "Use legacy environments",
-    })
-    .option("config", {
-      alias: "c",
-      describe: "Path to .toml configuration file",
-      type: "string",
-      requiresArg: true,
-    });
+  wrangler.option("config", {
+    alias: "c",
+    describe: "Path to .toml configuration file",
+    type: "string",
+    requiresArg: true,
+  });
 
-  wrangler.group(["config", "help", "version", "legacy-env"], "Flags:");
+  wrangler.group(["config", "help", "version"], "Flags:");
   wrangler.help().alias("h", "help");
   wrangler.version(wranglerVersion).alias("v", "version");
   wrangler.exitProcess(false);
 
+  return wrangler;
+}
+
+export async function main(argv: string[]): Promise<void> {
+  const wrangler = createCLIParser(argv);
   try {
     await wrangler.parse();
   } catch (e) {
     logger.log(""); // Just adds a bit of space
     if (e instanceof CommandLineArgsError) {
-      wrangler.showHelp("error");
-      logger.log(""); // Add a bit of space.
       logger.error(e.message);
+      // We are not able to ask the `wrangler` CLI parser to show help for a subcommand programmatically.
+      // The workaround is to re-run the parsing with an additional `--help` flag, which will result in the correct help message being displayed.
+      // The `wrangler` object is "frozen"; we cannot reuse that with different args, so we must create a new CLI parser to generate the help message.
+      await createCLIParser([...argv, "--help"]).parse();
     } else if (e instanceof ParseError) {
       e.notes.push({
-        text: "\nIf you think this is a bug, please open an issue at: https://github.com/cloudflare/wrangler2/issues/new",
+        text: "\nIf you think this is a bug, please open an issue at: https://github.com/cloudflare/wrangler2/issues/new/choose",
       });
-      logger.error(formatMessage(e));
+      logger.log(formatMessage(e));
     } else {
       logger.error(e instanceof Error ? e.message : e);
       logger.log(
         `${fgGreenColor}%s${resetColor}`,
-        "If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new."
+        "If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new/choose"
       );
     }
     throw e;
@@ -2613,3 +2834,13 @@ function getDevCompatibilityDate(
   }
   return compatibilityDate ?? currentDate;
 }
+
+/**
+ * Avoiding calling `getPort()` multiple times by memoizing the first result.
+ */
+function memoizeGetPort(defaultPort: number) {
+  let portValue: number;
+  return async () => {
+    return portValue || (portValue = await getPort({ port: defaultPort }));
+  };
+}