wrangler 2.3.2 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wrangler",
-	"version": "2.3.2",
+	"version": "2.4.0",
 	"description": "Command-line interface for all things Cloudflare Workers",
 	"keywords": [
 		"wrangler",
@@ -119,7 +119,7 @@
 		"@databases/sql": "^3.2.0",
 		"@iarna/toml": "^3.0.0",
 		"@microsoft/api-extractor": "^7.28.3",
-		"@miniflare/tre": "^3.0.0-next.5",
+		"@miniflare/tre": "^3.0.0-next.6",
 		"@types/better-sqlite3": "^7.6.0",
 		"@types/busboy": "^1.5.0",
 		"@types/command-exists": "^1.2.0",

package/src/__tests__/dev.test.tsx

@@ -830,6 +830,31 @@ describe("wrangler dev", () => {
 	});
 
 	describe("inspector port", () => {
+		it("should connect WebSocket server with --experimental-local", async () => {
+			writeWranglerToml({
+				main: "./index.js",
+			});
+			fs.writeFileSync(
+				"index.js",
+				`export default {
+					async fetch(request, env, ctx ){
+						console.log('Hello World LOGGING');
+					},
+			};`
+			);
+			await runWrangler("dev --experimental-local");
+
+			expect((Dev as jest.Mock).mock.calls[0][0].inspectorPort).toEqual(9229);
+			expect(std).toMatchInlineSnapshot(`
+			Object {
+			  "debug": "",
+			  "err": "",
+			  "out": "",
+			  "warn": "",
+			}
+		`);
+		});
+
 		it("should use 9229 as the default port", async () => {
 			writeWranglerToml({
 				main: "index.js",
@@ -1178,6 +1203,7 @@ describe("wrangler dev", () => {
 			      --tsconfig                                   Path to a custom tsconfig.json file  [string]
 			  -l, --local                                      Run on my machine  [boolean] [default: false]
 			      --experimental-local                         Run on my machine using the Cloudflare Workers runtime  [boolean] [default: false]
+			      --experimental-local-remote-kv               Read/write KV data from/to real namespaces on the Cloudflare network  [boolean] [default: false]
 			      --minify                                     Minify the script  [boolean]
 			      --node-compat                                Enable node.js compatibility  [boolean]
 			      --persist                                    Enable persistence for local mode, using default path: .wrangler/state  [boolean]

package/src/__tests__/index.test.ts

@@ -51,6 +51,7 @@ describe("wrangler", () => {
 			  wrangler logout              🚪 Logout from Cloudflare
 			  wrangler whoami              🕵️  Retrieve your user info and test your auth config
 			  wrangler types               📝 Generate types from bindings & module rules in config
+			  wrangler deployments         🚢 Displays the 10 most recent deployments for a worker
 
 			Flags:
 			  -c, --config   Path to .toml configuration file  [string]
@@ -96,6 +97,7 @@ describe("wrangler", () => {
 			  wrangler logout              🚪 Logout from Cloudflare
 			  wrangler whoami              🕵️  Retrieve your user info and test your auth config
 			  wrangler types               📝 Generate types from bindings & module rules in config
+			  wrangler deployments         🚢 Displays the 10 most recent deployments for a worker
 
 			Flags:
 			  -c, --config   Path to .toml configuration file  [string]

package/src/__tests__/pages.test.ts

@@ -1165,16 +1165,21 @@ describe("pages", () => {
 						const body = init.body as FormData;
 						const manifest = JSON.parse(body.get("manifest") as string);
 
-						// for Functions projects, we auto-generate a `_worker.js` and `_routes.json`
+						// for Functions projects, we auto-generate a `_worker.js`,
+						// `functions-filepath-routing-config.json`, and `_routes.json`
 						// file, based on the contents of `/functions`
 						const generatedWorkerJS = body.get("_worker.js") as Blob;
 						const generatedRoutesJSON = await (
 							body.get("_routes.json") as Blob
 						).text();
+						const generatedFilepathRoutingConfig = await (
+							body.get("functions-filepath-routing-config.json") as Blob
+						).text();
 
 						// make sure this is all we uploaded
 						expect([...body.keys()]).toEqual([
 							"manifest",
+							"functions-filepath-routing-config.json",
 							"_worker.js",
 							"_routes.json",
 						]);
@@ -1202,6 +1207,25 @@ describe("pages", () => {
 							include: ["/hello"],
 							exclude: [],
 						});
+
+						// Make sure the routing config is valid json
+						const parsedFilepathRoutingConfig = JSON.parse(
+							generatedFilepathRoutingConfig
+						);
+						// The actual shape doesn't matter that much since this
+						// is only used for display in Dash, but it's still useful for
+						// tracking unexpected changes to this config.
+						expect(parsedFilepathRoutingConfig).toStrictEqual({
+							routes: [
+								{
+									routePath: "/hello",
+									mountPath: "/",
+									method: "",
+									module: ["hello.js:onRequest"],
+								},
+							],
+							baseURL: "/",
+						});
 					});
 
 					return {
@@ -1456,10 +1480,14 @@ describe("pages", () => {
 						const customRoutesJSON = await (
 							body.get("_routes.json") as Blob
 						).text();
+						const generatedFilepathRoutingConfig = await (
+							body.get("functions-filepath-routing-config.json") as Blob
+						).text();
 
 						// make sure this is all we uploaded
 						expect([...body.keys()]).toEqual([
 							"manifest",
+							"functions-filepath-routing-config.json",
 							"_worker.js",
 							"_routes.json",
 						]);
@@ -1481,6 +1509,32 @@ describe("pages", () => {
 							include: ["/hello"],
 							exclude: [],
 						});
+
+						// Make sure the routing config is valid json
+						const parsedFilepathRoutingConfig = JSON.parse(
+							generatedFilepathRoutingConfig
+						);
+						// The actual shape doesn't matter that much since this
+						// is only used for display in Dash, but it's still useful for
+						// tracking unexpected changes to this config.
+						console.log(generatedFilepathRoutingConfig);
+						expect(parsedFilepathRoutingConfig).toStrictEqual({
+							routes: [
+								{
+									routePath: "/goodbye",
+									mountPath: "/",
+									method: "",
+									module: ["goodbye.ts:onRequest"],
+								},
+								{
+									routePath: "/hello",
+									mountPath: "/",
+									method: "",
+									module: ["hello.js:onRequest"],
+								},
+							],
+							baseURL: "/",
+						});
 					});
 
 					return {

package/src/api/dev.ts

@@ -56,6 +56,8 @@ interface DevOptions {
 	$0?: string; //yargs wants this
 	testScheduled?: boolean;
 	experimentalLocal?: boolean;
+	accountId?: string;
+	experimentalLocalRemoteKv?: boolean;
 }
 
 interface DevApiOptions {

package/src/dev/dev.tsx

@@ -155,6 +155,7 @@ export type DevProps = {
 	sendMetrics: boolean | undefined;
 	testScheduled: boolean | undefined;
 	experimentalLocal: boolean | undefined;
+	experimentalLocalRemoteKv: boolean | undefined;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
@@ -326,6 +327,8 @@ function DevSession(props: DevSessionProps) {
 			onReady={props.onReady}
 			enablePagesAssetsServiceBinding={props.enablePagesAssetsServiceBinding}
 			experimentalLocal={props.experimentalLocal}
+			accountId={props.accountId}
+			experimentalLocalRemoteKv={props.experimentalLocalRemoteKv}
 		/>
 	) : (
 		<Remote

package/src/dev/local.tsx

@@ -4,10 +4,10 @@ import { realpathSync } from "node:fs";
 import { readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 import chalk from "chalk";
-import getPort from "get-port";
 import { npxImport } from "npx-import";
 import { useState, useEffect, useRef } from "react";
 import onExit from "signal-exit";
+import { performApiFetch } from "../cfetch/internal";
 import { registerWorker } from "../dev-registry";
 import useInspector from "../inspect";
 import { logger } from "../logger";
@@ -17,6 +17,7 @@ import {
 } from "../module-collection";
 import { getBasePath } from "../paths";
 import { waitForPortToBeAvailable } from "../proxy";
+import { requireAuth } from "../user";
 import type { Config } from "../config";
 import type { WorkerRegistry } from "../dev-registry";
 import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli";
@@ -38,9 +39,11 @@ import type { EsbuildBundle } from "./use-esbuild";
 import type {
 	Miniflare as Miniflare3Type,
 	MiniflareOptions as Miniflare3Options,
+	CloudflareFetch,
 } from "@miniflare/tre";
 import type { MiniflareOptions } from "miniflare";
 import type { ChildProcess } from "node:child_process";
+import type { RequestInit } from "undici";
 
 export interface LocalProps {
 	name: string | undefined;
@@ -67,15 +70,29 @@ export interface LocalProps {
 	logPrefix?: string;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 	testScheduled?: boolean;
-	experimentalLocal?: boolean;
+	experimentalLocal: boolean | undefined;
+	accountId: string | undefined; // Account ID? In local mode??? :exploding_head:
+	experimentalLocalRemoteKv: boolean | undefined;
 }
 
+type InspectorJSON = {
+	id: string;
+	title: string;
+	type: "node";
+	description: string;
+	webSocketDebuggerUrl: string;
+	devtoolsFrontendUrl: string;
+	devtoolsFrontendUrlCompat: string;
+	faviconUrl: string;
+	url: string;
+}[];
+
 export function Local(props: LocalProps) {
 	const { inspectorUrl } = useLocalWorker(props);
 	useInspector({
 		inspectorUrl,
 		port: props.inspectorPort,
-		logToTerminal: false,
+		logToTerminal: props.experimentalLocal ?? false,
 	});
 	return null;
 }
@@ -105,6 +122,8 @@ function useLocalWorker({
 	logPrefix,
 	enablePagesAssetsServiceBinding,
 	experimentalLocal,
+	accountId,
+	experimentalLocalRemoteKv,
 }: LocalProps) {
 	// TODO: pass vars via command line
 	const local = useRef<ChildProcess>();
@@ -209,8 +228,19 @@ function useLocalWorker({
 			});
 
 			if (experimentalLocal) {
-				const mf3Options = await transformLocalOptions(options, format, bundle);
+				const mf3Options = await transformLocalOptions({
+					miniflare2Options: options,
+					format,
+					bundle,
+					kvNamespaces: bindings?.kv_namespaces,
+					r2Buckets: bindings?.r2_buckets,
+					authenticatedAccountId: accountId,
+					kvRemote: experimentalLocalRemoteKv,
+					inspectorPort,
+				});
+
 				const current = experimentalLocalRef.current;
+
 				if (current === undefined) {
 					// If we don't have an active Miniflare instance, create a new one
 					const Miniflare = await getMiniflare3Constructor();
@@ -230,6 +260,34 @@ function useLocalWorker({
 					logger.log("⎔ Reloading experimental local server.");
 					await current.setOptions(mf3Options);
 				}
+
+				try {
+					// fetch the inspector JSON response from the DevTools Inspector protocol
+					const inspectorJSONArr = (await (
+						await fetch(`http://127.0.0.1:${inspectorPort}/json`)
+					).json()) as InspectorJSON;
+
+					const foundInspectorURL = inspectorJSONArr?.find((inspectorJSON) =>
+						inspectorJSON.id.startsWith("core:user")
+					)?.webSocketDebuggerUrl;
+					if (foundInspectorURL === undefined) {
+						setInspectorUrl(undefined);
+					} else {
+						const url = new URL(foundInspectorURL);
+						// Force inspector URL to be different on each reload so `useEffect`
+						// in `useInspector` is re-run to connect to newly restarted
+						// `workerd` server when updating options. Can't use a query param
+						// here as that seems to cause an infinite connection loop, can't
+						// use a hash as those are forbidden by `ws`, so username it is.
+						url.username = `${Date.now()}-${Math.floor(
+							Math.random() * Number.MAX_SAFE_INTEGER
+						)}`;
+						setInspectorUrl(url.toString());
+					}
+				} catch (error: unknown) {
+					logger.error("Error attempting to retrieve Debugger URL:", error);
+				}
+
 				return;
 			}
 
@@ -367,6 +425,8 @@ function useLocalWorker({
 		onReady,
 		enablePagesAssetsServiceBinding,
 		experimentalLocal,
+		accountId,
+		experimentalLocalRemoteKv,
 	]);
 
 	// Rather than disposing the Miniflare instance on every reload, only dispose
@@ -683,24 +743,65 @@ export function setupNodeOptions({
 	return nodeOptions;
 }
 
-function arrayToObject(values: string[] = []): Record<string, string> {
-	return Object.fromEntries(values.map((value) => [value, value]));
+export interface SetupMiniflare3Options {
+	// Regular Miniflare 2 options to transform
+	miniflare2Options: MiniflareOptions;
+	// Miniflare 3 requires all modules to be manually specified
+	format: CfScriptFormat;
+	bundle: EsbuildBundle;
+
+	// Miniflare 3 accepts namespace/bucket names in addition to binding names.
+	// This means multiple workers persisting to the same location can have
+	// different binding names for the same namespace/bucket. Therefore, we need
+	// the full KV/R2 arrays. This is also required for remote KV storage, as
+	// we need actual namespace IDs to connect to.
+	kvNamespaces: CfKvNamespace[] | undefined;
+	r2Buckets: CfR2Bucket[] | undefined;
+
+	// Account ID to use for authenticated Cloudflare fetch. If true, prompt
+	// user for ID if multiple available.
+	authenticatedAccountId: string | true | undefined;
+	// Whether to read/write from/to real KV namespaces
+	kvRemote: boolean | undefined;
+	inspectorPort: number;
 }
 
-export async function transformLocalOptions(
-	mf2Options: MiniflareOptions,
-	format: CfScriptFormat,
-	bundle: EsbuildBundle
-): Promise<Miniflare3Options> {
+export async function transformLocalOptions({
+	miniflare2Options,
+	format,
+	bundle,
+	kvNamespaces,
+	r2Buckets,
+	authenticatedAccountId,
+	kvRemote,
+	inspectorPort,
+}: SetupMiniflare3Options): Promise<Miniflare3Options> {
+	// Build authenticated Cloudflare API fetch function if required
+	let cloudflareFetch: CloudflareFetch | undefined;
+	if (kvRemote && authenticatedAccountId !== undefined) {
+		const preferredAccountId =
+			authenticatedAccountId === true ? undefined : authenticatedAccountId;
+		const accountId = await requireAuth({ account_id: preferredAccountId });
+		cloudflareFetch = (resource, searchParams, init) => {
+			resource = `/accounts/${accountId}/${resource}`;
+			// Miniflare and Wrangler's `undici` versions may be slightly different,
+			// but their `RequestInit` types *should* be compatible
+			return performApiFetch(resource, init as RequestInit, searchParams);
+		};
+	}
+
 	const options: Miniflare3Options = {
-		...mf2Options,
+		...miniflare2Options,
 		// Miniflare 3 distinguishes between binding name and namespace/bucket IDs.
-		// For now, just use the same value as we did in Miniflare 2.
-		// TODO: use defined KV preview ID if any
-		kvNamespaces: arrayToObject(mf2Options.kvNamespaces),
-		r2Buckets: arrayToObject(mf2Options.r2Buckets),
-		inspectorPort: await getPort({ port: 9229 }),
+		kvNamespaces: Object.fromEntries(
+			kvNamespaces?.map(({ binding, id }) => [binding, id]) ?? []
+		),
+		r2Buckets: Object.fromEntries(
+			r2Buckets?.map(({ binding, bucket_name }) => [binding, bucket_name]) ?? []
+		),
+		inspectorPort,
 		verbose: true,
+		cloudflareFetch,
 	};
 
 	if (format === "modules") {
@@ -729,6 +830,21 @@ export async function transformLocalOptions(
 		];
 	}
 
+	if (kvRemote) {
+		// `kvPersist` is always assigned a truthy value in `setupMiniflareOptions`
+		assert(options.kvPersist);
+		const kvRemoteCache =
+			options.kvPersist === true
+				? // If storing in temporary directory, find this path from the bundle
+				  // output path
+				  path.join(path.dirname(bundle.path), ".mf", "kv-remote")
+				: // Otherwise, `kvPersist` looks like `.../kv`, so rewrite it to
+				  // `kv-remote` since the expected metadata format for remote storage
+				  // is different to local
+				  path.join(path.dirname(options.kvPersist), "kv-remote");
+		options.kvPersist = `remote:?cache=${encodeURIComponent(kvRemoteCache)}`;
+	}
+
 	return options;
 }
 
@@ -740,7 +856,7 @@ export async function getMiniflare3Constructor(): Promise<typeof Miniflare> {
 		({ Miniflare } = await npxImport<
 			// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 			typeof import("@miniflare/tre")
-		>("@miniflare/tre@3.0.0-next.5"));
+		>("@miniflare/tre@3.0.0-next.6"));
 	}
 	return Miniflare;
 }

package/src/dev/start-server.ts

@@ -127,6 +127,8 @@ export async function startDevServer(
 				usageModel: props.usageModel,
 				workerDefinitions,
 				experimentalLocal: props.experimentalLocal,
+				accountId: props.accountId,
+				experimentalLocalRemoteKv: props.experimentalLocalRemoteKv,
 			});
 
 			return {
@@ -303,6 +305,8 @@ export async function startLocalServer({
 	logPrefix,
 	enablePagesAssetsServiceBinding,
 	experimentalLocal,
+	accountId,
+	experimentalLocalRemoteKv,
 }: LocalProps) {
 	let local: ChildProcess | undefined;
 	let experimentalLocalRef: Miniflare3Type | undefined;
@@ -396,7 +400,16 @@ export async function startLocalServer({
 		});
 
 		if (experimentalLocal) {
-			const mf3Options = await transformLocalOptions(options, format, bundle);
+			const mf3Options = await transformLocalOptions({
+				miniflare2Options: options,
+				format,
+				bundle,
+				kvNamespaces: bindings?.kv_namespaces,
+				r2Buckets: bindings?.r2_buckets,
+				authenticatedAccountId: accountId,
+				kvRemote: experimentalLocalRemoteKv,
+				inspectorPort,
+			});
 			const Miniflare = await getMiniflare3Constructor();
 			const mf = new Miniflare(mf3Options);
 			const runtimeURL = await mf.ready;

package/src/dev.tsx

@@ -65,6 +65,7 @@ interface DevArgs {
 	tsconfig?: string;
 	local?: boolean;
 	"experimental-local"?: boolean;
+	"experimental-local-remote-kv"?: boolean;
 	minify?: boolean;
 	var?: string[];
 	define?: string[];
@@ -237,11 +238,25 @@ export function devOptions(yargs: Argv<CommonYargsOptions>): Argv<DevArgs> {
 				type: "boolean",
 				default: false,
 			})
+			.option("experimental-local-remote-kv", {
+				describe:
+					"Read/write KV data from/to real namespaces on the Cloudflare network",
+				type: "boolean",
+				default: false,
+			})
 			.check((argv) => {
 				if (argv.local && argv["experimental-local"]) {
 					throw new Error(
 						"--local and --experimental-local are mutually exclusive. " +
-							"Please select one or the other."
+							"Please enable one or the other."
+					);
+				}
+				if (
+					argv["experimental-local-remote-kv"] &&
+					!argv["experimental-local"]
+				) {
+					throw new Error(
+						"--experimental-local-remote-kv requires --experimental-local to be enabled."
 					);
 				}
 				return true;
@@ -461,6 +476,7 @@ export async function startDev(args: StartDevOptions) {
 					sendMetrics={configParam.send_metrics}
 					testScheduled={args["test-scheduled"]}
 					experimentalLocal={args.experimentalLocal}
+					experimentalLocalRemoteKv={args.experimentalLocalRemoteKv}
 				/>
 			);
 		}
@@ -582,6 +598,7 @@ export async function startApiDev(args: StartDevOptions) {
 			sendMetrics: configParam.send_metrics,
 			testScheduled: args.testScheduled,
 			experimentalLocal: args.experimentalLocal,
+			experimentalLocalRemoteKv: args.experimentalLocalRemoteKv,
 		});
 	}
 

package/src/dialogs.tsx

@@ -153,8 +153,7 @@ export async function fromDashMessagePrompt(
 ): Promise<boolean | void> {
 	if (deploySource === "dash") {
 		logger.warn(
-			`You are about to publish a Workers Service that was last published via the Cloudflare Dashboard.
-		Edits that have been made via the dashboard will be overridden by your local code and config.`
+			`You are about to publish a Workers Service that was last published via the Cloudflare Dashboard.\nEdits that have been made via the dashboard will be overridden by your local code and config.`
 		);
 
 		if (!isInteractive() || CI.isCI()) return true;

package/src/index.tsx

@@ -554,8 +554,7 @@ export function createCLIParser(argv: string[]) {
 		"🚧`wrangler deployments` is a beta command. Please report any issues to https://github.com/cloudflare/wrangler2/issues/new/choose";
 	wrangler.command(
 		"deployments",
-		false,
-		// "🚢 Logs the 10 most recent deployments with 'Version ID', 'Version number','Author email', 'Created on' and 'Latest deploy'",
+		"🚢 Displays the 10 most recent deployments for a worker",
 		(yargs) => {
 			yargs
 				.option("name", {

package/src/pages/publish.tsx

@@ -275,11 +275,20 @@ export const Handler = async ({
 		? join(tmpdir(), `_routes-${Math.random()}.json`)
 		: undefined;
 
+	// Routing configuration displayed in the Functions tab of a deployment in Dash
+	let filepathRoutingConfig: string | undefined;
+
 	if (!_workerJS && existsSync(functionsDirectory)) {
 		const outfile = join(tmpdir(), `./functionsWorker-${Math.random()}.js`);
+		const outputConfigPath = join(
+			tmpdir(),
+			`functions-filepath-routing-config-${Math.random()}.json`
+		);
+
 		try {
 			await buildFunctions({
 				outfile,
+				outputConfigPath,
 				functionsDirectory,
 				onEnd: () => {},
 				buildOutputDirectory: dirname(outfile),
@@ -292,6 +301,7 @@ export const Handler = async ({
 			});
 
 			builtFunctions = readFileSync(outfile, "utf-8");
+			filepathRoutingConfig = readFileSync(outputConfigPath, "utf-8");
 		} catch (e) {
 			if (e instanceof FunctionsNoRoutesError) {
 				logger.warn(
@@ -335,6 +345,16 @@ export const Handler = async ({
 		logger.log(`✨ Uploading _redirects`);
 	}
 
+	if (filepathRoutingConfig) {
+		formData.append(
+			"functions-filepath-routing-config.json",
+			new File(
+				[filepathRoutingConfig],
+				"functions-filepath-routing-config.json"
+			)
+		);
+	}
+
 	/**
 	 * Advanced Mode
 	 * https://developers.cloudflare.com/pages/platform/functions/#advanced-mode

package/wrangler-dist/cli.d.ts

@@ -129,6 +129,8 @@ declare interface DevOptions {
     $0?: string;
     testScheduled?: boolean;
     experimentalLocal?: boolean;
+    accountId?: string;
+    experimentalLocalRemoteKv?: boolean;
 }
 
 declare interface EnablePagesAssetsServiceBindingOptions {