wrangler 0.0.0-ece06ea → 0.0.0-ed4f2ef

package/src/create-worker-preview.ts

@@ -0,0 +1,173 @@
+import { URL } from "node:url";
+import { fetch } from "undici";
+import { fetchResult } from "./cfetch";
+import { createWorkerUploadForm } from "./create-worker-upload-form";
+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, token } = (await (
+    await fetch(exchange_url, { signal: abortSignal })
+  ).json()) as { inspector_websocket: string; token: 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(
+      `https://${host}/cdn-cgi/workers/preview/prewarm?${query}`
+    ),
+  };
+}
+
+// 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,
+  });
+  if (!response.ok) {
+    // console.error("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;
+}