wrangler 0.0.0-e29a241 → 0.0.0-e2f9bb2

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,28 +220,33 @@ function useLocalWorker({
       );
       const optionsArg = JSON.stringify(options, null);
 
-      console.log("⎔ Starting a local server...");
-      local.current = spawn("node", [
-        "--experimental-vm-modules", // ensures that Miniflare can run ESM Workers
-        "--no-warnings", // hide annoying Node warnings
-        "--inspect", // start Miniflare listening for a debugger to attach
-        miniflareCLIPath,
-        optionsArg,
-        // "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
-      ]);
+      logger.log("⎔ Starting a local server...");
+      local.current = spawn(
+        "node",
+        [
+          "--experimental-vm-modules", // ensures that Miniflare can run ESM Workers
+          "--no-warnings", // hide annoying Node warnings
+          "--inspect", // start Miniflare listening for a debugger to attach
+          miniflareCLIPath,
+          optionsArg,
+          // "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
+        ],
+        {
+          cwd: path.dirname(scriptPath),
+        }
+      );
 
       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()
@@ -176,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();
@@ -216,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";
@@ -23,22 +25,29 @@ export function useEsbuild({
   jsxFragment,
   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
@@ -64,6 +73,9 @@ export function useEsbuild({
           jsxFragment,
           rules,
           watch: watchMode,
+          tsconfig,
+          minify,
+          nodeCompat,
         });
 
       // Capture the `stop()` method to use as the `useEffect()` destructor.
@@ -79,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 () => {
@@ -95,6 +109,10 @@ export function useEsbuild({
     jsxFragment,
     serveAssetsFromWorker,
     rules,
+    tsconfig,
+    exit,
+    minify,
+    nodeCompat,
   ]);
   return bundle;
 }

package/src/dialogs.tsx

@@ -1,24 +1,28 @@
+import chalk from "chalk";
 import { Box, Text, useInput, render } from "ink";
 import TextInput from "ink-text-input";
 import * as React from "react";
 import { useState } from "react";
+import { logger } from "./logger";
 type ConfirmProps = {
   text: string;
   onConfirm: (answer: boolean) => void;
 };
 function Confirm(props: ConfirmProps) {
-  useInput((input: string) => {
-    if (input === "y") {
+  useInput((input: string, key) => {
+    if (input === "y" || key.return === true) {
       props.onConfirm(true);
     } else if (input === "n") {
       props.onConfirm(false);
     } else {
-      console.log("Unrecognised input");
+      logger.warn("Unrecognised input:", input);
     }
   });
   return (
     <Box>
-      <Text>{props.text} (y/n) </Text>
+      <Text>
+        {props.text} ({chalk.bold("y")}/n)
+      </Text>
     </Box>
   );
 }
@@ -39,12 +43,13 @@ export function confirm(text: string): Promise<boolean> {
 
 type PromptProps = {
   text: string;
+  defaultValue?: string;
   type?: "text" | "password";
   onSubmit: (text: string) => void;
 };
 
 function Prompt(props: PromptProps) {
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState(props.defaultValue || "");
 
   return (
     <Box>
@@ -61,11 +66,16 @@ function Prompt(props: PromptProps) {
   );
 }
 
-export async function prompt(text: string, type: "text" | "password" = "text") {
+export async function prompt(
+  text: string,
+  type: "text" | "password" = "text",
+  defaultValue?: string
+): Promise<string> {
   return new Promise((resolve) => {
     const { unmount } = render(
       <Prompt
         text={text}
+        defaultValue={defaultValue}
         type={type}
         onSubmit={(inputText) => {
           unmount();