wrangler 0.0.0-e88a54e → 0.0.0-e95e5a0

package/src/create-worker-preview.ts

@@ -2,6 +2,7 @@ import { URL } from "node:url";
 import { fetch } from "undici";
 import { fetchResult } from "./cfetch";
 import { createWorkerUploadForm } from "./create-worker-upload-form";
+import { logger } from "./logger";
 import type { CfAccount, CfWorkerContext, CfWorkerInit } from "./worker";
 
 /**
@@ -57,7 +58,8 @@ export interface CfPreviewToken {
  */
 async function sessionToken(
   account: CfAccount,
-  ctx: CfWorkerContext
+  ctx: CfWorkerContext,
+  abortSignal: AbortSignal
 ): Promise<CfPreviewToken> {
   const { accountId } = account;
   const initUrl = ctx.zone
@@ -65,9 +67,9 @@ async function sessionToken(
     : `/accounts/${accountId}/workers/subdomain/edge-preview`;
 
   const { exchange_url } = await fetchResult<{ exchange_url: string }>(initUrl);
-  const { inspector_websocket, token } = (await (
-    await fetch(exchange_url)
-  ).json()) as { inspector_websocket: string; token: string };
+  const { inspector_websocket, prewarm, token } = (await (
+    await fetch(exchange_url, { signal: abortSignal })
+  ).json()) as { inspector_websocket: string; token: string; prewarm: string };
   const { host } = new URL(inspector_websocket);
   const query = `cf_workers_preview_token=${token}`;
 
@@ -75,9 +77,7 @@ async function sessionToken(
     value: token,
     host,
     inspectorUrl: new URL(`${inspector_websocket}?${query}`),
-    prewarmUrl: new URL(
-      `https://${host}/cdn-cgi/workers/preview/prewarm?${query}`
-    ),
+    prewarmUrl: new URL(prewarm),
   };
 }
 
@@ -96,11 +96,13 @@ function randomId(): string {
 async function createPreviewToken(
   account: CfAccount,
   worker: CfWorkerInit,
-  ctx: CfWorkerContext
+  ctx: CfWorkerContext,
+  abortSignal: AbortSignal
 ): Promise<CfPreviewToken> {
   const { value, host, inspectorUrl, prewarmUrl } = await sessionToken(
     account,
-    ctx
+    ctx,
+    abortSignal
   );
 
   const { accountId } = account;
@@ -155,12 +157,19 @@ async function createPreviewToken(
 export async function createWorkerPreview(
   init: CfWorkerInit,
   account: CfAccount,
-  ctx: CfWorkerContext
+  ctx: CfWorkerContext,
+  abortSignal: AbortSignal
 ): Promise<CfPreviewToken> {
-  const token = await createPreviewToken(account, init, ctx);
-  const response = await fetch(token.prewarmUrl.href, { method: "POST" });
+  const token = await createPreviewToken(account, init, ctx, abortSignal);
+  const response = await fetch(token.prewarmUrl.href, {
+    method: "POST",
+    signal: abortSignal,
+    headers: {
+      "cf-workers-preview-token": token.value,
+    },
+  });
   if (!response.ok) {
-    // console.error("worker failed to prewarm: ", response.statusText);
+    logger.warn("worker failed to prewarm: ", response.statusText);
   }
   return token;
 }

package/src/create-worker-upload-form.ts

@@ -26,7 +26,7 @@ export function toMimeType(type: CfModuleType): string {
 export interface WorkerMetadata {
   /** The name of the entry point module. Only exists when the worker is in the ES module format */
   main_module?: string;
-  /** The name of the entry point module. Only exists when the worker is in the Service Worker format */
+  /** The name of the entry point module. Only exists when the worker is in the service-worker format */
   body_part?: string;
   compatibility_date?: string;
   compatibility_flags?: string[];
@@ -38,6 +38,7 @@ export interface WorkerMetadata {
     | { type: "json"; name: string; json: unknown }
     | { type: "wasm_module"; name: string; part: string }
     | { type: "text_blob"; name: string; part: string }
+    | { type: "data_blob"; name: string; part: string }
     | {
         type: "durable_object_namespace";
         name: string;
@@ -133,6 +134,21 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
     }
   }
 
+  for (const [name, filePath] of Object.entries(bindings.data_blobs || {})) {
+    metadataBindings.push({
+      name,
+      type: "data_blob",
+      part: name,
+    });
+
+    formData.set(
+      name,
+      new File([readFileSync(filePath)], filePath, {
+        type: "application/octet-stream",
+      })
+    );
+  }
+
   if (main.type === "commonjs") {
     // This is a service-worker format worker.
     for (const module of Object.values([...(modules || [])])) {
@@ -146,8 +162,12 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
         );
         // And then remove it from the modules collection
         modules = modules?.filter((m) => m !== module);
-      } else if (module.type === "compiled-wasm" || module.type === "text") {
-        // Convert all wasm/text modules into `wasm_module`/`text_blob` bindings.
+      } else if (
+        module.type === "compiled-wasm" ||
+        module.type === "text" ||
+        module.type === "buffer"
+      ) {
+        // Convert all wasm/text/data modules into `wasm_module`/`text_blob`/`data_blob` bindings.
         // The "name" of the module is a file path. We use it
         // to instead be a "part" of the body, and a reference
         // that we can use inside our source. This identifier has to be a valid
@@ -156,7 +176,12 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
         const name = module.name.replace(/[^a-zA-Z0-9_$]/g, "_");
         metadataBindings.push({
           name,
-          type: module.type === "compiled-wasm" ? "wasm_module" : "text_blob",
+          type:
+            module.type === "compiled-wasm"
+              ? "wasm_module"
+              : module.type === "text"
+              ? "text_blob"
+              : "data_blob",
           part: name,
         });
 
@@ -167,15 +192,13 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
             type:
               module.type === "compiled-wasm"
                 ? "application/wasm"
-                : "text/plain",
+                : module.type === "text"
+                ? "text/plain"
+                : "application/octet-stream",
           })
         );
         // And then remove it from the modules collection
         modules = modules?.filter((m) => m !== module);
-      } else if (module.type === "buffer") {
-        throw new Error(
-          'The "buffer" module type is not yet supported in service worker format workers'
-        );
       }
     }
   }

package/src/dev/dev-vars.ts

@@ -0,0 +1,36 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import dotenv from "dotenv";
+import { logger } from "../logger";
+import type { Config } from "../config";
+
+/**
+ * Get the Worker `vars` bindings for a `wrangler dev` instance of a Worker.
+ *
+ * The `vars` bindings can be specified in the `wrangler.toml` configuration file.
+ * But "secret" `vars` are usually only provided at the server -
+ * either by creating them in the Dashboard UI, or using the `wrangler secret` command.
+ *
+ * It is useful during development, to provide these types of variable locally.
+ * When running `wrangler dev` we will look for a file called `.dev.vars`, situated
+ * next to the `wrangler.toml` file (or in the current working directory if there is no
+ * `wrangler.toml`).
+ *
+ * Any values in this file, formatted like a `dotenv` file, will add to or override `vars`
+ * bindings provided in the `wrangler.toml`.
+ */
+export function getVarsForDev(config: Config): Config["vars"] {
+  const configDir = path.resolve(path.dirname(config.configPath ?? "."));
+  const devVarsPath = path.resolve(configDir, ".dev.vars");
+  if (fs.existsSync(devVarsPath)) {
+    const devVarsRelativePath = path.relative(process.cwd(), devVarsPath);
+    logger.log(`Using vars defined in ${devVarsRelativePath}`);
+    const devVars = dotenv.parse(fs.readFileSync(devVarsPath, "utf8"));
+    return {
+      ...config.vars,
+      ...devVars,
+    };
+  } else {
+    return config.vars;
+  }
+}

package/src/dev/dev.tsx

@@ -2,15 +2,15 @@ import { spawn } from "node:child_process";
 import { watch } from "chokidar";
 import clipboardy from "clipboardy";
 import commandExists from "command-exists";
-import { Box, Text, useApp, useInput } from "ink";
+import { Box, Text, useApp, useInput, useStdin } from "ink";
 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 { 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";
@@ -19,31 +19,36 @@ import type { Config } from "../config";
 import type { Entry } from "../entry";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit } from "../worker";
+import type { EsbuildBundle } from "./use-esbuild";
 
 export type DevProps = {
   name?: string;
   entry: Entry;
-  port?: number;
+  port: number;
   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";
-  buildCommand: {
-    command?: undefined | string;
-    cwd?: undefined | string;
-    watch_dir?: undefined | string;
+  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?: string | undefined;
+    cwd?: string | undefined;
+    watch_dir?: string | undefined;
   };
   env: string | undefined;
   legacyEnv: boolean;
@@ -56,15 +61,14 @@ export type DevProps = {
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
-  const port = props.port ?? 8787;
   const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
   const directory = useTmpDir();
 
-  useCustomBuild(props.entry, props.buildCommand);
+  useCustomBuild(props.entry, props.build);
 
   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."
     );
   }
 
@@ -76,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"
     );
   }
 
@@ -88,14 +98,37 @@ export function DevImplementation(props: DevProps): JSX.Element {
     rules: props.rules,
     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
+  const { isRawModeSupported } = useStdin();
+  return isRawModeSupported ? (
+    <InteractiveDevSession {...props} bundle={bundle} apiToken={apiToken} />
+  ) : (
+    <DevSession
+      {...props}
+      bundle={bundle}
+      apiToken={apiToken}
+      local={props.initialMode === "local"}
+    />
+  );
+}
+
+type InteractiveDevSessionProps = DevProps & {
+  apiToken: string | undefined;
+  bundle: EsbuildBundle | undefined;
+};
+
+function InteractiveDevSession(props: InteractiveDevSessionProps) {
   const toggles = useHotkeys(
     {
       local: props.initialMode === "local",
       tunnel: false,
     },
-    port,
+    props.port,
     props.ip,
     props.inspectorPort,
     props.localProtocol
@@ -105,55 +138,67 @@ export function DevImplementation(props: DevProps): JSX.Element {
 
   return (
     <>
-      {toggles.local ? (
-        <Local
-          name={props.name}
-          bundle={bundle}
-          format={props.entry.format}
-          compatibilityDate={props.compatibilityDate}
-          compatibilityFlags={props.compatibilityFlags}
-          bindings={props.bindings}
-          assetPaths={props.assetPaths}
-          public={props.public}
-          port={port}
-          ip={props.ip}
-          rules={props.rules}
-          inspectorPort={props.inspectorPort}
-          enableLocalPersistence={props.enableLocalPersistence}
-        />
-      ) : (
-        <Remote
-          name={props.name}
-          bundle={bundle}
-          format={props.entry.format}
-          accountId={props.accountId}
-          apiToken={apiToken}
-          bindings={props.bindings}
-          assetPaths={props.assetPaths}
-          public={props.public}
-          port={port}
-          ip={props.ip}
-          localProtocol={props.localProtocol}
-          inspectorPort={props.inspectorPort}
-          compatibilityDate={props.compatibilityDate}
-          compatibilityFlags={props.compatibilityFlags}
-          usageModel={props.usageModel}
-          env={props.env}
-          legacyEnv={props.legacyEnv}
-          zone={props.zone}
-        />
-      )}
+      <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>
     </>
   );
 }
 
+type DevSessionProps = InteractiveDevSessionProps & { local: boolean };
+
+function DevSession(props: DevSessionProps) {
+  return props.local ? (
+    <Local
+      name={props.name}
+      bundle={props.bundle}
+      format={props.entry.format}
+      compatibilityDate={props.compatibilityDate}
+      compatibilityFlags={props.compatibilityFlags}
+      bindings={props.bindings}
+      assetPaths={props.assetPaths}
+      public={props.public}
+      port={props.port}
+      ip={props.ip}
+      rules={props.rules}
+      inspectorPort={props.inspectorPort}
+      enableLocalPersistence={props.enableLocalPersistence}
+      crons={props.crons}
+    />
+  ) : (
+    <Remote
+      name={props.name}
+      bundle={props.bundle}
+      format={props.entry.format}
+      accountId={props.accountId}
+      apiToken={props.apiToken}
+      bindings={props.bindings}
+      assetPaths={props.assetPaths}
+      public={props.public}
+      port={props.port}
+      ip={props.ip}
+      localProtocol={props.localProtocol}
+      inspectorPort={props.inspectorPort}
+      compatibilityDate={props.compatibilityDate}
+      compatibilityFlags={props.compatibilityFlags}
+      usageModel={props.usageModel}
+      env={props.env}
+      legacyEnv={props.legacyEnv}
+      zone={props.zone}
+    />
+  );
+}
+
 export interface DirectorySyncResult {
   name: string;
   removeCallback: () => void;
@@ -169,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 () => {
@@ -182,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(() => {
@@ -196,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);
         });
       });
     }
@@ -245,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",
@@ -261,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();
@@ -307,6 +353,7 @@ function useHotkeys(
 ) {
   // UGH, we should put port in context instead
   const [toggles, setToggles] = useState(initial);
+  const { exit } = useApp();
   useInput(
     async (
       input,
@@ -314,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}`);
@@ -337,7 +391,7 @@ function useHotkeys(
         // shut down
         case "q":
         case "x":
-          process.exit(0);
+          exit();
           break;
         default:
           // nothing?