wrangler 0.0.0-e043479 → 0.0.0-e0a0509

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/{api/preview.ts → create-worker-preview.ts}

@@ -1,7 +1,8 @@
 import { URL } from "node:url";
 import { fetch } from "undici";
-import { fetchResult } from "../cfetch";
-import { toFormData } from "./form_data";
+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),
   };
 }
 
@@ -93,14 +93,16 @@ function randomId(): string {
 /**
  * Creates a preview token.
  */
-export async function previewToken(
+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;
@@ -114,7 +116,7 @@ export async function previewToken(
     ? { routes: ["*/*"] } // TODO: should we support routes here? how?
     : { workers_dev: true };
 
-  const formData = toFormData(worker);
+  const formData = createWorkerUploadForm(worker);
   formData.set("wrangler-session-config", JSON.stringify(mode));
 
   const { preview_token } = await fetchResult<{ preview_token: string }>(url, {
@@ -145,3 +147,29 @@ export async function previewToken(
     prewarmUrl,
   };
 }
+
+/**
+ * A stub to create a Cloudflare Worker preview.
+ *
+ * @example
+ * const {value, host} = await createWorker(init, acct);
+ */
+export async function createWorkerPreview(
+  init: CfWorkerInit,
+  account: CfAccount,
+  ctx: CfWorkerContext,
+  abortSignal: AbortSignal
+): Promise<CfPreviewToken> {
+  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) {
+    logger.warn("worker failed to prewarm: ", response.statusText);
+  }
+  return token;
+}

package/src/{api/form_data.ts → 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;
@@ -51,7 +52,7 @@ export interface WorkerMetadata {
 /**
  * Creates a `FormData` upload from a `CfWorkerInit`.
  */
-export function toFormData(worker: CfWorkerInit): FormData {
+export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
   const formData = new FormData();
   const {
     main,
@@ -133,6 +134,21 @@ export function toFormData(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 toFormData(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 toFormData(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 toFormData(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

@@ -0,0 +1,418 @@
+import { spawn } from "node:child_process";
+import { watch } from "chokidar";
+import clipboardy from "clipboardy";
+import commandExists from "command-exists";
+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 { getAPIToken } from "../user";
+import { Local } from "./local";
+import { Remote } from "./remote";
+import { useEsbuild } from "./use-esbuild";
+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;
+  ip: string;
+  inspectorPort: number;
+  rules: Config["rules"];
+  accountId: string | undefined;
+  initialMode: "local" | "remote";
+  jsxFactory: string | undefined;
+  jsxFragment: string | undefined;
+  tsconfig: string | undefined;
+  upstreamProtocol: "https" | "http";
+  localProtocol: "https" | "http";
+  enableLocalPersistence: boolean;
+  bindings: CfWorkerInit["bindings"];
+  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;
+  zone:
+    | {
+        id: string;
+        host: string;
+      }
+    | undefined;
+};
+
+export function DevImplementation(props: DevProps): JSX.Element {
+  const apiToken = props.initialMode === "remote" ? getAPIToken() : undefined;
+  const directory = useTmpDir();
+
+  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."
+    );
+  }
+
+  if (props.bindings.wasm_modules && props.entry.format === "modules") {
+    throw new Error(
+      "You cannot configure [wasm_modules] with an ES module worker. Instead, import the .wasm module directly in your code"
+    );
+  }
+
+  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 `[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"
+    );
+  }
+
+  const bundle = useEsbuild({
+    entry: props.entry,
+    destination: directory,
+    staticRoot: props.public,
+    jsxFactory: props.jsxFactory,
+    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,
+    },
+    props.port,
+    props.ip,
+    props.inspectorPort,
+    props.localProtocol
+  );
+
+  useTunnel(toggles.tunnel);
+
+  return (
+    <>
+      <DevSession {...props} local={toggles.local} />
+      <Box borderStyle="round" paddingLeft={1} paddingRight={1}>
+        <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;
+}
+
+function useTmpDir(): string | undefined {
+  const [directory, setDirectory] = useState<DirectorySyncResult>();
+  const handleError = useErrorHandler();
+  useEffect(() => {
+    let dir: DirectorySyncResult | undefined;
+    try {
+      dir = tmp.dirSync({ unsafeCleanup: true });
+      setDirectory(dir);
+      return;
+    } catch (err) {
+      logger.error(
+        "Failed to create temporary directory to store built files."
+      );
+      handleError(err);
+    }
+    return () => {
+      dir?.removeCallback();
+    };
+  }, [handleError]);
+  return directory?.name;
+}
+
+function useCustomBuild(
+  expectedEntry: Entry,
+  build: {
+    command?: string | undefined;
+    cwd?: string | undefined;
+    watch_dir?: string | undefined;
+  }
+): void {
+  useEffect(() => {
+    if (!build.command) return;
+    let watcher: ReturnType<typeof watch> | undefined;
+    if (build.watch_dir) {
+      watcher = watch(build.watch_dir, {
+        persistent: true,
+        ignoreInitial: true,
+      }).on("all", (_event, filePath) => {
+        //TODO: we should buffer requests to the proxy until this completes
+        logger.log(`The file ${filePath} changed, restarting build...`);
+        runCustomBuild(expectedEntry.file, build).catch((err) => {
+          logger.error("Custom build failed:", err);
+        });
+      });
+    }
+
+    return () => {
+      watcher?.close();
+    };
+  }, [build, expectedEntry.file]);
+}
+
+function sleep(period: number) {
+  return new Promise((resolve) => setTimeout(resolve, period));
+}
+const SLEEP_DURATION = 2000;
+// really need a first class api for this
+const hostNameRegex = /userHostname="(.*)"/g;
+async function findTunnelHostname() {
+  let hostName: string | undefined;
+  while (!hostName) {
+    try {
+      const resp = await fetch("http://localhost:8789/metrics");
+      const data = await resp.text();
+      const matches = Array.from(data.matchAll(hostNameRegex));
+      hostName = matches[0][1];
+    } catch (err) {
+      await sleep(SLEEP_DURATION);
+    }
+  }
+  return hostName;
+}
+
+/**
+ * Create a tunnel to the remote worker.
+ * We've disabled this for now until we figure out a better user experience.
+ */
+function useTunnel(toggle: boolean) {
+  const tunnel = useRef<ReturnType<typeof spawn>>();
+  const removeSignalExitListener = useRef<() => void>();
+  // TODO: test if cloudflared is available, if not
+  // point them to a url where they can get docs to install it
+  useEffect(() => {
+    async function startTunnel() {
+      if (toggle) {
+        try {
+          await commandExists("cloudflared");
+        } catch (e) {
+          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;
+        }
+        logger.log("⎔ Starting a tunnel...");
+        tunnel.current = spawn("cloudflared", [
+          "tunnel",
+          "--url",
+          "http://localhost:8787",
+          "--metrics",
+          "localhost:8789",
+        ]);
+
+        tunnel.current.on("close", (code) => {
+          if (code) {
+            logger.log(`Tunnel process exited with code ${code}`);
+          }
+        });
+
+        removeSignalExitListener.current = onExit((_code, _signal) => {
+          logger.log("⎔ Shutting down local tunnel.");
+          tunnel.current?.kill();
+          tunnel.current = undefined;
+        });
+
+        const hostName = await findTunnelHostname();
+        await clipboardy.write(hostName);
+        logger.log(`⬣ Sharing at ${hostName}, copied to clipboard.`);
+      }
+    }
+
+    startTunnel().catch(async (err) => {
+      logger.error("tunnel:", err);
+    });
+
+    return () => {
+      if (tunnel.current) {
+        logger.log("⎔ Shutting down tunnel.");
+        tunnel.current?.kill();
+        tunnel.current = undefined;
+        removeSignalExitListener.current && removeSignalExitListener.current();
+        removeSignalExitListener.current = undefined;
+      }
+    };
+  }, [toggle]);
+}
+
+type useHotkeysInitialState = {
+  local: boolean;
+  tunnel: boolean;
+};
+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,
+      // eslint-disable-next-line unused-imports/no-unused-vars
+      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}`);
+          break;
+        }
+        // toggle inspector
+        case "d": {
+          await openInBrowser(
+            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`,
+            { forceChromium: true }
+          );
+          break;
+        }
+        // toggle local
+        case "l":
+          setToggles((previousToggles) => ({
+            ...previousToggles,
+            local: !previousToggles.local,
+          }));
+          break;
+        // shut down
+        case "q":
+        case "x":
+          exit();
+          break;
+        default:
+          // nothing?
+          break;
+      }
+    }
+  );
+  return toggles;
+}
+
+function ErrorFallback(props: { error: Error }) {
+  const { exit } = useApp();
+  useEffect(() => exit(props.error));
+  return (
+    <>
+      <Text>Something went wrong:</Text>
+      <Text>{props.error.stack}</Text>
+    </>
+  );
+}
+
+export default withErrorBoundary(DevImplementation, {
+  FallbackComponent: ErrorFallback,
+});