wrangler 0.0.0-e2b7352 → 0.0.0-e2f9bb2

package/src/dev/dev.tsx

@@ -9,8 +9,8 @@ import onExit from "signal-exit";
 import tmp from "tmp-promise";
 import { fetch } from "undici";
 import { runCustomBuild } from "../entry";
+import { logger } from "../logger";
 import openInBrowser from "../open-in-browser";
-import { reportError } from "../reporting";
 import { getAPIToken } from "../user";
 import { Local } from "./local";
 import { Remote } from "./remote";
@@ -28,24 +28,27 @@ export type DevProps = {
   ip: string;
   inspectorPort: number;
   rules: Config["rules"];
-  accountId: undefined | string;
+  accountId: string | undefined;
   initialMode: "local" | "remote";
-  jsxFactory: undefined | string;
-  jsxFragment: undefined | string;
+  jsxFactory: string | undefined;
+  jsxFragment: string | undefined;
   tsconfig: string | undefined;
   upstreamProtocol: "https" | "http";
   localProtocol: "https" | "http";
   enableLocalPersistence: boolean;
   bindings: CfWorkerInit["bindings"];
-  public: undefined | string;
-  assetPaths: undefined | AssetPaths;
-  compatibilityDate: undefined | string;
-  compatibilityFlags: undefined | string[];
-  usageModel: undefined | "bundled" | "unbound";
+  crons: Config["triggers"]["crons"];
+  public: string | undefined;
+  assetPaths: AssetPaths | undefined;
+  compatibilityDate: string;
+  compatibilityFlags: string[] | undefined;
+  usageModel: "bundled" | "unbound" | undefined;
+  minify: boolean | undefined;
+  nodeCompat: boolean | undefined;
   build: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
+    command?: string | undefined;
+    cwd?: string | undefined;
+    watch_dir?: string | undefined;
   };
   env: string | undefined;
   legacyEnv: boolean;
@@ -65,7 +68,7 @@ export function DevImplementation(props: DevProps): JSX.Element {
 
   if (props.public && props.entry.format === "service-worker") {
     throw new Error(
-      "You cannot use the service worker format with a `public` directory."
+      "You cannot use the service-worker format with a `public` directory."
     );
   }
 
@@ -77,7 +80,13 @@ export function DevImplementation(props: DevProps): JSX.Element {
 
   if (props.bindings.text_blobs && props.entry.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"
+      "You cannot configure [text_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[rules]` in your wrangler.toml"
+    );
+  }
+
+  if (props.bindings.data_blobs && props.entry.format === "modules") {
+    throw new Error(
+      "You cannot configure [data_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[rules]` in your wrangler.toml"
     );
   }
 
@@ -90,6 +99,8 @@ export function DevImplementation(props: DevProps): JSX.Element {
     jsxFragment: props.jsxFragment,
     serveAssetsFromWorker: !!props.public,
     tsconfig: props.tsconfig,
+    minify: props.minify,
+    nodeCompat: props.nodeCompat,
   });
 
   // only load the UI if we're running in a supported environment
@@ -129,11 +140,16 @@ function InteractiveDevSession(props: InteractiveDevSessionProps) {
     <>
       <DevSession {...props} local={toggles.local} />
       <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
-        <Text>
-          {`B to open a browser, D to open Devtools, L to ${
-            toggles.local ? "turn off" : "turn on"
-          } local mode, X to exit`}
-        </Text>
+        <Text bold={true}>[b]</Text>
+        <Text> open a browser, </Text>
+        <Text bold={true}>[d]</Text>
+        <Text> open Devtools, </Text>
+        <Text bold={true}>[l]</Text>
+        <Text> {toggles.local ? "turn off" : "turn on"} local mode, </Text>
+        <Text bold={true}>[c]</Text>
+        <Text> clear console, </Text>
+        <Text bold={true}>[x]</Text>
+        <Text> to exit</Text>
       </Box>
     </>
   );
@@ -157,6 +173,7 @@ function DevSession(props: DevSessionProps) {
       rules={props.rules}
       inspectorPort={props.inspectorPort}
       enableLocalPersistence={props.enableLocalPersistence}
+      crons={props.crons}
     />
   ) : (
     <Remote
@@ -197,7 +214,9 @@ function useTmpDir(): string | undefined {
       setDirectory(dir);
       return;
     } catch (err) {
-      console.error("failed to create tmp dir");
+      logger.error(
+        "Failed to create temporary directory to store built files."
+      );
       handleError(err);
     }
     return () => {
@@ -210,9 +229,9 @@ function useTmpDir(): string | undefined {
 function useCustomBuild(
   expectedEntry: Entry,
   build: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
+    command?: string | undefined;
+    cwd?: string | undefined;
+    watch_dir?: string | undefined;
   }
 ): void {
   useEffect(() => {
@@ -224,9 +243,9 @@ function useCustomBuild(
         ignoreInitial: true,
       }).on("all", (_event, filePath) => {
         //TODO: we should buffer requests to the proxy until this completes
-        console.log(`The file ${filePath} changed, restarting build...`);
+        logger.log(`The file ${filePath} changed, restarting build...`);
         runCustomBuild(expectedEntry.file, build).catch((err) => {
-          console.error("Custom build failed:", err);
+          logger.error("Custom build failed:", err);
         });
       });
     }
@@ -273,12 +292,12 @@ function useTunnel(toggle: boolean) {
         try {
           await commandExists("cloudflared");
         } catch (e) {
-          console.error(
+          logger.warn(
             "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...");
+        logger.log("⎔ Starting a tunnel...");
         tunnel.current = spawn("cloudflared", [
           "tunnel",
           "--url",
@@ -289,30 +308,29 @@ function useTunnel(toggle: boolean) {
 
         tunnel.current.on("close", (code) => {
           if (code) {
-            console.log(`Tunnel process exited with code ${code}`);
+            logger.log(`Tunnel process exited with code ${code}`);
           }
         });
 
         removeSignalExitListener.current = onExit((_code, _signal) => {
-          console.log("⎔ Shutting down local tunnel.");
+          logger.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.`);
+        logger.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
       }
     }
 
     startTunnel().catch(async (err) => {
-      console.error("tunnel:", err);
-      await reportError(err);
+      logger.error("tunnel:", err);
     });
 
     return () => {
       if (tunnel.current) {
-        console.log("⎔ Shutting down tunnel.");
+        logger.log("⎔ Shutting down tunnel.");
         tunnel.current?.kill();
         tunnel.current = undefined;
         removeSignalExitListener.current && removeSignalExitListener.current();
@@ -335,6 +353,7 @@ function useHotkeys(
 ) {
   // UGH, we should put port in context instead
   const [toggles, setToggles] = useState(initial);
+  const { exit } = useApp();
   useInput(
     async (
       input,
@@ -342,6 +361,13 @@ function useHotkeys(
       key
     ) => {
       switch (input.toLowerCase()) {
+        // clear console
+        case "c":
+          console.clear();
+          // This console.log causes Ink to re-render the `DevSession` component.
+          // Couldn't find a better way to tell it to do so...
+          console.log();
+          break;
         // open browser
         case "b": {
           await openInBrowser(`${localProtocol}://${ip}:${port}`);
@@ -365,7 +391,7 @@ function useHotkeys(
         // shut down
         case "q":
         case "x":
-          process.exit(0);
+          exit();
           break;
         default:
           // nothing?

package/src/dev/local.tsx

@@ -5,6 +5,7 @@ import path from "node:path";
 import { useState, useEffect, useRef } from "react";
 import onExit from "signal-exit";
 import useInspector from "../inspect";
+import { logger } from "../logger";
 import { DEFAULT_MODULE_RULES } from "../module-collection";
 import { waitForPortToBeAvailable } from "../proxy";
 import type { Config } from "../config";
@@ -14,19 +15,20 @@ import type { EsbuildBundle } from "./use-esbuild";
 import type { MiniflareOptions } from "miniflare";
 
 interface LocalProps {
-  name: undefined | string;
+  name: string | undefined;
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
-  compatibilityDate: string | undefined;
-  compatibilityFlags: undefined | string[];
+  compatibilityDate: string;
+  compatibilityFlags: string[] | undefined;
   bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
-  public: undefined | string;
+  assetPaths: AssetPaths | undefined;
+  public: string | undefined;
   port: number;
   ip: string;
   rules: Config["rules"];
   inspectorPort: number;
   enableLocalPersistence: boolean;
+  crons: Config["triggers"]["crons"];
 }
 
 export function Local(props: LocalProps) {
@@ -52,17 +54,33 @@ function useLocalWorker({
   rules,
   enableLocalPersistence,
   ip,
+  crons,
 }: LocalProps) {
   // TODO: pass vars via command line
   const local = useRef<ReturnType<typeof spawn>>();
   const removeSignalExitListener = useRef<() => void>();
   const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
+  // if we're using local persistence for data, we should use the cwd
+  // as an explicit path, or else it'll use the temp dir
+  // which disappears when dev ends
+  const localPersistencePath = enableLocalPersistence
+    ? // Maybe we could make the path configurable as well?
+      path.join(process.cwd(), "wrangler-local-state")
+    : // We otherwise choose null, but choose true later
+      // so that it's persisted in the temp dir across a dev session
+      // even when we change source and reload
+      null;
   useEffect(() => {
+    const abortController = new AbortController();
     async function startLocalWorker() {
       if (!bundle || !format) return;
 
       // port for the worker
-      await waitForPortToBeAvailable(port, { retryPeriod: 200, timeout: 2000 });
+      await waitForPortToBeAvailable(port, {
+        retryPeriod: 200,
+        timeout: 2000,
+        abortSignal: abortController.signal,
+      });
 
       if (publicDirectory) {
         throw new Error(
@@ -81,7 +99,35 @@ function useLocalWorker({
 
       const scriptPath = realpathSync(bundle.path);
 
-      const wasmBindings = { ...bindings.wasm_modules };
+      // the wasm_modules/text_blobs/data_blobs bindings are
+      // relative to process.cwd(), but the actual worker bundle
+      // is in the temp output directory; so we rewrite the paths to be absolute,
+      // letting miniflare resolve them correctly
+
+      // wasm
+      const wasmBindings: Record<string, string> = {};
+      for (const [name, filePath] of Object.entries(
+        bindings.wasm_modules || {}
+      )) {
+        wasmBindings[name] = path.join(process.cwd(), filePath);
+      }
+
+      // text
+      const textBlobBindings: Record<string, string> = {};
+      for (const [name, filePath] of Object.entries(
+        bindings.text_blobs || {}
+      )) {
+        textBlobBindings[name] = path.join(process.cwd(), filePath);
+      }
+
+      // data
+      const dataBlobBindings: Record<string, string> = {};
+      for (const [name, filePath] of Object.entries(
+        bindings.data_blobs || {}
+      )) {
+        dataBlobBindings[name] = path.join(process.cwd(), filePath);
+      }
+
       if (format === "service-worker") {
         for (const { type, name } of bundle.modules) {
           if (type === "compiled-wasm") {
@@ -91,6 +137,20 @@ function useLocalWorker({
             // characters with an underscore.
             const identifier = name.replace(/[^a-zA-Z0-9_$]/g, "_");
             wasmBindings[identifier] = name;
+          } else if (type === "text") {
+            // In service-worker format, text 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, "_");
+            textBlobBindings[identifier] = name;
+          } else if (type === "buffer") {
+            // In service-worker format, data blobs 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, "_");
+            dataBlobBindings[identifier] = name;
           }
         }
       }
@@ -111,14 +171,28 @@ function useLocalWorker({
         compatibilityDate,
         compatibilityFlags,
         kvNamespaces: bindings.kv_namespaces?.map((kv) => kv.binding),
-        kvPersist: enableLocalPersistence,
         durableObjects: Object.fromEntries(
           (bindings.durable_objects?.bindings ?? []).map<[string, string]>(
             (value) => [value.name, value.class_name]
           )
         ),
-        durableObjectsPersist: enableLocalPersistence,
-        cachePersist: enableLocalPersistence,
+        ...(localPersistencePath
+          ? {
+              kvPersist: path.join(localPersistencePath, "kv"),
+              durableObjectsPersist: path.join(localPersistencePath, "do"),
+              cachePersist: path.join(localPersistencePath, "cache"),
+            }
+          : {
+              // We mark these as true, so that they'll
+              // persist in the temp directory.
+              // This means they'll persist across a dev session,
+              // even if we change source and reload,
+              // and be deleted when the dev session ends
+              durableObjectsPersist: true,
+              cachePersist: true,
+              kvPersist: true,
+            }),
+
         sitePath: assetPaths?.assetDirectory
           ? path.join(assetPaths.baseDirectory, assetPaths.assetDirectory)
           : undefined,
@@ -130,8 +204,11 @@ function useLocalWorker({
           : undefined,
         bindings: bindings.vars,
         wasmBindings,
+        textBlobBindings,
+        dataBlobBindings,
         sourceMap: true,
         logUnhandledRejections: true,
+        crons,
       };
 
       // The path to the Miniflare CLI assumes that this file is being run from
@@ -143,7 +220,7 @@ function useLocalWorker({
       );
       const optionsArg = JSON.stringify(options, null);
 
-      console.log("⎔ Starting a local server...");
+      logger.log("⎔ Starting a local server...");
       local.current = spawn(
         "node",
         [
@@ -161,16 +238,15 @@ function useLocalWorker({
 
       local.current.on("close", (code) => {
         if (code) {
-          console.log(`Miniflare process exited with code ${code}`);
+          logger.log(`Miniflare process exited with code ${code}`);
         }
       });
 
       local.current.stdout?.on("data", (data: Buffer) => {
-        console.log(`${data.toString()}`);
+        process.stdout.write(data);
       });
 
       local.current.stderr?.on("data", (data: Buffer) => {
-        console.error(`${data.toString()}`);
         const matches =
           /Debugger listening on (ws:\/\/127\.0\.0\.1:\d+\/[A-Za-z0-9-]+)/.exec(
             data.toString()
@@ -182,29 +258,30 @@ function useLocalWorker({
 
       local.current.on("exit", (code) => {
         if (code) {
-          console.error(`Miniflare process exited with code ${code}`);
+          logger.error(`Miniflare process exited with code ${code}`);
         }
       });
 
       local.current.on("error", (error: Error) => {
-        console.error(`Miniflare process failed to spawn`);
-        console.error(error);
+        logger.error(`Miniflare process failed to spawn`);
+        logger.error(error);
       });
 
       removeSignalExitListener.current = onExit((_code, _signal) => {
-        console.log("⎔ Shutting down local server.");
+        logger.log("⎔ Shutting down local server.");
         local.current?.kill();
         local.current = undefined;
       });
     }
 
     startLocalWorker().catch((err) => {
-      console.error("local worker:", err);
+      logger.error("local worker:", err);
     });
 
     return () => {
+      abortController.abort();
       if (local.current) {
-        console.log("⎔ Shutting down local server.");
+        logger.log("⎔ Shutting down local server.");
         local.current?.kill();
         local.current = undefined;
         removeSignalExitListener.current && removeSignalExitListener.current();
@@ -222,11 +299,14 @@ function useLocalWorker({
     bindings.vars,
     compatibilityDate,
     compatibilityFlags,
-    enableLocalPersistence,
+    localPersistencePath,
     assetPaths,
     publicDirectory,
     rules,
     bindings.wasm_modules,
+    bindings.text_blobs,
+    bindings.data_blobs,
+    crons,
   ]);
   return { inspectorUrl };
 }

package/src/dev/remote.tsx

@@ -4,6 +4,7 @@ import path from "node:path";
 import { useState, useEffect, useRef } from "react";
 import { createWorkerPreview } from "../create-worker-preview";
 import useInspector from "../inspect";
+import { logger } from "../logger";
 import { usePreviewServer } from "../proxy";
 import { syncAssets } from "../sites";
 import type { CfPreviewToken } from "../create-worker-preview";
@@ -15,18 +16,18 @@ export function Remote(props: {
   name: string | undefined;
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
-  public: undefined | string;
-  assetPaths: undefined | AssetPaths;
+  public: string | undefined;
+  assetPaths: AssetPaths | undefined;
   port: number;
   ip: string;
   localProtocol: "https" | "http";
   inspectorPort: number;
-  accountId: undefined | string;
-  apiToken: undefined | string;
+  accountId: string | undefined;
+  apiToken: string | undefined;
   bindings: CfWorkerInit["bindings"];
-  compatibilityDate: string | undefined;
-  compatibilityFlags: undefined | string[];
-  usageModel: undefined | "bundled" | "unbound";
+  compatibilityDate: string;
+  compatibilityFlags: string[] | undefined;
+  usageModel: "bundled" | "unbound" | undefined;
   env: string | undefined;
   legacyEnv: boolean | undefined;
   zone: { id: string; host: string } | undefined;
@@ -75,11 +76,11 @@ export function useWorker(props: {
   accountId: string;
   apiToken: string;
   bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
+  assetPaths: AssetPaths | undefined;
   port: number;
   compatibilityDate: string | undefined;
   compatibilityFlags: string[] | undefined;
-  usageModel: undefined | "bundled" | "unbound";
+  usageModel: "bundled" | "unbound" | undefined;
   env: string | undefined;
   legacyEnv: boolean | undefined;
   zone: { id: string; host: string } | undefined;
@@ -106,6 +107,7 @@ export function useWorker(props: {
   const startedRef = useRef(false);
 
   useEffect(() => {
+    const abortController = new AbortController();
     async function start() {
       setToken(undefined); // reset token in case we're re-running
 
@@ -114,7 +116,7 @@ export function useWorker(props: {
       if (!startedRef.current) {
         startedRef.current = true;
       } else {
-        console.log("⎔ Detected changes, restarted server.");
+        logger.log("⎔ Detected changes, restarted server.");
       }
 
       const assets = await syncAssets(
@@ -125,7 +127,8 @@ export function useWorker(props: {
         // concept of service environments for kv namespaces yet).
         name + (!props.legacyEnv && props.env ? `-${props.env}` : ""),
         assetPaths,
-        true
+        true,
+        false
       ); // TODO: cancellable?
 
       const content = await readFile(bundle.path, "utf-8");
@@ -173,15 +176,22 @@ export function useWorker(props: {
             accountId,
             apiToken,
           },
-          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone }
+          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone },
+          abortController.signal
         )
       );
     }
     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);
+      if ((err as { code: string }).code !== "ABORT_ERR") {
+        logger.error("Error on remote worker:", err);
+      }
     });
+
+    return () => {
+      abortController.abort();
+    };
   }, [
     name,
     bundle,

package/src/dev/use-esbuild.ts

@@ -1,6 +1,8 @@
 import assert from "node:assert";
+import { useApp } from "ink";
 import { useState, useEffect } from "react";
 import { bundleWorker } from "../bundle";
+import { logger } from "../logger";
 import type { Config } from "../config";
 import type { Entry } from "../entry";
 import type { CfModule } from "../worker";
@@ -24,23 +26,28 @@ export function useEsbuild({
   rules,
   serveAssetsFromWorker,
   tsconfig,
+  minify,
+  nodeCompat,
 }: {
   entry: Entry;
   destination: string | undefined;
-  staticRoot: undefined | string;
+  staticRoot: string | undefined;
   jsxFactory: string | undefined;
   jsxFragment: string | undefined;
   rules: Config["rules"];
   serveAssetsFromWorker: boolean;
   tsconfig: string | undefined;
+  minify: boolean | undefined;
+  nodeCompat: boolean | undefined;
 }): EsbuildBundle | undefined {
   const [bundle, setBundle] = useState<EsbuildBundle>();
+  const { exit } = useApp();
   useEffect(() => {
     let stopWatching: (() => void) | undefined = undefined;
 
     const watchMode: WatchMode = {
       async onRebuild(error) {
-        if (error) console.error("watch build failed:", error);
+        if (error) logger.error("Watch build failed:", error);
         else {
           // nothing really changes here, so let's increment the id
           // to change the return object's identity
@@ -67,6 +74,8 @@ export function useEsbuild({
           rules,
           watch: watchMode,
           tsconfig,
+          minify,
+          nodeCompat,
         });
 
       // Capture the `stop()` method to use as the `useEffect()` destructor.
@@ -82,9 +91,11 @@ export function useEsbuild({
       });
     }
 
-    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
+    build().catch((err) => {
+      // If esbuild fails on first run, we want to quit the process
+      // since we can't recover from here
+      // related: https://github.com/evanw/esbuild/issues/1037
+      exit(err);
     });
 
     return () => {
@@ -99,6 +110,9 @@ export function useEsbuild({
     serveAssetsFromWorker,
     rules,
     tsconfig,
+    exit,
+    minify,
+    nodeCompat,
   ]);
   return bundle;
 }