wrangler 0.0.0-e3a458e → 0.0.0-e3c036d7

package/src/config-cache.ts

@@ -0,0 +1,85 @@
+import { mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
+import * as path from "path";
+import { findUpSync } from "find-up";
+import { CI } from "./is-ci";
+import isInteractive from "./is-interactive";
+import { logger } from "./logger";
+
+let cacheMessageShown = false;
+
+let __cacheFolder: string | null | undefined;
+function getCacheFolder() {
+	if (__cacheFolder || __cacheFolder === null) return __cacheFolder;
+
+	const closestNodeModulesDirectory = findUpSync("node_modules", {
+		type: "directory",
+	});
+	__cacheFolder = closestNodeModulesDirectory
+		? path.join(closestNodeModulesDirectory, ".cache/wrangler")
+		: null;
+
+	if (!__cacheFolder) {
+		logger.debug("No folder available to cache configuration");
+	}
+	return __cacheFolder;
+}
+
+const arrayFormatter = new Intl.ListFormat("en", {
+	style: "long",
+	type: "conjunction",
+});
+
+function showCacheMessage(fields: string[], folder: string) {
+	if (!cacheMessageShown && isInteractive() && !CI.isCI()) {
+		if (fields.length > 0) {
+			logger.debug(
+				`Retrieving cached values for ${arrayFormatter.format(
+					fields
+				)} from ${path.relative(process.cwd(), folder)}`
+			);
+			cacheMessageShown = true;
+		}
+	}
+}
+
+export function getConfigCache<T>(fileName: string): Partial<T> {
+	try {
+		const cacheFolder = getCacheFolder();
+		if (cacheFolder) {
+			const configCacheLocation = path.join(cacheFolder, fileName);
+			const configCache = JSON.parse(
+				readFileSync(configCacheLocation, "utf-8")
+			);
+			showCacheMessage(Object.keys(configCache), cacheFolder);
+			return configCache;
+		} else return {};
+	} catch (err) {
+		return {};
+	}
+}
+
+export function saveToConfigCache<T>(
+	fileName: string,
+	newValues: Partial<T>
+): void {
+	const cacheFolder = getCacheFolder();
+	if (cacheFolder) {
+		logger.debug(`Saving to cache: ${JSON.stringify(newValues)}`);
+		const configCacheLocation = path.join(cacheFolder, fileName);
+		const existingValues = getConfigCache(fileName);
+
+		mkdirSync(path.dirname(configCacheLocation), { recursive: true });
+		writeFileSync(
+			configCacheLocation,
+			JSON.stringify({ ...existingValues, ...newValues }, null, 2)
+		);
+	}
+}
+
+export function purgeConfigCaches() {
+	const cacheFolder = getCacheFolder();
+	if (cacheFolder) {
+		rmSync(cacheFolder, { recursive: true, force: true });
+	}
+	__cacheFolder = undefined;
+}

package/src/create-worker-preview.ts

@@ -2,7 +2,51 @@ 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 { parseJSON } from "./parse";
+import { getAccessToken } from "./user/access";
 import type { CfAccount, CfWorkerContext, CfWorkerInit } from "./worker";
+import type { HeadersInit } from "undici";
+
+/**
+ * A Preview Session on the edge
+ */
+export interface CfPreviewSession {
+	/**
+	 * A randomly generated id for this session
+	 */
+	id: string;
+	/**
+	 * A value to use when creating a worker preview under a session
+	 */
+	value: string;
+	/**
+	 * The host where the session 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;
+}
 
 /**
  * A preview mode.
@@ -16,134 +60,188 @@ 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;
+	/**
+	 * 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',
+	 * 	 headers: {
+	 *     "cf-workers-preview-token": (preview)token.value,
+	 *   }
+	 * })
+	 */
+	prewarmUrl: URL;
 }
 
+// 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);
+	});
+}
+
+// URLs are often relative to the zone. Sometimes the base zone
+// will be grey-clouded, and so the host must be swapped out for
+// the worker route host, which is more likely to be orange-clouded
+function switchHost(originalUrl: string, host?: string): URL {
+	const url = new URL(originalUrl);
+	url.hostname = host ?? url.hostname;
+	return url;
+}
 /**
  * Generates a preview session token.
  */
-async function sessionToken(
-  account: CfAccount,
-  ctx: CfWorkerContext
-): 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)
-  ).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}`
-    ),
-  };
-}
+export async function createPreviewSession(
+	account: CfAccount,
+	ctx: CfWorkerContext,
+	abortSignal: AbortSignal
+): Promise<CfPreviewSession> {
+	const { accountId } = account;
+	const initUrl = ctx.zone
+		? `/zones/${ctx.zone}/workers/edge-preview`
+		: `/accounts/${accountId}/workers/subdomain/edge-preview`;
 
-// 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);
-  });
+	const { exchange_url } = await fetchResult<{ exchange_url: string }>(
+		initUrl,
+		undefined,
+		undefined,
+		abortSignal
+	);
+
+	const switchedExchangeUrl = switchHost(exchange_url, ctx.host).toString();
+
+	logger.debug(`-- START EXCHANGE API REQUEST: GET ${switchedExchangeUrl}`);
+	logger.debug("-- END EXCHANGE API REQUEST");
+	const exchangeResponse = await fetch(switchedExchangeUrl, {
+		signal: abortSignal,
+	});
+	const bodyText = await exchangeResponse.text();
+	logger.debug(
+		"-- START EXCHANGE API RESPONSE:",
+		exchangeResponse.statusText,
+		exchangeResponse.status
+	);
+	logger.debug("HEADERS:", JSON.stringify(exchangeResponse.headers, null, 2));
+	logger.debug("RESPONSE:", bodyText);
+	logger.debug("-- END EXCHANGE API RESPONSE");
+
+	const { inspector_websocket, prewarm, token } = parseJSON<{
+		inspector_websocket: string;
+		token: string;
+		prewarm: string;
+	}>(bodyText);
+	const inspector = new URL(inspector_websocket);
+	inspector.searchParams.append("cf_workers_preview_token", token);
+
+	return {
+		id: randomId(),
+		value: token,
+		host: ctx.host ?? inspector.host,
+		inspectorUrl: switchHost(inspector.href, ctx.host),
+		prewarmUrl: switchHost(prewarm, ctx.host),
+	};
 }
 
 /**
  * Creates a preview token.
  */
 async function createPreviewToken(
-  account: CfAccount,
-  worker: CfWorkerInit,
-  ctx: CfWorkerContext
+	account: CfAccount,
+	worker: CfWorkerInit,
+	ctx: CfWorkerContext,
+	session: CfPreviewSession,
+	abortSignal: AbortSignal
 ): Promise<CfPreviewToken> {
-  const { value, host, inspectorUrl, prewarmUrl } = await sessionToken(
-    account,
-    ctx
-  );
-
-  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,
-  };
+	const { value, host, inspectorUrl, prewarmUrl } = session;
+	const { accountId } = account;
+	const scriptId = worker.name || (ctx.zone ? session.id : 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: ctx.routes
+					? // extract all the route patterns
+					  ctx.routes.map((route) => {
+							if (typeof route === "string") {
+								return route;
+							}
+							if (route.custom_domain) {
+								return `${route.pattern}/*`;
+							}
+							return route.pattern;
+					  })
+					: // if there aren't any patterns, then just match on all routes
+					  ["*/*"],
+		  }
+		: { 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,
+			},
+		},
+		undefined,
+		abortSignal
+	);
+
+	return {
+		value: preview_token,
+		host:
+			ctx.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,
+	};
 }
 
 /**
@@ -153,14 +251,43 @@ async function createPreviewToken(
  * const {value, host} = await createWorker(init, acct);
  */
 export async function createWorkerPreview(
-  init: CfWorkerInit,
-  account: CfAccount,
-  ctx: CfWorkerContext
+	init: CfWorkerInit,
+	account: CfAccount,
+	ctx: CfWorkerContext,
+	session: CfPreviewSession,
+	abortSignal: AbortSignal
 ): Promise<CfPreviewToken> {
-  const token = await createPreviewToken(account, init, ctx);
-  const response = await fetch(token.prewarmUrl.href, { method: "POST" });
-  if (!response.ok) {
-    // console.error("worker failed to prewarm: ", response.statusText);
-  }
-  return token;
+	const token = await createPreviewToken(
+		account,
+		init,
+		ctx,
+		session,
+		abortSignal
+	);
+	const accessToken = await getAccessToken(token.prewarmUrl.hostname);
+
+	const headers: HeadersInit = { "cf-workers-preview-token": token.value };
+	if (accessToken) {
+		headers.cookie = `CF_Authorization=${accessToken}`;
+	}
+
+	// fire and forget the prewarm call
+	fetch(token.prewarmUrl.href, {
+		method: "POST",
+		signal: abortSignal,
+		headers,
+	}).then(
+		(response) => {
+			if (!response.ok) {
+				logger.warn("worker failed to prewarm: ", response.statusText);
+			}
+		},
+		(err) => {
+			if ((err as { code: string }).code !== "ABORT_ERR") {
+				logger.warn("worker failed to prewarm: ", err);
+			}
+		}
+	);
+
+	return token;
 }