[wrangler] Extract remote bindings into a package

.changeset/fix-remote-bindings-preview.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Fix remote binding previews for accounts without a workers.dev subdomain
+
+Wrangler now automatically registers a workers.dev subdomain when one is required to start a remote binding preview.

fixtures/get-platform-proxy-remote-bindings/tests/index.test.ts

@@ -259,6 +259,8 @@ if (auth) {
 				).toMatchInlineSnapshot(`
 					"X [ERROR] A request to the Cloudflare API (/accounts/NOT a valid account id/workers/subdomain/edge-preview) failed.
 
+					  Could not route to /client/v4/accounts/NOT%20a%20valid%20account%20id/workers/subdomain/edge-preview, perhaps your object identifier is invalid? [code: 7003]
+
 					"
 				`);
 			});

packages/deploy-helpers/package.json

@@ -25,6 +25,10 @@
 		"./context": {
 			"import": "./dist/context.mjs",
 			"types": "./dist/context.d.mts"
+		},
+		"./create-worker-upload-form": {
+			"import": "./dist/create-worker-upload-form.mjs",
+			"types": "./dist/create-worker-upload-form.d.mts"
 		}
 	},
 	"scripts": {

packages/deploy-helpers/tsup.config.ts

@@ -11,6 +11,8 @@ export default defineConfig(() => [
 		entry: {
 			index: "src/index.ts",
 			context: "src/shared/context.ts",
+			"create-worker-upload-form":
+				"src/deploy/helpers/create-worker-upload-form.ts",
 		},
 		platform: "node",
 		format: "esm",

packages/remote-bindings/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "@cloudflare/remote-bindings",
+	"version": "0.0.0",
+	"private": true,
+	"homepage": "https://github.com/cloudflare/workers-sdk/tree/main/packages/remote-bindings#readme",
+	"bugs": {
+		"url": "https://github.com/cloudflare/workers-sdk/issues"
+	},
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/cloudflare/workers-sdk.git",
+		"directory": "packages/remote-bindings"
+	},
+	"files": [
+		"dist"
+	],
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/index.d.mts",
+			"import": "./dist/index.mjs"
+		}
+	},
+	"scripts": {
+		"build": "tsdown",
+		"check:type": "tsc",
+		"dev": "tsdown --watch",
+		"test:ci": "vitest run --passWithNoTests",
+		"test:watch": "vitest"
+	},
+	"dependencies": {
+		"@cloudflare/cli-shared-helpers": "workspace:*",
+		"@cloudflare/deploy-helpers": "workspace:*",
+		"@cloudflare/workers-auth": "workspace:*",
+		"@cloudflare/workers-utils": "workspace:*",
+		"chalk": "catalog:default",
+		"miniflare": "workspace:*",
+		"undici": "catalog:default",
+		"ws": "catalog:default"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "catalog:default",
+		"@types/ws": "^8.5.13",
+		"capnweb": "catalog:default",
+		"esbuild": "catalog:default",
+		"tsdown": "0.16.3",
+		"typescript": "catalog:default",
+		"vitest": "catalog:default"
+	}
+}

packages/remote-bindings/scripts/embed-workers.ts

@@ -0,0 +1,39 @@
+import path from "node:path";
+import { build } from "esbuild";
+
+const WORKER_PREFIX = "\0worker:";
+const templatesDir = path.resolve(import.meta.dirname, "../templates");
+
+export function embedWorkersPlugin() {
+	return {
+		name: "embed-workers",
+		resolveId(id: string) {
+			if (!id.startsWith("worker:")) {
+				return;
+			}
+			return `${WORKER_PREFIX}${id.slice("worker:".length)}`;
+		},
+		async load(id: string) {
+			if (!id.startsWith(WORKER_PREFIX)) {
+				return;
+			}
+			const result = await build({
+				entryPoints: [
+					path.resolve(templatesDir, `${id.slice(WORKER_PREFIX.length)}.ts`),
+				],
+				platform: "node",
+				conditions: ["workerd", "worker", "browser"],
+				format: "esm",
+				target: "esnext",
+				bundle: true,
+				write: false,
+				external: ["cloudflare:email", "cloudflare:workers"],
+			});
+			const source = result.outputFiles[0]?.text;
+			if (source === undefined) {
+				throw new Error(`Failed to bundle Worker ${id}`);
+			}
+			return `export default ${JSON.stringify(source)};`;
+		},
+	};
+}

packages/remote-bindings/src/auth.test.ts

@@ -0,0 +1,143 @@
+import assert from "node:assert";
+import { afterEach, beforeEach, describe, it, vi } from "vitest";
+import { createRemoteBindingsAuth, getRemoteBindingsAuthHook } from "./auth";
+import type { RemoteBindingsLogger } from "./logger";
+import type { CfAccount } from "@cloudflare/workers-utils";
+
+const mocks = vi.hoisted(() => ({
+	cfAuth: {
+		source: "cf",
+		setProfile: vi.fn(),
+		requireAuth: vi.fn().mockResolvedValue("selected-account-id"),
+		requireApiToken: vi.fn().mockReturnValue({ apiToken: "test-token" }),
+	},
+	wranglerAuth: {
+		source: "wrangler",
+		setProfile: vi.fn(),
+		requireAuth: vi.fn().mockResolvedValue("selected-account-id"),
+		requireApiToken: vi.fn().mockReturnValue({ apiToken: "test-token" }),
+	},
+	createCfAuth: vi.fn(),
+	createWranglerAuth: vi.fn(),
+	cfProfileStore: { resolve: vi.fn().mockReturnValue({ name: "cf-profile" }) },
+	wranglerProfileStore: {
+		resolve: vi.fn().mockReturnValue({ name: "wrangler-profile" }),
+	},
+	createCfProfileStore: vi.fn(),
+	createWranglerProfileStore: vi.fn(),
+}));
+
+vi.mock("@cloudflare/workers-auth/cf", () => ({
+	createCfAuth: mocks.createCfAuth.mockReturnValue(mocks.cfAuth),
+	createCfProfileStore: mocks.createCfProfileStore.mockReturnValue(
+		mocks.cfProfileStore
+	),
+}));
+
+vi.mock("@cloudflare/workers-auth/wrangler", () => ({
+	createWranglerAuth: mocks.createWranglerAuth.mockReturnValue(
+		mocks.wranglerAuth
+	),
+	createWranglerProfileStore: mocks.createWranglerProfileStore.mockReturnValue(
+		mocks.wranglerProfileStore
+	),
+}));
+
+const originalCfAuth = process.env.CLOUDFLARE_CF_AUTH;
+
+function createTestLogger(): RemoteBindingsLogger {
+	return {
+		loggerLevel: "log",
+		debug: vi.fn(),
+		log: vi.fn(),
+		info: vi.fn(),
+		warn: vi.fn(),
+		error: vi.fn(),
+		console: vi.fn(),
+	};
+}
+
+beforeEach(() => {
+	delete process.env.CLOUDFLARE_CF_AUTH;
+});
+
+afterEach(() => {
+	vi.clearAllMocks();
+	if (originalCfAuth === undefined) {
+		delete process.env.CLOUDFLARE_CF_AUTH;
+	} else {
+		process.env.CLOUDFLARE_CF_AUTH = originalCfAuth;
+	}
+});
+
+describe("createRemoteBindingsAuth", () => {
+	it("uses Wrangler auth by default", ({ expect }) => {
+		const result = createRemoteBindingsAuth(createTestLogger());
+
+		expect(result).toEqual({ auth: mocks.wranglerAuth, useCfAuth: false });
+		expect(mocks.createWranglerAuth).toHaveBeenCalledOnce();
+		expect(mocks.createCfAuth).not.toHaveBeenCalled();
+	});
+
+	it("uses CF auth when CLOUDFLARE_CF_AUTH is present", ({ expect }) => {
+		process.env.CLOUDFLARE_CF_AUTH = "";
+
+		const result = createRemoteBindingsAuth(createTestLogger());
+
+		expect(result).toEqual({ auth: mocks.cfAuth, useCfAuth: true });
+		expect(mocks.createCfAuth).toHaveBeenCalledOnce();
+		expect(mocks.createWranglerAuth).not.toHaveBeenCalled();
+	});
+});
+
+describe("getRemoteBindingsAuthHook", () => {
+	it("uses provided auth without resolving a profile", ({ expect }) => {
+		const auth: CfAccount = {
+			accountId: "provided-account-id",
+			apiToken: { apiToken: "provided-token" },
+		};
+
+		const result = getRemoteBindingsAuthHook(
+			auth,
+			undefined,
+			undefined,
+			createTestLogger()
+		);
+
+		expect(result).toBe(auth);
+		expect(mocks.createWranglerProfileStore).not.toHaveBeenCalled();
+	});
+
+	it("allows auth to select an account when none is configured", async ({
+		expect,
+	}) => {
+		const hook = getRemoteBindingsAuthHook(
+			undefined,
+			undefined,
+			undefined,
+			createTestLogger()
+		);
+		assert(typeof hook === "function");
+
+		await expect(hook()).resolves.toEqual({
+			accountId: "selected-account-id",
+			apiToken: { apiToken: "test-token" },
+		});
+		expect(mocks.wranglerAuth.requireAuth).toHaveBeenCalledWith({});
+	});
+
+	it("uses the configured account when provided", async ({ expect }) => {
+		const hook = getRemoteBindingsAuthHook(
+			undefined,
+			"configured-account-id",
+			undefined,
+			createTestLogger()
+		);
+		assert(typeof hook === "function");
+
+		await hook();
+		expect(mocks.wranglerAuth.requireAuth).toHaveBeenCalledWith({
+			account_id: "configured-account-id",
+		});
+	});
+});

packages/remote-bindings/src/auth.ts

@@ -0,0 +1,92 @@
+import { inputPrompt } from "@cloudflare/cli-shared-helpers/interactive";
+import {
+	createCfAuth,
+	createCfProfileStore,
+} from "@cloudflare/workers-auth/cf";
+import {
+	createWranglerAuth,
+	createWranglerProfileStore,
+} from "@cloudflare/workers-auth/wrangler";
+import { isNonInteractiveOrCI, UserError } from "@cloudflare/workers-utils";
+import { version as packageVersion } from "../package.json";
+import type { RemoteBindingsLogger } from "./logger";
+import type { AsyncHook, CfAccount, Config } from "@cloudflare/workers-utils";
+
+class NoDefaultValueProvided extends UserError {
+	constructor() {
+		super("This command cannot be run in a non-interactive context", {
+			telemetryMessage: "remote bindings prompt default missing",
+		});
+	}
+}
+
+export function createRemoteBindingsAuth(logger: RemoteBindingsLogger) {
+	const context = {
+		logger,
+		userAgent: `remote-bindings/${packageVersion}`,
+		async prompt(question: string) {
+			if (isNonInteractiveOrCI()) {
+				throw new NoDefaultValueProvided();
+			}
+			return inputPrompt<string>({
+				type: "text",
+				question,
+				label: "Answer",
+				throwOnError: true,
+			});
+		},
+		async select(
+			question: string,
+			options: { choices: { title: string; value: string }[] }
+		) {
+			if (isNonInteractiveOrCI()) {
+				throw new NoDefaultValueProvided();
+			}
+			return inputPrompt<string>({
+				type: "select",
+				question,
+				label: "Account",
+				options: options.choices.map((choice) => ({
+					label: choice.title,
+					value: choice.value,
+				})),
+				throwOnError: true,
+			});
+		},
+		isNoDefaultValueProvidedError: (error: unknown) =>
+			error instanceof NoDefaultValueProvided,
+	};
+	const useCfAuth = "CLOUDFLARE_CF_AUTH" in process.env;
+	return {
+		auth: useCfAuth ? createCfAuth(context) : createWranglerAuth(context),
+		useCfAuth,
+	};
+}
+
+export function getRemoteBindingsAuthHook(
+	auth: AsyncHook<CfAccount> | undefined,
+	accountId: Config["account_id"] | undefined,
+	profileDir: string | undefined,
+	logger: RemoteBindingsLogger
+): AsyncHook<CfAccount> {
+	if (auth) {
+		return auth;
+	}
+
+	const { auth: remoteBindingsAuth, useCfAuth } =
+		createRemoteBindingsAuth(logger);
+	const profileStore = useCfAuth
+		? createCfProfileStore({ logger })
+		: createWranglerProfileStore({ logger });
+	const profile = profileStore.resolve({
+		cwd: profileDir ?? process.cwd(),
+	});
+	remoteBindingsAuth.setProfile(profile);
+
+	return async () => ({
+		accountId: await remoteBindingsAuth.requireAuth(
+			accountId ? { account_id: accountId } : {}
+		),
+		apiToken: remoteBindingsAuth.requireApiToken(),
+	});
+}

packages/remote-bindings/src/index.ts

@@ -0,0 +1,15 @@
+export {
+	maybeStartOrUpdateRemoteProxySession,
+	pickRemoteBindings,
+} from "./maybe-start-or-update-session";
+export type {
+	RemoteBindingsContext,
+	RemoteProxySessionData,
+	WorkerConfigObject,
+} from "./maybe-start-or-update-session";
+export { startRemoteProxySession } from "./start-remote-proxy-session";
+export type { RemoteBindingsLogger } from "./logger";
+export type {
+	RemoteProxySession,
+	StartRemoteProxySessionOptions,
+} from "./start-remote-proxy-session";

packages/remote-bindings/src/logger.ts

@@ -0,0 +1,12 @@
+import type { Logger, LoggerLevel } from "@cloudflare/workers-utils";
+
+export type RemoteBindingsLogger = Logger & {
+	loggerLevel: LoggerLevel;
+	console: NonNullable<Logger["console"]>;
+};
+
+export let logger: RemoteBindingsLogger;
+
+export function initLogger(value: RemoteBindingsLogger): void {
+	logger = value;
+}