wrangler 0.0.0-e14e589 → 0.0.0-e2a26a0

package/src/dev.tsx

@@ -1,62 +1,87 @@
-import esbuild from "esbuild";
-import httpProxy from "http-proxy";
-import { readFile } from "fs/promises";
-import type { DirectoryResult } from "tmp-promise";
-import tmp from "tmp-promise";
-import type { CfPreviewToken } from "./api/preview";
-import { Box, Text, useInput } from "ink";
-import React, { useState, useEffect, useRef } from "react";
-import path from "path";
+import assert from "node:assert";
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { watch } from "chokidar";
+import clipboardy from "clipboardy";
+import commandExists from "command-exists";
+import * as esbuild from "esbuild";
+import { execaCommand } from "execa";
+import { Box, Text, useApp, useInput } from "ink";
 import open from "open";
-import { DtInspector } from "./api/inspect";
-import type { CfModule, CfVariable } from "./api/worker";
-import { createWorker } from "./api/worker";
-import type { CfWorkerInit } from "./api/worker";
-import { spawn } from "child_process";
+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 useInspector from "./inspect";
+import makeModuleCollector from "./module-collection";
+import { usePreviewServer, waitForPortToBeAvailable } from "./proxy";
 import { syncAssets } from "./sites";
-import clipboardy from "clipboardy";
-import http from "node:http";
-import serveStatic from "serve-static";
-import commandExists from "command-exists";
-import assert from "assert";
 import { getAPIToken } from "./user";
-import fetch from "node-fetch";
+import type { CfPreviewToken } from "./api/preview";
+import type { CfModule, CfWorkerInit } from "./api/worker";
+import type { AssetPaths } from "./sites";
+import type { DirectoryResult } from "tmp-promise";
 
-type CfScriptFormat = void | "modules" | "service-worker";
+type CfScriptFormat = undefined | "modules" | "service-worker";
 
-type Props = {
+export type DevProps = {
   name?: string;
   entry: string;
   port?: number;
   format: CfScriptFormat;
-  accountId: void | string;
+  accountId: undefined | string;
   initialMode: "local" | "remote";
-  variables?: { [name: string]: CfVariable };
-  public?: void | string;
-  site?: void | string;
+  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;
 };
 
-export function Dev(props: Props): JSX.Element {
+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 port = props.port ?? 8787;
   const apiToken = getAPIToken();
   const directory = useTmpDir();
 
-  const bundle = useEsbuild(props.entry, directory, props.public);
+  // 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",
@@ -74,10 +99,11 @@ export function Dev(props: Props): JSX.Element {
           name={props.name}
           bundle={bundle}
           format={props.format}
-          variables={props.variables}
-          site={props.site}
+          bindings={props.bindings}
+          assetPaths={props.assetPaths}
           public={props.public}
-          port={props.port}
+          port={port}
+          enableLocalPersistence={props.enableLocalPersistence}
         />
       ) : (
         <Remote
@@ -86,10 +112,14 @@ export function Dev(props: Props): JSX.Element {
           format={props.format}
           accountId={props.accountId}
           apiToken={apiToken}
-          variables={props.variables}
-          site={props.site}
+          bindings={props.bindings}
+          assetPaths={props.assetPaths}
           public={props.public}
-          port={props.port}
+          port={port}
+          compatibilityDate={props.compatibilityDate}
+          compatibilityFlags={props.compatibilityFlags}
+          usageModel={props.usageModel}
+          env={props.env}
         />
       )}
       <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
@@ -105,98 +135,91 @@ export function Dev(props: Props): JSX.Element {
   );
 }
 
-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;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
-  public: void | string;
-  site: void | string;
+  public: undefined | string;
+  assetPaths: undefined | AssetPaths;
   port: number;
-  accountId: void | string;
-  apiToken: void | string;
-  variables: { [name: string]: CfVariable };
+  accountId: undefined | string;
+  apiToken: undefined | string;
+  bindings: CfWorkerInit["bindings"];
+  compatibilityDate: string | undefined;
+  compatibilityFlags: undefined | string[];
+  usageModel: undefined | "bundled" | "unbound";
+  env: string | undefined;
 }) {
   assert(props.accountId, "accountId is required");
   assert(props.apiToken, "apiToken is required");
-  const token = useWorker({
+  const previewToken = useWorker({
     name: props.name,
     bundle: props.bundle,
     format: props.format,
-    modules: [],
+    modules: props.bundle ? props.bundle.modules : [],
     accountId: props.accountId,
     apiToken: props.apiToken,
-    variables: props.variables,
-    sitesFolder: props.site,
+    bindings: props.bindings,
+    assetPaths: props.assetPaths,
     port: props.port,
+    compatibilityDate: props.compatibilityDate,
+    compatibilityFlags: props.compatibilityFlags,
+    usageModel: props.usageModel,
+    env: props.env,
   });
 
-  useProxy({ token, publicRoot: props.public, port: props.port });
+  usePreviewServer({
+    previewToken,
+    publicRoot: props.public,
+    port: props.port,
+  });
 
-  useInspector(token ? token.inspectorUrl.href : undefined);
+  useInspector({
+    inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
+    port: 9229,
+    logToTerminal: true,
+  });
   return null;
 }
 function Local(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
-  variables: { [name: string]: CfVariable };
-  public: void | string;
-  site: void | string;
+  bindings: CfWorkerInit["bindings"];
+  assetPaths: undefined | AssetPaths;
+  public: undefined | string;
   port: number;
+  enableLocalPersistence: boolean;
 }) {
   const { inspectorUrl } = useLocalWorker({
     name: props.name,
     bundle: props.bundle,
     format: props.format,
-    variables: props.variables,
+    bindings: props.bindings,
+    assetPaths: props.assetPaths,
+    public: props.public,
     port: props.port,
+    enableLocalPersistence: props.enableLocalPersistence,
   });
-  useInspector(inspectorUrl);
+  useInspector({ inspectorUrl, port: 9229, logToTerminal: false });
   return null;
 }
 
 function useLocalWorker(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
-  variables: { [name: string]: CfVariable };
+  bindings: CfWorkerInit["bindings"];
+  assetPaths: undefined | AssetPaths;
+  public: undefined | string;
   port: number;
+  enableLocalPersistence: boolean;
 }) {
   // TODO: pass vars via command line
-  const { bundle, format, variables, port } = props;
+  const { bundle, format, bindings, port, assetPaths } = props;
   const local = useRef<ReturnType<typeof spawn>>();
   const removeSignalExitListener = useRef<() => void>();
-  const [inspectorUrl, setInspectorUrl] = useState<string | void>();
+  const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
   useEffect(() => {
     async function startLocalWorker() {
       if (!bundle) return;
@@ -211,7 +234,15 @@ function useLocalWorker(props: {
         return;
       }
 
+      await waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 });
+      if (props.public) {
+        throw new Error(
+          '⎔ A "public" folder is not yet supported in local mode.'
+        );
+      }
+
       console.log("⎔ Starting a local server...");
+      // TODO: just use execa for this
       local.current = spawn("node", [
         "--experimental-vm-modules",
         "--inspect",
@@ -226,20 +257,34 @@ function useLocalWorker(props: {
         path.join(__dirname, "../miniflare-config-stubs/package.empty.json"),
         "--port",
         port.toString(),
-        "--kv-persist",
-        "--cache-persist",
-        ...Object.entries(variables)
-          .map(([varKey, varVal]) => {
-            if (typeof varVal === "string") {
-              return `--binding ${varKey}=${varVal}`;
-            } else if (
-              "namespaceId" in varVal &&
-              typeof varVal.namespaceId === "string"
-            ) {
-              return `--kv ${varKey}`;
-            }
-          })
-          .filter(Boolean),
+        ...(assetPaths
+          ? [
+              "--site",
+              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}`];
+          }
+        ),
         "--modules",
         format ||
         (bundle.type === "esm" ? "modules" : "service-worker") === "modules"
@@ -254,29 +299,42 @@ function useLocalWorker(props: {
         }
       });
 
-      local.current.stdout.on("data", (data: string) => {
-        // console.log(`stdout: ${data}`);
+      local.current.stdout?.on("data", (data: Buffer) => {
+        console.log(`${data.toString()}`);
       });
 
-      local.current.stderr.on("data", (data: string) => {
-        // console.error(`stderr: ${data}`);
+      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
+            data.toString()
           );
         if (matches) {
           setInspectorUrl(matches[1]);
         }
       });
 
-      removeSignalExitListener.current = onExit((code, signal) => {
+      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();
+    startLocalWorker().catch((err) => {
+      console.error("local worker:", err);
+    });
 
     return () => {
       if (local.current) {
@@ -287,12 +345,23 @@ function useLocalWorker(props: {
         removeSignalExitListener.current = undefined;
       }
     };
-  }, [bundle, format, port]);
+  }, [
+    bundle,
+    format,
+    port,
+    bindings.durable_objects?.bindings,
+    bindings.kv_namespaces,
+    bindings.vars,
+    props.enableLocalPersistence,
+    assetPaths,
+    props.public,
+  ]);
   return { inspectorUrl };
 }
 
-function useTmpDir(): string | void {
+function useTmpDir(): string | undefined {
   const [directory, setDirectory] = useState<DirectoryResult>();
+  const handleError = useErrorHandler();
   useEffect(() => {
     let dir: DirectoryResult;
     async function create() {
@@ -302,36 +371,118 @@ function useTmpDir(): string | void {
         return;
       } catch (err) {
         console.error("failed to create tmp dir");
-        console.error(err);
         throw err;
       }
     }
-    create();
+    create().catch((err) => {
+      // we want to break here
+      // we can't do much without a temp dir anyway
+      handleError(err);
+    });
     return () => {
-      dir.cleanup();
+      dir.cleanup().catch(() => {
+        // extremely unlikely,
+        // but it's 2022 after all
+        console.error("failed to cleanup tmp dir");
+      });
     };
-  }, []);
+  }, [handleError]);
   return directory?.path;
 }
 
+function useCustomBuild(
+  expectedEntry: string,
+  props: {
+    command?: undefined | string;
+    cwd?: undefined | string;
+    watch_dir?: undefined | string;
+  }
+): undefined | string {
+  const [entry, setEntry] = useState<string | undefined>(
+    // if there's no build command, just return the expected entry
+    props.command || expectedEntry
+  );
+  const { command, cwd, watch_dir } = props;
+  useEffect(() => {
+    if (!command) return;
+    let cmd, interval;
+    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(() => {
+      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;
+}
+
 type EsbuildBundle = {
   id: number;
   path: string;
   entry: string;
   type: "esm" | "commonjs";
   exports: string[];
+  modules: CfModule[];
 };
 
-function useEsbuild(
-  entry: string,
-  destination: string | void,
-  staticRoot: void | string
-): EsbuildBundle | void {
+function useEsbuild(props: {
+  entry: undefined | string;
+  destination: string | undefined;
+  staticRoot: undefined | string;
+  jsxFactory: string | undefined;
+  jsxFragment: string | undefined;
+}): EsbuildBundle | undefined {
+  const { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
-    let result: esbuild.BuildResult;
+    let result: esbuild.BuildResult | undefined;
     async function build() {
-      if (!destination) return;
+      if (!destination || !entry) return;
+      const moduleCollector = makeModuleCollector();
       result = await esbuild.build({
         entryPoints: [entry],
         bundle: true,
@@ -339,7 +490,17 @@ function useEsbuild(
         metafile: true,
         format: "esm",
         sourcemap: true,
+        loader: {
+          ".js": "jsx",
+          ".html": "text",
+          ".pem": "text",
+          ".txt": "text",
+        },
+        ...(jsxFactory && { jsxFactory }),
+        ...(jsxFragment && { jsxFragment }),
         external: ["__STATIC_CONTENT_MANIFEST"],
+        conditions: ["worker", "browser"],
+        plugins: [moduleCollector.plugin],
         // TODO: import.meta.url
         watch: {
           async onRebuild(error) {
@@ -347,43 +508,68 @@ function useEsbuild(
             else {
               // nothing really changes here, so let's increment the id
               // to change the return object's identity
-              setBundle((bundle) => ({ ...bundle, id: bundle.id + 1 }));
+              setBundle((previousBundle) => {
+                if (previousBundle === undefined) {
+                  assert.fail(
+                    "Rebuild triggered with no previous build available"
+                  );
+                }
+                return { ...previousBundle, id: previousBundle.id + 1 };
+              });
             }
           },
         },
       });
 
-      const chunks = Object.entries(result.metafile.outputs).find(
+      // result.metafile is defined because of the `metafile: true` option above.
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const metafile = result.metafile!;
+      const outputEntry = Object.entries(metafile.outputs).find(
         ([_path, { entryPoint }]) => entryPoint === entry
       ); // assumedly only one entry point
 
+      if (outputEntry === undefined) {
+        throw new Error(
+          `Cannot find entry-point "${entry}" in generated bundle.`
+        );
+      }
       setBundle({
         id: 0,
         entry,
-        path: chunks[0],
-        type: chunks[1].exports.length > 0 ? "esm" : "commonjs",
-        exports: chunks[1].exports,
+        path: outputEntry[0],
+        type: outputEntry[1].exports.length > 0 ? "esm" : "commonjs",
+        exports: outputEntry[1].exports,
+        modules: moduleCollector.modules,
       });
     }
-    build();
+    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();
+      result?.stop?.();
     };
-  }, [entry, destination, staticRoot]);
+  }, [entry, destination, staticRoot, jsxFactory, jsxFragment]);
   return bundle;
 }
 
 function useWorker(props: {
-  name: void | string;
-  bundle: EsbuildBundle | void;
+  name: undefined | string;
+  bundle: EsbuildBundle | undefined;
   format: CfScriptFormat;
   modules: CfModule[];
   accountId: string;
   apiToken: string;
-  variables: { [name: string]: CfVariable };
-  sitesFolder: void | string;
+  bindings: CfWorkerInit["bindings"];
+  assetPaths: undefined | AssetPaths;
   port: number;
-}): CfPreviewToken | void {
+  compatibilityDate: string | undefined;
+  compatibilityFlags: string[] | undefined;
+  usageModel: undefined | "bundled" | "unbound";
+  env: string | undefined;
+}): CfPreviewToken | undefined {
   const {
     name,
     bundle,
@@ -391,13 +577,24 @@ function useWorker(props: {
     modules,
     accountId,
     apiToken,
-    variables,
-    sitesFolder,
+    bindings,
+    assetPaths,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
     port,
   } = props;
-  const [token, setToken] = useState<CfPreviewToken>();
+  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) return;
       if (format === "modules" && bundle.type === "commonjs") {
         console.error("⎔ Cannot use modules with a commonjs bundle.");
@@ -410,50 +607,56 @@ function useWorker(props: {
         return;
       }
 
-      if (token) {
-        console.log("⎔ Detected changes, restarting server...");
+      if (!startedRef.current) {
+        startedRef.current = true;
       } else {
-        console.log("⎔ Starting server...");
+        console.log("⎔ Detected changes, restarted server.");
+      }
+
+      const assets = await syncAssets(
+        accountId,
+        name || path.basename(bundle.path),
+        assetPaths,
+        true,
+        props.env
+      ); // TODO: cancellable?
+
+      const workerType = format || bundle.type === "esm" ? "esm" : "commonjs";
+      let content = await readFile(bundle.path, "utf-8");
+      if (workerType !== "esm" && assets.manifest) {
+        content = `const __STATIC_CONTENT_MANIFEST = ${JSON.stringify(
+          assets.manifest
+        )};\n${content}`;
       }
-      const scriptName = path.basename(bundle.path);
-
-      const assets = sitesFolder
-        ? await syncAssets(
-            accountId,
-            scriptName,
-            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: name || path.basename(bundle.path),
-          type:
-            format ||
-            (bundle.type === "esm" ? "modules" : "service-worker") === "modules"
-              ? "esm"
-              : "commonjs",
+          name: path.basename(bundle.path),
+          type: workerType,
           content,
         },
-        modules: assets.manifest
-          ? modules.concat({
-              name: "__STATIC_CONTENT_MANIFEST",
-              content: JSON.stringify(assets.manifest),
-              type: "text",
-            })
-          : modules,
-        variables: assets.namespace
-          ? {
-              ...variables,
-              __STATIC_CONTENT: { namespaceId: assets.namespace },
-            }
-          : variables,
+        modules: modules.concat(
+          assets.manifest && workerType === "esm"
+            ? {
+                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, {
@@ -461,80 +664,28 @@ function useWorker(props: {
           apiToken,
         })
       );
-      console.log(`⬣ Listening at http://localhost:${port}`);
     }
-    start();
-  }, [name, bundle, format, accountId, apiToken, port, sitesFolder]);
-  return token;
-}
-
-function useProxy({
-  token,
-  publicRoot,
-  port,
-}: {
-  token: CfPreviewToken | void;
-  publicRoot: void | string;
-  port: number;
-}) {
-  useEffect(() => {
-    if (!token) return;
-    const proxy = httpProxy.createProxyServer({
-      secure: false,
-      changeOrigin: true,
-      headers: {
-        "cf-workers-preview-token": token.value,
-      },
-      target: `https://${token.host}`,
-      // TODO: log websockets too? validate durables, etc
+    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);
     });
-
-    const servePublic =
-      publicRoot &&
-      serveStatic(publicRoot, {
-        cacheControl: false,
-      });
-    const server = http
-      .createServer((req, res) => {
-        if (publicRoot) {
-          servePublic(req, res, () => {
-            proxy.web(req, res);
-          });
-        } else {
-          proxy.web(req, res);
-        }
-      })
-      .listen(port); // TODO: custom port
-
-    proxy.on("proxyRes", function (proxyRes, req, res) {
-      // log all requests
-      console.log(
-        new Date().toLocaleTimeString(),
-        req.method,
-        req.url,
-        res.statusCode // TODO add a status message like Ok etc?
-      );
-    });
-    // TODO: log errors?
-
-    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]);
+  }, [
+    name,
+    bundle,
+    format,
+    accountId,
+    apiToken,
+    port,
+    assetPaths,
+    compatibilityDate,
+    compatibilityFlags,
+    usageModel,
+    bindings,
+    modules,
+    props.env,
+  ]);
+  return token;
 }
 
 function sleep(period: number) {
@@ -544,7 +695,7 @@ const SLEEP_DURATION = 2000;
 // really need a first class api for this
 const hostNameRegex = /userHostname="(.*)"/g;
 async function findTunnelHostname() {
-  let hostName: string;
+  let hostName: string | undefined;
   while (!hostName) {
     try {
       const resp = await fetch("http://localhost:8789/metrics");
@@ -589,19 +740,21 @@ function useTunnel(toggle: boolean) {
           }
         });
 
-        removeSignalExitListener.current = onExit((code, signal) => {
+        removeSignalExitListener.current = onExit((_code, _signal) => {
           console.log("⎔ Shutting down local tunnel.");
           tunnel.current?.kill();
           tunnel.current = undefined;
         });
 
         const hostName = await findTunnelHostname();
-        clipboardy.write(hostName);
+        await clipboardy.write(hostName);
         console.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
       }
     }
 
-    startTunnel();
+    startTunnel().catch((err) => {
+      console.error("tunnel:", err);
+    });
 
     return () => {
       if (tunnel.current) {
@@ -623,41 +776,39 @@ 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
-          open(
-            `http://localhost:${port}/`
-            // {
-            //   app: {
-            //     name: open.apps.chrome, // TODO: fallback on other browsers
-            //   },
-            // }
-          );
+      switch (input.toLowerCase()) {
+        // open browser
+        case "b":
+          await open(`http://localhost:${port}/`);
           break;
-        case "d": // toggle inspector
-          open(
+        // toggle inspector
+        case "d":
+          await open(
             `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:9229/ws`
-            // {
-            //   app: {
-            //     name: open.apps.chrome,
-            //     // todo - add firefox and edge fallbacks
-            //   },
-            // }
           );
           break;
-        case "s": // toggle tunnel
-          setToggles((toggles) => ({ ...toggles, tunnel: !toggles.tunnel }));
+        // toggle tunnel
+        case "s":
+          setToggles((previousToggles) => ({
+            ...previousToggles,
+            tunnel: !previousToggles.tunnel,
+          }));
           break;
-        case "l": // toggle local
-          setToggles((toggles) => ({ ...toggles, local: !toggles.local }));
+        // toggle local
+        case "l":
+          setToggles((previousToggles) => ({
+            ...previousToggles,
+            local: !previousToggles.local,
+          }));
           break;
-        case "q": // shut down
-        case "x": // shut down
+        // shut down
+        case "q":
+        case "x":
           process.exit(0);
           break;
         default:
@@ -668,3 +819,16 @@ function useHotkeys(initial: useHotkeysInitialState, port: number) {
   );
   return toggles;
 }
+
+function ErrorFallback(props: { error: Error }) {
+  const { exit } = useApp();
+  useEffect(() => exit(new Error()));
+  return (
+    <>
+      <Text>Something went wrong:</Text>
+      <Text>{props.error.stack}</Text>
+    </>
+  );
+}
+
+export default withErrorBoundary(Dev, { FallbackComponent: ErrorFallback });