wrangler 0.0.0-ece06ea → 0.0.0-ed08df4

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

@@ -0,0 +1,175 @@
+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";
+
+/**
+ * A preview mode.
+ *
+ * * If true, then using a `workers.dev` subdomain.
+ * * Otherwise, a list of routes under a single zone.
+ */
+type CfPreviewMode = { workers_dev: boolean } | { routes: string[] };
+
+/**
+ * A preview token.
+ */
+export interface CfPreviewToken {
+  /**
+   * The header value required to trigger a preview.
+   *
+   * @example
+   * const headers = { 'cf-workers-preview-token': value }
+   * const response = await fetch('https://' + host, { headers })
+   */
+  value: string;
+  /**
+   * The host where the preview is available.
+   */
+  host: string;
+  /**
+   * A websocket url to a DevTools inspector.
+   *
+   * Workers does not have a fully-featured implementation
+   * of the Chrome DevTools protocol, but supports the following:
+   *  * `console.log()` output.
+   *  * `Error` stack traces.
+   *  * `fetch()` events.
+   *
+   * There is no support for breakpoints, but we want to implement
+   * this eventually.
+   *
+   * @link https://chromedevtools.github.io/devtools-protocol/
+   */
+  inspectorUrl: URL;
+  /**
+   * A url to prewarm the preview session.
+   *
+   * @example
+   * fetch(prewarmUrl, { method: 'POST' })
+   */
+  prewarmUrl: URL;
+}
+
+/**
+ * Generates a preview session token.
+ */
+async function sessionToken(
+  account: CfAccount,
+  ctx: CfWorkerContext,
+  abortSignal: AbortSignal
+): Promise<CfPreviewToken> {
+  const { accountId } = account;
+  const initUrl = ctx.zone
+    ? `/zones/${ctx.zone.id}/workers/edge-preview`
+    : `/accounts/${accountId}/workers/subdomain/edge-preview`;
+
+  const { exchange_url } = await fetchResult<{ exchange_url: string }>(initUrl);
+  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}`;
+
+  return {
+    value: token,
+    host,
+    inspectorUrl: new URL(`${inspector_websocket}?${query}`),
+    prewarmUrl: new URL(prewarm),
+  };
+}
+
+// Credit: https://stackoverflow.com/a/2117523
+function randomId(): string {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Creates a preview token.
+ */
+async function createPreviewToken(
+  account: CfAccount,
+  worker: CfWorkerInit,
+  ctx: CfWorkerContext,
+  abortSignal: AbortSignal
+): Promise<CfPreviewToken> {
+  const { value, host, inspectorUrl, prewarmUrl } = await sessionToken(
+    account,
+    ctx,
+    abortSignal
+  );
+
+  const { accountId } = account;
+  const scriptId = ctx.zone ? randomId() : worker.name || host.split(".")[0];
+  const url =
+    ctx.env && !ctx.legacyEnv
+      ? `/accounts/${accountId}/workers/services/${scriptId}/environments/${ctx.env}/edge-preview`
+      : `/accounts/${accountId}/workers/scripts/${scriptId}/edge-preview`;
+
+  const mode: CfPreviewMode = ctx.zone
+    ? { routes: ["*/*"] } // TODO: should we support routes here? how?
+    : { workers_dev: true };
+
+  const formData = createWorkerUploadForm(worker);
+  formData.set("wrangler-session-config", JSON.stringify(mode));
+
+  const { preview_token } = await fetchResult<{ preview_token: string }>(url, {
+    method: "POST",
+    body: formData,
+    headers: {
+      "cf-preview-upload-config-token": value,
+    },
+  });
+
+  return {
+    value: preview_token,
+    host: ctx.zone
+      ? ctx.zone.host
+      : worker.name
+      ? `${
+          worker.name
+          // TODO: this should also probably have the env prefix
+          // but it doesn't appear to work yet, instead giving us the
+          // "There is nothing here yet" screen
+          // ctx.env && !ctx.legacyEnv
+          //   ? `${ctx.env}.${worker.name}`
+          //   : worker.name
+        }.${host.split(".").slice(1).join(".")}`
+      : host,
+
+    inspectorUrl,
+    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/create-worker-upload-form.ts

@@ -0,0 +1,240 @@
+import { readFileSync } from "node:fs";
+import { FormData, File } from "undici";
+import type {
+  CfWorkerInit,
+  CfModuleType,
+  CfDurableObjectMigrations,
+} from "./worker.js";
+
+export function toMimeType(type: CfModuleType): string {
+  switch (type) {
+    case "esm":
+      return "application/javascript+module";
+    case "commonjs":
+      return "application/javascript";
+    case "compiled-wasm":
+      return "application/wasm";
+    case "buffer":
+      return "application/octet-stream";
+    case "text":
+      return "text/plain";
+    default:
+      throw new TypeError("Unsupported module: " + type);
+  }
+}
+
+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 */
+  body_part?: string;
+  compatibility_date?: string;
+  compatibility_flags?: string[];
+  usage_model?: "bundled" | "unbound";
+  migrations?: CfDurableObjectMigrations;
+  bindings: (
+    | { type: "kv_namespace"; name: string; namespace_id: string }
+    | { type: "plain_text"; name: string; text: string }
+    | { 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;
+        class_name: string;
+        script_name?: string;
+      }
+    | { type: "r2_bucket"; name: string; bucket_name: string }
+  )[];
+}
+
+/**
+ * Creates a `FormData` upload from a `CfWorkerInit`.
+ */
+export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
+  const formData = new FormData();
+  const {
+    main,
+    bindings,
+    migrations,
+    usage_model,
+    compatibility_date,
+    compatibility_flags,
+  } = worker;
+
+  let { modules } = worker;
+
+  const metadataBindings: WorkerMetadata["bindings"] = [];
+
+  bindings.kv_namespaces?.forEach(({ id, binding }) => {
+    metadataBindings.push({
+      name: binding,
+      type: "kv_namespace",
+      namespace_id: id,
+    });
+  });
+
+  bindings.durable_objects?.bindings.forEach(
+    ({ name, class_name, script_name }) => {
+      metadataBindings.push({
+        name,
+        type: "durable_object_namespace",
+        class_name: class_name,
+        ...(script_name && { script_name }),
+      });
+    }
+  );
+
+  bindings.r2_buckets?.forEach(({ binding, bucket_name }) => {
+    metadataBindings.push({
+      name: binding,
+      type: "r2_bucket",
+      bucket_name,
+    });
+  });
+
+  Object.entries(bindings.vars || {})?.forEach(([key, value]) => {
+    if (typeof value === "string") {
+      metadataBindings.push({ name: key, type: "plain_text", text: value });
+    } else {
+      metadataBindings.push({ name: key, type: "json", json: value });
+    }
+  });
+
+  for (const [name, filePath] of Object.entries(bindings.wasm_modules || {})) {
+    metadataBindings.push({
+      name,
+      type: "wasm_module",
+      part: name,
+    });
+
+    formData.set(
+      name,
+      new File([readFileSync(filePath)], filePath, {
+        type: "application/wasm",
+      })
+    );
+  }
+
+  for (const [name, filePath] of Object.entries(bindings.text_blobs || {})) {
+    metadataBindings.push({
+      name,
+      type: "text_blob",
+      part: name,
+    });
+
+    if (name !== "__STATIC_CONTENT_MANIFEST") {
+      formData.set(
+        name,
+        new File([readFileSync(filePath)], filePath, {
+          type: "text/plain",
+        })
+      );
+    }
+  }
+
+  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 || [])])) {
+      if (module.name === "__STATIC_CONTENT_MANIFEST") {
+        // Add the manifest to the form data.
+        formData.set(
+          module.name,
+          new File([module.content], module.name, {
+            type: "text/plain",
+          })
+        );
+        // And then remove it from the modules collection
+        modules = modules?.filter((m) => m !== module);
+      } 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
+        // JS identifier, so we replace all non alphanumeric characters
+        // with an underscore.
+        const name = module.name.replace(/[^a-zA-Z0-9_$]/g, "_");
+        metadataBindings.push({
+          name,
+          type:
+            module.type === "compiled-wasm"
+              ? "wasm_module"
+              : module.type === "text"
+              ? "text_blob"
+              : "data_blob",
+          part: name,
+        });
+
+        // Add the module to the form data.
+        formData.set(
+          name,
+          new File([module.content], module.name, {
+            type:
+              module.type === "compiled-wasm"
+                ? "application/wasm"
+                : module.type === "text"
+                ? "text/plain"
+                : "application/octet-stream",
+          })
+        );
+        // And then remove it from the modules collection
+        modules = modules?.filter((m) => m !== module);
+      }
+    }
+  }
+
+  if (bindings.unsafe) {
+    // @ts-expect-error unsafe bindings don't need to match a specific type here
+    metadataBindings.push(...bindings.unsafe);
+  }
+
+  const metadata: WorkerMetadata = {
+    ...(main.type !== "commonjs"
+      ? { main_module: main.name }
+      : { body_part: main.name }),
+    bindings: metadataBindings,
+    ...(compatibility_date && { compatibility_date }),
+    ...(compatibility_flags && { compatibility_flags }),
+    ...(usage_model && { usage_model }),
+    ...(migrations && { migrations }),
+  };
+
+  formData.set("metadata", JSON.stringify(metadata));
+
+  if (main.type === "commonjs" && modules && modules.length > 0) {
+    throw new TypeError(
+      "More than one module can only be specified when type = 'esm'"
+    );
+  }
+
+  for (const module of [main].concat(modules || [])) {
+    formData.set(
+      module.name,
+      new File([module.content], module.name, {
+        type: toMimeType(module.type ?? main.type ?? "esm"),
+      })
+    );
+  }
+
+  return formData;
+}

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;
+  }
+}