cloudflare · danielgek · Jul 22, 2024
diff --git a/fixtures/browser-rendering/.gitignore b/fixtures/browser-rendering/.gitignore
@@ -0,0  1 @@
 dist
@@ -0,0  1,23 @@
 {
 	"name": "browser-rendering-app",
 	"private": true,
 	"description": "",
 	"license": "ISC",
 	"author": "",
 	"main": "src/index.js",
 	"scripts": {
 		"check:type": "tsc",
 		"test:ci": "vitest run",
 		"test:watch": "vitest",
 		"type:tests": "tsc -p ./tests/tsconfig.json"
 	},
 	"devDependencies": {
 		"@cloudflare/puppeteer": "^0.0.11",
 		"@cloudflare/workers-tsconfig": "workspace:^",
 		"undici": "^5.28.4",
 		"wrangler": "workspace:*"
 	},
 	"volta": {
 		"extends": "../../package.json"
 	}
 }
diff --git a/fixtures/browser-rendering/src/index.js b/fixtures/browser-rendering/src/index.js
@@ -0,0  1,10 @@
 
 export default {
 	async fetch(request, env) {
 		console.log(env.BROWSER)
 		return Response.json({
 			binding: env.BROWSER,
 			fetch: typeof env.BROWSER,
 		});
 	},
 };
diff --git a/fixtures/browser-rendering/tests/index.test.ts b/fixtures/browser-rendering/tests/index.test.ts
@@ -0,0  1,42 @@
 import { resolve } from "path";
 import { fetch } from "undici";
 import { afterAll, beforeAll, describe, it } from "vitest";
 import { runWranglerDev } from "../../shared/src/run-wrangler-long-lived";
 
 describe("'wrangler dev' lauches a browser", () => {
 	let ip: string,
 		port: number,
 		stop: (() => Promise<unknown>) | undefined,
 		getOutput: () => string;
 
 	beforeAll(async () => {
 		({ ip, port, stop, getOutput } = await runWranglerDev(
 			resolve(__dirname, ".."),
 			["--local", "--port=0", "--inspector-port=0"]
 		));
 
 
 	});
 
 	afterAll(async () => {
 		await stop?.();
 	});
 
 	it("borwser binding methods ", async ({ expect }) => {
 		const response = await fetch(`http://${ip}:${port}/`);
 		// console.log(await response.text())
 		const content = await response.json();
 		expect((content as Record<string, object>).fetch).toEqual("function");
 	});
 
 	it("browser rendering binding properties", async ({ expect }) => {
 		const response = await fetch(`http://${ip}:${port}/`);
 		const content = await response.json();
 		expect((content as Record<string, object>).binding).toEqual({
 			fetcher: {},
 			lastRequestId: null,
 			logs: [],
 			options: {},
 		});
 	});
 });
diff --git a/fixtures/browser-rendering/tests/tsconfig.json b/fixtures/browser-rendering/tests/tsconfig.json
@@ -0,0  1,7 @@
 {
 	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
 	"compilerOptions": {
 		"types": ["node"]
 	},
 	"include": ["**/*.ts", "../../../node-types.d.ts"]
 }
diff --git a/fixtures/browser-rendering/tsconfig.json b/fixtures/browser-rendering/tsconfig.json
@@ -0,0  1,13 @@
 {
 	"compilerOptions": {
 		"target": "ES2020",
 		"esModuleInterop": true,
 		"module": "CommonJS",
 		"lib": ["ES2020"],
 		"types": ["node"],
 		"skipLibCheck": true,
 		"moduleResolution": "node",
 		"noEmit": true
 	},
 	"include": ["tests", "../../node-types.d.ts"]
 }
diff --git a/fixtures/browser-rendering/vitest.config.mts b/fixtures/browser-rendering/vitest.config.mts
@@ -0,0  1,9 @@
 import { defineProject, mergeConfig } from "vitest/config";
 import configShared from "../../vitest.shared";
 
 export default mergeConfig(
 	configShared,
 	defineProject({
 		test: {},
 	})
 );
diff --git a/fixtures/browser-rendering/wrangler.toml b/fixtures/browser-rendering/wrangler.toml
@@ -0,0  1,9 @@
 name = "browser-rendering-app"
 compatibility_date = "2024-06-20"
 
 compatibility_flags = ["nodejs_compat"]
 main = "src/index.js"
 
 
 [browser]
 binding = "BROWSER"
@@ -58,6  58,9 @@ export interface UnstableDevOptions {
 	ai?: {
 		binding: string;
 	};
 	browser?: {
 		binding: string;
 	}
 	version_metadata?: {
 		binding: string;
 	};

@@ -0,0  1,21 @@
 import { Headers, Response, fetch } from "miniflare";
 import type { Request } from "miniflare";
 
 export const WORKERS_DEV_ENDPOINT = "https://staging.api.browser.run";
 
 
 
 export async function BrowserFetcher(request: Request): Promise<Response> {
 
 	request.headers.set("Host", WORKERS_DEV_ENDPOINT)
 
 	const res = await fetch(request.url, {
 		method: request.method,
 		headers: Object.fromEntries(request.headers.entries()),
 		body: request.body,
 	});
 
 	const respHeaders = new Headers(res.headers);
 
 	return new Response(res.body, { status: res.status, headers: respHeaders });
 }
@@ -0,0  1 @@
 export * from './fetcher'
@@ -46,6  46,7 @@ import type { MiniflareOptions, SourceOptions, WorkerOptions } from "miniflare";
 import type { UUID } from "node:crypto";
 import type { Abortable } from "node:events";
 import type { Readable } from "node:stream";
 import { BrowserFetcher } from "../browser-rendering/fetcher";
 
 // This worker proxies all external Durable Objects to the Wrangler session
 // where they're defined, and receives all requests from other Wrangler sessions
@@ -587,6  588,10 @@ export function buildMiniflareBindingOptions(config: MiniflareBindingsConfig): {
 		};
 	}
 
 	if (bindings.browser?.binding) {
 		config.serviceBindings[bindings.browser.binding] = BrowserFetcher;
 	}
 
 	const bindingOptions = {
 		bindings: {
 			...bindings.vars,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml