wrangler 2.1.7 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wrangler",
-	"version": "2.1.7",
+	"version": "2.1.8",
 	"description": "Command-line interface for all things Cloudflare Workers",
 	"keywords": [
 		"wrangler",
@@ -112,6 +112,7 @@
 		"@databases/sql": "^3.2.0",
 		"@iarna/toml": "^3.0.0",
 		"@microsoft/api-extractor": "^7.28.3",
+		"@miniflare/tre": "3.0.0-next.1",
 		"@types/better-sqlite3": "^7.6.0",
 		"@types/busboy": "^1.5.0",
 		"@types/command-exists": "^1.2.0",
@@ -157,7 +158,7 @@
 		"jest-websocket-mock": "^2.3.0",
 		"mime": "^3.0.0",
 		"msw": "^0.47.1",
-		"npx-import": "^1.0.2",
+		"npx-import": "^1.1.3",
 		"open": "^8.4.0",
 		"p-queue": "^7.2.0",
 		"pretty-bytes": "^6.0.0",

package/src/bundle.ts

@@ -79,6 +79,7 @@ export async function bundleWorker(
 		targetConsumer: "dev" | "publish";
 		local: boolean;
 		testScheduled?: boolean | undefined;
+		experimentalLocalStubCache: boolean | undefined;
 	}
 ): Promise<BundleResult> {
 	const {
@@ -99,6 +100,7 @@ export async function bundleWorker(
 		firstPartyWorkerDevFacade,
 		targetConsumer,
 		testScheduled,
+		experimentalLocalStubCache,
 	} = options;
 
 	// We create a temporary directory for any oneoff files we
@@ -233,12 +235,20 @@ export async function bundleWorker(
 
 	// At this point, inputEntry points to the entry point we want to build.
 
+	const inject: string[] = [];
+	if (checkFetch) inject.push(checkedFetchFileToInject);
+	if (experimentalLocalStubCache) {
+		inject.push(
+			path.resolve(getBasePath(), "templates/experimental-local-cache-stubs.js")
+		);
+	}
+
 	const result = await esbuild.build({
 		entryPoints: [inputEntry.file],
 		bundle: true,
 		absWorkingDir: entry.directory,
 		outdir: destination,
-		inject: checkFetch ? [checkedFetchFileToInject] : [],
+		inject,
 		external: ["__STATIC_CONTENT_MANIFEST"],
 		format: entry.format === "modules" ? "esm" : "iife",
 		target: "es2020",

package/src/dev/dev.tsx

@@ -153,6 +153,7 @@ export type DevProps = {
 	firstPartyWorker: boolean | undefined;
 	sendMetrics: boolean | undefined;
 	testScheduled: boolean | undefined;
+	experimentalLocal: boolean | undefined;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
@@ -213,6 +214,7 @@ function InteractiveDevSession(props: DevProps) {
 
 type DevSessionProps = DevProps & {
 	local: boolean;
+	experimentalLocal?: boolean;
 };
 
 function DevSession(props: DevSessionProps) {
@@ -274,6 +276,7 @@ function DevSession(props: DevSessionProps) {
 		// Enable the bundling to know whether we are using dev or publish
 		targetConsumer: "dev",
 		testScheduled: props.testScheduled ?? false,
+		experimentalLocalStubCache: props.local && props.experimentalLocal,
 	});
 
 	return props.local ? (
@@ -300,6 +303,7 @@ function DevSession(props: DevSessionProps) {
 			inspect={props.inspect}
 			onReady={props.onReady}
 			enablePagesAssetsServiceBinding={props.enablePagesAssetsServiceBinding}
+			experimentalLocal={props.experimentalLocal}
 		/>
 	) : (
 		<Remote

package/src/dev/local.tsx

@@ -2,6 +2,7 @@ import { fork } from "node:child_process";
 import { realpathSync } from "node:fs";
 import { writeFile } from "node:fs/promises";
 import path from "node:path";
+import { npxImport } from "npx-import";
 import { useState, useEffect, useRef } from "react";
 import onExit from "signal-exit";
 import { registerWorker } from "../dev-registry";
@@ -27,8 +28,17 @@ import type {
 	CfD1Database,
 } from "../worker";
 import type { EsbuildBundle } from "./use-esbuild";
+import type {
+	Miniflare as Miniflare3Type,
+	MiniflareOptions as Miniflare3Options,
+} from "@miniflare/tre";
 import type { MiniflareOptions } from "miniflare";
 import type { ChildProcess } from "node:child_process";
+
+// caching of the miniflare package
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+let Miniflare: typeof import("@miniflare/tre")["Miniflare"];
+
 export interface LocalProps {
 	name: string | undefined;
 	bundle: EsbuildBundle | undefined;
@@ -53,6 +63,7 @@ export interface LocalProps {
 	logPrefix?: string;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 	testScheduled?: boolean;
+	experimentalLocal?: boolean;
 }
 
 export function Local(props: LocalProps) {
@@ -65,6 +76,10 @@ export function Local(props: LocalProps) {
 	return null;
 }
 
+function arrayToObject(values: string[] = []): Record<string, string> {
+	return Object.fromEntries(values.map((value) => [value, value]));
+}
+
 function useLocalWorker({
 	name: workerName,
 	bundle,
@@ -88,9 +103,11 @@ function useLocalWorker({
 	onReady,
 	logPrefix,
 	enablePagesAssetsServiceBinding,
+	experimentalLocal,
 }: LocalProps) {
 	// TODO: pass vars via command line
 	const local = useRef<ChildProcess>();
+	const experimentalLocalRef = useRef<Miniflare3Type>();
 	const removeSignalExitListener = useRef<() => void>();
 	const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
 
@@ -187,6 +204,40 @@ function useLocalWorker({
 				enablePagesAssetsServiceBinding,
 			});
 
+			if (experimentalLocal) {
+				// TODO: refactor setupMiniflareOptions so we don't need to parse here
+				const miniflare2Options: MiniflareOptions = JSON.parse(forkOptions[0]);
+				const options: Miniflare3Options = {
+					...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(miniflare2Options.kvNamespaces),
+					r2Buckets: arrayToObject(miniflare2Options.r2Buckets),
+					// TODO: pass-through collected modules instead of getting Miniflare
+					//  to collect them again
+				};
+
+				logger.log("⎔ Starting an experimental local server...");
+
+				if (Miniflare === undefined) {
+					({ Miniflare } = await npxImport<
+						// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+						typeof import("@miniflare/tre")
+					>("@miniflare/tre"));
+				}
+
+				const mf = new Miniflare(options);
+				experimentalLocalRef.current = mf;
+				removeSignalExitListener.current = onExit((_code, _signal) => {
+					logger.log("⎔ Shutting down experimental local server.");
+					mf.dispose();
+					experimentalLocalRef.current = undefined;
+				});
+				await mf.ready;
+				return;
+			}
+
 			const nodeOptions = setupNodeOptions({ inspect, ip, inspectorPort });
 			logger.log("⎔ Starting a local server...");
 
@@ -279,9 +330,16 @@ function useLocalWorker({
 				logger.log("⎔ Shutting down local server.");
 				local.current?.kill();
 				local.current = undefined;
-				removeSignalExitListener.current && removeSignalExitListener.current();
-				removeSignalExitListener.current = undefined;
 			}
+			if (experimentalLocalRef.current) {
+				logger.log("⎔ Shutting down experimental local server.");
+				// Initialisation errors are also thrown asynchronously by dispose().
+				// The catch() above should've caught them though.
+				experimentalLocalRef.current?.dispose().catch(() => {});
+				experimentalLocalRef.current = undefined;
+			}
+			removeSignalExitListener.current?.();
+			removeSignalExitListener.current = undefined;
 		};
 	}, [
 		bundle,
@@ -314,6 +372,7 @@ function useLocalWorker({
 		logPrefix,
 		onReady,
 		enablePagesAssetsServiceBinding,
+		experimentalLocal,
 	]);
 	return { inspectorUrl };
 }
@@ -458,7 +517,10 @@ export function setupMiniflareOptions({
 	logPrefix,
 	workerDefinitions,
 	enablePagesAssetsServiceBinding,
-}: SetupMiniflareOptionsProps): MiniflareOptions {
+}: SetupMiniflareOptionsProps): {
+	miniflareCLIPath: string;
+	forkOptions: string[];
+} {
 	// It's now getting _really_ messy now with Pages ASSETS binding outside and the external Durable Objects inside.
 	const options = {
 		name: workerName,

package/src/dev/start-server.ts

@@ -91,6 +91,7 @@ export async function startDevServer(
 			services: props.bindings.services,
 			firstPartyWorkerDevFacade: props.firstPartyWorker,
 			testScheduled: props.testScheduled,
+			experimentalLocalStubCache: props.experimentalLocal,
 		});
 
 		//run local now
@@ -159,6 +160,7 @@ async function runEsbuild({
 	services,
 	firstPartyWorkerDevFacade,
 	testScheduled,
+	experimentalLocalStubCache,
 }: {
 	entry: Entry;
 	destination: string | undefined;
@@ -176,6 +178,7 @@ async function runEsbuild({
 	workerDefinitions: WorkerRegistry;
 	firstPartyWorkerDevFacade: boolean | undefined;
 	testScheduled?: boolean;
+	experimentalLocalStubCache: boolean | undefined;
 }): Promise<EsbuildBundle | undefined> {
 	if (!destination) return;
 
@@ -213,6 +216,7 @@ async function runEsbuild({
 				targetConsumer: "dev", // We are starting a dev server
 				local: false,
 				testScheduled,
+				experimentalLocalStubCache,
 		  });
 
 	return {

package/src/dev/use-esbuild.ts

@@ -40,6 +40,7 @@ export function useEsbuild({
 	local,
 	targetConsumer,
 	testScheduled,
+	experimentalLocalStubCache,
 }: {
 	entry: Entry;
 	destination: string | undefined;
@@ -61,6 +62,7 @@ export function useEsbuild({
 	local: boolean;
 	targetConsumer: "dev" | "publish";
 	testScheduled: boolean;
+	experimentalLocalStubCache: boolean | undefined;
 }): EsbuildBundle | undefined {
 	const [bundle, setBundle] = useState<EsbuildBundle>();
 	const { exit } = useApp();
@@ -128,6 +130,7 @@ export function useEsbuild({
 						local,
 						targetConsumer,
 						testScheduled,
+						experimentalLocalStubCache,
 				  });
 
 			// Capture the `stop()` method to use as the `useEffect()` destructor.
@@ -188,6 +191,7 @@ export function useEsbuild({
 		local,
 		targetConsumer,
 		testScheduled,
+		experimentalLocalStubCache,
 	]);
 	return bundle;
 }

package/src/dev.tsx

@@ -62,6 +62,7 @@ interface DevArgs {
 	"jsx-fragment"?: string;
 	tsconfig?: string;
 	local?: boolean;
+	"experimental-local"?: boolean;
 	minify?: boolean;
 	var?: string[];
 	define?: string[];
@@ -234,6 +235,20 @@ export function devOptions(yargs: Argv): Argv<DevArgs> {
 				type: "boolean",
 				default: false, // I bet this will a point of contention. We'll revisit it.
 			})
+			.option("experimental-local", {
+				describe: "Run on my machine using the Cloudflare Workers runtime",
+				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."
+					);
+				}
+				return true;
+			})
 			.option("minify", {
 				describe: "Minify the script",
 				type: "boolean",
@@ -405,7 +420,9 @@ export async function startDev(args: StartDevOptions) {
 					nodeCompat={nodeCompat}
 					build={configParam.build || {}}
 					define={{ ...configParam.define, ...cliDefines }}
-					initialMode={args.local ? "local" : "remote"}
+					initialMode={
+						args.local || args.experimentalLocal ? "local" : "remote"
+					}
 					jsxFactory={args["jsx-factory"] || configParam.jsx_factory}
 					jsxFragment={args["jsx-fragment"] || configParam.jsx_fragment}
 					tsconfig={args.tsconfig ?? configParam.tsconfig}
@@ -444,6 +461,7 @@ export async function startDev(args: StartDevOptions) {
 					firstPartyWorker={configParam.first_party_worker}
 					sendMetrics={configParam.send_metrics}
 					testScheduled={args["test-scheduled"]}
+					experimentalLocal={args.experimentalLocal}
 				/>
 			);
 		}
@@ -560,6 +578,7 @@ export async function startApiDev(args: StartDevOptions) {
 			firstPartyWorker: configParam.first_party_worker,
 			sendMetrics: configParam.send_metrics,
 			testScheduled: args.testScheduled,
+			experimentalLocal: undefined,
 		});
 	}
 

package/src/publish.ts

@@ -434,6 +434,7 @@ See https://developers.cloudflare.com/workers/platform/compatibility-dates for m
 						// This could potentially cause issues as we no longer have identical behaviour between dev and publish?
 						targetConsumer: "publish",
 						local: false,
+						experimentalLocalStubCache: false,
 					}
 			  );
 

package/templates/experimental-local-cache-stubs.js

@@ -0,0 +1,27 @@
+// `workerd` currently throws on any use of the Cache API. Workers Sites
+// requires the Cache API to function though, so stub it out to no-ops, like in
+// regular `wrangler dev`.
+
+class Cache {
+	async put(req, res) {}
+
+	async match(req, options) {}
+
+	async delete(req, options) {
+		return false;
+	}
+}
+
+class CacheStorage {
+	#cache = new Cache();
+
+	get default() {
+		return this.#cache;
+	}
+
+	async open(cacheName) {
+		return this.#cache;
+	}
+}
+
+globalThis.caches = new CacheStorage();