wrangler 0.0.0-e978986 → 0.0.0-e9e9872

package/src/config-cache.ts

@@ -1,45 +1,83 @@
 import { mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
-import { dirname, join } from "path";
+import * as path from "path";
+import { findUpSync } from "find-up";
+import isInteractive from "./is-interactive";
+import { logger } from "./logger";
 
 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 });
-};
+let __cacheFolder: string | null;
+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()) {
+		if (fields.length > 0) {
+			logger.log(
+				`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 });
+	}
+}

package/src/create-worker-preview.ts

@@ -5,6 +5,46 @@ import { createWorkerUploadForm } from "./create-worker-upload-form";
 import { logger } from "./logger";
 import type { CfAccount, CfWorkerContext, CfWorkerInit } from "./worker";
 
+/**
+ * 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.
  *
@@ -17,145 +57,160 @@ 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);
+	});
 }
 
 /**
  * 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`;
+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`;
 
-  const { exchange_url } = await fetchResult<{ exchange_url: string }>(
-    initUrl,
-    undefined,
-    undefined,
-    abortSignal
-  );
-  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}`;
+	const { exchange_url } = await fetchResult<{ exchange_url: string }>(
+		initUrl,
+		undefined,
+		undefined,
+		abortSignal
+	);
+	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);
-  });
+	return {
+		id: randomId(),
+		value: token,
+		host,
+		inspectorUrl: new URL(`${inspector_websocket}?${query}`),
+		prewarmUrl: new URL(prewarm),
+	};
 }
 
 /**
  * Creates a preview token.
  */
 async function createPreviewToken(
-  account: CfAccount,
-  worker: CfWorkerInit,
-  ctx: CfWorkerContext,
-  abortSignal: AbortSignal
+	account: CfAccount,
+	worker: CfWorkerInit,
+	ctx: CfWorkerContext,
+	session: CfPreviewSession,
+	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 { 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: ["*/*"] } // TODO: should we support routes here? how?
-    : { workers_dev: true };
+	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 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
-  );
+	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.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,
+	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,
-  };
+		inspectorUrl,
+		prewarmUrl,
+	};
 }
 
 /**
@@ -165,21 +220,36 @@ async function createPreviewToken(
  * const {value, host} = await createWorker(init, acct);
  */
 export async function createWorkerPreview(
-  init: CfWorkerInit,
-  account: CfAccount,
-  ctx: CfWorkerContext,
-  abortSignal: AbortSignal
+	init: CfWorkerInit,
+	account: CfAccount,
+	ctx: CfWorkerContext,
+	session: CfPreviewSession,
+	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;
+	const token = await createPreviewToken(
+		account,
+		init,
+		ctx,
+		session,
+		abortSignal
+	);
+	// fire and forget the prewarm call
+	fetch(token.prewarmUrl.href, {
+		method: "POST",
+		signal: abortSignal,
+		headers: {
+			"cf-workers-preview-token": token.value,
+		},
+	}).then(
+		(response) => {
+			if (!response.ok) {
+				logger.warn("worker failed to prewarm: ", response.statusText);
+			}
+		},
+		(err) => {
+			logger.warn("worker failed to prewarm: ", err);
+		}
+	);
+
+	return token;
 }