wrangler 2.0.23 → 2.0.26

package/src/__tests__/whoami.test.tsx

@@ -205,11 +205,12 @@ describe("WhoAmI component", () => {
 		);
 	});
 
-	it("should display the user's email and accounts", async () => {
+	it("should display the user's email, accounts and OAuth scopes", async () => {
 		const user: UserInfo = {
 			authType: "OAuth Token",
 			apiToken: "some-oauth-token",
 			email: "user@example.com",
+			tokenPermissions: ["scope1:read", "scope2:write", "scope3"],
 			accounts: [
 				{ name: "Account One", id: "account-1" },
 				{ name: "Account Two", id: "account-2" },
@@ -226,5 +227,63 @@ describe("WhoAmI component", () => {
 		expect(lastFrame()).toMatch(/Account One .+ account-1/);
 		expect(lastFrame()).toMatch(/Account Two .+ account-2/);
 		expect(lastFrame()).toMatch(/Account Three .+ account-3/);
+		expect(lastFrame()).toContain(
+			"Token Permissions: If scopes are missing, you may need to logout and re-login."
+		);
+		expect(lastFrame()).toContain("- scope1 (read)");
+		expect(lastFrame()).toContain("- scope2 (write)");
+		expect(lastFrame()).toContain("- scope3");
+	});
+
+	// For the case where the cache hasn't updated to include the scopes array
+	it("should display the user's email and accounts, but no OAuth scopes if none provided", async () => {
+		const user: UserInfo = {
+			authType: "OAuth Token",
+			apiToken: "some-oauth-token",
+			email: "user@example.com",
+			tokenPermissions: undefined,
+			accounts: [
+				{ name: "Account One", id: "account-1" },
+				{ name: "Account Two", id: "account-2" },
+				{ name: "Account Three", id: "account-3" },
+			],
+		};
+
+		const { lastFrame } = render(<WhoAmI user={user}></WhoAmI>);
+
+		expect(lastFrame()).toContain(
+			"You are logged in with an OAuth Token, associated with the email 'user@example.com'!"
+		);
+		expect(lastFrame()).toMatch(/Account Name .+ Account ID/);
+		expect(lastFrame()).toMatch(/Account One .+ account-1/);
+		expect(lastFrame()).toMatch(/Account Two .+ account-2/);
+		expect(lastFrame()).toMatch(/Account Three .+ account-3/);
+	});
+
+	it("should display the user's email, accounts and link to view token permissions for non-OAuth tokens", async () => {
+		const user: UserInfo = {
+			authType: "API Token",
+			apiToken: "some-api-token",
+			email: "user@example.com",
+			tokenPermissions: undefined,
+			accounts: [
+				{ name: "Account One", id: "account-1" },
+				{ name: "Account Two", id: "account-2" },
+				{ name: "Account Three", id: "account-3" },
+			],
+		};
+
+		const { lastFrame } = render(<WhoAmI user={user}></WhoAmI>);
+
+		expect(lastFrame()).toContain(
+			"You are logged in with an API Token, associated with the email 'user@example.com'!"
+		);
+		expect(lastFrame()).toMatch(/Account Name .+ Account ID/);
+		expect(lastFrame()).toMatch(/Account One .+ account-1/);
+		expect(lastFrame()).toMatch(/Account Two .+ account-2/);
+		expect(lastFrame()).toMatch(/Account Three .+ account-3/);
+		expect(lastFrame()).toContain(
+			"To see token permissions visit https://dash.cloudflare.com/profile/api-tokens"
+		);
 	});
 });

package/src/api/dev.ts

@@ -8,6 +8,7 @@ interface DevOptions {
 	env?: string;
 	ip?: string;
 	port?: number;
+	inspectorPort?: number;
 	localProtocol?: "http" | "https";
 	assets?: string;
 	site?: string;
@@ -15,6 +16,7 @@ interface DevOptions {
 	siteExclude?: string[];
 	nodeCompat?: boolean;
 	compatibilityDate?: string;
+	compatibilityFlags?: string[];
 	experimentalEnableLocalPersistence?: boolean;
 	liveReload?: boolean;
 	watch?: boolean;
@@ -32,6 +34,11 @@ interface DevOptions {
 		script_name?: string | undefined;
 		environment?: string | undefined;
 	}[];
+	r2?: {
+		binding: string;
+		bucket_name: string;
+		preview_bucket_name?: string;
+	}[];
 	showInteractiveDevSession?: boolean;
 	logLevel?: "none" | "error" | "log" | "warn" | "debug";
 	logPrefix?: string;

package/src/bundle.ts

@@ -1,13 +1,14 @@
 import assert from "node:assert";
 import * as fs from "node:fs";
 import { builtinModules } from "node:module";
-import * as os from "node:os";
 import * as path from "node:path";
 import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
 import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
 import * as esbuild from "esbuild";
+import tmp from "tmp-promise";
 import createModuleCollector from "./module-collection";
 import type { Config } from "./config";
+import type { WorkerRegistry } from "./dev-registry";
 import type { Entry } from "./entry";
 import type { CfModule } from "./worker";
 
@@ -16,8 +17,15 @@ type BundleResult = {
 	resolvedEntryPointPath: string;
 	bundleType: "esm" | "commonjs";
 	stop: (() => void) | undefined;
+	sourceMapPath?: string | undefined;
 };
 
+type StaticAssetsConfig =
+	| (Config["assets"] & {
+			bypassCache: boolean | undefined;
+	  })
+	| undefined;
+
 /**
  * Searches for any uses of node's builtin modules, and throws an error if it
  * finds anything. This plugin is only used when nodeCompat is not enabled.
@@ -53,6 +61,7 @@ export async function bundleWorker(
 	destination: string,
 	options: {
 		serveAssetsFromWorker: boolean;
+		assets: StaticAssetsConfig;
 		jsxFactory: string | undefined;
 		jsxFragment: string | undefined;
 		rules: Config["rules"];
@@ -62,6 +71,9 @@ export async function bundleWorker(
 		nodeCompat: boolean | undefined;
 		define: Config["define"];
 		checkFetch: boolean;
+		services: Config["services"];
+		workerDefinitions: WorkerRegistry | undefined;
+		firstPartyWorkerDevFacade: boolean | undefined;
 	}
 ): Promise<BundleResult> {
 	const {
@@ -74,7 +86,17 @@ export async function bundleWorker(
 		minify,
 		nodeCompat,
 		checkFetch,
+		assets,
+		workerDefinitions,
+		services,
+		firstPartyWorkerDevFacade,
 	} = options;
+
+	// We create a temporary directory for any oneoff files we
+	// need to create. This is separate from the main build
+	// directory (`destination`).
+	const tmpDir = await tmp.dir({ unsafeCleanup: true });
+
 	const entryDirectory = path.dirname(entry.file);
 	const moduleCollector = createModuleCollector({
 		wrangler1xlegacyModuleReferences: {
@@ -98,15 +120,11 @@ export async function bundleWorker(
 	// `checked-fetch.js` to do so. However, with yarn 3 style pnp,
 	// we need to extract that file to an accessible place before injecting
 	// it in, hence this code here.
-	const osTempDir = os.tmpdir();
-	const checkedFetchFileToInject = path.join(
-		osTempDir,
-		"--temp-wrangler-files--",
-		"checked-fetch.js"
-	);
+
+	const checkedFetchFileToInject = path.join(tmpDir.path, "checked-fetch.js");
 
 	if (checkFetch && !fs.existsSync(checkedFetchFileToInject)) {
-		fs.mkdirSync(path.join(osTempDir, "--temp-wrangler-files--"), {
+		fs.mkdirSync(tmpDir.path, {
 			recursive: true,
 		});
 		fs.writeFileSync(
@@ -114,12 +132,58 @@ export async function bundleWorker(
 			fs.readFileSync(path.resolve(__dirname, "../templates/checked-fetch.js"))
 		);
 	}
-	// TODO: we need to have similar logic like above for other files
-	// like the static asset facade, and other middleware that we
-	// plan on injecting/referencing.
+
+	// At this point, we take the opportunity to "wrap" any input workers
+	// with any extra functionality we may want to add. This is done by
+	// passing the entry point through a pipeline of functions that return
+	// a new entry point, that we call "middleware" or "facades".
+	// Look at implementations of these functions to learn more.
+
+	type MiddlewareFn = (arg0: Entry) => Promise<Entry>;
+	const middleware: (false | undefined | MiddlewareFn)[] = [
+		// serve static assets
+		serveAssetsFromWorker &&
+			((currentEntry: Entry) => {
+				return applyStaticAssetFacade(currentEntry, tmpDir.path, assets);
+			}),
+		// format errors nicely
+		// We use an env var here because we don't actually
+		// want to expose this to the user. It's only used internally to
+		// experiment with middleware as a teaching exercise.
+		process.env.FORMAT_WRANGLER_ERRORS === "true" &&
+			((currentEntry: Entry) => {
+				return applyFormatDevErrorsFacade(currentEntry, tmpDir.path);
+			}),
+		// bind to other dev instances/service bindings
+		workerDefinitions &&
+			Object.keys(workerDefinitions).length > 0 &&
+			services &&
+			services.length > 0 &&
+			((currentEntry: Entry) => {
+				return applyMultiWorkerDevFacade(
+					currentEntry,
+					tmpDir.path,
+					services,
+					workerDefinitions
+				);
+			}),
+		// Simulate internal environment when using first party workers in dev
+		firstPartyWorkerDevFacade === true &&
+			((currentEntry: Entry) => {
+				return applyFirstPartyWorkerDevFacade(currentEntry, tmpDir.path);
+			}),
+	].filter(Boolean);
+
+	let inputEntry = entry;
+
+	for (const middlewareFn of middleware as MiddlewareFn[]) {
+		inputEntry = await middlewareFn(inputEntry);
+	}
+
+	// At this point, inputEntry points to the entry point we want to build.
 
 	const result = await esbuild.build({
-		...getEntryPoint(entry.file, serveAssetsFromWorker),
+		entryPoints: [inputEntry.file],
 		bundle: true,
 		absWorkingDir: entry.directory,
 		outdir: destination,
@@ -128,6 +192,9 @@ export async function bundleWorker(
 		format: entry.format === "modules" ? "esm" : "iife",
 		target: "es2020",
 		sourcemap: true,
+		// Include a reference to the output folder in the sourcemap.
+		// This is omitted by default, but we need it to properly resolve source paths in error output.
+		sourceRoot: destination,
 		minify,
 		metafile: true,
 		conditions: ["worker", "browser"],
@@ -177,6 +244,10 @@ export async function bundleWorker(
 	const entryPointExports = entryPointOutputs[0][1].exports;
 	const bundleType = entryPointExports.length > 0 ? "esm" : "commonjs";
 
+	const sourceMapPath = Object.keys(result.metafile.outputs).filter((_path) =>
+		_path.includes(".map")
+	)[0];
+
 	return {
 		modules: moduleCollector.modules,
 		resolvedEntryPointPath: path.resolve(
@@ -185,45 +256,209 @@ export async function bundleWorker(
 		),
 		bundleType,
 		stop: result.stop,
+		sourceMapPath,
 	};
 }
 
-type EntryPoint = { stdin: esbuild.StdinOptions } | { entryPoints: string[] };
+/**
+ * A simple plugin to alias modules and mark them as external
+ */
+function esbuildAliasExternalPlugin(
+	aliases: Record<string, string>
+): esbuild.Plugin {
+	return {
+		name: "alias",
+		setup(build) {
+			build.onResolve({ filter: /.*/g }, (args) => {
+				// If it's the entrypoint, let it be as is
+				if (args.kind === "entry-point") {
+					return {
+						path: args.path,
+					};
+				}
+				// If it's not a recognised alias, then throw an error
+				if (!Object.keys(aliases).includes(args.path)) {
+					throw new Error("unrecognized module: " + args.path);
+				}
+
+				// Otherwise, return the alias
+				return {
+					path: aliases[args.path as keyof typeof aliases],
+					external: true,
+				};
+			});
+		},
+	};
+}
 
 /**
- * Create an object that describes the entry point for esbuild.
- *
- * If we are using the experimental asset handling, then the entry point is
- * actually a shim worker that will either return an asset from a KV store,
- * or delegate to the actual worker.
+ * A middleware that catches any thrown errors, and instead formats
+ * them to be rendered in a browser. This middleware is for demonstration
+ * purposes only, and is not intended to be used in production (or even dev!)
  */
-function getEntryPoint(
-	entryFile: string,
-	serveAssetsFromWorker: boolean
-): EntryPoint {
-	if (serveAssetsFromWorker) {
-		return {
-			stdin: {
-				contents: fs
-					.readFileSync(
-						path.join(__dirname, "../templates/static-asset-facade.js"),
-						"utf8"
-					)
-					// on windows, escape backslashes in the path (`\`)
-					.replace("__ENTRY_POINT__", entryFile.replaceAll("\\", "\\\\"))
-					.replace(
-						"__KV_ASSET_HANDLER__",
-						path
-							.join(__dirname, "../kv-asset-handler.js")
-							.replaceAll("\\", "\\\\")
-					),
-				sourcefile: "static-asset-facade.js",
-				resolveDir: path.dirname(entryFile),
-			},
-		};
-	} else {
-		return { entryPoints: [entryFile] };
+async function applyFormatDevErrorsFacade(
+	entry: Entry,
+	tmpDirPath: string
+): Promise<Entry> {
+	const targetPath = path.join(tmpDirPath, "format-dev-errors.entry.js");
+	await esbuild.build({
+		entryPoints: [path.resolve(__dirname, "../templates/format-dev-errors.ts")],
+		bundle: true,
+		sourcemap: true,
+		format: "esm",
+		plugins: [
+			esbuildAliasExternalPlugin({
+				__ENTRY_POINT__: entry.file,
+			}),
+		],
+		outfile: targetPath,
+	});
+
+	return {
+		...entry,
+		file: targetPath,
+	};
+}
+
+/**
+ * A middleware that serves static assets from a worker.
+ * This powers --assets / config.assets
+ */
+
+async function applyStaticAssetFacade(
+	entry: Entry,
+	tmpDirPath: string,
+	assets: StaticAssetsConfig
+): Promise<Entry> {
+	const targetPath = path.join(tmpDirPath, "serve-static-assets.entry.js");
+
+	await esbuild.build({
+		entryPoints: [
+			path.resolve(__dirname, "../templates/serve-static-assets.ts"),
+		],
+		bundle: true,
+		format: "esm",
+		sourcemap: true,
+		plugins: [
+			esbuildAliasExternalPlugin({
+				__ENTRY_POINT__: entry.file,
+				__KV_ASSET_HANDLER__: path.join(__dirname, "../kv-asset-handler.js"),
+				__STATIC_CONTENT_MANIFEST: "__STATIC_CONTENT_MANIFEST",
+			}),
+		],
+		define: {
+			__CACHE_CONTROL_OPTIONS__: JSON.stringify(
+				typeof assets === "object"
+					? {
+							browserTTL:
+								assets.browser_TTL || 172800 /* 2 days: 2* 60 * 60 * 24 */,
+							bypassCache: assets.bypassCache,
+					  }
+					: {}
+			),
+			__SERVE_SINGLE_PAGE_APP__: JSON.stringify(
+				typeof assets === "object" ? assets.serve_single_page_app : false
+			),
+		},
+		outfile: targetPath,
+	});
+
+	return {
+		...entry,
+		file: targetPath,
+	};
+}
+
+/**
+ * A middleware that enables service bindings to be used in dev,
+ * binding to other love wrangler dev instances
+ */
+
+async function applyMultiWorkerDevFacade(
+	entry: Entry,
+	tmpDirPath: string,
+	services: Config["services"],
+	workerDefinitions: WorkerRegistry
+) {
+	const targetPath = path.join(tmpDirPath, "serve-static-assets.entry.js");
+	const serviceMap = Object.fromEntries(
+		(services || []).map((serviceBinding) => [
+			serviceBinding.binding,
+			workerDefinitions[serviceBinding.service] || null,
+		])
+	);
+
+	await esbuild.build({
+		entryPoints: [
+			path.join(
+				__dirname,
+				entry.format === "modules"
+					? "../templates/service-bindings-module-facade.js"
+					: "../templates/service-bindings-sw-facade.js"
+			),
+		],
+		bundle: true,
+		sourcemap: true,
+		format: "esm",
+		plugins: [
+			esbuildAliasExternalPlugin({
+				__ENTRY_POINT__: entry.file,
+			}),
+		],
+		define: {
+			__WORKERS__: JSON.stringify(serviceMap),
+		},
+		outfile: targetPath,
+	});
+
+	return {
+		...entry,
+		file: targetPath,
+	};
+}
+
+/**
+ * A middleware that makes first party workers "work" in
+ * our dev environments. Is applied during wrangler dev
+ * when config.first_party_worker is true
+ */
+async function applyFirstPartyWorkerDevFacade(
+	entry: Entry,
+	tmpDirPath: string
+) {
+	if (entry.format !== "modules") {
+		throw new Error(
+			"First party workers must be in the modules format. See https://developers.cloudflare.com/workers/learning/migrating-to-module-workers/"
+		);
 	}
+
+	const targetPath = path.join(
+		tmpDirPath,
+		"first-party-worker-module-facade.entry.js"
+	);
+
+	await esbuild.build({
+		entryPoints: [
+			path.resolve(
+				__dirname,
+				"../templates/first-party-worker-module-facade.ts"
+			),
+		],
+		bundle: true,
+		format: "esm",
+		sourcemap: true,
+		plugins: [
+			esbuildAliasExternalPlugin({
+				__ENTRY_POINT__: entry.file,
+			}),
+		],
+		outfile: targetPath,
+	});
+
+	return {
+		...entry,
+		file: targetPath,
+	};
 }
 
 /**

package/src/cfetch/internal.ts

@@ -6,7 +6,7 @@ import { ParseError, parseJSON } from "../parse";
 import { loginOrRefreshIfRequired, requireApiToken } from "../user";
 import type { ApiCredentials } from "../user";
 import type { URLSearchParams } from "node:url";
-import type { RequestInit, HeadersInit } from "undici";
+import type { RequestInit, HeadersInit, Response } from "undici";
 
 /**
  * Get the URL to use to access the Cloudflare API.
@@ -124,7 +124,6 @@ function addUserAgent(headers: Record<string, string>): void {
  * Note: any calls to fetchKVGetValue must call encodeURIComponent on key
  * before passing it
  */
-
 export async function fetchKVGetValue(
 	accountId: string,
 	namespaceId: string,
@@ -147,3 +146,75 @@ export async function fetchKVGetValue(
 		);
 	}
 }
+
+/**
+ * The implementation for fetching a R2 object from Cloudflare API.
+ * We have a special implementation to handle the non-standard API response
+ * that doesn't return JSON, likely due to the streaming nature.
+ *
+ * note: The implementation should be called from light wrappers for
+ * different methods (GET, PUT)
+ */
+type ResponseWithBody = Response & { body: NonNullable<Response["body"]> };
+export async function fetchR2Objects(
+	resource: string,
+	bodyInit: RequestInit = {}
+): Promise<ResponseWithBody> {
+	await requireLoggedIn();
+	const auth = requireApiToken();
+	const headers = cloneHeaders(bodyInit.headers);
+	addAuthorizationHeaderIfUnspecified(headers, auth);
+	addUserAgent(headers);
+
+	const response = await fetch(`${getCloudflareAPIBaseURL()}${resource}`, {
+		...bodyInit,
+		headers,
+	});
+
+	if (response.ok && response.body) {
+		return response as ResponseWithBody;
+	} else {
+		throw new Error(
+			`Failed to fetch ${resource} - ${response.status}: ${response.statusText});`
+		);
+	}
+}
+
+/**
+ * This is a wrapper STOPGAP for getting the script which returns a raw text response.
+ */
+export async function fetchDashboardScript(
+	resource: string,
+	bodyInit: RequestInit = {}
+): Promise<string> {
+	await requireLoggedIn();
+	const auth = requireApiToken();
+	const headers = cloneHeaders(bodyInit.headers);
+	addAuthorizationHeaderIfUnspecified(headers, auth);
+	addUserAgent(headers);
+
+	const response = await fetch(`${getCloudflareAPIBaseURL()}${resource}`, {
+		...bodyInit,
+		headers,
+	});
+
+	if (!response.ok || !response.body) {
+		throw new Error(
+			`Failed to fetch ${resource} - ${response.status}: ${response.statusText});`
+		);
+	}
+
+	const usesModules = response.headers
+		.get("content-type")
+		?.startsWith("multipart");
+
+	if (usesModules) {
+		const file = await response.text();
+
+		// Follow up on issue in Undici about multipart/form-data support & replace the workaround: https://github.com/nodejs/undici/issues/974
+		// This should be using a builtin formData() parser pattern.
+		return file.split("\n").slice(4, -4).join("\n");
+	} else {
+		return response.text();
+	}
+}

package/src/config/config.ts

@@ -127,8 +127,13 @@ export interface ConfigFields<Dev extends RawDevConfig> {
 	 * This can either be a string, or an object with additional config fields.
 	 */
 	assets:
-		| string
-		| { bucket: string; include: string[]; exclude: string[] }
+		| {
+				bucket: string;
+				include: string[];
+				exclude: string[];
+				browser_TTL: number | undefined;
+				serve_single_page_app: boolean;
+		  }
 		| undefined;
 
 	/**
@@ -169,7 +174,7 @@ export interface DevConfig {
 	/**
 	 * IP address for the local dev server to listen on,
 	 *
-	 * @default `localhost`
+	 * @default `0.0.0.0`
 	 */
 	ip: string;