wrangler 0.0.0-e1c615f → 0.0.0-e1e2ee5c

package/src/dev.tsx

@@ -1,874 +1,593 @@
-import esbuild from "esbuild";
-import { readFile } from "fs/promises";
-import { existsSync } from "fs";
-import type { DirectoryResult } from "tmp-promise";
-import tmp from "tmp-promise";
-import type { CfPreviewToken } from "./api/preview";
-import { Box, Text, useApp, useInput } from "ink";
-import React, { useState, useEffect, useRef } from "react";
-import path from "path";
-import open from "open";
-import { DtInspector } from "./api/inspect";
-import type { CfModule } from "./api/worker";
-import { createWorker } from "./api/worker";
-import type { CfWorkerInit } from "./api/worker";
-import { spawn } from "child_process";
-import onExit from "signal-exit";
-import { syncAssets } from "./sites";
-import clipboardy from "clipboardy";
-import http from "node:http";
-import commandExists from "command-exists";
-import assert from "assert";
-import { getAPIToken } from "./user";
-import fetch from "node-fetch";
-import makeModuleCollector from "./module-collection";
-import { withErrorBoundary, useErrorHandler } from "react-error-boundary";
-import { createHttpProxy } from "./proxy";
-import { execa } from "execa";
+import path from "node:path";
 import { watch } from "chokidar";
-
-type CfScriptFormat = void | "modules" | "service-worker";
-
-export type DevProps = {
-  name?: string;
-  entry: string;
-  port?: number;
-  format: CfScriptFormat;
-  accountId: void | string;
-  initialMode: "local" | "remote";
-  jsxFactory: void | string;
-  jsxFragment: void | string;
-  bindings: CfWorkerInit["bindings"];
-  public: void | string;
-  site: void | string;
-  compatibilityDate: void | string;
-  compatibilityFlags: void | string[];
-  usageModel: void | "bundled" | "unbound";
-  buildCommand: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
-  };
-};
-
-function Dev(props: DevProps): JSX.Element {
-  if (props.public && props.format === "service-worker") {
-    throw new Error(
-      "You cannot use the service worker format with a `public` directory."
-    );
-  }
-  const port = props.port || 8787;
-  const apiToken = getAPIToken();
-  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 bundle = useEsbuild({
-    entry,
-    destination: directory,
-    staticRoot: props.public,
-    jsxFactory: props.jsxFactory,
-    jsxFragment: props.jsxFragment,
-  });
-  if (bundle && bundle.type === "commonjs" && !props.format && props.public) {
-    throw new Error(
-      "You cannot use the service worker format with a `public` directory."
-    );
-  }
-
-  // @ts-expect-error whack
-  useDevtoolsRefresh(bundle?.id ?? 0);
-
-  const toggles = useHotkeys(
-    {
-      local: props.initialMode === "local",
-      tunnel: false,
-    },
-    port
-  );
-
-  useTunnel(toggles.tunnel);
-
-  return (
-    <>
-      {toggles.local ? (
-        <Local
-          name={props.name}
-          bundle={bundle}
-          format={props.format}
-          bindings={props.bindings}
-          site={props.site}
-          public={props.public}
-          port={props.port}
-        />
-      ) : (
-        <Remote
-          name={props.name}
-          bundle={bundle}
-          format={props.format}
-          accountId={props.accountId}
-          apiToken={apiToken}
-          bindings={props.bindings}
-          site={props.site}
-          public={props.public}
-          port={props.port}
-          compatibilityDate={props.compatibilityDate}
-          compatibilityFlags={props.compatibilityFlags}
-          usageModel={props.usageModel}
-        />
-      )}
-      <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
-        <Text>
-          {`B to open a browser, D to open Devtools, S to ${
-            toggles.tunnel ? "turn off" : "turn on"
-          } (experimental) sharing, L to ${
-            toggles.local ? "turn off" : "turn on"
-          } local mode, X to exit`}
-        </Text>
-      </Box>
-    </>
-  );
-}
-
-function useDevtoolsRefresh(bundleId: number) {
-  // TODO: this is a hack while we figure out
-  // a better cleaner solution to get devtools to reconnect
-  // without having to do a full refresh
-  const ref = useRef();
-  // @ts-expect-error whack
-  ref.current = bundleId;
-
-  useEffect(() => {
-    const server = http.createServer((req, res) => {
-      res.setHeader("Access-Control-Allow-Origin", "*");
-      res.setHeader("Access-Control-Request-Method", "*");
-      res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
-      res.setHeader("Access-Control-Allow-Headers", "*");
-      if (req.method === "OPTIONS") {
-        res.writeHead(200);
-        res.end();
-        return;
-      }
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ value: ref.current }));
-    });
-
-    server.listen(3142);
-    return () => {
-      server.close();
-    };
-  }, []);
-}
-
-function Remote(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
-  format: CfScriptFormat;
-  public: void | string;
-  site: void | string;
-  port: number;
-  accountId: void | string;
-  apiToken: void | string;
-  bindings: CfWorkerInit["bindings"];
-  compatibilityDate: string | void;
-  compatibilityFlags: void | string[];
-  usageModel: void | "bundled" | "unbound";
-}) {
-  assert(props.accountId, "accountId is required");
-  assert(props.apiToken, "apiToken is required");
-  const token = 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,
-    sitesFolder: props.site,
-    port: props.port,
-    compatibilityDate: props.compatibilityDate,
-    compatibilityFlags: props.compatibilityFlags,
-    usageModel: props.usageModel,
-  });
-
-  useProxy({ token, publicRoot: props.public, port: props.port });
-
-  useInspector(token ? token.inspectorUrl.href : undefined);
-  return null;
-}
-function Local(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
-  format: CfScriptFormat;
-  bindings: CfWorkerInit["bindings"];
-  public: void | string;
-  site: void | string;
-  port: number;
-}) {
-  const { inspectorUrl } = useLocalWorker({
-    name: props.name,
-    bundle: props.bundle,
-    format: props.format,
-    bindings: props.bindings,
-    port: props.port,
-  });
-  useInspector(inspectorUrl);
-  return null;
-}
-
-function useLocalWorker(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
-  format: CfScriptFormat;
-  bindings: CfWorkerInit["bindings"];
-  port: number;
-}) {
-  // TODO: pass vars via command line
-  const { bundle, format, bindings, port } = props;
-  const local = useRef<ReturnType<typeof spawn>>();
-  const removeSignalExitListener = useRef<() => void>();
-  const [inspectorUrl, setInspectorUrl] = useState<string | void>();
-  useEffect(() => {
-    async function startLocalWorker() {
-      if (!bundle) return;
-      if (format === "modules" && bundle.type === "commonjs") {
-        console.error("⎔ Cannot use modules with a commonjs bundle.");
-        // TODO: a much better error message here, with what to do next
-        return;
-      }
-      if (format === "service-worker" && bundle.type !== "esm") {
-        console.error("⎔ Cannot use service-worker with a esm bundle.");
-        // TODO: a much better error message here, with what to do next
-        return;
-      }
-
-      console.log("⎔ Starting a local server...");
-      // TODO: just use execa for this
-      local.current = spawn("node", [
-        "--experimental-vm-modules",
-        "--inspect",
-        require.resolve("miniflare/cli"),
-        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(),
-        "--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}`];
-          }
-        ),
-        "--modules",
-        format ||
-        (bundle.type === "esm" ? "modules" : "service-worker") === "modules"
-          ? "true"
-          : "false",
-      ]);
-      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:9229\/[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,
-    bindings.durable_objects?.bindings,
-    bindings.kv_namespaces,
-    bindings.vars,
-  ]);
-  return { inspectorUrl };
+import getPort from "get-port";
+import { render } from "ink";
+import React from "react";
+import { fetch } from "undici";
+import { findWranglerToml, printBindings, readConfig } from "./config";
+import Dev from "./dev/dev";
+import { getVarsForDev } from "./dev/dev-vars";
+
+import { getEntry } from "./entry";
+import { logger } from "./logger";
+import * as metrics from "./metrics";
+import { getAssetPaths, getSiteAssetPaths } from "./sites";
+import { getAccountFromCache } from "./user";
+import { getZoneIdFromHost, getZoneForRoute, getHostFromRoute } from "./zones";
+import {
+	printWranglerBanner,
+	DEFAULT_LOCAL_PORT,
+	type ConfigPath,
+	getScriptName,
+	getDevCompatibilityDate,
+	getRules,
+	isLegacyEnv,
+} from "./index";
+
+import type { Config } from "./config";
+import type { Route } from "./config/environment";
+import type { EnablePagesAssetsServiceBindingOptions } from "./miniflare-cli";
+import type { CfWorkerInit } from "./worker";
+import type { RequestInit } from "undici";
+import type { Argv, ArgumentsCamelCase } from "yargs";
+
+interface DevArgs {
+	config?: string;
+	script?: string;
+	name?: string;
+	bundle?: boolean;
+	build?: boolean;
+	format?: string;
+	env?: string;
+	"compatibility-date"?: string;
+	"compatibility-flags"?: string[];
+	latest?: boolean;
+	ip?: string;
+	inspect?: boolean;
+	port?: number;
+	"inspector-port"?: number;
+	routes?: string[];
+	host?: string;
+	"local-protocol"?: "http" | "https";
+	"local-upstream"?: string | undefined;
+	"experimental-public"?: string;
+	public?: string;
+	assets?: string;
+	site?: string;
+	"site-include"?: string[];
+	"site-exclude"?: string[];
+	"upstream-protocol"?: "http" | "https";
+	"jsx-factory"?: string;
+	"jsx-fragment"?: string;
+	tsconfig?: string;
+	local?: boolean;
+	minify?: boolean;
+	"node-compat"?: boolean;
+	"experimental-enable-local-persistence"?: boolean;
+	"live-reload"?: boolean;
+	onReady?: () => void;
+	logLevel?: "none" | "error" | "log" | "warn" | "debug";
+	logPrefix?: string;
+	showInteractiveDevSession?: boolean;
 }
 
-function useTmpDir(): string | void {
-  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 2021 after all
-        console.error("failed to cleanup tmp dir");
-      });
-    };
-  }, [handleError]);
-  return directory?.path;
+export function devOptions(yargs: Argv): Argv<DevArgs> {
+	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",
+				deprecated: true,
+			})
+			.option("env", {
+				describe: "Perform on a specific environment",
+				type: "string",
+				requiresArg: true,
+				alias: "e",
+			})
+			.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, defaults to `localhost`",
+				type: "string",
+				requiresArg: true,
+			})
+			.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("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("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("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 this session (only for local mode)",
+				type: "boolean",
+			})
+			.option("live-reload", {
+				// TODO: Add back in once we have remote `--live-reload`
+				hidden: true,
+				// describe: "Auto reload HTML pages when change is detected",
+				type: "boolean",
+			})
+			.option("inspect", {
+				describe: "Enable dev tools",
+				type: "boolean",
+				deprecated: true,
+			})
+			.option("legacy-env", {
+				type: "boolean",
+				describe: "Use legacy environments",
+				hidden: true,
+			})
+	);
 }
 
-function useCustomBuild(
-  expectedEntry: string,
-  props: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
-  }
-): void | string {
-  const [entry, setEntry] = useState<string | void>(
-    // if there's no build command, just return the expected entry
-    props.command ? null : expectedEntry
-  );
-  const { command, cwd, watch_dir } = props;
-  useEffect(() => {
-    if (!command) return;
-    let cmd, interval;
-    console.log("running:", command);
-    const commandPieces = command.split(" ");
-    cmd = execa(commandPieces[0], commandPieces.slice(1), {
-      ...(cwd && { cwd }),
-      stderr: "inherit",
-      stdout: "inherit",
-    });
-    if (watch_dir) {
-      watch(watch_dir, { persistent: true, ignoreInitial: true }).on(
-        "all",
-        (_event, _path) => {
-          console.log(`The file ${path} changed, restarting build...`);
-          cmd.kill();
-          cmd = execa(commandPieces[0], commandPieces.slice(1), {
-            ...(cwd && { cwd }),
-            stderr: "inherit",
-            stdout: "inherit",
-          });
-        }
-      );
-    }
-
-    // check every so often whether `expectedEntry` exists
-    // if it does, we're done
-    const startedAt = Date.now();
-    interval = setInterval(() => {
-      if (existsSync(expectedEntry)) {
-        clearInterval(interval);
-        setEntry(expectedEntry);
-      } else {
-        const elapsed = Date.now() - startedAt;
-        // timeout after 30 seconds of waiting
-        if (elapsed > 1000 * 60 * 30) {
-          console.error("⎔ Build timed out.");
-          clearInterval(interval);
-          cmd.kill();
-        }
-      }
-    }, 200);
-    // TODO: we could probably timeout here after a while
-
-    return () => {
-      if (cmd) {
-        cmd.kill();
-        cmd = undefined;
-      }
-      clearInterval(interval);
-      interval = undefined;
-    };
-  }, [command, cwd, expectedEntry, watch_dir]);
-  return entry;
+export async function devHandler(args: ArgumentsCamelCase<DevArgs>) {
+	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: string;
-  type: "esm" | "commonjs";
-  exports: string[];
-  modules: CfModule[];
+type StartDevOptions = ArgumentsCamelCase<DevArgs> & {
+	// These options can be passed in directly when called with the `wrangler.dev()` API.
+	// They aren't exposed as CLI arguments.
+	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;
+	}[];
+	forceLocal?: boolean;
+	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 };
 
-function useEsbuild(props: {
-  entry: void | string;
-  destination: string | void;
-  staticRoot: void | string;
-  jsxFactory: string | void;
-  jsxFragment: string | void;
-}): EsbuildBundle | void {
-  const { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
-  const [bundle, setBundle] = useState<EsbuildBundle>();
-  useEffect(() => {
-    let result: esbuild.BuildResult;
-    async function build() {
-      if (!destination || !entry) return;
-      const moduleCollector = makeModuleCollector();
-      result = await esbuild.build({
-        entryPoints: [entry],
-        bundle: true,
-        outdir: destination,
-        metafile: true,
-        format: "esm",
-        sourcemap: true,
-        loader: {
-          ".js": "jsx",
-        },
-        ...(jsxFactory && { jsxFactory }),
-        ...(jsxFragment && { jsxFragment }),
-        external: ["__STATIC_CONTENT_MANIFEST"],
-        conditions: ["worker", "browser"],
-        plugins: [moduleCollector.plugin],
-        // TODO: import.meta.url
-        watch: {
-          async onRebuild(error) {
-            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) => ({
-                ...previousBundle,
-                id: previousBundle.id + 1,
-              }));
-            }
-          },
-        },
-      });
-
-      const chunks = Object.entries(result.metafile.outputs).find(
-        ([_path, { entryPoint }]) => entryPoint === entry
-      ); // assumedly only one entry point
-
-      setBundle({
-        id: 0,
-        entry,
-        path: chunks[0],
-        type: chunks[1].exports.length > 0 ? "esm" : "commonjs",
-        exports: chunks[1].exports,
-        modules: moduleCollector.modules,
-      });
-    }
-    build().catch((_err) => {
-      // 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 () => {
-      result?.stop();
-    };
-  }, [entry, destination, staticRoot, jsxFactory, jsxFragment]);
-  return bundle;
-}
-
-function useWorker(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
-  format: CfScriptFormat;
-  modules: CfModule[];
-  accountId: string;
-  apiToken: string;
-  bindings: CfWorkerInit["bindings"];
-  sitesFolder: void | string;
-  port: number;
-  compatibilityDate: string | void;
-  compatibilityFlags: string[] | void;
-  usageModel: void | "bundled" | "unbound";
-}): CfPreviewToken | void {
-  const {
-    name,
-    bundle,
-    format,
-    modules,
-    accountId,
-    apiToken,
-    bindings,
-    sitesFolder,
-    compatibilityDate,
-    compatibilityFlags,
-    usageModel,
-    port,
-  } = props;
-  const [token, setToken] = useState<CfPreviewToken>();
-
-  // 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() {
-      if (!bundle) return;
-      if (format === "modules" && bundle.type === "commonjs") {
-        console.error("⎔ Cannot use modules with a commonjs bundle.");
-        // TODO: a much better error message here, with what to do next
-        return;
-      }
-      if (format === "service-worker" && bundle.type !== "esm") {
-        console.error("⎔ Cannot use service-worker with a esm bundle.");
-        // TODO: a much better error message here, with what to do next
-        return;
-      }
-
-      if (!startedRef.current) {
-        console.log("⎔ Starting server...");
-        startedRef.current = true;
-      } else {
-        console.log("⎔ Detected changes, restarting server...");
-      }
-
-      const assets = sitesFolder
-        ? await syncAssets(
-            accountId,
-            path.basename(bundle.path),
-            sitesFolder,
-            true,
-            undefined // TODO: env
-          )
-        : {
-            manifest: undefined,
-            namespace: undefined,
-          }; // TODO: cancellable?
-
-      const content = await readFile(bundle.path, "utf-8");
-      const init: CfWorkerInit = {
-        name,
-        main: {
-          name: path.basename(bundle.path),
-          type: format || bundle.type === "esm" ? "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 }
-              : []
-          ),
-        },
-        migrations: undefined, // no migrations in dev
-        compatibility_date: compatibilityDate,
-        compatibility_flags: compatibilityFlags,
-        usage_model: usageModel,
-      };
-      setToken(
-        await createWorker(init, {
-          accountId,
-          apiToken,
-        })
-      );
-    }
-    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,
-    sitesFolder,
-    compatibilityDate,
-    compatibilityFlags,
-    usageModel,
-    bindings,
-    modules,
-  ]);
-  return token;
-}
-
-function useProxy({
-  token,
-  publicRoot,
-  port,
-}: {
-  token: CfPreviewToken | void;
-  publicRoot: void | string;
-  port: number;
-}) {
-  useEffect(() => {
-    if (!token) return;
-    // TODO(soon): since headers are added in callbacks, the server
-    // does not need to restart when changes are made.
-    const host = token.host;
-    const proxy = createHttpProxy({
-      host,
-      assetPath: typeof publicRoot === "string" ? publicRoot : null,
-      onRequest: (headers) => {
-        headers["cf-workers-preview-token"] = token.value;
-      },
-      onResponse: (headers) => {
-        for (const [name, value] of Object.entries(headers)) {
-          // Rewrite the remote host to the local host.
-          if (typeof value === "string" && value.includes(host)) {
-            headers[name] = value
-              .replaceAll(`https://${host}`, `http://localhost:${port}`)
-              .replaceAll(host, `localhost:${port}`);
-          }
-        }
-      },
-    });
-
-    console.log(`⬣ Listening at http://localhost:${port}`);
-
-    const server = proxy.listen(port);
-
-    // TODO(soon): refactor logging format into its own function
-    proxy.on("request", function (req, res) {
-      // log all requests
-      console.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        res.statusCode
-      );
-    });
-    proxy.on("upgrade", (req) => {
-      console.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        101,
-        "(WebSocket)"
-      );
-    });
-    proxy.on("error", (err) => {
-      console.error(new Date().toLocaleTimeString(), err);
-    });
-
-    return () => {
-      proxy.close();
-      server.close();
-    };
-  }, [token, publicRoot, port]);
-}
-
-function useInspector(inspectorUrl: string | void) {
-  useEffect(() => {
-    if (!inspectorUrl) return;
-
-    const inspector = new DtInspector(inspectorUrl);
-    const abortController = inspector.proxyTo(9229);
-    return () => {
-      inspector.close();
-      abortController.abort();
-    };
-  }, [inspectorUrl]);
-}
-
-function sleep(period: number) {
-  return new Promise((resolve) => setTimeout(resolve, period));
-}
-const SLEEP_DURATION = 2000;
-// really need a first class api for this
-const hostNameRegex = /userHostname="(.*)"/g;
-async function findTunnelHostname() {
-  let hostName: string;
-  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;
-}
-
-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]);
+export async function startDev(args: StartDevOptions) {
+	let watcher: ReturnType<typeof watch> | undefined;
+	let rerender: (node: React.ReactNode) => void | undefined;
+	try {
+		if (args.logLevel) {
+			// we don't define a "none" logLevel, so "error" will do for now.
+			logger.loggerLevel = args.logLevel === "none" ? "error" : args.logLevel;
+		}
+		await printWranglerBanner();
+
+		const configPath =
+			(args.config as ConfigPath) ||
+			((args.script &&
+				findWranglerToml(path.dirname(args.script))) as ConfigPath);
+		let config = readConfig(configPath, args);
+		await metrics.sendMetricsEvent(
+			"run dev",
+			{ local: args.local },
+			{ sendMetrics: config.send_metrics, offline: args.local }
+		);
+
+		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 = await getEntry(
+			{ assets: args.assets, script: args.script },
+			config,
+			"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(", ")}`
+			);
+		}
+
+		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["experimental-public"]) {
+			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["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."
+			);
+		}
+
+		// 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);
+			}
+		}
+
+		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
+		): Promise<CfWorkerInit["bindings"]> {
+			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
+							// 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),
+					...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 || []),
+					],
+				},
+				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,
+						};
+					}
+				),
+				worker_namespaces: configParam.worker_namespaces,
+				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,
+			});
+
+			const assetPaths =
+				args.assets || config.assets
+					? getAssetPaths(config, args.assets)
+					: getSiteAssetPaths(
+							config,
+							args.site,
+							args.siteInclude,
+							args.siteExclude
+					  );
+
+			return (
+				<Dev
+					name={getScriptName({ name: args.name, env: args.env }, config)}
+					noBundle={!(args.bundle ?? !config.no_bundle)}
+					entry={entry}
+					env={args.env}
+					zone={zoneId}
+					host={host}
+					routes={routes}
+					rules={getRules(config)}
+					legacyEnv={isLegacyEnv(config)}
+					minify={args.minify ?? config.minify}
+					nodeCompat={nodeCompat}
+					build={config.build || {}}
+					define={config.define}
+					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.localProtocol || config.dev.local_protocol}
+					localUpstream={args["local-upstream"] || host}
+					enableLocalPersistence={
+						args["experimental-enable-local-persistence"] || false
+					}
+					liveReload={args.liveReload || false}
+					accountId={config.account_id || getAccountFromCache()?.id}
+					assetPaths={assetPaths}
+					port={args.port || config.dev.port || (await getLocalPort())}
+					ip={args.ip || config.dev.ip}
+					inspectorPort={args["inspector-port"] ?? (await getInspectorPort())}
+					isWorkersSite={Boolean(args.site || config.site)}
+					compatibilityDate={getDevCompatibilityDate(
+						config,
+						args["compatibility-date"]
+					)}
+					compatibilityFlags={
+						args["compatibility-flags"] || config.compatibility_flags
+					}
+					usageModel={config.usage_model}
+					bindings={bindings}
+					crons={config.triggers.crons}
+					logLevel={args.logLevel}
+					logPrefix={args.logPrefix}
+					onReady={args.onReady}
+					inspect={args.inspect ?? true}
+					showInteractiveDevSession={args.showInteractiveDevSession}
+					forceLocal={args.forceLocal}
+					enablePagesAssetsServiceBinding={args.enablePagesAssetsServiceBinding}
+				/>
+			);
+		}
+		const devReactElement = render(await getDevReactElement(config));
+		rerender = devReactElement.rerender;
+		return {
+			devReactElement,
+			watcher,
+			stop: async () => {
+				devReactElement.unmount();
+				await watcher?.close();
+			},
+			fetch: async (init?: RequestInit) => {
+				//TODO: we are not guaranteed to be assigned this port, we should fix this ASAP
+				const port = args.port || config.dev.port || (await getLocalPort());
+				const address = args.ip || config.dev.ip || "localhost";
+
+				return await fetch(`http://${address}:${port}/`, init);
+			},
+		};
+	} finally {
+		await watcher?.close();
+	}
 }
 
-type useHotkeysInitialState = {
-  local: boolean;
-  tunnel: boolean;
-};
-function useHotkeys(initial: useHotkeysInitialState, port: number) {
-  // UGH, we should put port in context instead
-  const [toggles, setToggles] = useState(initial);
-  useInput(
-    async (
-      input,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      key
-    ) => {
-      switch (input) {
-        case "b": // open browser
-          await open(`http://localhost:${port}/`);
-          break;
-        case "d": // toggle inspector
-          await open(
-            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:9229/ws`
-          );
-          break;
-        case "s": // toggle tunnel
-          setToggles((previousToggles) => ({
-            ...previousToggles,
-            tunnel: !previousToggles.tunnel,
-          }));
-          break;
-        case "l": // toggle local
-          setToggles((previousToggles) => ({
-            ...previousToggles,
-            local: !previousToggles.local,
-          }));
-          break;
-        case "q": // shut down
-        case "x": // shut down
-          process.exit(0);
-          break;
-        default:
-          // nothing?
-          break;
-      }
-    }
-  );
-  return toggles;
-}
-
-function ErrorFallback(props: { error: Error }) {
-  const { exit } = useApp();
-  useEffect(() => exit(new Error()));
-  return (
-    <>
-      <Text>Something went wrong:</Text>
-      <Text>{props.error.message}</Text>
-    </>
-  );
+/**
+ * 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 }));
+	};
 }
-
-export default withErrorBoundary(Dev, { FallbackComponent: ErrorFallback });