wrangler 2.0.29 → 2.1.0

package/src/__tests__/tail.test.ts

@@ -14,6 +14,7 @@ import type {
 	ScheduledEvent,
 	AlarmEvent,
 } from "../tail";
+import type { RequestInit } from "undici";
 import type WebSocket from "ws";
 
 describe("tail", () => {
@@ -44,12 +45,12 @@ describe("tail", () => {
 
 		it("creates and then delete tails", async () => {
 			const api = mockWebsocketAPIs();
-			expect(api.requests.creation.count).toStrictEqual(0);
+			expect(api.requests.creation.length).toStrictEqual(0);
 
 			await runWrangler("tail test-worker");
 
 			await expect(api.ws.connected).resolves.toBeTruthy();
-			expect(api.requests.creation.count).toStrictEqual(1);
+			expect(api.requests.creation.length).toStrictEqual(1);
 			expect(api.requests.deletion.count).toStrictEqual(0);
 
 			api.ws.close();
@@ -57,7 +58,7 @@ describe("tail", () => {
 		});
 		it("should connect to the worker assigned to a given route", async () => {
 			const api = mockWebsocketAPIs();
-			expect(api.requests.creation.count).toStrictEqual(0);
+			expect(api.requests.creation.length).toStrictEqual(0);
 
 			mockGetZoneFromHostRequest("example.com", "test-zone");
 			mockCollectKnownRoutesRequest([
@@ -69,7 +70,7 @@ describe("tail", () => {
 			await runWrangler("tail example.com/*");
 
 			await expect(api.ws.connected).resolves.toBeTruthy();
-			expect(api.requests.creation.count).toStrictEqual(1);
+			expect(api.requests.creation.length).toStrictEqual(1);
 			expect(api.requests.deletion.count).toStrictEqual(0);
 
 			api.ws.close();
@@ -90,12 +91,12 @@ describe("tail", () => {
 
 		it("creates and then delete tails: legacy envs", async () => {
 			const api = mockWebsocketAPIs("some-env", true);
-			expect(api.requests.creation.count).toStrictEqual(0);
+			expect(api.requests.creation.length).toStrictEqual(0);
 
 			await runWrangler("tail test-worker --env some-env --legacy-env true");
 
 			await expect(api.ws.connected).resolves.toBeTruthy();
-			expect(api.requests.creation.count).toStrictEqual(1);
+			expect(api.requests.creation.length).toStrictEqual(1);
 			expect(api.requests.deletion.count).toStrictEqual(0);
 
 			api.ws.close();
@@ -104,12 +105,12 @@ describe("tail", () => {
 
 		it("creates and then delete tails: service envs", async () => {
 			const api = mockWebsocketAPIs("some-env");
-			expect(api.requests.creation.count).toStrictEqual(0);
+			expect(api.requests.creation.length).toStrictEqual(0);
 
 			await runWrangler("tail test-worker --env some-env --legacy-env false");
 
 			await expect(api.ws.connected).resolves.toBeTruthy();
-			expect(api.requests.creation.count).toStrictEqual(1);
+			expect(api.requests.creation.length).toStrictEqual(1);
 			expect(api.requests.deletion.count).toStrictEqual(0);
 
 			api.ws.close();
@@ -143,65 +144,57 @@ describe("tail", () => {
 			await expect(tooLow).rejects.toThrow();
 
 			await runWrangler("tail test-worker --sampling-rate 0.25");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ sampling_rate: 0.25 },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"sampling_rate":0.25}]}`
+			);
 		});
 
 		it("sends single status filters", async () => {
 			const api = mockWebsocketAPIs();
 			await runWrangler("tail test-worker --status error");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ outcome: ["exception", "exceededCpu", "exceededMemory", "unknown"] },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"outcome":["exception","exceededCpu","exceededMemory","unknown"]}]}`
+			);
 		});
 
 		it("sends multiple status filters", async () => {
 			const api = mockWebsocketAPIs();
 			await runWrangler("tail test-worker --status error --status canceled");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{
-					outcome: [
-						"exception",
-						"exceededCpu",
-						"exceededMemory",
-						"unknown",
-						"canceled",
-					],
-				},
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"outcome":["exception","exceededCpu","exceededMemory","unknown","canceled"]}]}`
+			);
 		});
 
 		it("sends single HTTP method filters", async () => {
 			const api = mockWebsocketAPIs();
 			await runWrangler("tail test-worker --method POST");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ method: ["POST"] },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"method":["POST"]}]}`
+			);
 		});
 
 		it("sends multiple HTTP method filters", async () => {
 			const api = mockWebsocketAPIs();
 			await runWrangler("tail test-worker --method POST --method GET");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ method: ["POST", "GET"] },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"method":["POST","GET"]}]}`
+			);
 		});
 
 		it("sends header filters without a query", async () => {
 			const api = mockWebsocketAPIs();
 			await runWrangler("tail test-worker --header X-CUSTOM-HEADER");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ header: { key: "X-CUSTOM-HEADER" } },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"header":{"key":"X-CUSTOM-HEADER"}}]}`
+			);
 		});
 
 		it("sends header filters with a query", async () => {
 			const api = mockWebsocketAPIs();
 			await runWrangler("tail test-worker --header X-CUSTOM-HEADER:some-value");
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ header: { key: "X-CUSTOM-HEADER", query: "some-value" } },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"header":{"key":"X-CUSTOM-HEADER","query":"some-value"}}]}`
+			);
 		});
 
 		it("sends single IP filters", async () => {
@@ -209,9 +202,9 @@ describe("tail", () => {
 			const fakeIp = "192.0.2.1";
 
 			await runWrangler(`tail test-worker --ip ${fakeIp}`);
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ client_ip: [fakeIp] },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"client_ip":["${fakeIp}"]}]}`
+			);
 		});
 
 		it("sends multiple IP filters", async () => {
@@ -219,9 +212,9 @@ describe("tail", () => {
 			const fakeIp = "192.0.2.1";
 
 			await runWrangler(`tail test-worker --ip ${fakeIp} --ip self`);
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ client_ip: [fakeIp, "self"] },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"client_ip":["${fakeIp}","self"]}]}`
+			);
 		});
 
 		it("sends search filters", async () => {
@@ -229,9 +222,9 @@ describe("tail", () => {
 			const search = "filterMe";
 
 			await runWrangler(`tail test-worker --search ${search}`);
-			await expect(api.nextMessageJson()).resolves.toHaveProperty("filters", [
-				{ query: search },
-			]);
+			expect(api.requests.creation[0].body).toEqual(
+				`{"filters":[{"query":"${search}"}]}`
+			);
 		});
 
 		it("sends everything but the kitchen sink", async () => {
@@ -252,30 +245,10 @@ describe("tail", () => {
 				`--search ${query} ` +
 				`--debug`;
 
-			const expectedWebsocketMessage = {
-				filters: [
-					{ sampling_rate },
-					{
-						outcome: [
-							"ok",
-							"exception",
-							"exceededCpu",
-							"exceededMemory",
-							"unknown",
-						],
-					},
-					{ method },
-					{ header: { key: "X-HELLO", query: "world" } },
-					{ client_ip },
-					{ query },
-				],
-				debug: true,
-			};
+			const expectedWebsocketMessage = `{"filters":[{"sampling_rate":0.69},{"outcome":["ok","exception","exceededCpu","exceededMemory","unknown"]},{"method":["GET","POST","PUT"]},{"header":{"key":"X-HELLO","query":"world"}},{"client_ip":["192.0.2.1","self"]},{"query":"onlyTheseMessagesPlease"}]}`;
 
 			await runWrangler(`tail test-worker ${cliFilters}`);
-			await expect(api.nextMessageJson()).resolves.toEqual(
-				expectedWebsocketMessage
-			);
+			expect(api.requests.creation[0].body).toEqual(expectedWebsocketMessage);
 		});
 	});
 
@@ -589,7 +562,7 @@ function deserializeToJson(message: WebSocket.RawData): string {
  */
 type MockAPI = {
 	requests: {
-		creation: RequestCounter;
+		creation: RequestInit[];
 		deletion: RequestCounter;
 	};
 	ws: MockWebSocket;
@@ -615,15 +588,15 @@ function mockCreateTailRequest(
 	websocketURL: string,
 	env?: string,
 	legacyEnv = false
-): RequestCounter {
-	const requests = { count: 0 };
+): RequestInit[] {
+	const requests: RequestInit[] = [];
 	const servicesOrScripts = env && !legacyEnv ? "services" : "scripts";
 	const environment = env && !legacyEnv ? "/environments/:envName" : "";
 	setMockResponse(
 		`/accounts/:accountId/workers/${servicesOrScripts}/:scriptName${environment}/tails`,
 		"POST",
-		([_url, accountId, scriptName, envName]) => {
-			requests.count++;
+		([_url, accountId, scriptName, envName], req) => {
+			requests.push(req);
 			expect(accountId).toEqual("some-account-id");
 			expect(scriptName).toEqual(
 				legacyEnv && env ? `test-worker-${env}` : "test-worker"
@@ -710,7 +683,7 @@ function mockWebsocketAPIs(env?: string, legacyEnv = false): MockAPI {
 	const api: MockAPI = {
 		requests: {
 			deletion: { count: 0 },
-			creation: { count: 0 },
+			creation: [],
 		},
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		ws: null!, // will be set in the `beforeEach()` below.

package/src/api/dev.ts

@@ -1,3 +1,4 @@
+import { fetch } from "undici";
 import { startApiDev, startDev } from "../dev";
 import { logger } from "../logger";
 
@@ -79,6 +80,8 @@ export async function unstable_dev(
 			`unstable_dev() is experimental\nunstable_dev()'s behaviour will likely change in future releases`
 		);
 	}
+	let readyPort: number;
+	let readyAddress: string;
 	//due to Pages adoption of unstable_dev, we can't *just* disable rebuilds and watching. instead, we'll have two versions of startDev, which will converge.
 	if (testMode) {
 		//in testMode, we can run multiple wranglers in parallel, but rebuilds might not work out of the box
@@ -94,16 +97,24 @@ export async function unstable_dev(
 					showInteractiveDevSession: false,
 					_: [],
 					$0: "",
+					port: options?.port ?? 0,
 					...options,
 					local: true,
-					onReady: () => ready(devServer),
+					onReady: (address, port) => {
+						readyPort = port;
+						readyAddress = address;
+						ready(devServer);
+					},
 				});
 			}).then((devServer) => {
 				// now that the inner promise has resolved, we can resolve the outer promise
 				// with an object that lets you fetch and stop the dev server
 				resolve({
 					stop: devServer.stop,
-					fetch: devServer.fetch,
+					fetch: async (init?: RequestInit) => {
+						const urlToFetch = `http://${readyAddress}:${readyPort}/`;
+						return await fetch(urlToFetch, init);
+					},
 					//no-op, does nothing in tests
 					waitUntilExit: async () => {
 						return;
@@ -113,6 +124,7 @@ export async function unstable_dev(
 		});
 	} else {
 		//outside of test mode, rebuilds work fine, but only one instance of wrangler will work at a time
+
 		return new Promise<UnstableDev>((resolve) => {
 			//lmao
 			return new Promise<Awaited<ReturnType<typeof startDev>>>((ready) => {
@@ -125,12 +137,19 @@ export async function unstable_dev(
 					$0: "",
 					...options,
 					local: true,
-					onReady: () => ready(devServer),
+					onReady: (address, port) => {
+						readyPort = port;
+						readyAddress = address;
+						ready(devServer);
+					},
 				});
 			}).then((devServer) => {
 				resolve({
 					stop: devServer.stop,
-					fetch: devServer.fetch,
+					fetch: async (init?: RequestInit) => {
+						const urlToFetch = `http://${readyAddress}:${readyPort}/`;
+						return await fetch(urlToFetch, init);
+					},
 					waitUntilExit: devServer.devReactElement.waitUntilExit,
 				});
 			});

package/src/bundle.ts

@@ -75,6 +75,7 @@ export async function bundleWorker(
 		services: Config["services"] | undefined;
 		workerDefinitions: WorkerRegistry | undefined;
 		firstPartyWorkerDevFacade: boolean | undefined;
+		targetConsumer: "dev" | "publish";
 	}
 ): Promise<BundleResult> {
 	const {
@@ -91,6 +92,7 @@ export async function bundleWorker(
 		workerDefinitions,
 		services,
 		firstPartyWorkerDevFacade,
+		targetConsumer,
 	} = options;
 
 	// We create a temporary directory for any oneoff files we
@@ -140,6 +142,19 @@ export async function bundleWorker(
 	// a new entry point, that we call "middleware" or "facades".
 	// Look at implementations of these functions to learn more.
 
+	// We also have middleware that uses a more "traditional" middleware stack,
+	// which is all loaded as one in a stack.
+	const middlewareToLoad: MiddlewareLoader[] = [
+		// {
+		// 	path: "templates/middleware/middleware-pretty-error.ts",
+		// 	publish: true,
+		// 	dev: false,
+		// },
+		// {
+		// 	path: "../templates/middleware/middleware-scheduled.ts",
+		// },
+	];
+
 	type MiddlewareFn = (arg0: Entry) => Promise<Entry>;
 	const middleware: (false | undefined | MiddlewareFn)[] = [
 		// serve static assets
@@ -173,6 +188,32 @@ export async function bundleWorker(
 			((currentEntry: Entry) => {
 				return applyFirstPartyWorkerDevFacade(currentEntry, tmpDir.path);
 			}),
+
+		// Middleware loader: to add middleware, we add the path to the middleware
+		// Currently for demonstration purposes we have two example middlewares
+		// Middlewares are togglable by changing the `publish` (default=false) and `dev` (default=true) options
+		// As we are not yet supporting user created middlewares yet, if no wrangler applied middleware
+		// are found, we will not load any middleware. We also need to check if there are middlewares compatible with
+		// the target consumer (dev / publish).
+		(middlewareToLoad.filter(
+			(m) =>
+				(m.publish && targetConsumer === "publish") ||
+				(m.dev !== false && targetConsumer === "dev")
+		).length > 0 ||
+			process.env.EXPERIMENTAL_MIDDLEWARE === "true") &&
+			((currentEntry: Entry) => {
+				return applyMiddlewareLoaderFacade(
+					currentEntry,
+					tmpDir.path,
+					middlewareToLoad.filter(
+						// We dynamically filter the middleware depending on where we are bundling for
+						(m) =>
+							(targetConsumer === "dev" && m.dev !== false) ||
+							(m.publish && targetConsumer === "publish")
+					),
+					moduleCollector.plugin
+				);
+			}),
 	].filter(Boolean);
 
 	let inputEntry = entry;
@@ -215,7 +256,11 @@ export async function bundleWorker(
 			".cjs": "jsx",
 		},
 		plugins: [
-			moduleCollector.plugin,
+			// We run the moduleCollector plugin for service workers as part of the middleware loader
+			// so we only run here for modules or with no middleware to load
+			...(entry.format === "modules" || middlewareToLoad.length === 0
+				? [moduleCollector.plugin]
+				: []),
 			...(nodeCompat
 				? [NodeGlobalsPolyfills({ buffer: true }), NodeModulesPolyfills()]
 				: // we use checkForNodeBuiltinsPlugin to throw a nicer error
@@ -323,6 +368,185 @@ async function applyFormatDevErrorsFacade(
 	};
 }
 
+/**
+ * A facade that acts as a "middleware loader".
+ * Instead of needing to apply a facade for each individual middleware, this allows
+ * middleware to be written in a more traditional manner and then be applied all
+ * at once, requiring just two esbuild steps, rather than 1 per middleware.
+ */
+
+interface MiddlewareLoader {
+	path: string;
+	// By default all middleware will run on dev, but will not be run when published
+	publish?: boolean;
+	dev?: boolean;
+}
+
+async function applyMiddlewareLoaderFacade(
+	entry: Entry,
+	tmpDirPath: string,
+	middleware: MiddlewareLoader[], // a list of paths to middleware files
+	moduleCollectorPlugin: esbuild.Plugin
+): Promise<Entry> {
+	// Firstly we need to insert the middleware array into the project,
+	// and then we load the middleware - this insertion and loading is
+	// different for each format.
+
+	// STEP 1: Insert the middleware
+	const targetPathInsertion = path.join(
+		tmpDirPath,
+		"middleware-insertion.entry.js"
+	);
+
+	// We need to import each of the middlewares, so we need to generate a
+	// random, unique identifier that we can use for the import.
+	// Middlewares are required to be default exports so we can import to any name.
+	const middlewareIdentifiers = middleware.map(
+		(_, index) => `__MIDDLEWARE_${index}__`
+	);
+
+	const dynamicFacadePath = path.join(
+		tmpDirPath,
+		"middleware-insertion-facade.js"
+	);
+
+	if (entry.format === "modules") {
+		// We use a facade to expose the required middleware alongside any user defined
+		// middleware on the worker object
+
+		const imports = middlewareIdentifiers
+			.map((m) => `import ${m} from "${m}";`)
+			.join("\n");
+
+		// write a file with all of the imports required
+		fs.writeFileSync(
+			dynamicFacadePath,
+			`import worker from "__ENTRY_POINT__";
+			${imports}
+			const facade = {
+				...worker,
+				middleware: [
+					${middlewareIdentifiers.join(",")}${middlewareIdentifiers.length > 0 ? "," : ""}
+					...(worker.middleware ? worker.middleware : []),
+				]
+			}
+			export * from "__ENTRY_POINT__";
+			export default facade;`
+		);
+
+		await esbuild.build({
+			entryPoints: [path.resolve(getBasePath(), dynamicFacadePath)],
+			bundle: true,
+			sourcemap: true,
+			format: "esm",
+			plugins: [
+				esbuildAliasExternalPlugin({
+					__ENTRY_POINT__: entry.file,
+					...Object.fromEntries(
+						middleware.map((val, index) => [
+							middlewareIdentifiers[index],
+							path.resolve(getBasePath(), val.path),
+						])
+					),
+				}),
+			],
+			outfile: targetPathInsertion,
+		});
+	} else {
+		// We handle service workers slightly differently as we have to overwrite
+		// the event listeners and reimplement them
+
+		await esbuild.build({
+			entryPoints: [entry.file],
+			bundle: true,
+			sourcemap: true,
+			define: {
+				"process.env.NODE_ENV": `"${process.env["NODE_ENV" + ""]}"`,
+			},
+			format: "esm",
+			outfile: targetPathInsertion,
+			plugins: [moduleCollectorPlugin],
+		});
+
+		const imports = middlewareIdentifiers
+			.map(
+				(m, i) =>
+					`import ${m} from "${path.resolve(
+						getBasePath(),
+						middleware[i].path
+					)}";`
+			)
+			.join("\n");
+
+		// We add the new modules with imports and then register using the
+		// addMiddleware function (which gets rewritten in the next build step)
+
+		// We choose to run middleware inserted in wrangler before user inserted
+		// middleware in the stack
+		// To do this, we either need to execute the addMiddleware function first
+		// before any user middleware, or use a separate handling function.
+		// We choose to do the latter as to prepend, we would have to load the entire
+		// script into memory as a prepend function doesn't exist or work in the same
+		// way that an append function does.
+
+		fs.copyFileSync(targetPathInsertion, dynamicFacadePath);
+		fs.appendFileSync(
+			dynamicFacadePath,
+			`
+			${imports}
+			addMiddlewareInternal([${middlewareIdentifiers.join(",")}])
+		`
+		);
+	}
+
+	// STEP 2: Load the middleware
+	// We want to get the filename of the orginal entry point
+	let targetPathLoader = path.join(tmpDirPath, path.basename(entry.file));
+	if (path.extname(entry.file) === "") targetPathLoader += ".js";
+
+	const loaderPath =
+		entry.format === "modules"
+			? path.resolve(getBasePath(), "templates/middleware/loader-modules.ts")
+			: dynamicFacadePath;
+
+	await esbuild.build({
+		entryPoints: [loaderPath],
+		bundle: true,
+		sourcemap: true,
+		format: "esm",
+		...(entry.format === "service-worker"
+			? {
+					inject: [
+						path.resolve(getBasePath(), "templates/middleware/loader-sw.ts"),
+					],
+					define: {
+						addEventListener: "__facade_addEventListener__",
+						removeEventListener: "__facade_removeEventListener__",
+						dispatchEvent: "__facade_dispatchEvent__",
+						addMiddleware: "__facade_register__",
+						addMiddlewareInternal: "__facade_registerInternal__",
+					},
+			  }
+			: {
+					plugins: [
+						esbuildAliasExternalPlugin({
+							__ENTRY_POINT__: targetPathInsertion,
+							"./common": path.resolve(
+								getBasePath(),
+								"templates/middleware/common.ts"
+							),
+						}),
+					],
+			  }),
+		outfile: targetPathLoader,
+	});
+
+	return {
+		...entry,
+		file: targetPathLoader,
+	};
+}
+
 /**
  * A middleware that serves static assets from a worker.
  * This powers --assets / config.assets

package/src/dev/dev.tsx

@@ -158,7 +158,7 @@ export type DevProps = {
 	inspect: boolean;
 	logLevel: "none" | "error" | "log" | "warn" | "debug" | undefined;
 	logPrefix?: string;
-	onReady: (() => void) | undefined;
+	onReady: ((ip: string, port: number) => void) | undefined;
 	showInteractiveDevSession: boolean | undefined;
 	forceLocal: boolean | undefined;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
@@ -257,6 +257,8 @@ function DevSession(props: DevSessionProps) {
 		services: props.bindings.services,
 		durableObjects: props.bindings.durable_objects || { bindings: [] },
 		firstPartyWorkerDevFacade: props.firstPartyWorker,
+		// Enable the bundling to know whether we are using dev or publish
+		targetConsumer: "dev",
 	});
 
 	return props.local ? (

package/src/dev/local.tsx

@@ -48,7 +48,7 @@ export interface LocalProps {
 	localProtocol: "http" | "https";
 	localUpstream: string | undefined;
 	inspect: boolean;
-	onReady: (() => void) | undefined;
+	onReady: ((ip: string, port: number) => void) | undefined;
 	logLevel: "none" | "error" | "log" | "warn" | "debug" | undefined;
 	logPrefix?: string;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
@@ -228,7 +228,7 @@ function useLocalWorker({
 								: {}),
 						});
 					}
-					onReady?.();
+					onReady?.(ip, message.mfPort);
 				}
 			});
 

package/src/dev/remote.tsx

@@ -54,7 +54,7 @@ export function Remote(props: {
 	zone: string | undefined;
 	host: string | undefined;
 	routes: Route[] | undefined;
-	onReady?: (() => void) | undefined;
+	onReady?: ((ip: string, port: number) => void) | undefined;
 	sourceMapPath: string | undefined;
 	sendMetrics: boolean | undefined;
 }) {
@@ -81,6 +81,7 @@ export function Remote(props: {
 		routes: props.routes,
 		onReady: props.onReady,
 		sendMetrics: props.sendMetrics,
+		port: props.port,
 	});
 
 	usePreviewServer({
@@ -164,8 +165,9 @@ export function useWorker(props: {
 	zone: string | undefined;
 	host: string | undefined;
 	routes: Route[] | undefined;
-	onReady: (() => void) | undefined;
+	onReady: ((ip: string, port: number) => void) | undefined;
 	sendMetrics: boolean | undefined;
+	port: number;
 }): CfPreviewToken | undefined {
 	const {
 		name,
@@ -363,7 +365,7 @@ export function useWorker(props: {
 			}
 			*/
 
-			onReady?.();
+			onReady?.(props.host || "localhost", props.port);
 		}
 		start().catch((err) => {
 			// we want to log the error, but not end the process
@@ -417,6 +419,7 @@ export function useWorker(props: {
 		session,
 		onReady,
 		props.sendMetrics,
+		props.port,
 	]);
 	return token;
 }