Hooke up Mixed Mode client to browser rendering (#9181)

* Add Mixed Mode browser rendering plugin

* run tests

* Create happy-avocados-peel.md

Author: penalosa

.changeset/happy-avocados-peel.md

@@ -0,0 +1,5 @@
+---
+"miniflare": patch
+---
+
+Add a mixed-mode-only browser rendering plugin

fixtures/mixed-mode-node-test/tests/startMixedModeSession.test.js

@@ -74,4 +74,40 @@ describe("startMixedModeSession", () => {
 		await mixedModeSession.ready;
 		await mixedModeSession.dispose();
 	});
+
+	test("Browser mixed mode binding", async () => {
+		const mixedModeSession = await experimental_startMixedModeSession({
+			BROWSER: {
+				type: "browser",
+			},
+		});
+
+		const mf = new Miniflare({
+			compatibilityDate: "2025-01-01",
+			compatibilityFlags: ["nodejs_compat"],
+			modules: true,
+			script: /* javascript */ `
+			export default {
+				async fetch(request, env) {
+					// Simulate acquiring a session
+					const content = await env.BROWSER.fetch("http://fake.host/v1/acquire");
+					return Response.json(await content.json());
+				}
+			}
+		`,
+			browserRendering: {
+				binding: "BROWSER",
+				mixedModeConnectionString: mixedModeSession.mixedModeConnectionString,
+			},
+		});
+
+		assert.match(
+			await (await mf.dispatchFetch("http://example.com")).text(),
+			/sessionId/
+		);
+		await mf.dispose();
+
+		await mixedModeSession.ready;
+		await mixedModeSession.dispose();
+	});
 });

packages/miniflare/src/plugins/browser-rendering/index.ts

@@ -0,0 +1,78 @@
+import assert from "node:assert";
+import SCRIPT_MIXED_MODE_CLIENT from "worker:shared/mixed-mode-client";
+import { z } from "zod";
+import { MixedModeConnectionString, Plugin, ProxyNodeBinding } from "../shared";
+
+const BrowserRenderingSchema = z.object({
+	binding: z.string(),
+	mixedModeConnectionString: z.custom<MixedModeConnectionString>(),
+});
+
+export const BrowserRenderingOptionsSchema = z.object({
+	browserRendering: BrowserRenderingSchema.optional(),
+});
+
+export const BROWSER_RENDERING_PLUGIN_NAME = "browser-rendering";
+
+export const BROWSER_RENDERING_PLUGIN: Plugin<
+	typeof BrowserRenderingOptionsSchema
+> = {
+	options: BrowserRenderingOptionsSchema,
+	async getBindings(options) {
+		if (!options.browserRendering) {
+			return [];
+		}
+
+		assert(
+			options.browserRendering.mixedModeConnectionString,
+			"Workers Browser Rendering only supports Mixed Mode"
+		);
+
+		return [
+			{
+				name: options.browserRendering.binding,
+				service: {
+					name: `${BROWSER_RENDERING_PLUGIN_NAME}:${options.browserRendering.binding}`,
+				},
+			},
+		];
+	},
+	getNodeBindings(options: z.infer<typeof BrowserRenderingOptionsSchema>) {
+		if (!options.browserRendering) {
+			return {};
+		}
+		return {
+			[options.browserRendering.binding]: new ProxyNodeBinding(),
+		};
+	},
+	async getServices({ options }) {
+		if (!options.browserRendering) {
+			return [];
+		}
+
+		return [
+			{
+				name: `${BROWSER_RENDERING_PLUGIN_NAME}:${options.browserRendering.binding}`,
+				worker: {
+					compatibilityDate: "2025-01-01",
+					modules: [
+						{
+							name: "index.worker.js",
+							esModule: SCRIPT_MIXED_MODE_CLIENT(),
+						},
+					],
+					bindings: [
+						{
+							name: "mixedModeConnectionString",
+							text: options.browserRendering.mixedModeConnectionString.href,
+						},
+						{
+							name: "binding",
+							text: options.browserRendering.binding,
+						},
+					],
+				},
+			},
+		];
+	},
+};

packages/miniflare/src/plugins/index.ts

@@ -7,6 +7,10 @@ import {
 } from "./analytics-engine";
 import { ASSETS_PLUGIN } from "./assets";
 import { ASSETS_PLUGIN_NAME } from "./assets/constants";
+import {
+	BROWSER_RENDERING_PLUGIN,
+	BROWSER_RENDERING_PLUGIN_NAME,
+} from "./browser-rendering";
 import { CACHE_PLUGIN, CACHE_PLUGIN_NAME } from "./cache";
 import { CORE_PLUGIN, CORE_PLUGIN_NAME } from "./core";
 import { D1_PLUGIN, D1_PLUGIN_NAME } from "./d1";
@@ -38,6 +42,7 @@ export const PLUGINS = {
 	[EMAIL_PLUGIN_NAME]: EMAIL_PLUGIN,
 	[ANALYTICS_ENGINE_PLUGIN_NAME]: ANALYTICS_ENGINE_PLUGIN,
 	[AI_PLUGIN_NAME]: AI_PLUGIN,
+	[BROWSER_RENDERING_PLUGIN_NAME]: BROWSER_RENDERING_PLUGIN,
 };
 export type Plugins = typeof PLUGINS;
 
@@ -91,7 +96,8 @@ export type WorkerOptions = z.input<typeof CORE_PLUGIN.options> &
 	z.input<typeof PIPELINE_PLUGIN.options> &
 	z.input<typeof SECRET_STORE_PLUGIN.options> &
 	z.input<typeof ANALYTICS_ENGINE_PLUGIN.options> &
-	z.input<typeof AI_PLUGIN.options>;
+	z.input<typeof AI_PLUGIN.options> &
+	z.input<typeof BROWSER_RENDERING_PLUGIN.options>;
 
 export type SharedOptions = z.input<typeof CORE_PLUGIN.sharedOptions> &
 	z.input<typeof CACHE_PLUGIN.sharedOptions> &
@@ -155,3 +161,4 @@ export * from "./secret-store";
 export * from "./email";
 export * from "./analytics-engine";
 export * from "./ai";
+export * from "./browser-rendering";

packages/miniflare/src/workers/shared/mixed-mode-client.worker.ts

@@ -2,7 +2,13 @@ export default {
 	async fetch(request, env) {
 		const proxiedHeaders = new Headers();
 		for (const [name, value] of request.headers) {
-			proxiedHeaders.set(`MF-Header-${name}`, value);
+			// The `Upgrade` header needs to be special-cased to prevent:
+			//   TypeError: Worker tried to return a WebSocket in a response to a request which did not contain the header "Upgrade: websocket"
+			if (name === "upgrade") {
+				proxiedHeaders.set(name, value);
+			} else {
+				proxiedHeaders.set(`MF-Header-${name}`, value);
+			}
 		}
 		proxiedHeaders.set("MF-URL", request.url);
 		proxiedHeaders.set("MF-Binding", env.binding);

packages/wrangler/templates/mixedMode/proxyServerWorker/index.ts

@@ -7,6 +7,10 @@ export default {
 			for (const [name, value] of request.headers) {
 				if (name.startsWith("mf-header-")) {
 					originalHeaders.set(name.slice("mf-header-".length), value);
+				} else if (name === "upgrade") {
+					// The `Upgrade` header needs to be special-cased to prevent:
+					//   TypeError: Worker tried to return a WebSocket in a response to a request which did not contain the header "Upgrade: websocket"
+					originalHeaders.set(name, value);
 				}
 			}
 			return env[targetBinding].fetch(