wrangler 0.0.0-e95bea2 → 0.0.0-e95e5a0

package/src/config-cache.ts

@@ -0,0 +1,45 @@
+import { mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+
+let cacheMessageShown = false;
+
+const cacheFolder = "node_modules/.cache/wrangler";
+
+const showCacheMessage = () => {
+  if (!cacheMessageShown) {
+    console.log(
+      `Using cached values in '${cacheFolder}'. This is used as a temporary store to improve the developer experience for some commands. It may be purged at any time. It doesn't contain any sensitive information, but it should not be commited into source control.`
+    );
+    cacheMessageShown = true;
+  }
+};
+
+export const getConfigCache = <T>(fileName: string): Partial<T> => {
+  try {
+    const configCacheLocation = join(cacheFolder, fileName);
+    const configCache = JSON.parse(readFileSync(configCacheLocation, "utf-8"));
+    showCacheMessage();
+    return configCache;
+  } catch {
+    return {};
+  }
+};
+
+export const saveToConfigCache = <T>(
+  fileName: string,
+  newValues: Partial<T>
+) => {
+  const configCacheLocation = join(cacheFolder, fileName);
+  const existingValues = getConfigCache(fileName);
+
+  mkdirSync(dirname(configCacheLocation), { recursive: true });
+  writeFileSync(
+    configCacheLocation,
+    JSON.stringify({ ...existingValues, ...newValues }, null, 2)
+  );
+  showCacheMessage();
+};
+
+export const purgeConfigCaches = () => {
+  rmSync(cacheFolder, { recursive: true, force: true });
+};

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,30 +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;
@@ -55,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."
     );
   }
 
@@ -75,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"
     );
   }
 
@@ -87,14 +98,38 @@ 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
   );
@@ -103,51 +138,67 @@ export function DevImplementation(props: DevProps): JSX.Element {
 
   return (
     <>
-      {toggles.local ? (
-        <Local
-          name={props.name}
-          bundle={bundle}
-          format={props.entry.format}
-          bindings={props.bindings}
-          assetPaths={props.assetPaths}
-          public={props.public}
-          port={port}
-          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}
-          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;
@@ -163,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 () => {
@@ -176,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(() => {
@@ -190,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);
         });
       });
     }
@@ -239,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",
@@ -255,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();
@@ -295,11 +347,13 @@ type useHotkeysInitialState = {
 function useHotkeys(
   initial: useHotkeysInitialState,
   port: number,
+  ip: string,
   inspectorPort: number,
   localProtocol: "http" | "https"
 ) {
   // UGH, we should put port in context instead
   const [toggles, setToggles] = useState(initial);
+  const { exit } = useApp();
   useInput(
     async (
       input,
@@ -307,9 +361,16 @@ 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}://localhost:${port}`);
+          await openInBrowser(`${localProtocol}://${ip}:${port}`);
           break;
         }
         // toggle inspector
@@ -330,7 +391,7 @@ function useHotkeys(
         // shut down
         case "q":
         case "x":
-          process.exit(0);
+          exit();
           break;
         default:
           // nothing?