wrangler 0.0.0-e88a54e → 0.0.0-e95e5a0

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";
@@ -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();

package/src/entry.ts

@@ -3,6 +3,7 @@ import { existsSync } from "node:fs";
 import path from "node:path";
 import * as esbuild from "esbuild";
 import { execaCommand } from "execa";
+import { logger } from "./logger";
 import type { Config } from "./config";
 import type { CfScriptFormat } from "./worker";
 import type { Metafile } from "esbuild";
@@ -20,7 +21,7 @@ export type Entry = { file: string; directory: string; format: CfScriptFormat };
 export async function getEntry(
   args: { script?: string; format?: CfScriptFormat | undefined },
   config: Config,
-  command: string
+  command: "dev" | "publish"
 ): Promise<Entry> {
   let file: string;
   let directory = process.cwd();
@@ -28,9 +29,17 @@ export async function getEntry(
     // If the script name comes from the command line it is relative to the current working directory.
     file = path.resolve(args.script);
   } else if (config.main === undefined) {
-    throw new Error(
-      `Missing entry-point: The entry-point should be specified via the command line (e.g. \`wrangler ${command} path/to/script\`) or the \`main\` config field.`
-    );
+    if (config.site?.["entry-point"]) {
+      directory = path.resolve(path.dirname(config.configPath ?? "."));
+      file = path.extname(config.site?.["entry-point"])
+        ? path.resolve(config.site?.["entry-point"])
+        : // site.entry-point could be a directory
+          path.resolve(config.site?.["entry-point"], "index.js");
+    } else {
+      throw new Error(
+        `Missing entry-point: The entry-point should be specified via the command line (e.g. \`wrangler ${command} path/to/script\`) or the \`main\` config field.`
+      );
+    }
   } else {
     directory = path.resolve(path.dirname(config.configPath ?? "."));
     file = path.resolve(directory, config.main);
@@ -46,15 +55,28 @@ export async function getEntry(
   const format = await guessWorkerFormat(
     file,
     directory,
-    args.format ?? config.build?.upload?.format
+    args.format ?? config.build?.upload?.format,
+    config.tsconfig
   );
 
-  if (format === "service-worker" && hasDurableObjectImplementations(config)) {
+  const { localBindings, remoteBindings } =
+    partitionDurableObjectBindings(config);
+
+  if (command === "dev" && remoteBindings.length > 0) {
+    logger.warn(
+      "WARNING: You have Durable Object bindings that are not defined locally in the worker being developed.\n" +
+        "Be aware that changes to the data stored in these Durable Objects will be permanent and affect the live instances.\n" +
+        "Remote Durable Objects that are affected:\n" +
+        remoteBindings.map((b) => `- ${JSON.stringify(b)}`).join("\n")
+    );
+  }
+
+  if (format === "service-worker" && localBindings.length > 0) {
     const errorMessage =
-      "You seem to be trying to use Durable Objects in a Worker written with Service Worker syntax.";
+      "You seem to be trying to use Durable Objects in a Worker written as a service-worker.";
     const addScriptName =
       "You can use Durable Objects defined in other Workers by specifying a `script_name` in your wrangler.toml, where `script_name` is the name of the Worker that implements that Durable Object. For example:";
-    const addScriptNameExamples = generateAddScriptNameExamples(config);
+    const addScriptNameExamples = generateAddScriptNameExamples(localBindings);
     const migrateText =
       "Alternatively, migrate your worker to ES Module syntax to implement a Durable Object in this Worker:";
     const migrateUrl =
@@ -73,12 +95,13 @@ export async function runCustomBuild(
 ) {
   if (build?.command) {
     // TODO: add a deprecation message here?
-    console.log("running:", build.command);
+    logger.log("Running custom build:", build.command);
     await execaCommand(build.command, {
       shell: true,
+      // we keep these two as "inherit" so that
+      // logs are still visible.
       stdout: "inherit",
       stderr: "inherit",
-      timeout: 1000 * 30,
       ...(build.cwd && { cwd: build.cwd }),
     });
 
@@ -104,7 +127,8 @@ export async function runCustomBuild(
 export default async function guessWorkerFormat(
   entryFile: string,
   entryWorkingDirectory: string,
-  hint: CfScriptFormat | undefined
+  hint: CfScriptFormat | undefined,
+  tsconfig?: string | undefined
 ): Promise<CfScriptFormat> {
   const result = await esbuild.build({
     entryPoints: [entryFile],
@@ -112,7 +136,14 @@ export default async function guessWorkerFormat(
     metafile: true,
     bundle: false,
     format: "esm",
+    target: "es2020",
     write: false,
+    loader: {
+      ".js": "jsx",
+      ".mjs": "jsx",
+      ".cjs": "jsx",
+    },
+    ...(tsconfig && { tsconfig }),
   });
   // result.metafile is defined because of the `metafile: true` option above.
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -130,14 +161,30 @@ export default async function guessWorkerFormat(
     "More than one entry-point found for generated bundle." +
       listEntryPoints(entryPoints)
   );
-  const guessedWorkerFormat =
-    entryPoints[0][1].exports.length > 0 ? "modules" : "service-worker";
+
+  let guessedWorkerFormat: CfScriptFormat;
+  const scriptExports = entryPoints[0][1].exports;
+  if (scriptExports.length > 0) {
+    if (scriptExports.includes("default")) {
+      guessedWorkerFormat = "modules";
+    } else {
+      logger.warn(
+        `The entrypoint ${path.relative(
+          process.cwd(),
+          entryFile
+        )} has exports like an ES Module, but hasn't defined a default export like a module worker normally would. Building the worker using "service-worker" format...`
+      );
+      guessedWorkerFormat = "service-worker";
+    }
+  } else {
+    guessedWorkerFormat = "service-worker";
+  }
 
   if (hint) {
     if (hint !== guessedWorkerFormat) {
       if (hint === "service-worker") {
         throw new Error(
-          "You configured this worker to be a 'service-worker', but the file you are trying to build appears to have ES module exports. Please pass `--format modules`, or simply remove the configuration."
+          "You configured this worker to be a 'service-worker', but the file you are trying to build appears to have a `default` export like a module worker. Please pass `--format modules`, or simply remove the configuration."
         );
       } else {
         throw new Error(
@@ -174,15 +221,26 @@ export function fileExists(filePath: string): boolean {
   return false;
 }
 
+type DurableObjectBindings = Config["durable_objects"]["bindings"];
+
 /**
- * Returns true if the given config contains Durable Object bindings that are implemented
- * in this worker instead of being implemented elsewhere, and bound via a `script_name`
- * property in wrangler.toml
+ * Groups the durable object bindings into two lists:
+ * those that are defined locally and those that refer to a durable object defined in another script.
  */
-function hasDurableObjectImplementations(config: Config): boolean {
-  return config.durable_objects.bindings.some(
-    (binding) => binding.script_name === undefined
-  );
+function partitionDurableObjectBindings(config: Config): {
+  localBindings: DurableObjectBindings;
+  remoteBindings: DurableObjectBindings;
+} {
+  const localBindings: DurableObjectBindings = [];
+  const remoteBindings: DurableObjectBindings = [];
+  for (const binding of config.durable_objects.bindings) {
+    if (binding.script_name === undefined) {
+      localBindings.push(binding);
+    } else {
+      remoteBindings.push(binding);
+    }
+  }
+  return { localBindings, remoteBindings };
 }
 
 /**
@@ -190,13 +248,14 @@ function hasDurableObjectImplementations(config: Config): boolean {
  * config indicating how the user can add a `script_name` field to bind an
  * externally defined Durable Object.
  */
-function generateAddScriptNameExamples(config: Config): string {
+function generateAddScriptNameExamples(
+  localBindings: DurableObjectBindings
+): string {
   function exampleScriptName(binding_name: string): string {
     return `${binding_name.toLowerCase().replaceAll("_", "-")}-worker`;
   }
 
-  return config.durable_objects.bindings
-    .filter((binding) => binding.script_name === undefined)
+  return localBindings
     .map(({ name, class_name }) => {
       const script_name = exampleScriptName(name);
       const currentBinding = `{ name = ${name}, class_name = ${class_name} }`;