wrangler 2.0.19 → 2.0.23

package/src/api/dev.ts

@@ -1,6 +1,7 @@
 import { startDev } from "../dev";
 import { logger } from "../logger";
 
+import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli";
 import type { RequestInit, Response } from "undici";
 
 interface DevOptions {
@@ -13,39 +14,72 @@ interface DevOptions {
 	siteInclude?: string[];
 	siteExclude?: string[];
 	nodeCompat?: boolean;
+	compatibilityDate?: string;
 	experimentalEnableLocalPersistence?: boolean;
-	_: (string | number)[]; //yargs wants this
-	$0: string; //yargs wants this
+	liveReload?: boolean;
+	watch?: boolean;
+	vars: {
+		[key: string]: unknown;
+	};
+	kv?: {
+		binding: string;
+		id: string;
+		preview_id?: string;
+	}[];
+	durableObjects?: {
+		name: string;
+		class_name: string;
+		script_name?: string | undefined;
+		environment?: string | undefined;
+	}[];
+	showInteractiveDevSession?: boolean;
+	logLevel?: "none" | "error" | "log" | "warn" | "debug";
+	logPrefix?: string;
+	inspect?: boolean;
+	forceLocal?: boolean;
+	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
+	_?: (string | number)[]; //yargs wants this
+	$0?: string; //yargs wants this
 }
 /**
  *  unstable_dev starts a wrangler dev server, and returns a promise that resolves with utility functions to interact with it.
  *  @param {string} script
  *  @param {DevOptions} options
  */
-export async function unstable_dev(script: string, options: DevOptions) {
-	logger.warn(
-		`unstable_dev() is experimental\nunstable_dev()'s behaviour will likely change in future releases`
-	);
+export async function unstable_dev(
+	script: string,
+	options: DevOptions,
+	disableExperimentalWarning?: boolean
+) {
+	if (!disableExperimentalWarning) {
+		logger.warn(
+			`unstable_dev() is experimental\nunstable_dev()'s behaviour will likely change in future releases`
+		);
+	}
 
 	return new Promise<{
 		stop: () => void;
 		fetch: (init?: RequestInit) => Promise<Response | undefined>;
+		waitUntilExit: () => Promise<void>;
 	}>((resolve) => {
 		//lmao
 		return new Promise<Awaited<ReturnType<typeof startDev>>>((ready) => {
 			const devServer = startDev({
 				script: script,
-				...options,
-				local: true,
-				onReady: () => ready(devServer),
 				inspect: false,
 				logLevel: "none",
 				showInteractiveDevSession: false,
+				_: [],
+				$0: "",
+				...options,
+				local: true,
+				onReady: () => ready(devServer),
 			});
 		}).then((devServer) => {
 			resolve({
 				stop: devServer.stop,
 				fetch: devServer.fetch,
+				waitUntilExit: devServer.devReactElement.waitUntilExit,
 			});
 		});
 	});

package/src/bundle.ts

@@ -1,6 +1,7 @@
 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";
@@ -92,14 +93,37 @@ export async function bundleWorker(
 		rules,
 	});
 
+	// In dev, we want to patch `fetch()` with a special version that looks
+	// for bad usages and can warn the user about them; so we inject
+	// `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"
+	);
+
+	if (checkFetch && !fs.existsSync(checkedFetchFileToInject)) {
+		fs.mkdirSync(path.join(osTempDir, "--temp-wrangler-files--"), {
+			recursive: true,
+		});
+		fs.writeFileSync(
+			checkedFetchFileToInject,
+			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.
+
 	const result = await esbuild.build({
 		...getEntryPoint(entry.file, serveAssetsFromWorker),
 		bundle: true,
 		absWorkingDir: entry.directory,
 		outdir: destination,
-		inject: checkFetch
-			? [path.resolve(__dirname, "../templates/checked-fetch.js")]
-			: [],
+		inject: checkFetch ? [checkedFetchFileToInject] : [],
 		external: ["__STATIC_CONTENT_MANIFEST"],
 		format: entry.format === "modules" ? "esm" : "iife",
 		target: "es2020",
@@ -109,7 +133,9 @@ export async function bundleWorker(
 		conditions: ["worker", "browser"],
 		...(process.env.NODE_ENV && {
 			define: {
-				"process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
+				// use process.env["NODE_ENV" + ""] so that esbuild doesn't replace it
+				// when we do a build of wrangler. (re: https://github.com/cloudflare/wrangler2/issues/1477)
+				"process.env.NODE_ENV": `"${process.env["NODE_ENV" + ""]}"`,
 				...(nodeCompat ? { global: "globalThis" } : {}),
 				...(checkFetch ? { fetch: "checkedFetch" } : {}),
 				...options.define,

package/src/config/config.ts

@@ -180,6 +180,13 @@ export interface DevConfig {
 	 */
 	port: number | undefined;
 
+	/**
+	 * Port for the local dev server's inspector to listen on
+	 *
+	 * @default `9229`
+	 */
+	inspector_port: number | undefined;
+
 	/**
 	 * Protocol that local wrangler dev server listens to requests on.
 	 *

package/src/config/validation.ts

@@ -359,6 +359,7 @@ function normalizeAndValidateDev(
 	const {
 		ip = "localhost",
 		port,
+		inspector_port,
 		local_protocol = "http",
 		upstream_protocol = "https",
 		host,
@@ -368,6 +369,13 @@ function normalizeAndValidateDev(
 
 	validateOptionalProperty(diagnostics, "dev", "ip", ip, "string");
 	validateOptionalProperty(diagnostics, "dev", "port", port, "number");
+	validateOptionalProperty(
+		diagnostics,
+		"dev",
+		"inspector_port",
+		inspector_port,
+		"number"
+	);
 	validateOptionalProperty(
 		diagnostics,
 		"dev",
@@ -385,7 +393,7 @@ function normalizeAndValidateDev(
 		["http", "https"]
 	);
 	validateOptionalProperty(diagnostics, "dev", "host", host, "string");
-	return { ip, port, local_protocol, upstream_protocol, host };
+	return { ip, port, inspector_port, local_protocol, upstream_protocol, host };
 }
 
 /**

package/src/create-worker-preview.ts

@@ -247,7 +247,9 @@ export async function createWorkerPreview(
 			}
 		},
 		(err) => {
-			logger.warn("worker failed to prewarm: ", err);
+			if ((err as { code: string }).code !== "ABORT_ERR") {
+				logger.warn("worker failed to prewarm: ", err);
+			}
 		}
 	);
 

package/src/dev/dev.tsx

@@ -19,6 +19,7 @@ import { useEsbuild } from "./use-esbuild";
 import type { Config } from "../config";
 import type { Route } from "../config/environment";
 import type { Entry } from "../entry";
+import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit } from "../worker";
 
@@ -39,6 +40,7 @@ export type DevProps = {
 	localProtocol: "https" | "http";
 	localUpstream: string | undefined;
 	enableLocalPersistence: boolean;
+	liveReload: boolean;
 	bindings: CfWorkerInit["bindings"];
 	define: Config["define"];
 	crons: Config["triggers"]["crons"];
@@ -55,10 +57,13 @@ export type DevProps = {
 	zone: string | undefined;
 	host: string | undefined;
 	routes: Route[] | undefined;
-	inspect: boolean | undefined;
+	inspect: boolean;
 	logLevel: "none" | "error" | "log" | "warn" | "debug" | undefined;
+	logPrefix?: string;
 	onReady: (() => void) | undefined;
 	showInteractiveDevSession: boolean | undefined;
+	forceLocal: boolean | undefined;
+	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
@@ -101,16 +106,18 @@ export function DevImplementation(props: DevProps): JSX.Element {
 }
 
 function InteractiveDevSession(props: DevProps) {
-	const toggles = useHotkeys(
-		{
+	const toggles = useHotkeys({
+		initial: {
 			local: props.initialMode === "local",
 			tunnel: false,
 		},
-		props.port,
-		props.ip,
-		props.inspectorPort,
-		props.localProtocol
-	);
+		port: props.port,
+		ip: props.ip,
+		inspectorPort: props.inspectorPort,
+		inspect: props.inspect,
+		localProtocol: props.localProtocol,
+		forceLocal: props.forceLocal,
+	});
 
 	useTunnel(toggles.tunnel);
 
@@ -120,10 +127,18 @@ function InteractiveDevSession(props: DevProps) {
 			<Box borderStyle="round" paddingLeft={1} paddingRight={1}>
 				<Text bold={true}>[b]</Text>
 				<Text> open a browser, </Text>
-				<Text bold={true}>[d]</Text>
-				<Text> open Devtools, </Text>
-				<Text bold={true}>[l]</Text>
-				<Text> {toggles.local ? "turn off" : "turn on"} local mode, </Text>
+				{props.inspect ? (
+					<>
+						<Text bold={true}>[d]</Text>
+						<Text> open Devtools, </Text>
+					</>
+				) : null}
+				{!props.forceLocal ? (
+					<>
+						<Text bold={true}>[l]</Text>
+						<Text> {toggles.local ? "turn off" : "turn on"} local mode, </Text>
+					</>
+				) : null}
 				<Text bold={true}>[c]</Text>
 				<Text> clear console, </Text>
 				<Text bold={true}>[x]</Text>
@@ -173,12 +188,15 @@ function DevSession(props: DevSessionProps) {
 			rules={props.rules}
 			inspectorPort={props.inspectorPort}
 			enableLocalPersistence={props.enableLocalPersistence}
+			liveReload={props.liveReload}
 			crons={props.crons}
 			localProtocol={props.localProtocol}
 			localUpstream={props.localUpstream}
 			logLevel={props.logLevel}
+			logPrefix={props.logPrefix}
 			inspect={props.inspect}
 			onReady={props.onReady}
+			enablePagesAssetsServiceBinding={props.enablePagesAssetsServiceBinding}
 		/>
 	) : (
 		<Remote
@@ -193,6 +211,9 @@ function DevSession(props: DevSessionProps) {
 			ip={props.ip}
 			localProtocol={props.localProtocol}
 			inspectorPort={props.inspectorPort}
+			// TODO: @threepointone #1167
+			// liveReload={props.liveReload}
+			inspect={props.inspect}
 			compatibilityDate={props.compatibilityDate}
 			compatibilityFlags={props.compatibilityFlags}
 			usageModel={props.usageModel}
@@ -346,13 +367,24 @@ type useHotkeysInitialState = {
 	local: boolean;
 	tunnel: boolean;
 };
-function useHotkeys(
-	initial: useHotkeysInitialState,
-	port: number,
-	ip: string,
-	inspectorPort: number,
-	localProtocol: "http" | "https"
-) {
+function useHotkeys(props: {
+	initial: useHotkeysInitialState;
+	port: number;
+	ip: string;
+	inspectorPort: number;
+	inspect: boolean;
+	localProtocol: "http" | "https";
+	forceLocal: boolean | undefined;
+}) {
+	const {
+		initial,
+		port,
+		ip,
+		inspectorPort,
+		inspect,
+		localProtocol,
+		forceLocal,
+	} = props;
 	// UGH, we should put port in context instead
 	const [toggles, setToggles] = useState(initial);
 	const { exit } = useApp();
@@ -377,11 +409,14 @@ function useHotkeys(
 				}
 				// toggle inspector
 				case "d": {
-					await openInspector(inspectorPort);
+					if (inspect) {
+						await openInspector(inspectorPort);
+					}
 					break;
 				}
 				// toggle local
 				case "l":
+					if (forceLocal) return;
 					setToggles((previousToggles) => ({
 						...previousToggles,
 						local: !previousToggles.local,

package/src/dev/local.tsx

@@ -9,6 +9,7 @@ import { logger } from "../logger";
 import { DEFAULT_MODULE_RULES } from "../module-collection";
 import { waitForPortToBeAvailable } from "../proxy";
 import type { Config } from "../config";
+import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit, CfScriptFormat } from "../worker";
 import type { EsbuildBundle } from "./use-esbuild";
@@ -28,12 +29,15 @@ interface LocalProps {
 	rules: Config["rules"];
 	inspectorPort: number;
 	enableLocalPersistence: boolean;
+	liveReload: boolean;
 	crons: Config["triggers"]["crons"];
 	localProtocol: "http" | "https";
 	localUpstream: string | undefined;
-	inspect: boolean | undefined;
+	inspect: boolean;
 	onReady: (() => void) | undefined;
 	logLevel: "none" | "error" | "log" | "warn" | "debug" | undefined;
+	logPrefix?: string;
+	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 }
 
 export function Local(props: LocalProps) {
@@ -56,8 +60,10 @@ function useLocalWorker({
 	assetPaths,
 	isWorkersSite,
 	port,
+	inspectorPort,
 	rules,
 	enableLocalPersistence,
+	liveReload,
 	ip,
 	crons,
 	localProtocol,
@@ -65,6 +71,8 @@ function useLocalWorker({
 	inspect,
 	onReady,
 	logLevel,
+	logPrefix,
+	enablePagesAssetsServiceBinding,
 }: LocalProps) {
 	// TODO: pass vars via command line
 	const local = useRef<ChildProcess>();
@@ -212,6 +220,7 @@ function useLocalWorker({
 							r2Persist: true,
 					  }),
 
+				liveReload,
 				sitePath: assetPaths?.assetDirectory
 					? path.join(assetPaths.baseDirectory, assetPaths.assetDirectory)
 					: undefined,
@@ -230,6 +239,7 @@ function useLocalWorker({
 				crons,
 				upstream,
 				disableLogs: logLevel === "none",
+				logOptions: logPrefix ? { prefix: logPrefix } : undefined,
 			};
 
 			// The path to the Miniflare CLI assumes that this file is being run from
@@ -248,16 +258,21 @@ function useLocalWorker({
 				// "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
 			];
 			if (inspect) {
-				nodeOptions.push("--inspect"); // start Miniflare listening for a debugger to attach
+				nodeOptions.push("--inspect=" + `${ip}:${inspectorPort}`); // start Miniflare listening for a debugger to attach
 			}
-			const child = (local.current = fork(
-				miniflareCLIPath,
-				[miniflareOptions],
-				{
-					cwd: path.dirname(scriptPath),
-					execArgv: nodeOptions,
-				}
-			));
+
+			const forkOptions = [miniflareOptions];
+
+			if (enablePagesAssetsServiceBinding) {
+				forkOptions.push(JSON.stringify(enablePagesAssetsServiceBinding));
+			}
+
+			const child = (local.current = fork(miniflareCLIPath, forkOptions, {
+				cwd: path.dirname(scriptPath),
+				execArgv: nodeOptions,
+				stdio: "pipe",
+			}));
+
 			child.on("message", (message) => {
 				if (message === "ready") {
 					onReady?.();
@@ -330,6 +345,7 @@ function useLocalWorker({
 		workerName,
 		format,
 		port,
+		inspectorPort,
 		ip,
 		bindings.durable_objects?.bindings,
 		bindings.kv_namespaces,
@@ -339,6 +355,7 @@ function useLocalWorker({
 		compatibilityDate,
 		compatibilityFlags,
 		localPersistencePath,
+		liveReload,
 		assetPaths,
 		isWorkersSite,
 		rules,
@@ -350,7 +367,9 @@ function useLocalWorker({
 		localUpstream,
 		inspect,
 		logLevel,
+		logPrefix,
 		onReady,
+		enablePagesAssetsServiceBinding,
 	]);
 	return { inspectorUrl };
 }

package/src/dev/remote.tsx

@@ -42,6 +42,7 @@ export function Remote(props: {
 	port: number;
 	ip: string;
 	localProtocol: "https" | "http";
+	inspect: boolean;
 	inspectorPort: number;
 	accountId: string | undefined;
 	bindings: CfWorkerInit["bindings"];
@@ -68,7 +69,6 @@ export function Remote(props: {
 		bindings: props.bindings,
 		assetPaths: props.assetPaths,
 		isWorkersSite: props.isWorkersSite,
-		port: props.port,
 		compatibilityDate: props.compatibilityDate,
 		compatibilityFlags: props.compatibilityFlags,
 		usageModel: props.usageModel,
@@ -91,7 +91,10 @@ export function Remote(props: {
 	});
 
 	useInspector({
-		inspectorUrl: previewToken ? previewToken.inspectorUrl.href : undefined,
+		inspectorUrl:
+			props.inspect && previewToken
+				? previewToken.inspectorUrl.href
+				: undefined,
 		port: props.inspectorPort,
 		logToTerminal: true,
 	});
@@ -149,7 +152,6 @@ export function useWorker(props: {
 	bindings: CfWorkerInit["bindings"];
 	assetPaths: AssetPaths | undefined;
 	isWorkersSite: boolean;
-	port: number;
 	compatibilityDate: string | undefined;
 	compatibilityFlags: string[] | undefined;
 	usageModel: "bundled" | "unbound" | undefined;
@@ -171,7 +173,6 @@ export function useWorker(props: {
 		compatibilityDate,
 		compatibilityFlags,
 		usageModel,
-		port,
 		onReady,
 	} = props;
 	const [session, setSession] = useState<CfPreviewSession | undefined>();
@@ -362,7 +363,6 @@ export function useWorker(props: {
 		bundle,
 		format,
 		accountId,
-		port,
 		assetPaths,
 		props.isWorkersSite,
 		compatibilityDate,