wrangler 2.0.25 → 2.0.28

package/src/pages/index.tsx

@@ -3,6 +3,7 @@
 import * as Build from "./build";
 import * as Deployments from "./deployments";
 import * as Dev from "./dev";
+import * as Functions from "./functions";
 import * as Projects from "./projects";
 import * as Publish from "./publish";
 import * as Upload from "./upload";
@@ -19,66 +20,75 @@ process.on("SIGTERM", () => {
 });
 
 export const pages: BuilderCallback<unknown, unknown> = (yargs) => {
-	return yargs
-		.command(
-			"dev [directory] [-- command..]",
-			"🧑‍💻 Develop your full-stack Pages application locally",
-			Dev.Options,
-			Dev.Handler
-		)
-		.command("functions", false, (yargs) =>
-			// we hide this command from help output because
-			// it's not meant to be used directly right now
-			{
-				return yargs.command(
-					"build [directory]",
-					"Compile a folder of Cloudflare Pages Functions into a single Worker",
-					Build.Options,
-					Build.Handler
-				);
-			}
-		)
-		.command("project", "⚡️ Interact with your Pages projects", (yargs) =>
-			yargs
-				.command(
-					"list",
-					"List your Cloudflare Pages projects",
-					Projects.ListOptions,
-					Projects.ListHandler
-				)
-				.command(
-					"create [project-name]",
-					"Create a new Cloudflare Pages project",
-					Projects.CreateOptions,
-					Projects.CreateHandler
-				)
-				.command("upload [directory]", false, Upload.Options, Upload.Handler)
-				.epilogue(pagesBetaWarning)
-		)
-		.command(
-			"deployment",
-			"🚀 Interact with the deployments of a project",
-			(yargs) =>
+	return (
+		yargs
+			.command(
+				"dev [directory] [-- command..]",
+				"🧑‍💻 Develop your full-stack Pages application locally",
+				Dev.Options,
+				Dev.Handler
+			)
+			/**
+			 * `wrangler pages functions` is meant for internal use only for now,
+			 * so let's hide this command from the help output
+			 */
+			.command("functions", false, (yargs) =>
+				yargs
+					.command(
+						"build [directory]",
+						"Compile a folder of Cloudflare Pages Functions into a single Worker",
+						Build.Options,
+						Build.Handler
+					)
+					.command(
+						"optimize-routes [routesPath] [outputRoutesPath]",
+						"Consolidate and optimize the route paths declared in _routes.json",
+						Functions.OptimizeRoutesOptions,
+						Functions.OptimizeRoutesHandler
+					)
+			)
+			.command("project", "⚡️ Interact with your Pages projects", (yargs) =>
 				yargs
 					.command(
 						"list",
-						"List deployments in your Cloudflare Pages project",
-						Deployments.ListOptions,
-						Deployments.ListHandler
+						"List your Cloudflare Pages projects",
+						Projects.ListOptions,
+						Projects.ListHandler
 					)
 					.command(
-						"create [directory]",
-						"🆙 Publish a directory of static assets as a Pages deployment",
-						Publish.Options,
-						Publish.Handler
+						"create [project-name]",
+						"Create a new Cloudflare Pages project",
+						Projects.CreateOptions,
+						Projects.CreateHandler
 					)
+					.command("upload [directory]", false, Upload.Options, Upload.Handler)
 					.epilogue(pagesBetaWarning)
-		)
-		.command(
-			"publish [directory]",
-			"🆙 Publish a directory of static assets as a Pages deployment",
-			Publish.Options,
-			Publish.Handler
-		)
-		.epilogue(pagesBetaWarning);
+			)
+			.command(
+				"deployment",
+				"🚀 Interact with the deployments of a project",
+				(yargs) =>
+					yargs
+						.command(
+							"list",
+							"List deployments in your Cloudflare Pages project",
+							Deployments.ListOptions,
+							Deployments.ListHandler
+						)
+						.command(
+							"create [directory]",
+							"🆙 Publish a directory of static assets as a Pages deployment",
+							Publish.Options,
+							Publish.Handler
+						)
+						.epilogue(pagesBetaWarning)
+			)
+			.command(
+				"publish [directory]",
+				"🆙 Publish a directory of static assets as a Pages deployment",
+				Publish.Options,
+				Publish.Handler
+			)
+			.epilogue(pagesBetaWarning)
+	);
 };

package/src/pages/publish.tsx

@@ -16,6 +16,7 @@ import * as metrics from "../metrics";
 import { requireAuth } from "../user";
 import { buildFunctions } from "./build";
 import { PAGES_CONFIG_CACHE_FILENAME } from "./constants";
+import { FunctionsNoRoutesError, getFunctionsNoRoutesWarning } from "./errors";
 import {
 	isRoutesJSONSpec,
 	optimizeRoutesJSONSpec,
@@ -256,18 +257,24 @@ export const Handler = async ({
 	const routesOutputPath = join(tmpdir(), `_routes-${Math.random()}.json`);
 	if (existsSync(functionsDirectory)) {
 		const outfile = join(tmpdir(), `./functionsWorker-${Math.random()}.js`);
-
-		await new Promise((resolve) =>
-			buildFunctions({
+		try {
+			await buildFunctions({
 				outfile,
 				functionsDirectory,
-				onEnd: () => resolve(null),
+				onEnd: () => {},
 				buildOutputDirectory: dirname(outfile),
 				routesOutputPath,
-			})
-		);
-
-		builtFunctions = readFileSync(outfile, "utf-8");
+			});
+			builtFunctions = readFileSync(outfile, "utf-8");
+		} catch (e) {
+			if (e instanceof FunctionsNoRoutesError) {
+				logger.warn(
+					getFunctionsNoRoutesWarning(functionsDirectory, "skipping")
+				);
+			} else {
+				throw e;
+			}
+		}
 	}
 
 	const manifest = await upload({ directory, accountId, projectName });
@@ -305,32 +312,34 @@ export const Handler = async ({
 		_redirects = readFileSync(join(directory, "_redirects"), "utf-8");
 	} catch {}
 
-	try {
-		_routes = readFileSync(routesOutputPath, "utf-8");
-	} catch {}
-
 	try {
 		_workerJS = readFileSync(join(directory, "_worker.js"), "utf-8");
 	} catch {}
 
 	if (_headers) {
 		formData.append("_headers", new File([_headers], "_headers"));
+		logger.log(`✨ Uploading _headers`);
 	}
 
 	if (_redirects) {
 		formData.append("_redirects", new File([_redirects], "_redirects"));
-	}
-
-	if (_routes) {
-		formData.append("_routes.json", new File([_routes], "_routes.json"));
+		logger.log(`✨ Uploading _redirects`);
 	}
 
 	if (builtFunctions) {
 		formData.append("_worker.js", new File([builtFunctions], "_worker.js"));
+		logger.log(`✨ Uploading Functions`);
+		try {
+			_routes = readFileSync(routesOutputPath, "utf-8");
+			if (_routes) {
+				formData.append("_routes.json", new File([_routes], "_routes.json"));
+			}
+		} catch {}
 	} else if (_workerJS) {
 		// Advanced Mode
 		// https://developers.cloudflare.com/pages/platform/functions/#advanced-mode
 		formData.append("_worker.js", new File([_workerJS], "_worker.js"));
+		logger.log(`✨ Uploading _worker.js`);
 
 		try {
 			// In advanced mode, developers can specify a custom _routes.json
@@ -348,6 +357,8 @@ export const Handler = async ({
 			}
 
 			_routes = JSON.stringify(optimizeRoutesJSONSpec(advancedModeRoutes));
+			formData.append("_routes.json", new File([_routes], "_routes.json"));
+			logger.log(`✨ Uploading _routes.json`);
 
 			logger.warn(
 				`🚨 _routes.json is an experimental feature and is subject to change. Don't use unless you really must!`

package/src/proxy.ts

@@ -177,6 +177,7 @@ export function usePreviewServer({
 		const cleanupListeners: (() => void)[] = [];
 
 		// create a ClientHttp2Session
+		logger.debug("PREVIEW URL:", `https://${previewToken.host}`);
 		const remote = connect(`https://${previewToken.host}`);
 		cleanupListeners.push(() => remote.destroy());
 
@@ -221,6 +222,15 @@ export function usePreviewServer({
 				}
 			}
 			const request = message.pipe(remote.request(headers));
+			logger.debug(
+				"WORKER REQUEST",
+				new Date().toLocaleTimeString(),
+				method,
+				url
+			);
+			logger.debug("HEADERS", JSON.stringify(headers, null, 2));
+			logger.debug("PREVIEW TOKEN", previewToken);
+
 			request.on("response", (responseHeaders) => {
 				const status = responseHeaders[":status"] ?? 500;
 

package/src/publish.ts

@@ -36,6 +36,8 @@ type Props = {
 	compatibilityDate: string | undefined;
 	compatibilityFlags: string[] | undefined;
 	assetPaths: AssetPaths | undefined;
+	vars: Record<string, string> | undefined;
+	defines: Record<string, string> | undefined;
 	triggers: string[] | undefined;
 	routes: string[] | undefined;
 	legacyEnv: boolean | undefined;
@@ -382,7 +384,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 						tsconfig: props.tsconfig ?? config.tsconfig,
 						minify,
 						nodeCompat,
-						define: config.define,
+						define: { ...config.define, ...props.defines },
 						checkFetch: false,
 						assets: config.assets && {
 							...config.assets,
@@ -430,7 +432,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 					? { binding: "__STATIC_CONTENT", id: assets.namespace }
 					: []
 			),
-			vars: config.vars,
+			vars: { ...config.vars, ...props.vars },
 			wasm_modules: config.wasm_modules,
 			text_blobs: {
 				...config.text_blobs,
@@ -443,7 +445,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 			durable_objects: config.durable_objects,
 			r2_buckets: config.r2_buckets,
 			services: config.services,
-			worker_namespaces: config.worker_namespaces,
+			dispatch_namespaces: config.dispatch_namespaces,
 			logfwdr: config.logfwdr,
 			unsafe: config.unsafe?.bindings,
 		};
@@ -470,6 +472,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 			compatibility_flags:
 				props.compatibilityFlags ?? config.compatibility_flags,
 			usage_model: config.usage_model,
+			keep_bindings: true,
 		};
 
 		void printBundleSize(
@@ -482,7 +485,19 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 			kv_namespaces: config.kv_namespaces,
 			text_blobs: config.text_blobs,
 		};
-		printBindings(withoutStaticAssets);
+
+		// mask anything that was overridden in cli args
+		// so that we don't log potential secrets into the terminal
+		const maskedVars = { ...withoutStaticAssets.vars };
+		for (const key of Object.keys(maskedVars)) {
+			if (maskedVars[key] !== config.vars[key]) {
+				// This means it was overridden in cli args
+				// so let's mask it
+				maskedVars[key] = "(hidden)";
+			}
+		}
+
+		printBindings({ ...withoutStaticAssets, vars: maskedVars });
 
 		if (!props.dryRun) {
 			// Upload the script so it has time to propagate.

package/src/r2.ts

@@ -33,10 +33,10 @@ export async function createR2Bucket(
 	accountId: string,
 	bucketName: string
 ): Promise<void> {
-	return await fetchResult<void>(
-		`/accounts/${accountId}/r2/buckets/${bucketName}`,
-		{ method: "PUT" }
-	);
+	return await fetchResult<void>(`/accounts/${accountId}/r2/buckets`, {
+		method: "POST",
+		body: JSON.stringify({ name: bucketName }),
+	});
 }
 
 /**

package/src/tail/filters.ts

@@ -58,13 +58,14 @@ type OutcomeFilter = {
 
 /**
  * There are five possible outcomes we can get, three of which
- * (exception, exceededCpu, and unknown) are considered errors
+ * (exception, exceededCpu, exceededMemory, and unknown) are considered errors
  */
 export type Outcome =
 	| "ok"
 	| "canceled"
 	| "exception"
 	| "exceededCpu"
+	| "exceededMemory"
 	| "unknown";
 
 /**
@@ -210,6 +211,7 @@ function parseOutcome(
 			case "error":
 				outcomes.add("exception");
 				outcomes.add("exceededCpu");
+				outcomes.add("exceededMemory");
 				outcomes.add("unknown");
 				break;
 

package/src/tail/printing.ts

@@ -96,6 +96,8 @@ function prettifyOutcome(outcome: Outcome): string {
 			return "Canceled";
 		case "exceededCpu":
 			return "Exceeded CPU Limit";
+		case "exceededMemory":
+			return "Exceeded Memory Limit";
 		case "exception":
 			return "Exception Thrown";
 		case "unknown":

package/src/user/user.tsx

@@ -224,6 +224,7 @@ import {
 	saveToConfigCache,
 } from "../config-cache";
 import { getGlobalWranglerConfigPath } from "../global-wrangler-config-path";
+import { CI } from "../is-ci";
 import isInteractive from "../is-interactive";
 import { logger } from "../logger";
 import openInBrowser from "../open-in-browser";
@@ -878,10 +879,11 @@ type LoginProps = {
 export async function loginOrRefreshIfRequired(): Promise<boolean> {
 	// TODO: if there already is a token, then try refreshing
 	// TODO: ask permission before opening browser
+	const { isCI } = CI;
 	if (!getAPIToken()) {
 		// Not logged in.
 		// If we are not interactive, we cannot ask the user to login
-		return isInteractive() && (await login());
+		return isInteractive() && !isCI() && (await login());
 	} else if (isAccessTokenExpired()) {
 		// We're logged in, but the refresh token seems to have expired,
 		// so let's try to refresh it
@@ -891,7 +893,7 @@ export async function loginOrRefreshIfRequired(): Promise<boolean> {
 			return true;
 		} else {
 			// If the refresh token isn't valid, then we ask the user to login again
-			return isInteractive() && (await login());
+			return isInteractive() && !isCI() && (await login());
 		}
 	} else {
 		return true;
@@ -1088,7 +1090,7 @@ export async function getAccountId(): Promise<string | undefined> {
 		return accounts[0].id;
 	}
 
-	if (isInteractive()) {
+	if (isInteractive() && !CI.isCI()) {
 		const account = await new Promise<{ id: string; name: string }>(
 			(resolve, reject) => {
 				const { unmount } = render(
@@ -1128,7 +1130,7 @@ export async function requireAuth(config: {
 }): Promise<string> {
 	const loggedIn = await loginOrRefreshIfRequired();
 	if (!loggedIn) {
-		if (!isInteractive()) {
+		if (!isInteractive() || CI.isCI()) {
 			throw new Error(
 				"In a non-interactive environment, it's necessary to set a CLOUDFLARE_API_TOKEN environment variable for wrangler to work. Please go to https://developers.cloudflare.com/api/tokens/create/ for instructions on how to create an api token, and assign its value to CLOUDFLARE_API_TOKEN."
 			);

package/src/whoami.tsx

@@ -1,6 +1,6 @@
 import { Text, render } from "ink";
 import Table from "ink-table";
-import React from "react";
+import React, { Fragment } from "react";
 import { fetchListResult, fetchResult } from "./cfetch";
 import { logger } from "./logger";
 import { getAPIToken, getAuthFromEnv, getScopes } from "./user";
@@ -64,12 +64,12 @@ function Permissions(props: {
 					and re-login.
 				</Text>
 				<Text>Scope (Access)</Text>
-				{permissions.map(([type, name]) => (
-					<>
+				{permissions.map(([scope, access], index) => (
+					<Fragment key={`${scope}${index}`}>
 						<Text>
-							- {type} {name && `(${name})`}
+							- {scope} {access && `(${access})`}
 						</Text>
-					</>
+					</Fragment>
 				))}
 			</>
 		) : null

package/src/worker.ts

@@ -122,7 +122,7 @@ interface CfService {
 	environment?: string;
 }
 
-interface CfWorkerNamespace {
+interface CfDispatchNamespace {
 	binding: string;
 	namespace: string;
 }
@@ -183,7 +183,7 @@ export interface CfWorkerInit {
 		durable_objects: { bindings: CfDurableObject[] } | undefined;
 		r2_buckets: CfR2Bucket[] | undefined;
 		services: CfService[] | undefined;
-		worker_namespaces: CfWorkerNamespace[] | undefined;
+		dispatch_namespaces: CfDispatchNamespace[] | undefined;
 		logfwdr: CfLogfwdr | undefined;
 		unsafe: CfUnsafeBinding[] | undefined;
 	};
@@ -191,6 +191,7 @@ export interface CfWorkerInit {
 	compatibility_date: string | undefined;
 	compatibility_flags: string[] | undefined;
 	usage_model: "bundled" | "unbound" | undefined;
+	keep_bindings: boolean | undefined;
 }
 
 export interface CfWorkerContext {

package/src/zones.ts

@@ -74,3 +74,94 @@ export async function getZoneIdFromHost(host: string): Promise<string> {
 
 	throw new Error(`Could not find zone for ${host}`);
 }
+
+/**
+ * An object holding information about an assigned worker route, returned from the API
+ */
+interface WorkerRoute {
+	id: string;
+	pattern: string;
+	script: string;
+}
+
+/**
+ * Given a zone within the user's account, return a list of all assigned worker routes
+ */
+export async function getRoutesForZone(zone: string): Promise<WorkerRoute[]> {
+	const routes = await fetchListResult<WorkerRoute>(
+		`/zones/${zone}/workers/routes`
+	);
+	return routes;
+}
+
+/**
+ * Given two strings, return the levenshtein distance between them as a simple text match heuristic
+ */
+function distanceBetween(a: string, b: string, cache = new Map()): number {
+	if (cache.has(`${a}|${b}`)) {
+		return cache.get(`${a}|${b}`);
+	}
+	let result;
+	if (b == "") {
+		result = a.length;
+	} else if (a == "") {
+		result = b.length;
+	} else if (a[0] === b[0]) {
+		result = distanceBetween(a.slice(1), b.slice(1), cache);
+	} else {
+		result =
+			1 +
+			Math.min(
+				distanceBetween(a.slice(1), b, cache),
+				distanceBetween(a, b.slice(1), cache),
+				distanceBetween(a.slice(1), b.slice(1), cache)
+			);
+	}
+	cache.set(`${a}|${b}`, result);
+	return result;
+}
+
+/**
+ * Given an invalid route, sort the valid routes by closeness to the invalid route (levenstein distance)
+ */
+export function findClosestRoute(
+	providedRoute: string,
+	assignedRoutes: WorkerRoute[]
+): WorkerRoute[] {
+	return assignedRoutes.sort((a, b) => {
+		const distanceA = distanceBetween(providedRoute, a.pattern);
+		const distanceB = distanceBetween(providedRoute, b.pattern);
+		return distanceA - distanceB;
+	});
+}
+
+/**
+ * Given a route (must be assigned and within the correct zone), return the name of the worker assigned to it
+ */
+export async function getWorkerForZone(worker: string) {
+	const zone = await getZoneForRoute(worker);
+	if (!zone) {
+		throw new Error(
+			`The route '${worker}' is not part of one of your zones. Either add this zone from the Cloudflare dashboard, or try using a route within one of your existing zones.`
+		);
+	}
+	const routes = await getRoutesForZone(zone.id);
+
+	const scriptName = routes.find((route) => route.pattern === worker)?.script;
+
+	if (!scriptName) {
+		const closestRoute = findClosestRoute(worker, routes)?.[0];
+
+		if (!closestRoute) {
+			throw new Error(
+				`The route '${worker}' has no workers assigned. You can assign a worker to it from wrangler.toml or the Cloudflare dashboard`
+			);
+		} else {
+			throw new Error(
+				`The route '${worker}' has no workers assigned. Did you mean to tail the route '${closestRoute.pattern}'?`
+			);
+		}
+	}
+
+	return scriptName;
+}

package/templates/pages-template-plugin.ts

@@ -1,5 +1,8 @@
 import { match } from "path-to-regexp";
 
+//note: this explicitly does not include the * character, as pages requires this
+const escapeRegex = /[.+?^${}()|[\]\\]/g;
+
 type HTTPMethod =
 	| "HEAD"
 	| "OPTIONS"
@@ -67,8 +70,13 @@ function* executeRequest(request: Request, relativePathname: string) {
 			continue;
 		}
 
-		const routeMatcher = match(route.routePath, { end: false });
-		const mountMatcher = match(route.mountPath, { end: false });
+		// replaces with "\\$&", this prepends a backslash to the matched string, e.g. "[" becomes "\["
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
 		const matchResult = routeMatcher(relativePathname);
 		const mountMatchResult = mountMatcher(relativePathname);
 		if (matchResult && mountMatchResult) {
@@ -88,8 +96,12 @@ function* executeRequest(request: Request, relativePathname: string) {
 			continue;
 		}
 
-		const routeMatcher = match(route.routePath, { end: true });
-		const mountMatcher = match(route.mountPath, { end: false });
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: true,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
 		const matchResult = routeMatcher(relativePathname);
 		const mountMatchResult = mountMatcher(relativePathname);
 		if (matchResult && mountMatchResult && route.modules.length) {

package/templates/pages-template-worker.ts

@@ -1,5 +1,8 @@
 import { match } from "path-to-regexp";
 
+//note: this explicitly does not include the * character, as pages requires this
+const escapeRegex = /[.+?^${}()|[\]\\]/g;
+
 type HTTPMethod =
 	| "HEAD"
 	| "OPTIONS"
@@ -61,8 +64,13 @@ function* executeRequest(request: Request) {
 			continue;
 		}
 
-		const routeMatcher = match(route.routePath, { end: false });
-		const mountMatcher = match(route.mountPath, { end: false });
+		// replaces with "\\$&", this prepends a backslash to the matched string, e.g. "[" becomes "\["
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
 		const matchResult = routeMatcher(requestPath);
 		const mountMatchResult = mountMatcher(requestPath);
 		if (matchResult && mountMatchResult) {
@@ -81,9 +89,12 @@ function* executeRequest(request: Request) {
 		if (route.method && route.method !== request.method) {
 			continue;
 		}
-
-		const routeMatcher = match(route.routePath, { end: true });
-		const mountMatcher = match(route.mountPath, { end: false });
+		const routeMatcher = match(route.routePath.replace(escapeRegex, "\\$&"), {
+			end: true,
+		});
+		const mountMatcher = match(route.mountPath.replace(escapeRegex, "\\$&"), {
+			end: false,
+		});
 		const matchResult = routeMatcher(requestPath);
 		const mountMatchResult = mountMatcher(requestPath);
 		if (matchResult && mountMatchResult && route.modules.length) {

package/templates/service-bindings-module-facade.js

@@ -16,20 +16,23 @@ export default {
 			if (details) {
 				facadeEnv[name] = {
 					async fetch(...reqArgs) {
+						const reqFromArgs = new Request(...reqArgs);
 						if (details.headers) {
-							const req = new Request(...reqArgs);
 							for (const [key, value] of Object.entries(details.headers)) {
 								// In remote mode, you need to add a couple of headers
 								// to make sure it's talking to the 'dev' preview session
 								// (much like wrangler dev already does via proxy.ts)
-								req.headers.set(key, value);
+								reqFromArgs.headers.set(key, value);
 							}
-							return env[name].fetch(req);
+							return env[name].fetch(reqFromArgs);
 						}
-						const url = `${details.protocol}://${details.host}${
-							details.port ? `:${details.port}` : ""
-						}`;
-						const request = new Request(url, ...reqArgs);
+
+						const url = new URL(reqFromArgs.url);
+						url.protocol = details.protocol;
+						url.host = details.host;
+						if (details.port !== undefined) url.port = details.port;
+
+						const request = new Request(url.toString(), reqFromArgs);
 						return fetch(request);
 					},
 				};