wrangler 0.0.0-e2a26a0 → 0.0.0-e3cab74

package/src/dev.tsx

@@ -1,40 +1,43 @@
 import assert from "node:assert";
 import { spawn } from "node:child_process";
 import { existsSync } from "node:fs";
-import { readFile } from "node:fs/promises";
+import { readFile, writeFile } 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 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 makeModuleCollector from "./module-collection";
+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 } from "./api/worker";
+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";
 
-type CfScriptFormat = undefined | "modules" | "service-worker";
-
 export type DevProps = {
   name?: string;
-  entry: string;
+  entry: Entry;
   port?: number;
-  format: CfScriptFormat;
+  inspectorPort: number;
+  format: CfScriptFormat | undefined;
+  rules: Config["rules"];
   accountId: undefined | string;
   initialMode: "local" | "remote";
   jsxFactory: undefined | string;
@@ -52,16 +55,13 @@ export type DevProps = {
     watch_dir?: undefined | string;
   };
   env: string | undefined;
+  legacyEnv: boolean;
+  zone: string | undefined;
 };
 
 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 apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
   const directory = useTmpDir();
 
   // if there isn't a build command, we just return the entry immediately
@@ -69,57 +69,81 @@ function Dev(props: DevProps): JSX.Element {
   // 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,
   });
-  if (bundle && bundle.type === "commonjs" && !props.format && props.public) {
-    throw new Error(
-      "You cannot use the service worker format with a `public` directory."
-    );
-  }
 
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
       tunnel: false,
     },
-    port
+    port,
+    props.inspectorPort
   );
 
   useTunnel(toggles.tunnel);
+  const scriptName = props.name || path.basename(props.entry.file);
 
   return (
     <>
       {toggles.local ? (
         <Local
-          name={props.name}
+          name={scriptName}
           bundle={bundle}
-          format={props.format}
+          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={props.format}
+          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}>
@@ -135,13 +159,33 @@ function Dev(props: DevProps): JSX.Element {
   );
 }
 
+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: undefined | string;
   bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat;
+  format: CfScriptFormat | undefined;
   public: undefined | string;
   assetPaths: undefined | AssetPaths;
   port: number;
+  inspectorPort: number;
   accountId: undefined | string;
   apiToken: undefined | string;
   bindings: CfWorkerInit["bindings"];
@@ -149,6 +193,8 @@ function Remote(props: {
   compatibilityFlags: undefined | string[];
   usageModel: undefined | "bundled" | "unbound";
   env: string | undefined;
+  legacyEnv: boolean | undefined;
+  zone: string | undefined;
 }) {
   assert(props.accountId, "accountId is required");
   assert(props.apiToken, "apiToken is required");
@@ -166,6 +212,8 @@ function Remote(props: {
     compatibilityFlags: props.compatibilityFlags,
     usageModel: props.usageModel,
     env: props.env,
+    legacyEnv: props.legacyEnv,
+    zone: props.zone,
   });
 
   usePreviewServer({
@@ -176,7 +224,7 @@ function Remote(props: {
 
   useInspector({
     inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
-    port: 9229,
+    port: props.inspectorPort,
     logToTerminal: true,
   });
   return null;
@@ -184,11 +232,13 @@ function Remote(props: {
 function Local(props: {
   name: undefined | string;
   bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat;
+  format: CfScriptFormat | undefined;
   bindings: CfWorkerInit["bindings"];
   assetPaths: undefined | AssetPaths;
   public: undefined | string;
   port: number;
+  rules: Config["rules"];
+  inspectorPort: number;
   enableLocalPersistence: boolean;
 }) {
   const { inspectorUrl } = useLocalWorker({
@@ -199,98 +249,151 @@ function Local(props: {
     assetPaths: props.assetPaths,
     public: props.public,
     port: props.port,
+    rules: props.rules,
+    inspectorPort: props.port,
     enableLocalPersistence: props.enableLocalPersistence,
   });
-  useInspector({ inspectorUrl, port: 9229, logToTerminal: false });
+  useInspector({
+    inspectorUrl,
+    port: props.inspectorPort,
+    logToTerminal: false,
+  });
   return null;
 }
 
 function useLocalWorker(props: {
   name: undefined | string;
   bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat;
+  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 } = props;
+  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) 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 (!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"),
-        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",
-              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"
-          ? "true"
-          : "false",
-      ]);
+      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(),
+          ...(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(bundle.path),
+        }
+      );
       console.log(`⬣ Listening at http://localhost:${port}`);
 
       local.current.on("close", (code) => {
@@ -306,7 +409,7 @@ function useLocalWorker(props: {
       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(
+          /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)/.exec(
             data.toString()
           );
         if (matches) {
@@ -349,12 +452,15 @@ function useLocalWorker(props: {
     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 };
 }
@@ -391,21 +497,22 @@ function useTmpDir(): string | undefined {
 }
 
 function useCustomBuild(
-  expectedEntry: string,
+  expectedEntry: Entry,
   props: {
     command?: undefined | string;
     cwd?: undefined | string;
     watch_dir?: undefined | string;
   }
-): undefined | string {
-  const [entry, setEntry] = useState<string | undefined>(
+): undefined | Entry {
+  const [entry, setEntry] = useState<Entry | undefined>(
     // if there's no build command, just return the expected entry
-    props.command || expectedEntry
+    !props.command ? expectedEntry : undefined
   );
   const { command, cwd, watch_dir } = props;
   useEffect(() => {
     if (!command) return;
-    let cmd, interval;
+    let cmd: ExecaChildProcess<string> | undefined,
+      interval: NodeJS.Timeout | undefined;
     console.log("running:", command);
     cmd = execaCommand(command, {
       ...(cwd && { cwd }),
@@ -418,7 +525,7 @@ function useCustomBuild(
         "all",
         (_event, filePath) => {
           console.log(`The file ${filePath} changed, restarting build...`);
-          cmd.kill();
+          cmd?.kill();
           cmd = execaCommand(command, {
             ...(cwd && { cwd }),
             shell: true,
@@ -433,27 +540,39 @@ function useCustomBuild(
     // if it does, we're done
     const startedAt = Date.now();
     interval = setInterval(() => {
-      if (existsSync(expectedEntry)) {
-        clearInterval(interval);
+      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 * 60 * 30) {
-          console.error("⎔ Build timed out.");
-          clearInterval(interval);
-          cmd.kill();
+        if (elapsed > 1000 * 30) {
+          console.error(
+            `⎔ Build timed out, Could not resolve ${expectedEntry.file}`
+          );
+          interval && clearInterval(interval);
+          cmd?.kill();
         }
       }
     }, 200);
-    // TODO: we could probably timeout here after a while
 
     return () => {
       if (cmd) {
         cmd.kill();
         cmd = undefined;
       }
-      clearInterval(interval);
+      interval && clearInterval(interval);
       interval = undefined;
     };
   }, [command, cwd, expectedEntry, watch_dir]);
@@ -463,102 +582,102 @@ function useCustomBuild(
 type EsbuildBundle = {
   id: number;
   path: string;
-  entry: string;
+  entry: Entry;
   type: "esm" | "commonjs";
-  exports: string[];
   modules: CfModule[];
+  serveAssetsFromWorker: boolean;
 };
 
-function useEsbuild(props: {
-  entry: undefined | string;
+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 { entry, destination, staticRoot, jsxFactory, jsxFragment } = props;
   const [bundle, setBundle] = useState<EsbuildBundle>();
   useEffect(() => {
-    let result: esbuild.BuildResult | undefined;
+    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) return;
-      const moduleCollector = makeModuleCollector();
-      result = await esbuild.build({
-        entryPoints: [entry],
-        bundle: true,
-        outdir: destination,
-        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) {
-            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) => {
-                if (previousBundle === undefined) {
-                  assert.fail(
-                    "Rebuild triggered with no previous build available"
-                  );
-                }
-                return { ...previousBundle, id: previousBundle.id + 1 };
-              });
-            }
-          },
-        },
-      });
+      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,
+        });
 
-      // 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
+      // Capture the `stop()` method to use as the `useEffect()` destructor.
+      stopWatching = stop;
 
-      if (outputEntry === undefined) {
-        throw new Error(
-          `Cannot find entry-point "${entry}" in generated bundle.`
-        );
-      }
       setBundle({
         id: 0,
         entry,
-        path: outputEntry[0],
-        type: outputEntry[1].exports.length > 0 ? "esm" : "commonjs",
-        exports: outputEntry[1].exports,
-        modules: moduleCollector.modules,
+        path: resolvedEntryPointPath,
+        type: bundleType,
+        modules,
+        serveAssetsFromWorker,
       });
     }
-    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
+
+    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 () => {
-      result?.stop?.();
-    };
-  }, [entry, destination, staticRoot, jsxFactory, jsxFragment]);
+
+    return stopWatching;
+  }, [
+    entry,
+    destination,
+    staticRoot,
+    jsxFactory,
+    jsxFragment,
+    format,
+    serveAssetsFromWorker,
+    rules,
+  ]);
   return bundle;
 }
 
 function useWorker(props: {
   name: undefined | string;
   bundle: EsbuildBundle | undefined;
-  format: CfScriptFormat;
+  format: CfScriptFormat | undefined;
   modules: CfModule[];
   accountId: string;
   apiToken: string;
@@ -569,6 +688,8 @@ function useWorker(props: {
   compatibilityFlags: string[] | undefined;
   usageModel: undefined | "bundled" | "unbound";
   env: string | undefined;
+  legacyEnv: boolean | undefined;
+  zone: string | undefined;
 }): CfPreviewToken | undefined {
   const {
     name,
@@ -595,17 +716,7 @@ function useWorker(props: {
     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.");
-        // 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 (!bundle || !format) return;
 
       if (!startedRef.current) {
         startedRef.current = true;
@@ -615,29 +726,26 @@ function useWorker(props: {
 
       const assets = await syncAssets(
         accountId,
-        name || path.basename(bundle.path),
+        // 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,
-        props.env
+        true
       ); // 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 content = await readFile(bundle.path, "utf-8");
 
       const init: CfWorkerInit = {
         name,
         main: {
           name: path.basename(bundle.path),
-          type: workerType,
+          type: format === "modules" ? "esm" : "commonjs",
           content,
         },
         modules: modules.concat(
-          assets.manifest && workerType === "esm"
+          assets.manifest
             ? {
                 name: "__STATIC_CONTENT_MANIFEST",
                 content: JSON.stringify(assets.manifest),
@@ -652,6 +760,13 @@ function useWorker(props: {
               ? { 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,
@@ -659,10 +774,14 @@ function useWorker(props: {
         usage_model: usageModel,
       };
       setToken(
-        await createWorker(init, {
-          accountId,
-          apiToken,
-        })
+        await createWorker(
+          init,
+          {
+            accountId,
+            apiToken,
+          },
+          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone }
+        )
       );
     }
     start().catch((err) => {
@@ -684,6 +803,8 @@ function useWorker(props: {
     bindings,
     modules,
     props.env,
+    props.legacyEnv,
+    props.zone,
   ]);
   return token;
 }
@@ -721,7 +842,7 @@ function useTunnel(toggle: boolean) {
           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"
+            "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;
         }
@@ -772,26 +893,32 @@ type useHotkeysInitialState = {
   local: boolean;
   tunnel: boolean;
 };
-function useHotkeys(initial: useHotkeysInitialState, port: number) {
+function useHotkeys(
+  initial: useHotkeysInitialState,
+  port: number,
+  inspectorPort: 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
+      // eslint-disable-next-line unused-imports/no-unused-vars
       key
     ) => {
       switch (input.toLowerCase()) {
         // open browser
-        case "b":
-          await open(`http://localhost:${port}/`);
+        case "b": {
+          await openInBrowser(`http://localhost:${port}`);
           break;
+        }
         // toggle inspector
-        case "d":
-          await open(
-            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:9229/ws`
+        case "d": {
+          await openInBrowser(
+            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`
           );
           break;
+        }
         // toggle tunnel
         case "s":
           setToggles((previousToggles) => ({