Initial --experimental-local implementation using Miniflare 3

packages/wrangler/package.json

@@ -94,6 +94,7 @@
 		"@cloudflare/kv-asset-handler": "^0.2.0",
 		"@esbuild-plugins/node-globals-polyfill": "^0.1.1",
 		"@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+		"@miniflare/tre": "file:../../../miniflare3/packages/tre",
 		"blake3-wasm": "^2.1.5",
 		"chokidar": "^3.5.3",
 		"esbuild": "0.14.51",

packages/wrangler/scripts/deps.ts

@@ -12,6 +12,7 @@ export const EXTERNAL_DEPENDENCIES = [
 	"miniflare",
 	"@miniflare/core",
 	"@miniflare/durable-objects",
+	"@miniflare/tre", // TODO: remove once Miniflare 3 moved in miniflare package
 	// todo - bundle miniflare too
 	"selfsigned",
 	"source-map",

packages/wrangler/src/dev.tsx

@@ -60,6 +60,7 @@ interface DevArgs {
 	"jsx-fragment"?: string;
 	tsconfig?: string;
 	local?: boolean;
+	"experimental-local"?: boolean;
 	minify?: boolean;
 	var?: string[];
 	define?: string[];
@@ -232,6 +233,11 @@ 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,
+			})
 			.option("minify", {
 				describe: "Minify the script",
 				type: "boolean",
@@ -404,7 +410,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 +452,7 @@ export async function startDev(args: StartDevOptions) {
 					firstPartyWorker={configParam.first_party_worker}
 					sendMetrics={configParam.send_metrics}
 					testScheduled={args["test-scheduled"]}
+					experimentalMiniflare3={args.experimentalLocal}
 				/>
 			);
 		}
@@ -558,6 +567,7 @@ export async function startApiDev(args: StartDevOptions) {
 			firstPartyWorker: configParam.first_party_worker,
 			sendMetrics: configParam.send_metrics,
 			testScheduled: args.testScheduled,
+			experimentalMiniflare3: undefined,
 		});
 	}
 

packages/wrangler/src/dev/dev.tsx

@@ -154,6 +154,7 @@ export type DevProps = {
 	firstPartyWorker: boolean | undefined;
 	sendMetrics: boolean | undefined;
 	testScheduled: boolean | undefined;
+	experimentalMiniflare3: boolean | undefined;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
@@ -214,6 +215,7 @@ function InteractiveDevSession(props: DevProps) {
 
 type DevSessionProps = DevProps & {
 	local: boolean;
+	experimentalMiniflare3?: boolean;
 };
 
 function DevSession(props: DevSessionProps) {
@@ -277,6 +279,7 @@ function DevSession(props: DevSessionProps) {
 			inspect={props.inspect}
 			onReady={props.onReady}
 			enablePagesAssetsServiceBinding={props.enablePagesAssetsServiceBinding}
+			experimentalMiniflare3={props.experimentalMiniflare3}
 		/>
 	) : (
 		<Remote

packages/wrangler/src/dev/local.tsx

@@ -26,8 +26,13 @@ import type {
 	CfVars,
 } 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";
+
 export interface LocalProps {
 	name: string | undefined;
 	bundle: EsbuildBundle | undefined;
@@ -53,6 +58,7 @@ export interface LocalProps {
 	logPrefix?: string;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 	testScheduled?: boolean;
+	experimentalMiniflare3?: boolean;
 }
 
 export function Local(props: LocalProps) {
@@ -65,6 +71,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,
@@ -89,9 +99,11 @@ function useLocalWorker({
 	logLevel,
 	logPrefix,
 	enablePagesAssetsServiceBinding,
+	experimentalMiniflare3,
 }: LocalProps) {
 	// TODO: pass vars via command line
 	const local = useRef<ChildProcess>();
+	const experimentalLocal = useRef<Miniflare3Type>();
 	const removeSignalExitListener = useRef<() => void>();
 	const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
 
@@ -188,6 +200,33 @@ function useLocalWorker({
 				enablePagesAssetsServiceBinding,
 			});
 
+			if (experimentalMiniflare3) {
+				// 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...");
+				const { Miniflare } = await import("@miniflare/tre");
+				const mf = new Miniflare(options);
+				experimentalLocal.current = mf;
+				removeSignalExitListener.current = onExit((_code, _signal) => {
+					logger.log("⎔ Shutting down experimental local server.");
+					mf.dispose();
+					experimentalLocal.current = undefined;
+				});
+				await mf.ready;
+				return;
+			}
+
 			const nodeOptions = setupNodeOptions({ inspect, ip, inspectorPort });
 			logger.log("⎔ Starting a local server...");
 
@@ -280,9 +319,14 @@ function useLocalWorker({
 				logger.log("⎔ Shutting down local server.");
 				local.current?.kill();
 				local.current = undefined;
-				removeSignalExitListener.current && removeSignalExitListener.current();
-				removeSignalExitListener.current = undefined;
 			}
+			if (experimentalLocal.current) {
+				logger.log("⎔ Shutting down experimental local server.");
+				experimentalLocal.current?.dispose();
+				experimentalLocal.current = undefined;
+			}
+			removeSignalExitListener.current?.();
+			removeSignalExitListener.current = undefined;
 		};
 	}, [
 		bundle,
@@ -459,7 +503,10 @@ export function setupMiniflareOptions({
 	logPrefix,
 	workerDefinitions,
 	enablePagesAssetsServiceBinding,
-}: SetupMiniflareOptionsProps): MiniflareOptions {
+}: SetupMiniflareOptionsProps): {
+	miniflareCLIPath: string;
+	forkOptions: string[];
+} {
 	// TODO: This was already messy with the custom `disableLogs` and `logOptions`.
 	// It's now getting _really_ messy now with Pages ASSETS binding outside and the external Durable Objects inside.
 	const options = {