wrangler 0.0.0-e95bea2 → 0.0.0-e95e5a0

package/src/dev/local.tsx

@@ -5,36 +5,34 @@ 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";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit, CfScriptFormat } from "../worker";
 import type { EsbuildBundle } from "./use-esbuild";
+import type { MiniflareOptions } from "miniflare";
 
-export function Local(props: {
-  name: undefined | string;
+interface LocalProps {
+  name: string | undefined;
   bundle: EsbuildBundle | undefined;
   format: CfScriptFormat | undefined;
+  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;
-}) {
-  const { inspectorUrl } = useLocalWorker({
-    name: props.name,
-    bundle: props.bundle,
-    format: props.format,
-    bindings: props.bindings,
-    assetPaths: props.assetPaths,
-    public: props.public,
-    port: props.port,
-    rules: props.rules,
-    enableLocalPersistence: props.enableLocalPersistence,
-  });
+  crons: Config["triggers"]["crons"];
+}
+
+export function Local(props: LocalProps) {
+  const { inspectorUrl } = useLocalWorker(props);
   useInspector({
     inspectorUrl,
     port: props.inspectorPort,
@@ -43,30 +41,48 @@ export function Local(props: {
   return null;
 }
 
-function useLocalWorker(props: {
-  name: undefined | string;
-  bundle: EsbuildBundle | undefined;
-  rules: Config["rules"];
-  format: CfScriptFormat | undefined;
-  bindings: CfWorkerInit["bindings"];
-  assetPaths: undefined | AssetPaths;
-  public: undefined | string;
-  port: number;
-  enableLocalPersistence: boolean;
-}) {
+function useLocalWorker({
+  name: workerName,
+  bundle,
+  format,
+  compatibilityDate,
+  compatibilityFlags,
+  bindings,
+  assetPaths,
+  public: publicDirectory,
+  port,
+  rules,
+  enableLocalPersistence,
+  ip,
+  crons,
+}: LocalProps) {
   // TODO: pass vars via command line
-  const { bundle, format, bindings, port, assetPaths } = props;
   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 (props.public) {
+      if (publicDirectory) {
         throw new Error(
           '⎔ A "public" folder is not yet supported in local mode.'
         );
@@ -81,109 +97,156 @@ function useLocalWorker(props: {
         );
       }
 
-      console.log("⎔ Starting a local server...");
-      // TODO: just use execa for this
+      const scriptPath = realpathSync(bundle.path);
+
+      // 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") {
+            // 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, "_");
+            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;
+          }
+        }
+      }
+
+      const options: MiniflareOptions = {
+        name: workerName,
+        port,
+        scriptPath,
+        host: ip,
+        modules: format === "modules",
+        modulesRules: (rules || [])
+          .concat(DEFAULT_MODULE_RULES)
+          .map(({ type, globs: include, fallthrough }) => ({
+            type,
+            include,
+            fallthrough,
+          })),
+        compatibilityDate,
+        compatibilityFlags,
+        kvNamespaces: bindings.kv_namespaces?.map((kv) => kv.binding),
+        durableObjects: Object.fromEntries(
+          (bindings.durable_objects?.bindings ?? []).map<[string, string]>(
+            (value) => [value.name, value.class_name]
+          )
+        ),
+        ...(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,
+        siteInclude: assetPaths?.includePatterns.length
+          ? assetPaths?.includePatterns
+          : undefined,
+        siteExclude: assetPaths?.excludePatterns.length
+          ? assetPaths.excludePatterns
+          : 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
+      // `wrangler-dist` and that the CLI is found in `miniflare-dist`.
+      // If either of those paths change this line needs updating.
+      const miniflareCLIPath = path.resolve(
+        __dirname,
+        "../miniflare-dist/index.mjs"
+      );
+      const optionsArg = JSON.stringify(options, null);
+
+      logger.log("⎔ Starting a local server...");
       local.current = spawn(
         "node",
         [
-          "--experimental-vm-modules",
-          "--inspect",
-          require.resolve("miniflare/cli"),
-          realpathSync(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}`,
-              ])
-            ),
+          "--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(realpathSync(bundle.path)),
+          cwd: path.dirname(scriptPath),
         }
       );
-      console.log(`⬣ Listening at http://localhost:${port}`);
 
       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()
@@ -195,29 +258,30 @@ function useLocalWorker(props: {
 
       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();
@@ -226,16 +290,23 @@ function useLocalWorker(props: {
     };
   }, [
     bundle,
+    workerName,
     format,
     port,
+    ip,
     bindings.durable_objects?.bindings,
     bindings.kv_namespaces,
     bindings.vars,
-    props.enableLocalPersistence,
+    compatibilityDate,
+    compatibilityFlags,
+    localPersistencePath,
     assetPaths,
-    props.public,
-    props.rules,
+    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,17 +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;
@@ -55,6 +57,7 @@ export function Remote(props: {
     publicRoot: props.public,
     localProtocol: props.localProtocol,
     localPort: props.port,
+    ip: props.ip,
   });
 
   useInspector({
@@ -73,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;
@@ -104,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
 
@@ -112,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(
@@ -123,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");
@@ -171,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();