wrangler 0.0.0-e043479 → 0.0.0-e0621809

package/src/dev.tsx

@@ -1,960 +1,928 @@
-import assert from "node:assert";
-import { spawn } from "node:child_process";
-import { existsSync, realpathSync } from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
+import chalk from "chalk";
 import { watch } from "chokidar";
-import clipboardy from "clipboardy";
-import commandExists from "command-exists";
-import { execaCommand } from "execa";
-import { Box, Text, useApp, useInput } from "ink";
-import React, { useState, useEffect, useRef } from "react";
-import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
-import onExit from "signal-exit";
-import tmp from "tmp-promise";
-import { fetch } from "undici";
-import { createWorker } from "./api/worker";
-import { bundleWorker } from "./bundle";
-import guessWorkerFormat from "./guess-worker-format";
-import useInspector from "./inspect";
-import { DEFAULT_MODULE_RULES } from "./module-collection";
-import openInBrowser from "./open-in-browser";
-import { usePreviewServer, waitForPortToBeAvailable } from "./proxy";
-import { syncAssets } from "./sites";
-import { getAPIToken } from "./user";
-import type { CfPreviewToken } from "./api/preview";
-import type { CfModule, CfWorkerInit, CfScriptFormat } from "./api/worker";
-import type { Config } from "./config";
-import type { Entry } from "./entry";
-import type { AssetPaths } from "./sites";
-import type { WatchMode } from "esbuild";
-import type { ExecaChildProcess } from "execa";
-import type { DirectoryResult } from "tmp-promise";
-
-export type DevProps = {
-  name?: string;
-  entry: Entry;
-  port?: number;
-  inspectorPort: number;
-  format: CfScriptFormat | undefined;
-  rules: Config["rules"];
-  accountId: undefined | string;
-  initialMode: "local" | "remote";
-  jsxFactory: undefined | string;
-  jsxFragment: undefined | string;
-  enableLocalPersistence: boolean;
-  bindings: CfWorkerInit["bindings"];
-  public: undefined | string;
-  assetPaths: undefined | AssetPaths;
-  compatibilityDate: undefined | string;
-  compatibilityFlags: undefined | string[];
-  usageModel: undefined | "bundled" | "unbound";
-  buildCommand: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
-  };
-  env: string | undefined;
-  legacyEnv: boolean;
-  zone:
-    | {
-        id: string;
-        host: string;
-      }
-    | undefined;
-};
-
-function Dev(props: DevProps): JSX.Element {
-  const port = props.port ?? 8787;
-  const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
-  const directory = useTmpDir();
-
-  // if there isn't a build command, we just return the entry immediately
-  // ideally there would be a conditional here, but the rules of hooks
-  // kinda forbid that, so we thread the entry through useCustomBuild
-  const entry = useCustomBuild(props.entry, props.buildCommand);
-
-  const format = useWorkerFormat({ entry: props.entry, format: props.format });
-  if (format && props.public && format === "service-worker") {
-    throw new Error(
-      "You cannot use the service worker format with a `public` directory."
-    );
-  }
-
-  if (props.bindings.wasm_modules && format === "modules") {
-    throw new Error(
-      "You cannot configure [wasm_modules] with an ES module worker. Instead, import the .wasm module directly in your code"
-    );
-  }
-
-  if (props.bindings.text_blobs && format === "modules") {
-    throw new Error(
-      "You cannot configure [text_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[build.upload.rules]` in your wrangler.toml"
-    );
-  }
-
-  const bundle = useEsbuild({
-    entry,
-    format,
-    destination: directory,
-    staticRoot: props.public,
-    jsxFactory: props.jsxFactory,
-    rules: props.rules,
-    jsxFragment: props.jsxFragment,
-    serveAssetsFromWorker: !!props.public,
-  });
-
-  const toggles = useHotkeys(
-    {
-      local: props.initialMode === "local",
-      tunnel: false,
-    },
-    port,
-    props.inspectorPort
-  );
-
-  useTunnel(toggles.tunnel);
-
-  return (
-    <>
-      {toggles.local ? (
-        <Local
-          name={props.name}
-          bundle={bundle}
-          format={format}
-          bindings={props.bindings}
-          assetPaths={props.assetPaths}
-          public={props.public}
-          port={port}
-          rules={props.rules}
-          inspectorPort={props.inspectorPort}
-          enableLocalPersistence={props.enableLocalPersistence}
-        />
-      ) : (
-        <Remote
-          name={props.name}
-          bundle={bundle}
-          format={format}
-          accountId={props.accountId}
-          apiToken={apiToken}
-          bindings={props.bindings}
-          assetPaths={props.assetPaths}
-          public={props.public}
-          port={port}
-          inspectorPort={props.inspectorPort}
-          compatibilityDate={props.compatibilityDate}
-          compatibilityFlags={props.compatibilityFlags}
-          usageModel={props.usageModel}
-          env={props.env}
-          legacyEnv={props.legacyEnv}
-          zone={props.zone}
-        />
-      )}
-      <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
-        <Text>
-          {`B to open a browser, D to open Devtools, L to ${
-            toggles.local ? "turn off" : "turn on"
-          } local mode, X to exit`}
-        </Text>
-      </Box>
-    </>
-  );
-}
-
-function useWorkerFormat(props: {
-  entry: Entry | undefined;
-  format: undefined | CfScriptFormat;
-}): CfScriptFormat | undefined {
-  const [format, setFormat] = useState<CfScriptFormat | undefined>();
-  useEffect(() => {
-    async function validateFormat() {
-      if (!props.entry || format) {
-        return;
-      }
-      setFormat(await guessWorkerFormat(props.entry, props.format));
-    }
-    validateFormat().catch((err) => {
-      console.error("Failed to validate worker format:", err);
-    });
-  }, [props.entry, props.format, format]);
-  return format;
-}
-
-function Remote(props: {
-  name: string | undefined;
-  bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat | undefined;
-  public: undefined | string;
-  assetPaths: undefined | AssetPaths;
-  port: number;
-  inspectorPort: number;
-  accountId: undefined | string;
-  apiToken: undefined | string;
-  bindings: CfWorkerInit["bindings"];
-  compatibilityDate: string | undefined;
-  compatibilityFlags: undefined | string[];
-  usageModel: undefined | "bundled" | "unbound";
-  env: string | undefined;
-  legacyEnv: boolean | undefined;
-  zone: { id: string; host: string } | undefined;
-}) {
-  assert(props.accountId, "accountId is required");
-  assert(props.apiToken, "apiToken is required");
-  const previewToken = useWorker({
-    name: props.name,
-    bundle: props.bundle,
-    format: props.format,
-    modules: props.bundle ? props.bundle.modules : [],
-    accountId: props.accountId,
-    apiToken: props.apiToken,
-    bindings: props.bindings,
-    assetPaths: props.assetPaths,
-    port: props.port,
-    compatibilityDate: props.compatibilityDate,
-    compatibilityFlags: props.compatibilityFlags,
-    usageModel: props.usageModel,
-    env: props.env,
-    legacyEnv: props.legacyEnv,
-    zone: props.zone,
-  });
-
-  usePreviewServer({
-    previewToken,
-    publicRoot: props.public,
-    port: props.port,
-  });
-
-  useInspector({
-    inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
-    port: props.inspectorPort,
-    logToTerminal: true,
-  });
-  return null;
-}
-function Local(props: {
-  name: undefined | string;
-  bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat | undefined;
-  bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
-  public: undefined | string;
-  port: number;
-  rules: Config["rules"];
-  inspectorPort: number;
-  enableLocalPersistence: boolean;
-}) {
-  const { inspectorUrl } = useLocalWorker({
-    name: props.name,
-    bundle: props.bundle,
-    format: props.format,
-    bindings: props.bindings,
-    assetPaths: props.assetPaths,
-    public: props.public,
-    port: props.port,
-    rules: props.rules,
-    inspectorPort: props.port,
-    enableLocalPersistence: props.enableLocalPersistence,
-  });
-  useInspector({
-    inspectorUrl,
-    port: props.inspectorPort,
-    logToTerminal: false,
-  });
-  return null;
-}
-
-function useLocalWorker(props: {
-  name: undefined | string;
-  bundle: EsbuildBundle | undefined;
-  rules: Config["rules"];
-  format: CfScriptFormat | undefined;
-  bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
-  public: undefined | string;
-  port: number;
-  inspectorPort: number;
-  enableLocalPersistence: boolean;
-}) {
-  // TODO: pass vars via command line
-  const { bundle, format, bindings, port, assetPaths, inspectorPort } = props;
-  const local = useRef<ReturnType<typeof spawn>>();
-  const removeSignalExitListener = useRef<() => void>();
-  const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
-  useEffect(() => {
-    async function startLocalWorker() {
-      if (!bundle || !format) return;
-
-      // port for the worker
-      await waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 });
-      // port for inspector
-      await waitForPortToBeAvailable(inspectorPort, {
-        retryPeriod: 200,
-        timeout: 2000,
-      });
-
-      if (props.public) {
-        throw new Error(
-          '⎔ A "public" folder is not yet supported in local mode.'
-        );
-      }
-
-      // In local mode, we want to copy all referenced modules into
-      // the output bundle directory before starting up
-      for (const module of bundle.modules) {
-        await writeFile(
-          path.join(path.dirname(bundle.path), module.name),
-          module.content
-        );
-      }
-
-      console.log("⎔ Starting a local server...");
-      // TODO: just use execa for this
-      local.current = spawn(
-        "node",
-        [
-          "--experimental-vm-modules",
-          "--inspect",
-          require.resolve("miniflare/cli"),
-          realpathSync(bundle.path),
-          "--watch",
-          "--wrangler-config",
-          path.join(__dirname, "../miniflare-config-stubs/wrangler.empty.toml"),
-          "--env",
-          path.join(__dirname, "../miniflare-config-stubs/.env.empty"),
-          "--package",
-          path.join(__dirname, "../miniflare-config-stubs/package.empty.json"),
-          "--port",
-          port.toString(),
-          ...(assetPaths
-            ? [
-                "--site",
-                path.join(process.cwd(), assetPaths.baseDirectory),
-                ...assetPaths.includePatterns.map((pattern) => [
-                  "--site-include",
-                  pattern,
-                ]),
-                ...assetPaths.excludePatterns.map((pattern) => [
-                  "--site-exclude",
-                  pattern,
-                ]),
-              ].flatMap((x) => x)
-            : []),
-          ...(props.enableLocalPersistence
-            ? ["--kv-persist", "--cache-persist", "--do-persist"]
-            : []),
-          ...Object.entries(bindings.vars || {}).flatMap(([key, value]) => {
-            return ["--binding", `${key}=${value}`];
-          }),
-          ...(bindings.kv_namespaces || []).flatMap(({ binding }) => {
-            return ["--kv", binding];
-          }),
-          ...(bindings.durable_objects?.bindings || []).flatMap(
-            ({ name, class_name }) => {
-              return ["--do", `${name}=${class_name}`];
-            }
-          ),
-          ...Object.entries(bindings.wasm_modules || {}).flatMap(
-            ([name, filePath]) => {
-              return [
-                "--wasm",
-                `${name}=${path.join(process.cwd(), filePath)}`,
-              ];
-            }
-          ),
-          ...bundle.modules.reduce<string[]>((cmd, { name, type }) => {
-            if (format === "service-worker") {
-              if (type === "compiled-wasm") {
-                // In service-worker format, .wasm modules are referenced
-                // by global identifiers, so we convert it here.
-                // This identifier has to be a valid JS identifier,
-                // so we replace all non alphanumeric characters
-                // with an underscore.
-                const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
-                return cmd.concat([`--wasm`, `${identifier}=${name}`]);
-              } else {
-                // TODO: we should actually support this
-                throw new Error(
-                  `⎔ Unsupported module type ${type} for file ${name} in service-worker format`
-                );
-              }
-            }
-            return cmd;
-          }, []),
-          "--modules",
-          String(format === "modules"),
-          ...(props.rules || [])
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            .concat(DEFAULT_MODULE_RULES!)
-            .flatMap((rule) =>
-              rule.globs.flatMap((glob) => [
-                "--modules-rule",
-                `${rule.type}=${glob}`,
-              ])
-            ),
-        ],
-        {
-          cwd: path.dirname(realpathSync(bundle.path)),
-        }
-      );
-      console.log(`⬣ Listening at http://localhost:${port}`);
-
-      local.current.on("close", (code) => {
-        if (code !== null) {
-          console.log(`miniflare process exited with code ${code}`);
-        }
-      });
-
-      local.current.stdout?.on("data", (data: Buffer) => {
-        console.log(`${data.toString()}`);
-      });
-
-      local.current.stderr?.on("data", (data: Buffer) => {
-        console.error(`${data.toString()}`);
-        const matches =
-          /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)/.exec(
-            data.toString()
-          );
-        if (matches) {
-          setInspectorUrl(matches[1]);
-        }
-      });
-
-      local.current.on("exit", (code) => {
-        if (code !== 0) {
-          console.error(`miniflare process exited with code ${code}`);
-        }
-      });
-
-      local.current.on("error", (error: Error) => {
-        console.error(`miniflare process failed to spawn`);
-        console.error(error);
-      });
-
-      removeSignalExitListener.current = onExit((_code, _signal) => {
-        console.log("⎔ Shutting down local server.");
-        local.current?.kill();
-        local.current = undefined;
-      });
-    }
-
-    startLocalWorker().catch((err) => {
-      console.error("local worker:", err);
-    });
-
-    return () => {
-      if (local.current) {
-        console.log("⎔ Shutting down local server.");
-        local.current?.kill();
-        local.current = undefined;
-        removeSignalExitListener.current && removeSignalExitListener.current();
-        removeSignalExitListener.current = undefined;
-      }
-    };
-  }, [
-    bundle,
-    format,
-    port,
-    inspectorPort,
-    bindings.durable_objects?.bindings,
-    bindings.kv_namespaces,
-    bindings.vars,
-    props.enableLocalPersistence,
-    assetPaths,
-    props.public,
-    props.rules,
-    bindings.wasm_modules,
-  ]);
-  return { inspectorUrl };
-}
-
-function useTmpDir(): string | undefined {
-  const [directory, setDirectory] = useState<DirectoryResult>();
-  const handleError = useErrorHandler();
-  useEffect(() => {
-    let dir: DirectoryResult;
-    async function create() {
-      try {
-        dir = await tmp.dir({ unsafeCleanup: true });
-        setDirectory(dir);
-        return;
-      } catch (err) {
-        console.error("failed to create tmp dir");
-        throw err;
-      }
-    }
-    create().catch((err) => {
-      // we want to break here
-      // we can't do much without a temp dir anyway
-      handleError(err);
-    });
-    return () => {
-      dir.cleanup().catch(() => {
-        // extremely unlikely,
-        // but it's 2022 after all
-        console.error("failed to cleanup tmp dir");
-      });
-    };
-  }, [handleError]);
-  return directory?.path;
+import getPort from "get-port";
+import { render } from "ink";
+import React from "react";
+import { findWranglerToml, printBindings, readConfig } from "./config";
+import Dev from "./dev/dev";
+import { getVarsForDev } from "./dev/dev-vars";
+import { getLocalPersistencePath } from "./dev/get-local-persistence-path";
+
+import { startDevServer } from "./dev/start-server";
+import { getEntry } from "./entry";
+import { logger } from "./logger";
+import * as metrics from "./metrics";
+import { getAssetPaths, getSiteAssetPaths } from "./sites";
+import { getAccountFromCache, loginOrRefreshIfRequired } from "./user";
+import { collectKeyValues } from "./utils/collectKeyValues";
+import { identifyD1BindingsAsBeta } from "./worker";
+import { getHostFromRoute, getZoneForRoute, getZoneIdFromHost } from "./zones";
+import {
+	DEFAULT_INSPECTOR_PORT,
+	DEFAULT_LOCAL_PORT,
+	getDevCompatibilityDate,
+	getRules,
+	getScriptName,
+	isLegacyEnv,
+	printWranglerBanner,
+} from "./index";
+import type { Config, Environment } from "./config";
+import type { Route } from "./config/environment";
+import type { LoggerLevel } from "./logger";
+import type { EnablePagesAssetsServiceBindingOptions } from "./miniflare-cli/types";
+import type { CfWorkerInit } from "./worker";
+import type {
+	CommonYargsArgv,
+	StrictYargsOptionsToInterface,
+} from "./yargs-types";
+
+export function devOptions(yargs: CommonYargsArgv) {
+	return (
+		yargs
+			.positional("script", {
+				describe: "The path to an entry point for your worker",
+				type: "string",
+			})
+			.option("name", {
+				describe: "Name of the worker",
+				type: "string",
+				requiresArg: true,
+			})
+			// We want to have a --no-bundle flag, but yargs requires that
+			// we also have a --bundle flag (that it adds the --no to by itself)
+			// So we make a --bundle flag, but hide it, and then add a --no-bundle flag
+			// that's visible to the user but doesn't "do" anything.
+			.option("bundle", {
+				describe: "Run wrangler's compilation step before publishing",
+				type: "boolean",
+				hidden: true,
+			})
+			.option("no-bundle", {
+				describe: "Skip internal build steps and directly publish script",
+				type: "boolean",
+				default: false,
+			})
+			.option("format", {
+				choices: ["modules", "service-worker"] as const,
+				describe: "Choose an entry type",
+				hidden: true,
+				deprecated: true,
+			})
+			.option("compatibility-date", {
+				describe: "Date to use for compatibility checks",
+				type: "string",
+				requiresArg: true,
+			})
+			.option("compatibility-flags", {
+				describe: "Flags to use for compatibility checks",
+				alias: "compatibility-flag",
+				type: "string",
+				requiresArg: true,
+				array: true,
+			})
+			.option("latest", {
+				describe: "Use the latest version of the worker runtime",
+				type: "boolean",
+				default: true,
+			})
+			.option("ip", {
+				describe: "IP address to listen on",
+				type: "string",
+			})
+			.option("port", {
+				describe: "Port to listen on",
+				type: "number",
+			})
+			.option("inspector-port", {
+				describe: "Port for devtools to connect to",
+				type: "number",
+			})
+			.option("routes", {
+				describe: "Routes to upload",
+				alias: "route",
+				type: "string",
+				requiresArg: true,
+				array: true,
+			})
+			.option("host", {
+				type: "string",
+				requiresArg: true,
+				describe:
+					"Host to forward requests to, defaults to the zone of project",
+			})
+			.option("local-protocol", {
+				describe: "Protocol to listen to requests on, defaults to http.",
+				choices: ["http", "https"] as const,
+			})
+			.options("local-upstream", {
+				type: "string",
+				describe:
+					"Host to act as origin in local mode, defaults to dev.host or route",
+			})
+			.option("experimental-public", {
+				describe: "Static assets to be served",
+				type: "string",
+				requiresArg: true,
+				deprecated: true,
+				hidden: true,
+			})
+			.option("assets", {
+				describe: "Static assets to be served",
+				type: "string",
+				requiresArg: true,
+			})
+			.option("public", {
+				describe: "(Deprecated) Static assets to be served",
+				type: "string",
+				requiresArg: true,
+				deprecated: true,
+				hidden: true,
+			})
+			.option("site", {
+				describe: "Root folder of static assets for Workers Sites",
+				type: "string",
+				requiresArg: true,
+			})
+			.option("site-include", {
+				describe:
+					"Array of .gitignore-style patterns that match file or directory names from the sites directory. Only matched items will be uploaded.",
+				type: "string",
+				requiresArg: true,
+				array: true,
+			})
+			.option("site-exclude", {
+				describe:
+					"Array of .gitignore-style patterns that match file or directory names from the sites directory. Matched items will not be uploaded.",
+				type: "string",
+				requiresArg: true,
+				array: true,
+			})
+			.option("upstream-protocol", {
+				describe: "Protocol to forward requests to host on, defaults to https.",
+				choices: ["http", "https"] as const,
+			})
+			.option("var", {
+				describe:
+					"A key-value pair to be injected into the script as a variable",
+				type: "string",
+				requiresArg: true,
+				array: true,
+			})
+			.option("define", {
+				describe: "A key-value pair to be substituted in the script",
+				type: "string",
+				requiresArg: true,
+				array: true,
+			})
+			.option("jsx-factory", {
+				describe: "The function that is called for each JSX element",
+				type: "string",
+				requiresArg: true,
+			})
+			.option("jsx-fragment", {
+				describe: "The function that is called for each JSX fragment",
+				type: "string",
+				requiresArg: true,
+			})
+			.option("tsconfig", {
+				describe: "Path to a custom tsconfig.json file",
+				type: "string",
+				requiresArg: true,
+			})
+			.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.
+			})
+			.option("experimental-local", {
+				describe: "Run on my machine using the Cloudflare Workers runtime",
+				type: "boolean",
+				default: false,
+			})
+			.option("experimental-local-remote-kv", {
+				describe:
+					"Read/write KV data from/to real namespaces on the Cloudflare network",
+				type: "boolean",
+				default: false,
+			})
+			.check((argv) => {
+				if (argv.local && argv["experimental-local"]) {
+					throw new Error(
+						"--local and --experimental-local are mutually exclusive. " +
+							"Please enable one or the other."
+					);
+				}
+				if (
+					argv["experimental-local-remote-kv"] &&
+					!argv["experimental-local"]
+				) {
+					throw new Error(
+						"--experimental-local-remote-kv requires --experimental-local to be enabled."
+					);
+				}
+				return true;
+			})
+			.option("minify", {
+				describe: "Minify the script",
+				type: "boolean",
+			})
+			.option("node-compat", {
+				describe: "Enable Node.js compatibility",
+				type: "boolean",
+			})
+			.option("experimental-enable-local-persistence", {
+				describe:
+					"Enable persistence for local mode (deprecated, use --persist)",
+				type: "boolean",
+				deprecated: true,
+				hidden: true,
+			})
+			.option("persist", {
+				describe:
+					"Enable persistence for local mode, using default path: .wrangler/state",
+				type: "boolean",
+			})
+			.option("persist-to", {
+				describe:
+					"Specify directory to use for local persistence (implies --persist)",
+				type: "string",
+				requiresArg: true,
+			})
+			.option("live-reload", {
+				describe:
+					"Auto reload HTML pages when change is detected in local mode",
+				type: "boolean",
+			})
+			.check((argv) => {
+				const local = argv["local"] || argv["experimental-local"];
+				if (argv["live-reload"] && !local) {
+					throw new Error(
+						"--live-reload is only supported in local mode. " +
+							"Please enable either --local or --experimental-local."
+					);
+				}
+				return true;
+			})
+			.option("inspect", {
+				describe: "Enable dev tools",
+				type: "boolean",
+				deprecated: true,
+				hidden: true,
+			})
+			.option("legacy-env", {
+				type: "boolean",
+				describe: "Use legacy environments",
+				hidden: true,
+			})
+			.option("test-scheduled", {
+				describe: "Test scheduled events by visiting /__scheduled in browser",
+				type: "boolean",
+				default: false,
+			})
+			.option("log-level", {
+				choices: ["debug", "info", "log", "warn", "error", "none"] as const,
+				describe: "Specify logging level",
+				// Yargs requires this to type log-level properly
+				default: "log" as LoggerLevel,
+			})
+	);
 }
 
-function useCustomBuild(
-  expectedEntry: Entry,
-  props: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
-  }
-): undefined | Entry {
-  const [entry, setEntry] = useState<Entry | undefined>(
-    // if there's no build command, just return the expected entry
-    !props.command ? expectedEntry : undefined
-  );
-  const { command, cwd, watch_dir } = props;
-  useEffect(() => {
-    if (!command) return;
-    let cmd: ExecaChildProcess<string> | undefined,
-      interval: NodeJS.Timeout | undefined;
-    console.log("running:", command);
-    cmd = execaCommand(command, {
-      ...(cwd && { cwd }),
-      shell: true,
-      stderr: "inherit",
-      stdout: "inherit",
-    });
-    if (watch_dir) {
-      watch(watch_dir, { persistent: true, ignoreInitial: true }).on(
-        "all",
-        (_event, filePath) => {
-          console.log(`The file ${filePath} changed, restarting build...`);
-          cmd?.kill();
-          cmd = execaCommand(command, {
-            ...(cwd && { cwd }),
-            shell: true,
-            stderr: "inherit",
-            stdout: "inherit",
-          });
-        }
-      );
-    }
-
-    // check every so often whether `expectedEntry` exists
-    // if it does, we're done
-    const startedAt = Date.now();
-    interval = setInterval(() => {
-      let fileExists = false;
-      try {
-        // Use require.resolve to use node's resolution algorithm,
-        // this lets us use paths without explicit .js extension
-        // TODO: we should probably remove this, because it doesn't
-        // take into consideration other extensions like .tsx, .ts, .jsx, etc
-        fileExists = existsSync(require.resolve(expectedEntry.file));
-      } catch (e) {
-        // fail silently, usually means require.resolve threw MODULE_NOT_FOUND
-      }
-
-      if (fileExists === true) {
-        interval && clearInterval(interval);
-        setEntry(expectedEntry);
-      } else {
-        const elapsed = Date.now() - startedAt;
-        // timeout after 30 seconds of waiting
-        if (elapsed > 1000 * 30) {
-          console.error(
-            `⎔ Build timed out, Could not resolve ${expectedEntry.file}`
-          );
-          interval && clearInterval(interval);
-          cmd?.kill();
-        }
-      }
-    }, 200);
-
-    return () => {
-      if (cmd) {
-        cmd.kill();
-        cmd = undefined;
-      }
-      interval && clearInterval(interval);
-      interval = undefined;
-    };
-  }, [command, cwd, expectedEntry, watch_dir]);
-  return entry;
+type DevArguments = StrictYargsOptionsToInterface<typeof devOptions>;
+
+export async function devHandler(args: DevArguments) {
+	if (!(args.local || args.experimentalLocal)) {
+		const isLoggedIn = await loginOrRefreshIfRequired();
+		if (!isLoggedIn) {
+			throw new Error(
+				"You must be logged in to use wrangler dev in remote mode. Try logging in, or run wrangler dev --local."
+			);
+		}
+	}
+
+	let watcher;
+	try {
+		const devInstance = await startDev(args);
+		watcher = devInstance.watcher;
+		const { waitUntilExit } = devInstance.devReactElement;
+		await waitUntilExit();
+	} finally {
+		await watcher?.close();
+	}
 }
 
-type EsbuildBundle = {
-  id: number;
-  path: string;
-  entry: Entry;
-  type: "esm" | "commonjs";
-  modules: CfModule[];
-  serveAssetsFromWorker: boolean;
+export type AdditionalDevProps = {
+	vars?: {
+		[key: string]: unknown;
+	};
+	kv?: {
+		binding: string;
+		id: string;
+		preview_id?: string;
+	}[];
+	durableObjects?: {
+		name: string;
+		class_name: string;
+		script_name?: string | undefined;
+		environment?: string | undefined;
+	}[];
+	r2?: {
+		binding: string;
+		bucket_name: string;
+		preview_bucket_name?: string;
+	}[];
+	d1Databases?: Environment["d1_databases"];
 };
 
-function useEsbuild({
-  entry,
-  destination,
-  staticRoot,
-  jsxFactory,
-  jsxFragment,
-  format,
-  rules,
-  serveAssetsFromWorker,
-}: {
-  entry: undefined | Entry;
-  destination: string | undefined;
-  format: CfScriptFormat | undefined;
-  staticRoot: undefined | string;
-  jsxFactory: string | undefined;
-  jsxFragment: string | undefined;
-  rules: Config["rules"];
-  serveAssetsFromWorker: boolean;
-}): EsbuildBundle | undefined {
-  const [bundle, setBundle] = useState<EsbuildBundle>();
-  useEffect(() => {
-    let stopWatching: (() => void) | undefined = undefined;
-
-    const watchMode: WatchMode = {
-      async onRebuild(error) {
-        if (error) console.error("watch build failed:", error);
-        else {
-          // nothing really changes here, so let's increment the id
-          // to change the return object's identity
-          setBundle((previousBundle) => {
-            assert(
-              previousBundle,
-              "Rebuild triggered with no previous build available"
-            );
-            return { ...previousBundle, id: previousBundle.id + 1 };
-          });
-        }
-      },
-    };
-
-    async function build() {
-      if (!destination || !entry || !format) return;
-
-      const { resolvedEntryPointPath, bundleType, modules, stop } =
-        await bundleWorker(entry, destination, {
-          // In dev, we serve assets from the local proxy before we send the request to the worker.
-          serveAssetsFromWorker: false,
-          jsxFactory,
-          jsxFragment,
-          format,
-          rules,
-          watch: watchMode,
-        });
-
-      // Capture the `stop()` method to use as the `useEffect()` destructor.
-      stopWatching = stop;
-
-      setBundle({
-        id: 0,
-        entry,
-        path: resolvedEntryPointPath,
-        type: bundleType,
-        modules,
-        serveAssetsFromWorker,
-      });
-    }
-
-    build().catch(() => {
-      // esbuild already logs errors to stderr and we don't want to end the process
-      // on build errors anyway so this is a no-op error handler
-    });
-
-    return stopWatching;
-  }, [
-    entry,
-    destination,
-    staticRoot,
-    jsxFactory,
-    jsxFragment,
-    format,
-    serveAssetsFromWorker,
-    rules,
-  ]);
-  return bundle;
-}
-
-function useWorker(props: {
-  name: string | undefined;
-  bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat | undefined;
-  modules: CfModule[];
-  accountId: string;
-  apiToken: string;
-  bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
-  port: number;
-  compatibilityDate: string | undefined;
-  compatibilityFlags: string[] | undefined;
-  usageModel: undefined | "bundled" | "unbound";
-  env: string | undefined;
-  legacyEnv: boolean | undefined;
-  zone: { id: string; host: string } | undefined;
-}): CfPreviewToken | undefined {
-  const {
-    name,
-    bundle,
-    format,
-    modules,
-    accountId,
-    apiToken,
-    bindings,
-    assetPaths,
-    compatibilityDate,
-    compatibilityFlags,
-    usageModel,
-    port,
-  } = props;
-  const [token, setToken] = useState<CfPreviewToken | undefined>();
-
-  // This is the most reliable way to detect whether
-  // something's "happened" in our system; We make a ref and
-  // mark it once we log our initial message. Refs are vars!
-  const startedRef = useRef(false);
-
-  useEffect(() => {
-    async function start() {
-      setToken(undefined); // reset token in case we're re-running
-
-      if (!bundle || !format) return;
-
-      if (!startedRef.current) {
-        startedRef.current = true;
-      } else {
-        console.log("⎔ Detected changes, restarted server.");
-      }
-
-      const assets = await syncAssets(
-        accountId,
-        // When we're using the newer service environments, we wouldn't
-        // have added the env name on to the script name. However, we must
-        // include it in the kv namespace name regardless (since there's no
-        // concept of service environments for kv namespaces yet).
-        name + (!props.legacyEnv && props.env ? `-${props.env}` : ""),
-        assetPaths,
-        true
-      ); // TODO: cancellable?
-
-      const content = await readFile(bundle.path, "utf-8");
-
-      const init: CfWorkerInit = {
-        name,
-        main: {
-          name: path.basename(bundle.path),
-          type: format === "modules" ? "esm" : "commonjs",
-          content,
-        },
-        modules: modules.concat(
-          assets.manifest
-            ? {
-                name: "__STATIC_CONTENT_MANIFEST",
-                content: JSON.stringify(assets.manifest),
-                type: "text",
-              }
-            : []
-        ),
-        bindings: {
-          ...bindings,
-          kv_namespaces: (bindings.kv_namespaces || []).concat(
-            assets.namespace
-              ? { binding: "__STATIC_CONTENT", id: assets.namespace }
-              : []
-          ),
-          text_blobs: {
-            ...bindings.text_blobs,
-            ...(assets.manifest &&
-              format === "service-worker" && {
-                __STATIC_CONTENT_MANIFEST: "__STATIC_CONTENT_MANIFEST",
-              }),
-          },
-        },
-        migrations: undefined, // no migrations in dev
-        compatibility_date: compatibilityDate,
-        compatibility_flags: compatibilityFlags,
-        usage_model: usageModel,
-      };
-      setToken(
-        await createWorker(
-          init,
-          {
-            accountId,
-            apiToken,
-          },
-          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone }
-        )
-      );
-    }
-    start().catch((err) => {
-      // we want to log the error, but not end the process
-      // since it could recover after the developer fixes whatever's wrong
-      console.error("remote worker:", err);
-    });
-  }, [
-    name,
-    bundle,
-    format,
-    accountId,
-    apiToken,
-    port,
-    assetPaths,
-    compatibilityDate,
-    compatibilityFlags,
-    usageModel,
-    bindings,
-    modules,
-    props.env,
-    props.legacyEnv,
-    props.zone,
-  ]);
-  return token;
+type StartDevOptions = DevArguments &
+	// These options can be passed in directly when called with the `wrangler.dev()` API.
+	// They aren't exposed as CLI arguments.
+	AdditionalDevProps & {
+		forceLocal?: boolean;
+		disableDevRegistry?: boolean;
+		enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
+		onReady?: (ip: string, port: number) => void;
+		showInteractiveDevSession?: boolean;
+	};
+
+export async function startDev(args: StartDevOptions) {
+	let watcher: ReturnType<typeof watch> | undefined;
+	let rerender: (node: React.ReactNode) => void | undefined;
+	try {
+		if (args.logLevel) {
+			logger.loggerLevel = args.logLevel;
+		}
+		await printWranglerBanner();
+
+		if (args.local && process.platform !== "win32") {
+			logger.info(
+				chalk.magenta(
+					`Want to try out the next version of local mode using the open-source Workers runtime?\nSwitch out --local for ${chalk.bold(
+						"--experimental-local"
+					)} and let us know what you think at https://discord.gg/cloudflaredev !`
+				)
+			);
+		}
+
+		const configPath =
+			args.config ||
+			(args.script && findWranglerToml(path.dirname(args.script)));
+		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 {
+			entry,
+			legacyNodeCompat,
+			nodejsCompat,
+			upstreamProtocol,
+			zoneId,
+			host,
+			routes,
+			getLocalPort,
+			getInspectorPort,
+			cliDefines,
+			localPersistencePath,
+		} = await validateDevServerSettings(args, config);
+
+		await metrics.sendMetricsEvent(
+			"run dev",
+			{
+				local: args.local,
+				usesTypeScript: /\.tsx?$/.test(entry.file),
+			},
+			{ sendMetrics: config.send_metrics, offline: args.local }
+		);
+
+		// eslint-disable-next-line no-inner-declarations
+		async function getDevReactElement(configParam: Config) {
+			const { assetPaths, bindings } = getBindingsAndAssetPaths(
+				args,
+				configParam
+			);
+
+			return (
+				<Dev
+					name={getScriptName({ name: args.name, env: args.env }, configParam)}
+					noBundle={!(args.bundle ?? !configParam.no_bundle)}
+					entry={entry}
+					env={args.env}
+					zone={zoneId}
+					host={host}
+					routes={routes}
+					rules={getRules(configParam)}
+					legacyEnv={isLegacyEnv(configParam)}
+					minify={args.minify ?? configParam.minify}
+					legacyNodeCompat={legacyNodeCompat}
+					nodejsCompat={nodejsCompat}
+					build={configParam.build || {}}
+					define={{ ...configParam.define, ...cliDefines }}
+					initialMode={
+						args.local || args.experimentalLocal ? "local" : "remote"
+					}
+					jsxFactory={args.jsxFactory || configParam.jsx_factory}
+					jsxFragment={args.jsxFragment || configParam.jsx_fragment}
+					tsconfig={args.tsconfig ?? configParam.tsconfig}
+					upstreamProtocol={upstreamProtocol}
+					localProtocol={args.localProtocol || configParam.dev.local_protocol}
+					localUpstream={args.localUpstream ?? host}
+					localPersistencePath={localPersistencePath}
+					liveReload={args.liveReload || false}
+					accountId={configParam.account_id || getAccountFromCache()?.id}
+					assetPaths={assetPaths}
+					assetsConfig={configParam.assets}
+					initialPort={
+						args.port ?? configParam.dev.port ?? (await getLocalPort())
+					}
+					initialIp={args.ip || configParam.dev.ip}
+					inspectorPort={
+						args.inspectorPort ??
+						configParam.dev.inspector_port ??
+						(await getInspectorPort())
+					}
+					isWorkersSite={Boolean(args.site || configParam.site)}
+					compatibilityDate={getDevCompatibilityDate(
+						configParam,
+						args.compatibilityDate
+					)}
+					compatibilityFlags={
+						args.compatibilityFlags || configParam.compatibility_flags
+					}
+					usageModel={configParam.usage_model}
+					bindings={bindings}
+					crons={configParam.triggers.crons}
+					queueConsumers={configParam.queues.consumers}
+					onReady={args.onReady}
+					inspect={args.inspect ?? true}
+					showInteractiveDevSession={args.showInteractiveDevSession}
+					forceLocal={args.forceLocal}
+					enablePagesAssetsServiceBinding={args.enablePagesAssetsServiceBinding}
+					firstPartyWorker={configParam.first_party_worker}
+					sendMetrics={configParam.send_metrics}
+					testScheduled={args.testScheduled}
+					experimentalLocal={args.experimentalLocal}
+					experimentalLocalRemoteKv={args.experimentalLocalRemoteKv}
+				/>
+			);
+		}
+		const devReactElement = render(await getDevReactElement(config));
+
+		// In the bootstrapper script `bin/wrangler.js`, we open an IPC channel, so
+		// IPC messages from this process are propagated through the bootstrapper.
+		// Normally, Node's SIGINT handler would close this for us, but interactive
+		// mode enables raw mode on stdin which disables the built-in handler. The
+		// following line disconnects from the IPC channel when we press `x` or
+		// CTRL-C in interactive mode, ensuring no open handles, and allowing for a
+		// clean exit. Note, if we called `stop()` using the dev API, we don't want
+		// to disconnect here, as the user may still need IPC. We also don't want
+		// to disconnect if this file was imported in Jest (not the case with E2E
+		// tests), as that would stop communication with the test runner.
+		let apiStopped = false;
+		void devReactElement.waitUntilExit().then(() => {
+			if (!apiStopped && typeof jest === "undefined") process.disconnect?.();
+		});
+
+		rerender = devReactElement.rerender;
+		return {
+			devReactElement,
+			watcher,
+			stop: async () => {
+				apiStopped = true;
+				devReactElement.unmount();
+				await watcher?.close();
+			},
+		};
+	} finally {
+		await watcher?.close();
+	}
 }
 
-function sleep(period: number) {
-  return new Promise((resolve) => setTimeout(resolve, period));
+export async function startApiDev(args: StartDevOptions) {
+	if (args.logLevel) {
+		logger.loggerLevel = args.logLevel;
+	}
+	await printWranglerBanner();
+
+	const configPath =
+		args.config || (args.script && findWranglerToml(path.dirname(args.script)));
+	const config = readConfig(configPath, args);
+
+	const {
+		entry,
+		legacyNodeCompat,
+		nodejsCompat,
+		upstreamProtocol,
+		zoneId,
+		host,
+		routes,
+		getLocalPort,
+		getInspectorPort,
+		cliDefines,
+		localPersistencePath,
+	} = await validateDevServerSettings(args, config);
+
+	await metrics.sendMetricsEvent(
+		"run dev (api)",
+		{ local: args.local },
+		{ sendMetrics: config.send_metrics, offline: args.local }
+	);
+
+	// eslint-disable-next-line no-inner-declarations
+	async function getDevServer(configParam: Config) {
+		const { assetPaths, bindings } = getBindingsAndAssetPaths(
+			args,
+			configParam
+		);
+
+		//if args.bundle is on, don't disable bundling
+		//if there's no args.bundle, and configParam.no_bundle is on, disable bundling
+		//otherwise, enable bundling
+		const enableBundling = args.bundle ?? !configParam.no_bundle;
+		return await startDevServer({
+			name: getScriptName({ name: args.name, env: args.env }, configParam),
+			noBundle: !enableBundling,
+			entry: entry,
+			env: args.env,
+			zone: zoneId,
+			host: host,
+			routes: routes,
+			rules: getRules(configParam),
+			legacyEnv: isLegacyEnv(configParam),
+			minify: args.minify ?? configParam.minify,
+			legacyNodeCompat,
+			nodejsCompat,
+			build: configParam.build || {},
+			define: { ...config.define, ...cliDefines },
+			initialMode: args.local ? "local" : "remote",
+			jsxFactory: args.jsxFactory ?? configParam.jsx_factory,
+			jsxFragment: args.jsxFragment ?? configParam.jsx_fragment,
+			tsconfig: args.tsconfig ?? configParam.tsconfig,
+			upstreamProtocol: upstreamProtocol,
+			localProtocol: args.localProtocol ?? configParam.dev.local_protocol,
+			localUpstream: args.localUpstream ?? host,
+			localPersistencePath,
+			liveReload: args.liveReload ?? false,
+			accountId: configParam.account_id ?? getAccountFromCache()?.id,
+			assetPaths: assetPaths,
+			assetsConfig: configParam.assets,
+			//port can be 0, which means to use a random port
+			initialPort: args.port ?? configParam.dev.port ?? (await getLocalPort()),
+			initialIp: args.ip ?? configParam.dev.ip,
+			inspectorPort:
+				args.inspectorPort ??
+				configParam.dev.inspector_port ??
+				(await getInspectorPort()),
+			isWorkersSite: Boolean(args.site || configParam.site),
+			compatibilityDate: getDevCompatibilityDate(
+				config,
+				// Only `compatibilityDate` will be set when using `unstable_dev`
+				args.compatibilityDate
+			),
+			compatibilityFlags:
+				args.compatibilityFlags ?? configParam.compatibility_flags,
+			usageModel: configParam.usage_model,
+			bindings: bindings,
+			crons: configParam.triggers.crons,
+			queueConsumers: configParam.queues.consumers,
+			onReady: args.onReady,
+			inspect: args.inspect ?? true,
+			showInteractiveDevSession: args.showInteractiveDevSession,
+			forceLocal: args.forceLocal,
+			enablePagesAssetsServiceBinding: args.enablePagesAssetsServiceBinding,
+			local: args.local ?? true,
+			firstPartyWorker: configParam.first_party_worker,
+			sendMetrics: configParam.send_metrics,
+			testScheduled: args.testScheduled,
+			experimentalLocal: args.experimentalLocal,
+			experimentalLocalRemoteKv: args.experimentalLocalRemoteKv,
+			disableDevRegistry: args.disableDevRegistry ?? false,
+		});
+	}
+
+	const devServer = await getDevServer(config);
+	if (!devServer) {
+		throw logger.error("Failed to start dev server.");
+	}
+
+	return {
+		stop: async () => {
+			await devServer.stop();
+		},
+	};
 }
-const SLEEP_DURATION = 2000;
-// really need a first class api for this
-const hostNameRegex = /userHostname="(.*)"/g;
-async function findTunnelHostname() {
-  let hostName: string | undefined;
-  while (!hostName) {
-    try {
-      const resp = await fetch("http://localhost:8789/metrics");
-      const data = await resp.text();
-      const matches = Array.from(data.matchAll(hostNameRegex));
-      hostName = matches[0][1];
-    } catch (err) {
-      await sleep(SLEEP_DURATION);
-    }
-  }
-  return hostName;
+/**
+ * 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 }));
+	};
 }
-
 /**
- * Create a tunnel to the remote worker.
- * We've disabled this for now until we figure out a better user experience.
+ * mask anything that was overridden in .dev.vars
+ * so that we don't log potential secrets into the terminal
  */
-function useTunnel(toggle: boolean) {
-  const tunnel = useRef<ReturnType<typeof spawn>>();
-  const removeSignalExitListener = useRef<() => void>();
-  // TODO: test if cloudflared is available, if not
-  // point them to a url where they can get docs to install it
-  useEffect(() => {
-    async function startTunnel() {
-      if (toggle) {
-        try {
-          await commandExists("cloudflared");
-        } catch (e) {
-          console.error(
-            "To share your worker on the Internet, please install `cloudflared` from https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation"
-          );
-          return;
-        }
-        console.log("⎔ Starting a tunnel...");
-        tunnel.current = spawn("cloudflared", [
-          "tunnel",
-          "--url",
-          "http://localhost:8787",
-          "--metrics",
-          "localhost:8789",
-        ]);
-
-        tunnel.current.on("close", (code) => {
-          if (code !== 0) {
-            console.log(`Tunnel process exited with code ${code}`);
-          }
-        });
-
-        removeSignalExitListener.current = onExit((_code, _signal) => {
-          console.log("⎔ Shutting down local tunnel.");
-          tunnel.current?.kill();
-          tunnel.current = undefined;
-        });
-
-        const hostName = await findTunnelHostname();
-        await clipboardy.write(hostName);
-        console.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
-      }
-    }
-
-    startTunnel().catch((err) => {
-      console.error("tunnel:", err);
-    });
-
-    return () => {
-      if (tunnel.current) {
-        console.log("⎔ Shutting down tunnel.");
-        tunnel.current?.kill();
-        tunnel.current = undefined;
-        removeSignalExitListener.current && removeSignalExitListener.current();
-        removeSignalExitListener.current = undefined;
-      }
-    };
-  }, [toggle]);
+function maskVars(bindings: CfWorkerInit["bindings"], configParam: Config) {
+	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)";
+		}
+	}
+	return maskedVars;
 }
 
-type useHotkeysInitialState = {
-  local: boolean;
-  tunnel: boolean;
-};
-function useHotkeys(
-  initial: useHotkeysInitialState,
-  port: number,
-  inspectorPort: number
+async function getZoneIdHostAndRoutes(args: StartDevOptions, config: Config) {
+	// TODO: if worker_dev = false and no routes, then error (only for dev)
+	// Compute zone info from the `host` and `route` args and config;
+	let host = args.host || config.dev.host;
+	let zoneId: string | undefined;
+	const routes: Route[] | undefined =
+		args.routes || (config.route && [config.route]) || config.routes;
+
+	if (args.forceLocal) {
+		args.local = true;
+	}
+
+	if (!args.local) {
+		if (host) {
+			zoneId = await getZoneIdFromHost(host);
+		}
+		if (!zoneId && routes) {
+			const firstRoute = routes[0];
+			const zone = await getZoneForRoute(firstRoute);
+			if (zone) {
+				zoneId = zone.id;
+				host = zone.host;
+			}
+		}
+	} else if (!host) {
+		if (routes) {
+			const firstRoute = routes[0];
+			host = getHostFromRoute(firstRoute);
+		}
+	}
+	return { host, routes, zoneId };
+}
+
+async function validateDevServerSettings(
+	args: StartDevOptions,
+	config: Config
 ) {
-  // UGH, we should put port in context instead
-  const [toggles, setToggles] = useState(initial);
-  useInput(
-    async (
-      input,
-      // eslint-disable-next-line unused-imports/no-unused-vars
-      key
-    ) => {
-      switch (input.toLowerCase()) {
-        // open browser
-        case "b": {
-          await openInBrowser(`http://localhost:${port}`);
-          break;
-        }
-        // toggle inspector
-        case "d": {
-          await openInBrowser(
-            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`
-          );
-          break;
-        }
-        // toggle local
-        case "l":
-          setToggles((previousToggles) => ({
-            ...previousToggles,
-            local: !previousToggles.local,
-          }));
-          break;
-        // shut down
-        case "q":
-        case "x":
-          process.exit(0);
-          break;
-        default:
-          // nothing?
-          break;
-      }
-    }
-  );
-  return toggles;
+	const entry = await getEntry(
+		{ assets: args.assets, script: args.script },
+		config,
+		"dev"
+	);
+
+	const { zoneId, host, routes } = await getZoneIdHostAndRoutes(args, config);
+	const getLocalPort = memoizeGetPort(DEFAULT_LOCAL_PORT);
+	const getInspectorPort = memoizeGetPort(DEFAULT_INSPECTOR_PORT);
+
+	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(", ")}`
+		);
+	}
+
+	if (args.inspect) {
+		//devtools are enabled by default, but we still need to disable them if the caller doesn't want them
+		logger.warn(
+			"Passing --inspect is unnecessary, now you can always connect to devtools."
+		);
+	}
+	if (args.experimentalPublic) {
+		throw new Error(
+			"The --experimental-public field has been renamed to --assets"
+		);
+	}
+
+	if (args.public) {
+		throw new Error("The --public field has been renamed to --assets");
+	}
+
+	if ((args.assets ?? config.assets) && (args.site ?? config.site)) {
+		throw new Error("Cannot use Assets and Workers Sites in the same Worker.");
+	}
+
+	if (args.assets) {
+		logger.warn(
+			"The --assets argument is experimental and may change or break at any time"
+		);
+	}
+	const upstreamProtocol =
+		args.upstreamProtocol ?? 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/workers-sdk/issues/583."
+		);
+	}
+	const legacyNodeCompat = args.nodeCompat ?? config.node_compat;
+	if (legacyNodeCompat) {
+		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."
+		);
+	}
+
+	const compatibilityFlags =
+		args.compatibilityFlags ?? config.compatibility_flags;
+	const nodejsCompat = compatibilityFlags?.includes("nodejs_compat");
+	if (legacyNodeCompat && nodejsCompat) {
+		throw new Error(
+			"The `nodejs_compat` compatibility flag cannot be used in conjunction with the legacy `--node-compat` flag. If you want to use the Workers runtime Node.js compatibility features, please remove the `--node-compat` argument from your CLI command or `node_compat = true` from your config file."
+		);
+	}
+
+	if (args.experimentalEnableLocalPersistence) {
+		logger.warn(
+			`--experimental-enable-local-persistence is deprecated.\n` +
+				`Move any existing data to .wrangler/state and use --persist, or\n` +
+				`use --persist-to=./wrangler-local-state to keep using the old path.`
+		);
+	}
+
+	const localPersistencePath = getLocalPersistencePath(
+		args.persistTo,
+		Boolean(args.persist),
+		config.configPath
+	);
+
+	const cliDefines = collectKeyValues(args.define);
+
+	return {
+		entry,
+		upstreamProtocol,
+		legacyNodeCompat,
+		nodejsCompat,
+		getLocalPort,
+		getInspectorPort,
+		zoneId,
+		host,
+		routes,
+		cliDefines,
+		localPersistencePath,
+	};
 }
 
-function ErrorFallback(props: { error: Error }) {
-  const { exit } = useApp();
-  useEffect(() => exit(new Error()));
-  return (
-    <>
-      <Text>Something went wrong:</Text>
-      <Text>{props.error.stack}</Text>
-    </>
-  );
+function getBindingsAndAssetPaths(args: StartDevOptions, configParam: Config) {
+	const cliVars = collectKeyValues(args.var);
+
+	// now log all available bindings into the terminal
+	const bindings = getBindings(configParam, args.env, args.local ?? false, {
+		kv: args.kv,
+		vars: { ...args.vars, ...cliVars },
+		durableObjects: args.durableObjects,
+		r2: args.r2,
+		d1Databases: args.d1Databases,
+	});
+
+	const maskedVars = maskVars(bindings, configParam);
+
+	printBindings({
+		...bindings,
+		vars: maskedVars,
+	});
+
+	const assetPaths =
+		args.assets || configParam.assets
+			? getAssetPaths(configParam, args.assets)
+			: getSiteAssetPaths(
+					configParam,
+					args.site,
+					args.siteInclude,
+					args.siteExclude
+			  );
+	return { assetPaths, bindings };
 }
 
-export default withErrorBoundary(Dev, { FallbackComponent: ErrorFallback });
+function getBindings(
+	configParam: Config,
+	env: string | undefined,
+	local: boolean,
+	args: AdditionalDevProps
+): CfWorkerInit["bindings"] {
+	const bindings = {
+		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
+					// break production data. So here we check that a `preview_id`
+					// has actually been configured.
+					// This whole block of code will be obsoleted in the future
+					// when we have copy-on-write for previews on edge workers.
+					if (!preview_id) {
+						// TODO: This error has to be a _lot_ better, ideally just asking
+						// to create a preview namespace for the user automatically
+						throw new Error(
+							`In development, you should use a separate kv namespace than the one you'd use in production. Please create a new kv namespace with "wrangler kv:namespace create <name> --preview" and add its id as preview_id to the kv_namespace "${binding}" in your wrangler.toml`
+						); // Ugh, I really don't like this message very much
+					}
+					return {
+						binding,
+						id: preview_id,
+					};
+				}
+			),
+			...(args.kv || []),
+		],
+		// Use a copy of combinedVars since we're modifying it later
+		vars: {
+			...getVarsForDev(configParam, env),
+			...args.vars,
+		},
+		wasm_modules: configParam.wasm_modules,
+		text_blobs: configParam.text_blobs,
+		data_blobs: configParam.data_blobs,
+		durable_objects: {
+			bindings: [
+				...(configParam.durable_objects || { bindings: [] }).bindings,
+				...(args.durableObjects || []),
+			],
+		},
+		queues: [
+			...(configParam.queues.producers || []).map((queue) => {
+				return { binding: queue.binding, queue_name: queue.queue };
+			}),
+		],
+		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
+					if (!preview_bucket_name) {
+						throw new Error(
+							`In development, you should use a separate r2 bucket than the one you'd use in production. Please create a new r2 bucket with "wrangler r2 bucket create <name>" and add its name as preview_bucket_name to the r2_buckets "${binding}" in your wrangler.toml`
+						);
+					}
+					return {
+						binding,
+						bucket_name: preview_bucket_name,
+					};
+				}
+			) || []),
+			...(args.r2 || []),
+		],
+		dispatch_namespaces: configParam.dispatch_namespaces,
+		mtls_certificates: configParam.mtls_certificates,
+		services: configParam.services,
+		analytics_engine_datasets: configParam.analytics_engine_datasets,
+		unsafe: {
+			bindings: configParam.unsafe.bindings,
+			metadata: configParam.unsafe.metadata,
+		},
+		logfwdr: configParam.logfwdr,
+		d1_databases: identifyD1BindingsAsBeta([
+			...(configParam.d1_databases ?? []).map((d1Db) => {
+				//in local dev, bindings don't matter
+				if (local) {
+					return {
+						...d1Db,
+						database_id: "local",
+					};
+				}
+				// if you have a preview_database_id, we'll use it, but we shouldn't force people to use it.
+				if (!d1Db.preview_database_id && !process.env.NO_D1_WARNING) {
+					logger.log(
+						`--------------------\n💡 Recommendation: for development, use a preview D1 database rather than the one you'd use in production.\n💡 Create a new D1 database with "wrangler d1 create <name>" and add its id as preview_database_id to the d1_database "${d1Db.binding}" in your wrangler.toml\n--------------------\n`
+					);
+				}
+				return {
+					...d1Db,
+					database_id: d1Db.preview_database_id
+						? d1Db.preview_database_id
+						: d1Db.database_id,
+				};
+			}),
+			...(args.d1Databases || []),
+		]),
+	};
+
+	return bindings;
+}