wrangler 2.4.4 → 2.6.0

package/src/dev/local.tsx

@@ -4,6 +4,7 @@ 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";
@@ -11,6 +12,7 @@ import { performApiFetch } from "../cfetch/internal";
 import { registerWorker } from "../dev-registry";
 import useInspector from "../inspect";
 import { logger } from "../logger";
+import generateASSETSBinding from "../miniflare-cli/assets";
 import {
 	DEFAULT_MODULE_RULES,
 	ModuleTypeToRuleType,
@@ -57,8 +59,8 @@ export interface LocalProps {
 	bindings: CfWorkerInit["bindings"];
 	workerDefinitions: WorkerRegistry | undefined;
 	assetPaths: AssetPaths | undefined;
-	port: number;
-	ip: string;
+	initialPort: number;
+	initialIp: string;
 	rules: Config["rules"];
 	inspectorPort: number;
 	localPersistencePath: string | null;
@@ -109,12 +111,11 @@ function useLocalWorker({
 	bindings,
 	workerDefinitions,
 	assetPaths,
-	port,
-	inspectorPort,
+	initialPort,
 	rules,
 	localPersistencePath,
 	liveReload,
-	ip,
+	initialIp,
 	crons,
 	queueConsumers,
 	localProtocol,
@@ -134,6 +135,11 @@ function useLocalWorker({
 	const removeExperimentalLocalSignalExitListener = useRef<() => void>();
 	const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
 
+	// Our inspector proxy server will be binding to `LocalProps`'s `inspectorPort`.
+	// If we attempted to bind Node.js/workerd to the same inspector port, we'd get a port already in use error.
+	// Therefore, generate a new random port for our runtime's to bind their inspector service to.
+	const runtimeInspectorPortRef = useRef<number>();
+
 	useEffect(() => {
 		if (bindings.services && bindings.services.length > 0) {
 			logger.warn(
@@ -159,13 +165,6 @@ function useLocalWorker({
 		async function startLocalWorker() {
 			if (!bundle || !format) return;
 
-			// port for the worker
-			await waitForPortToBeAvailable(port, {
-				retryPeriod: 200,
-				timeout: 2000,
-				abortSignal: abortController.signal,
-			});
-
 			// In local mode, we want to copy all referenced modules into
 			// the output bundle directory before starting up
 			for (const module of bundle.modules) {
@@ -197,12 +196,15 @@ function useLocalWorker({
 				bundle,
 			});
 
+			runtimeInspectorPortRef.current ??= await getPort();
+			const runtimeInspectorPort = runtimeInspectorPortRef.current;
+
 			const { forkOptions, miniflareCLIPath, options } = setupMiniflareOptions({
 				workerName,
-				port,
+				port: initialPort,
 				scriptPath,
 				localProtocol,
-				ip,
+				ip: initialIp,
 				format,
 				rules,
 				compatibilityDate,
@@ -236,11 +238,12 @@ function useLocalWorker({
 					format,
 					bundle,
 					log,
+					enablePagesAssetsServiceBinding,
 					kvNamespaces: bindings?.kv_namespaces,
 					r2Buckets: bindings?.r2_buckets,
 					authenticatedAccountId: accountId,
 					kvRemote: experimentalLocalRemoteKv,
-					inspectorPort,
+					inspectorPort: runtimeInspectorPort,
 				});
 
 				const current = experimentalLocalRef.current;
@@ -268,7 +271,7 @@ function useLocalWorker({
 				try {
 					// fetch the inspector JSON response from the DevTools Inspector protocol
 					const inspectorJSONArr = (await (
-						await fetch(`http://127.0.0.1:${inspectorPort}/json`)
+						await fetch(`http://127.0.0.1:${runtimeInspectorPort}/json`)
 					).json()) as InspectorJSON;
 
 					const foundInspectorURL = inspectorJSONArr?.find((inspectorJSON) =>
@@ -295,7 +298,19 @@ function useLocalWorker({
 				return;
 			}
 
-			const nodeOptions = setupNodeOptions({ inspect, ip, inspectorPort });
+			// Wait for the Worker port to be available. We don't want to do this in experimental local
+			// mode, as we only `dispose()` the Miniflare 3 instance, and shutdown the server when
+			// unmounting the component, not when props change. If we did, we'd just timeout every time.
+			await waitForPortToBeAvailable(initialPort, {
+				retryPeriod: 200,
+				timeout: 2000,
+				abortSignal: abortController.signal,
+			});
+
+			const nodeOptions = setupNodeOptions({
+				inspect,
+				inspectorPort: runtimeInspectorPort,
+			});
 			logger.log("⎔ Starting a local server...");
 
 			const child = (local.current = fork(miniflareCLIPath, forkOptions, {
@@ -316,21 +331,21 @@ function useLocalWorker({
 						await registerWorker(workerName, {
 							protocol: localProtocol,
 							mode: "local",
-							port,
-							host: ip,
+							port: message.port,
+							host: initialIp,
 							durableObjects: internalDurableObjects.map((binding) => ({
 								name: binding.name,
 								className: binding.class_name,
 							})),
 							...(message.durableObjectsPort
 								? {
-										durableObjectsHost: ip,
+										durableObjectsHost: initialIp,
 										durableObjectsPort: message.durableObjectsPort,
 								  }
 								: {}),
 						});
 					}
-					onReady?.(ip, message.mfPort);
+					onReady?.(initialIp, message.port);
 				}
 			});
 
@@ -382,7 +397,13 @@ function useLocalWorker({
 		}
 
 		startLocalWorker().catch((err) => {
-			logger.error("local worker:", err);
+			if (err.code === "ERR_RUNTIME_FAILURE") {
+				// Don't log a full verbose stack-trace when Miniflare 3's workerd instance fails to start.
+				// workerd will log its own errors, and our stack trace won't have any useful information.
+				logger.error(err.message);
+			} else {
+				logger.error("local worker:", err);
+			}
 		});
 
 		return () => {
@@ -399,9 +420,8 @@ function useLocalWorker({
 		bundle,
 		workerName,
 		format,
-		port,
-		inspectorPort,
-		ip,
+		initialPort,
+		initialIp,
 		queueConsumers,
 		bindings.queues,
 		bindings.durable_objects,
@@ -729,11 +749,9 @@ export function setupMiniflareOptions({
 
 export function setupNodeOptions({
 	inspect,
-	ip,
 	inspectorPort,
 }: {
 	inspect: boolean;
-	ip: string;
 	inspectorPort: number;
 }) {
 	const nodeOptions = [
@@ -742,7 +760,7 @@ export function setupNodeOptions({
 		// "--log=VERBOSE", // uncomment this to Miniflare to log "everything"!
 	];
 	if (inspect) {
-		nodeOptions.push("--inspect=" + `${ip}:${inspectorPort}`); // start Miniflare listening for a debugger to attach
+		nodeOptions.push("--inspect=" + `127.0.0.1:${inspectorPort}`); // start Miniflare listening for a debugger to attach
 	}
 	return nodeOptions;
 }
@@ -757,6 +775,8 @@ export interface SetupMiniflare3Options {
 	// Miniflare's logger
 	log: Miniflare3LogType;
 
+	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
+
 	// 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
@@ -794,6 +814,7 @@ export async function transformMf2OptionsToMf3Options({
 	format,
 	bundle,
 	log,
+	enablePagesAssetsServiceBinding,
 	kvNamespaces,
 	r2Buckets,
 	authenticatedAccountId,
@@ -829,6 +850,19 @@ export async function transformMf2OptionsToMf3Options({
 		log,
 	};
 
+	if (enablePagesAssetsServiceBinding !== undefined) {
+		options.serviceBindings = {
+			...options.serviceBindings,
+			ASSETS: (await generateASSETSBinding({
+				log,
+				...enablePagesAssetsServiceBinding,
+				tre: true,
+				// We can get rid of this `any` easily once we do experimental-local/tre by default
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			})) as any,
+		};
+	}
+
 	if (format === "modules") {
 		// Manually specify all modules from the bundle. If we didn't do this,
 		// Miniflare 3 would try collect them automatically again itself.
@@ -882,5 +916,5 @@ export async function getMiniflare3(): Promise<
 	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 	typeof import("@miniflare/tre")
 > {
-	return (miniflare3Module ??= await npxImport("@miniflare/tre@3.0.0-next.7"));
+	return (miniflare3Module ??= await npxImport("@miniflare/tre@3.0.0-next.8"));
 }

package/src/dev/start-server.ts

@@ -112,8 +112,8 @@ export async function startDevServer(
 				compatibilityFlags: props.compatibilityFlags,
 				bindings: props.bindings,
 				assetPaths: props.assetPaths,
-				port: props.port,
-				ip: props.ip,
+				initialPort: props.initialPort,
+				initialIp: props.initialIp,
 				rules: props.rules,
 				inspectorPort: props.inspectorPort,
 				localPersistencePath: props.localPersistencePath,
@@ -149,8 +149,8 @@ export async function startDevServer(
 				bindings: props.bindings,
 				assetPaths: props.assetPaths,
 				isWorkersSite: props.isWorkersSite,
-				port: props.port,
-				ip: props.ip,
+				port: props.initialPort,
+				ip: props.initialIp,
 				localProtocol: props.localProtocol,
 				inspectorPort: props.inspectorPort,
 				inspect: props.inspect,
@@ -294,12 +294,12 @@ export async function startLocalServer({
 	bindings,
 	workerDefinitions,
 	assetPaths,
-	port,
+	initialPort,
 	inspectorPort,
 	rules,
 	localPersistencePath,
 	liveReload,
-	ip,
+	initialIp,
 	crons,
 	queueConsumers,
 	localProtocol,
@@ -325,14 +325,11 @@ export async function startLocalServer({
 		if (!bundle || !format) return;
 
 		// port for the worker
-
-		if (port !== 0) {
-			await waitForPortToBeAvailable(port, {
-				retryPeriod: 200,
-				timeout: 2000,
-				abortSignal: abortController.signal,
-			});
-		}
+		await waitForPortToBeAvailable(initialPort, {
+			retryPeriod: 200,
+			timeout: 2000,
+			abortSignal: abortController.signal,
+		});
 
 		if (bindings.services && bindings.services.length > 0) {
 			logger.warn(
@@ -373,10 +370,10 @@ export async function startLocalServer({
 
 		const { forkOptions, miniflareCLIPath, options } = setupMiniflareOptions({
 			workerName,
-			port,
+			port: initialPort,
 			scriptPath,
 			localProtocol,
-			ip,
+			ip: initialIp,
 			format,
 			rules,
 			compatibilityDate,
@@ -429,7 +426,7 @@ export async function startLocalServer({
 			return;
 		}
 
-		const nodeOptions = setupNodeOptions({ inspect, ip, inspectorPort });
+		const nodeOptions = setupNodeOptions({ inspect, inspectorPort });
 		logger.log("⎔ Starting a local server...");
 
 		const child = (local = fork(miniflareCLIPath, forkOptions, {
@@ -446,21 +443,21 @@ export async function startLocalServer({
 					await registerWorker(workerName, {
 						protocol: localProtocol,
 						mode: "local",
-						port: message.mfPort,
-						host: ip,
+						port: message.port,
+						host: initialIp,
 						durableObjects: internalDurableObjects.map((binding) => ({
 							name: binding.name,
 							className: binding.class_name,
 						})),
 						...(message.durableObjectsPort
 							? {
-									durableObjectsHost: ip,
+									durableObjectsHost: initialIp,
 									durableObjectsPort: message.durableObjectsPort,
 							  }
 							: {}),
 					});
 				}
-				onReady?.(ip, message.mfPort);
+				onReady?.(initialIp, message.port);
 			}
 		});
 

package/src/dev.tsx

@@ -14,7 +14,7 @@ import { getEntry } from "./entry";
 import { logger } from "./logger";
 import * as metrics from "./metrics";
 import { getAssetPaths, getSiteAssetPaths } from "./sites";
-import { getAccountFromCache } from "./user";
+import { getAccountFromCache, loginOrRefreshIfRequired } from "./user";
 import { collectKeyValues } from "./utils/collectKeyValues";
 import { identifyD1BindingsAsBeta } from "./worker";
 import { getHostFromRoute, getZoneForRoute, getZoneIdFromHost } from "./zones";
@@ -328,6 +328,15 @@ export function devOptions(yargs: Argv<CommonYargsOptions>): Argv<DevArgs> {
 }
 
 export async function devHandler(args: ArgumentsCamelCase<DevArgs>) {
+	if (!args.local) {
+		const isLoggedIn = await loginOrRefreshIfRequired();
+		if (!isLoggedIn) {
+			throw new Error(
+				"You must be logged in to use wrangler dev in remote mode. Try logging in, or run wrangler dev --local."
+			);
+		}
+	}
+
 	let watcher;
 	try {
 		const devInstance = await startDev(args);
@@ -467,11 +476,13 @@ export async function startDev(args: StartDevOptions) {
 					accountId={configParam.account_id || getAccountFromCache()?.id}
 					assetPaths={assetPaths}
 					assetsConfig={configParam.assets}
-					port={args.port || configParam.dev.port || (await getLocalPort())}
-					ip={args.ip || configParam.dev.ip}
+					initialPort={
+						args.port ?? configParam.dev.port ?? (await getLocalPort())
+					}
+					initialIp={args.ip || configParam.dev.ip}
 					inspectorPort={
-						args.inspectorPort ||
-						configParam.dev.inspector_port ||
+						args.inspectorPort ??
+						configParam.dev.inspector_port ??
 						(await getInspectorPort())
 					}
 					isWorkersSite={Boolean(args.site || configParam.site)}
@@ -584,14 +595,11 @@ export async function startApiDev(args: StartDevOptions) {
 			assetPaths: assetPaths,
 			assetsConfig: configParam.assets,
 			//port can be 0, which means to use a random port
-			port:
-				args.port === 0
-					? args.port
-					: args.port || configParam.dev.port || (await getLocalPort()),
-			ip: args.ip || configParam.dev.ip,
+			initialPort: args.port ?? configParam.dev.port ?? (await getLocalPort()),
+			initialIp: args.ip || configParam.dev.ip,
 			inspectorPort:
-				args["inspector-port"] ||
-				configParam.dev.inspector_port ||
+				args["inspector-port"] ??
+				configParam.dev.inspector_port ??
 				(await getInspectorPort()),
 			isWorkersSite: Boolean(args.site || configParam.site),
 			compatibilityDate: getDevCompatibilityDate(
@@ -893,10 +901,22 @@ async function getBindings(
 		],
 		dispatch_namespaces: configParam.dispatch_namespaces,
 		services: configParam.services,
+		analytics_engine_datasets: configParam.analytics_engine_datasets,
 		unsafe: configParam.unsafe?.bindings,
 		logfwdr: configParam.logfwdr,
 		d1_databases: identifyD1BindingsAsBeta([
-			...configParam.d1_databases,
+			...(configParam.d1_databases ?? []).map((d1Db) => {
+				if (!d1Db.preview_database_id) {
+					throw new Error(
+						`In development, you should use a separate D1 database than the one you'd use in production. Please create a new D1 database with "wrangler d1 create <name>" and add its id as preview_database_id to the d1_database "${d1Db.binding}" in your wrangler.toml`
+					);
+				}
+
+				return {
+					...d1Db,
+					database_id: d1Db.preview_database_id,
+				};
+			}),
 			...(args.d1Databases || []),
 		]),
 	};

package/src/git-client.ts

@@ -42,10 +42,21 @@ export async function getGitVersioon(): Promise<string | null> {
  */
 export async function initializeGit(cwd: string) {
 	try {
-		// Try to create the repository with the HEAD branch of `main`.
-		await execa("git", ["init", "--initial-branch", "main"], {
-			cwd,
-		});
+		// Get the default init branch name
+		const { stdout: defaultBranchName } = await execa("git", [
+			"config",
+			"--get",
+			"init.defaultBranch",
+		]);
+
+		// Try to create the repository with the HEAD branch of defaultBranchName ?? `main`.
+		await execa(
+			"git",
+			["init", "--initial-branch", defaultBranchName.trim() ?? "main"],
+			{
+				cwd,
+			}
+		);
 	} catch {
 		// Unable to create the repo with a HEAD branch name, so just fall back to the default.
 		await execa("git", ["init"], {

package/src/index.tsx

@@ -543,6 +543,7 @@ export function createCLIParser(argv: string[]) {
 				r2_buckets: config.r2_buckets,
 				d1_databases: config.d1_databases,
 				services: config.services,
+				analytics_engine_datasets: config.analytics_engine_datasets,
 				dispatch_namespaces: config.dispatch_namespaces,
 				logfwdr: config.logfwdr,
 				unsafe: { bindings: config.unsafe?.bindings },

package/src/init.ts

@@ -862,6 +862,14 @@ async function getWorkerConfig(
 						];
 					}
 					break;
+				case "analytics_engine":
+					{
+						configObj.analytics_engine_datasets = [
+							...(configObj.analytics_engine_datasets ?? []),
+							{ binding: binding.name, dataset: binding.dataset },
+						];
+					}
+					break;
 				case "namespace":
 					{
 						configObj.dispatch_namespaces = [

package/src/miniflare-cli/assets.ts

@@ -3,54 +3,69 @@ import { join } from "node:path";
 import { createMetadataObject } from "@cloudflare/pages-shared/metadata-generator/createMetadataObject";
 import { parseHeaders } from "@cloudflare/pages-shared/metadata-generator/parseHeaders";
 import { parseRedirects } from "@cloudflare/pages-shared/metadata-generator/parseRedirects";
-import { fetch as miniflareFetch } from "@miniflare/core";
-import {
-	Response as MiniflareResponse,
-	Request as MiniflareRequest,
-} from "@miniflare/core";
 import { watch } from "chokidar";
 import { getType } from "mime";
 import { hashFile } from "../pages/hash";
 import type { Metadata } from "@cloudflare/pages-shared/asset-server/metadata";
-import type {
-	fetch,
-	Request,
-} from "@cloudflare/pages-shared/environment-polyfills/types";
 import type {
 	ParsedRedirects,
 	ParsedHeaders,
 } from "@cloudflare/pages-shared/metadata-generator/types";
-import type { RequestInfo, RequestInit, FetcherFetch } from "@miniflare/core";
-import type { Log } from "miniflare";
+import type {
+	RequestInfo as TreRequestInfo,
+	RequestInit as TreRequestInit,
+} from "@miniflare/tre";
+
+interface Logger {
+	log: (message: string) => void;
+	warn: (message: string) => void;
+	error: (error: Error) => void;
+}
 
 export interface Options {
-	log: Log;
+	log: Logger;
 	proxyPort?: number;
 	directory?: string;
+	tre: boolean;
 }
 
 export default async function generateASSETSBinding(options: Options) {
 	const assetsFetch =
 		options.directory !== undefined
-			? await generateAssetsFetch(options.directory, options.log)
+			? await generateAssetsFetch(options.directory, options.log, options.tre)
 			: invalidAssetsFetch;
 
-	return async function (miniflareRequest: MiniflareRequest) {
+	const miniflare = options.tre
+		? await import("@miniflare/tre")
+		: await import("@miniflare/core");
+
+	const Request = miniflare.Request;
+	const Response = miniflare.Response;
+	// WebSockets won't work with `--experimental-local` until we expose something like `upgradingFetch` from `@miniflare/tre`.
+	const fetch = (
+		options.tre
+			? miniflare.fetch
+			: (await import("@miniflare/web-sockets")).upgradingFetch
+	) as (request: Request) => Promise<Response>;
+
+	return async function (miniflareRequest: Request) {
 		if (options.proxyPort) {
 			try {
 				const url = new URL(miniflareRequest.url);
 				url.host = `localhost:${options.proxyPort}`;
-				return await miniflareFetch(url, miniflareRequest);
+				const proxyRequest = new Request(url, miniflareRequest);
+				if (proxyRequest.headers.get("Upgrade") === "websocket") {
+					proxyRequest.headers.delete("Sec-WebSocket-Accept");
+					proxyRequest.headers.delete("Sec-WebSocket-Key");
+				}
+				return await fetch(proxyRequest as Request);
 			} catch (thrown) {
 				options.log.error(new Error(`Could not proxy request: ${thrown}`));
 
 				// TODO: Pretty error page
-				return new MiniflareResponse(
-					`[wrangler] Could not proxy request: ${thrown}`,
-					{
-						status: 502,
-					}
-				);
+				return new Response(`[wrangler] Could not proxy request: ${thrown}`, {
+					status: 502,
+				});
 			}
 		} else {
 			try {
@@ -59,21 +74,33 @@ export default async function generateASSETSBinding(options: Options) {
 				options.log.error(new Error(`Could not serve static asset: ${thrown}`));
 
 				// TODO: Pretty error page
-				return new MiniflareResponse(
+				return new Response(
 					`[wrangler] Could not serve static asset: ${thrown}`,
 					{ status: 502 }
 				);
 			}
 		}
-	} as FetcherFetch;
+	};
 }
 
 async function generateAssetsFetch(
 	directory: string,
-	log: Log
+	log: Logger,
+	tre: boolean
 ): Promise<typeof fetch> {
 	// Defer importing miniflare until we really need it
-	await import("@cloudflare/pages-shared/environment-polyfills/miniflare");
+	if (tre) {
+		await import(
+			"@cloudflare/pages-shared/environment-polyfills/miniflare-tre"
+		);
+	} else {
+		await import("@cloudflare/pages-shared/environment-polyfills/miniflare");
+	}
+
+	const miniflare = tre
+		? await import("@miniflare/tre")
+		: await import("@miniflare/core");
+	const Request = miniflare.Request;
 
 	const { generateHandler, parseQualityWeightedList } = await import(
 		"@cloudflare/pages-shared/asset-server/handler"
@@ -202,10 +229,10 @@ async function generateAssetsFetch(
 		});
 	};
 
-	return async (input: RequestInfo, init?: RequestInit) => {
-		const request = new MiniflareRequest(input, init);
+	return (async (input: TreRequestInfo, init?: TreRequestInit) => {
+		const request = new Request(input, init);
 		return await generateResponse(request as unknown as Request);
-	};
+	}) as typeof fetch;
 }
 
 const invalidAssetsFetch: typeof fetch = () => {

package/src/miniflare-cli/index.ts

@@ -120,6 +120,7 @@ async function main() {
 				log: config.log,
 				proxyPort: opts.proxyPort,
 				directory: opts.directory,
+				tre: false,
 			};
 
 			config.serviceBindings = {
@@ -196,7 +197,7 @@ async function main() {
 		process.send &&
 			process.send(
 				JSON.stringify({
-					mfPort: mfPort,
+					port: mfPort,
 					ready: true,
 					durableObjectsPort: durableObjectsMfPort,
 				})

package/src/pages/dev.tsx

@@ -134,6 +134,11 @@ export function Options(yargs: Argv) {
 				type: "boolean",
 				hidden: true,
 			},
+			"experimental-local": {
+				describe: "Run on my machine using the Cloudflare Workers runtime",
+				type: "boolean",
+				default: false,
+			},
 			config: {
 				describe: "Pages does not support wrangler.toml",
 				type: "string",
@@ -168,6 +173,7 @@ export const Handler = async ({
 	persist,
 	persistTo,
 	"node-compat": nodeCompat,
+	"experimental-local": experimentalLocal,
 	config: config,
 	_: [_pages, _dev, ...remaining],
 	logLevel,
@@ -476,6 +482,7 @@ export const Handler = async ({
 			compatibilityDate,
 			compatibilityFlags,
 			nodeCompat,
+			experimentalLocal,
 			vars: Object.fromEntries(
 				bindings
 					.map((binding) => binding.toString().split("="))

package/src/proxy.ts

@@ -651,6 +651,11 @@ export async function waitForPortToBeAvailable(
 		}
 
 		function checkPort() {
+			if (port === 0) {
+				doResolve();
+				return;
+			}
+
 			// Testing whether a port is 'available' involves simply
 			// trying to make a server listen on that port, and retrying
 			// until it succeeds.