wrangler 2.0.23 → 2.0.26

package/src/dev/local.tsx

@@ -4,11 +4,13 @@ import { writeFile } from "node:fs/promises";
 import path from "node:path";
 import { useState, useEffect, useRef } from "react";
 import onExit from "signal-exit";
+import { registerWorker } from "../dev-registry";
 import useInspector from "../inspect";
 import { logger } from "../logger";
 import { DEFAULT_MODULE_RULES } from "../module-collection";
 import { waitForPortToBeAvailable } from "../proxy";
 import type { Config } from "../config";
+import type { WorkerRegistry } from "../dev-registry";
 import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit, CfScriptFormat } from "../worker";
@@ -21,9 +23,10 @@ interface LocalProps {
 	format: CfScriptFormat | undefined;
 	compatibilityDate: string;
 	compatibilityFlags: string[] | undefined;
+	usageModel: "bundled" | "unbound" | undefined;
 	bindings: CfWorkerInit["bindings"];
+	workerDefinitions: WorkerRegistry;
 	assetPaths: AssetPaths | undefined;
-	isWorkersSite: boolean;
 	port: number;
 	ip: string;
 	rules: Config["rules"];
@@ -56,9 +59,10 @@ function useLocalWorker({
 	format,
 	compatibilityDate,
 	compatibilityFlags,
+	usageModel,
 	bindings,
+	workerDefinitions,
 	assetPaths,
-	isWorkersSite,
 	port,
 	inspectorPort,
 	rules,
@@ -88,6 +92,27 @@ function useLocalWorker({
 		  // so that it's persisted in the temp dir across a dev session
 		  // even when we change source and reload
 		  null;
+
+	useEffect(() => {
+		if (bindings.services && bindings.services.length > 0) {
+			logger.warn(
+				"⎔ Support for service bindings in local mode is experimental and may change."
+			);
+		}
+	}, [bindings.services]);
+
+	useEffect(() => {
+		const externalDurableObjects = (
+			bindings.durable_objects?.bindings || []
+		).filter((binding) => binding.script_name);
+
+		if (externalDurableObjects.length > 0) {
+			logger.warn(
+				"⎔ Support for external Durable Objects in local mode is experimental and may change."
+			);
+		}
+	}, [bindings.durable_objects?.bindings]);
+
 	useEffect(() => {
 		const abortController = new AbortController();
 		async function startLocalWorker() {
@@ -100,12 +125,6 @@ function useLocalWorker({
 				abortSignal: abortController.signal,
 			});
 
-			if (bindings.services && bindings.services.length > 0) {
-				throw new Error(
-					"⎔ Service bindings are not yet supported in local mode."
-				);
-			}
-
 			// In local mode, we want to copy all referenced modules into
 			// the output bundle directory before starting up
 			for (const module of bundle.modules) {
@@ -178,6 +197,15 @@ function useLocalWorker({
 					? `${localProtocol}://${localUpstream}`
 					: undefined;
 
+			const internalDurableObjects = (
+				bindings.durable_objects?.bindings || []
+			).filter((binding) => !binding.script_name);
+			const externalDurableObjects = (
+				bindings.durable_objects?.bindings || []
+			).filter((binding) => binding.script_name);
+
+			// 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: MiniflareOptions = {
 				name: workerName,
 				port,
@@ -194,12 +222,37 @@ function useLocalWorker({
 					})),
 				compatibilityDate,
 				compatibilityFlags,
+				usageModel,
 				kvNamespaces: bindings.kv_namespaces?.map((kv) => kv.binding),
 				r2Buckets: bindings.r2_buckets?.map((r2) => r2.binding),
 				durableObjects: Object.fromEntries(
-					(bindings.durable_objects?.bindings ?? []).map<[string, string]>(
-						(value) => [value.name, value.class_name]
-					)
+					internalDurableObjects.map((binding) => [
+						binding.name,
+						binding.class_name,
+					])
+				),
+				externalDurableObjects: Object.fromEntries(
+					externalDurableObjects
+						.map((binding) => {
+							const service = workerDefinitions[binding.script_name as string];
+							if (!service) return [binding.name, undefined];
+
+							const name = service.durableObjects.find(
+								(durableObject) =>
+									durableObject.className === binding.class_name
+							)?.name;
+							if (!name) return [binding.name, undefined];
+
+							return [
+								binding.name,
+								{
+									name,
+									host: service.durableObjectsHost,
+									port: service.durableObjectsPort,
+								},
+							];
+						})
+						.filter(([_, details]) => !!details)
 				),
 				...(localPersistencePath
 					? {
@@ -273,8 +326,28 @@ function useLocalWorker({
 				stdio: "pipe",
 			}));
 
-			child.on("message", (message) => {
-				if (message === "ready") {
+			child.on("message", async (messageString) => {
+				const message = JSON.parse(messageString as string);
+				if (message.ready) {
+					// Let's register our presence in the dev registry
+					if (workerName) {
+						await registerWorker(workerName, {
+							protocol: localProtocol,
+							mode: "local",
+							port,
+							host: ip,
+							durableObjects: internalDurableObjects.map((binding) => ({
+								name: binding.name,
+								className: binding.class_name,
+							})),
+							...(message.durableObjectsPort
+								? {
+										durableObjectsHost: ip,
+										durableObjectsPort: message.durableObjectsPort,
+								  }
+								: {}),
+						});
+					}
 					onReady?.();
 				}
 			});
@@ -352,12 +425,13 @@ function useLocalWorker({
 		bindings.r2_buckets,
 		bindings.vars,
 		bindings.services,
+		workerDefinitions,
 		compatibilityDate,
 		compatibilityFlags,
+		usageModel,
 		localPersistencePath,
 		liveReload,
 		assetPaths,
-		isWorkersSite,
 		rules,
 		bindings.wasm_modules,
 		bindings.text_blobs,

package/src/dev/remote.tsx

@@ -55,6 +55,8 @@ export function Remote(props: {
 	host: string | undefined;
 	routes: Route[] | undefined;
 	onReady?: (() => void) | undefined;
+	sourceMapPath: string | undefined;
+	sendMetrics: boolean | undefined;
 }) {
 	const [accountId, setAccountId] = useState(props.accountId);
 	const accountChoicesRef = useRef<Promise<ChooseAccountItem[]>>();
@@ -78,6 +80,7 @@ export function Remote(props: {
 		host: props.host,
 		routes: props.routes,
 		onReady: props.onReady,
+		sendMetrics: props.sendMetrics,
 	});
 
 	usePreviewServer({
@@ -97,6 +100,7 @@ export function Remote(props: {
 				: undefined,
 		port: props.inspectorPort,
 		logToTerminal: true,
+		sourceMapPath: props.sourceMapPath,
 	});
 
 	const errorHandler = useErrorHandler();
@@ -161,6 +165,7 @@ export function useWorker(props: {
 	host: string | undefined;
 	routes: Route[] | undefined;
 	onReady: (() => void) | undefined;
+	sendMetrics: boolean | undefined;
 }): CfPreviewToken | undefined {
 	const {
 		name,
@@ -202,6 +207,7 @@ export function useWorker(props: {
 				zone: props.zone,
 				host: props.host,
 				routes: props.routes,
+				sendMetrics: props.sendMetrics,
 			};
 
 			setSession(
@@ -230,6 +236,7 @@ export function useWorker(props: {
 		props.legacyEnv,
 		props.routes,
 		props.zone,
+		props.sendMetrics,
 	]);
 
 	// This effect uses the session to upload the worker and create a preview
@@ -320,17 +327,40 @@ export function useWorker(props: {
 				zone: props.zone,
 				host: props.host,
 				routes: props.routes,
+				sendMetrics: props.sendMetrics,
 			};
 
-			setToken(
-				await createWorkerPreview(
-					init,
-					workerAccount,
-					workerCtx,
-					session,
-					abortController.signal
-				)
+			const workerPreviewToken = await createWorkerPreview(
+				init,
+				workerAccount,
+				workerCtx,
+				session,
+				abortController.signal
 			);
+
+			setToken(workerPreviewToken);
+
+			// TODO: Once we get service bindings working in the
+			// edge preview server, we can define remote dev service bindings
+			// and you can uncomment this code.
+			// https://github.com/cloudflare/wrangler2/issues/1182
+
+			/*
+			if (name) {
+				await registerWorker(name, {
+					mode: "remote",
+					// upstream protocol is always https (https://github.com/cloudflare/wrangler2/issues/583)
+					protocol: "https",
+					port: undefined,
+					host: workerPreviewToken.host,
+					headers: {
+						"cf-workers-preview-token": workerPreviewToken.value,
+						host: workerPreviewToken.host,
+					},
+				});
+			}
+			*/
+
 			onReady?.();
 		}
 		start().catch((err) => {
@@ -377,6 +407,7 @@ export function useWorker(props: {
 		props.routes,
 		session,
 		onReady,
+		props.sendMetrics,
 	]);
 	return token;
 }

package/src/dev/use-esbuild.ts

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 import { bundleWorker } from "../bundle";
 import { logger } from "../logger";
 import type { Config } from "../config";
+import type { WorkerRegistry } from "../dev-registry";
 import type { Entry } from "../entry";
 import type { CfModule } from "../worker";
 import type { WatchMode } from "esbuild";
@@ -15,6 +16,7 @@ export type EsbuildBundle = {
 	entry: Entry;
 	type: "esm" | "commonjs";
 	modules: CfModule[];
+	sourceMapPath: string | undefined;
 };
 
 export function useEsbuild({
@@ -23,24 +25,34 @@ export function useEsbuild({
 	jsxFactory,
 	jsxFragment,
 	rules,
+	assets,
 	serveAssetsFromWorker,
 	tsconfig,
 	minify,
 	nodeCompat,
 	define,
 	noBundle,
+	workerDefinitions,
+	services,
+	durableObjects,
+	firstPartyWorkerDevFacade,
 }: {
 	entry: Entry;
 	destination: string | undefined;
 	jsxFactory: string | undefined;
 	jsxFragment: string | undefined;
 	rules: Config["rules"];
+	assets: Config["assets"];
 	define: Config["define"];
+	services: Config["services"];
 	serveAssetsFromWorker: boolean;
 	tsconfig: string | undefined;
 	minify: boolean | undefined;
 	nodeCompat: boolean | undefined;
 	noBundle: boolean;
+	workerDefinitions: WorkerRegistry;
+	durableObjects: Config["durable_objects"];
+	firstPartyWorkerDevFacade: boolean | undefined;
 }): EsbuildBundle | undefined {
 	const [bundle, setBundle] = useState<EsbuildBundle>();
 	const { exit } = useApp();
@@ -76,12 +88,14 @@ export function useEsbuild({
 				bundleType,
 				modules,
 				stop,
+				sourceMapPath,
 			}: Awaited<ReturnType<typeof bundleWorker>> = noBundle
 				? {
 						modules: [],
 						resolvedEntryPointPath: entry.file,
 						bundleType: entry.format === "modules" ? "esm" : "commonjs",
 						stop: undefined,
+						sourceMapPath: undefined,
 				  }
 				: await bundleWorker(entry, destination, {
 						serveAssetsFromWorker,
@@ -94,6 +108,14 @@ export function useEsbuild({
 						nodeCompat,
 						define,
 						checkFetch: true,
+						assets: assets && {
+							...assets,
+							// disable the cache in dev
+							bypassCache: true,
+						},
+						workerDefinitions,
+						services,
+						firstPartyWorkerDevFacade,
 				  });
 
 			// Capture the `stop()` method to use as the `useEffect()` destructor.
@@ -119,6 +141,7 @@ export function useEsbuild({
 				path: resolvedEntryPointPath,
 				type: bundleType,
 				modules,
+				sourceMapPath,
 			});
 		}
 
@@ -145,6 +168,11 @@ export function useEsbuild({
 		minify,
 		nodeCompat,
 		define,
+		assets,
+		services,
+		durableObjects,
+		workerDefinitions,
+		firstPartyWorkerDevFacade,
 	]);
 	return bundle;
 }

package/src/dev/validate-dev-props.ts

@@ -0,0 +1,31 @@
+import type { DevProps } from "./dev";
+
+export function validateDevProps(props: DevProps) {
+	if (
+		!props.isWorkersSite &&
+		props.assetPaths &&
+		props.entry.format === "service-worker"
+	) {
+		throw new Error(
+			"You cannot use the service-worker format with an `assets` directory yet. For information on how to migrate to the module-worker format, see: https://developers.cloudflare.com/workers/learning/migrating-to-module-workers/"
+		);
+	}
+
+	if (props.bindings.wasm_modules && props.entry.format === "modules") {
+		throw new Error(
+			"You cannot configure [wasm_modules] with an ES module worker. Instead, import the .wasm module directly in your code"
+		);
+	}
+
+	if (props.bindings.text_blobs && props.entry.format === "modules") {
+		throw new Error(
+			"You cannot configure [text_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[rules]` in your wrangler.toml"
+		);
+	}
+
+	if (props.bindings.data_blobs && props.entry.format === "modules") {
+		throw new Error(
+			"You cannot configure [data_blobs] with an ES module worker. Instead, import the file directly in your code, and optionally configure `[rules]` in your wrangler.toml"
+		);
+	}
+}

package/src/dev-registry.tsx

@@ -0,0 +1,160 @@
+import http from "http";
+import net from "net";
+import bodyParser from "body-parser";
+import express from "express";
+import { createHttpTerminator } from "http-terminator";
+import { fetch } from "undici";
+import { logger } from "./logger";
+import type { Server } from "http";
+import type { HttpTerminator } from "http-terminator";
+
+const DEV_REGISTRY_PORT = "6284";
+const DEV_REGISTRY_HOST = `http://localhost:${DEV_REGISTRY_PORT}`;
+
+let server: Server;
+let terminator: HttpTerminator;
+
+export type WorkerRegistry = Record<string, WorkerDefinition>;
+
+type WorkerDefinition = {
+	port: number | undefined;
+	protocol: "http" | "https" | undefined;
+	host: string | undefined;
+	mode: "local" | "remote";
+	headers?: Record<string, string>;
+	durableObjects: { name: string; className: string }[];
+	durableObjectsHost?: string;
+	durableObjectsPort?: number;
+};
+
+/**
+ * A helper function to check whether our service registry is already running
+ */
+async function isPortAvailable() {
+	return new Promise((resolve, reject) => {
+		const netServer = net
+			.createServer()
+			.once("error", (err) => {
+				netServer.close();
+				if ((err as unknown as { code: string }).code === "EADDRINUSE") {
+					resolve(false);
+				} else {
+					reject(err);
+				}
+			})
+			.once("listening", () => {
+				netServer.close();
+				resolve(true);
+			});
+		netServer.listen(DEV_REGISTRY_PORT);
+	});
+}
+
+const jsonBodyParser = bodyParser.json();
+
+/**
+ * Start the service registry. It's a simple server
+ * that exposes endpoints for registering and unregistering
+ * services, as well as getting the state of the registry.
+ */
+export async function startWorkerRegistry() {
+	if ((await isPortAvailable()) && !server) {
+		const app = express();
+
+		let workers: WorkerRegistry = {};
+		app
+			.get("/workers", async (req, res) => {
+				res.json(workers);
+			})
+			.post("/workers/:workerId", jsonBodyParser, async (req, res) => {
+				workers[req.params.workerId] = req.body;
+				res.json(null);
+			})
+			.delete(`/workers/:workerId`, async (req, res) => {
+				delete workers[req.params.workerId];
+				res.json(null);
+			})
+			.delete("/workers", async (req, res) => {
+				workers = {};
+				res.json(null);
+			});
+		server = http.createServer(app);
+		terminator = createHttpTerminator({ server });
+		server.listen(DEV_REGISTRY_PORT);
+	}
+}
+
+/**
+ * Stop the service registry.
+ */
+export async function stopWorkerRegistry() {
+	await terminator?.terminate();
+}
+
+/**
+ * Register a worker in the registry.
+ */
+export async function registerWorker(
+	name: string,
+	definition: WorkerDefinition
+) {
+	try {
+		return await fetch(`${DEV_REGISTRY_HOST}/workers/${name}`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(definition),
+		});
+	} catch (e) {
+		if (
+			!["ECONNRESET", "ECONNREFUSED"].includes(
+				(e as unknown as { cause?: { code?: string } }).cause?.code || "___"
+			)
+		) {
+			logger.error("Failed to register worker in local service registry", e);
+		} else {
+			logger.debug("Failed to register worker in local service registry", e);
+		}
+	}
+}
+
+/**
+ * Unregister a worker from the registry.
+ */
+export async function unregisterWorker(name: string) {
+	try {
+		await fetch(`${DEV_REGISTRY_HOST}/workers/${name}`, {
+			method: "DELETE",
+		});
+	} catch (e) {
+		if (
+			!["ECONNRESET", "ECONNREFUSED"].includes(
+				(e as unknown as { cause?: { code?: string } }).cause?.code || "___"
+			)
+		) {
+			throw e;
+			// logger.error("failed to unregister worker", e);
+		}
+	}
+}
+
+/**
+ * Get the state of the service registry.
+ */
+export async function getRegisteredWorkers(): Promise<
+	WorkerRegistry | undefined
+> {
+	try {
+		const response = await fetch(`${DEV_REGISTRY_HOST}/workers`);
+		return (await response.json()) as WorkerRegistry;
+	} catch (e) {
+		if (
+			!["ECONNRESET", "ECONNREFUSED"].includes(
+				(e as unknown as { cause?: { code?: string } }).cause?.code || "___"
+			)
+		) {
+			throw e;
+		}
+	}
+}