Chain Reaction (#6161)

* Move `DevEnv` above the React flow

* Use WebSocket from ws rather than the miniflare magic proxy

packages/wrangler/e2e/dev-env.test.ts

@@ -16,93 +16,75 @@ describe("switching runtimes", () => {
 					account_id = "${CLOUDFLARE_ACCOUNT_ID}"
 					compatibility_date = "2023-01-01"
 			`,
+			"index.ts": dedent/*javascript*/ `
+				export default {
+					async fetch(request, env) {
+						return new Response(
+							env.ORDER + ": I am " + (env.REMOTE ? "remote" : "local")
+						);
+					},
+				};
+			`,
 			"index.mjs": dedent/*javascript*/ `
-					const firstRemote = process.argv[2] === "remote"
-					import { unstable_DevEnv as DevEnv } from "${WRANGLER_IMPORT}";
-
-					const devEnv = new DevEnv()
-
-					let config = {
-						name: "worker",
-						script: "",
-						compatibilityFlags: ["nodejs_compat"],
-						compatibilityDate: "2023-10-01",
-						dev: {
-							remote: firstRemote,
-							auth: {
-								accountId: process.env.CLOUDFLARE_ACCOUNT_ID,
-								apiToken: process.env.CLOUDFLARE_API_TOKEN
-							}
-						}
-					};
-					let bundle = {
-						type: "esm",
-						modules: [],
-						id: 0,
-						path: "/virtual/esm/index.mjs",
-						entrypointSource: "export default { fetch() { return new Response('Hello World " + (firstRemote ? 'local' : 'remote') + " runtime') } }",
-						entry: {
-							file: "esm/index.mjs",
-							directory: "/virtual/",
-							format: "modules",
-							moduleRoot: "/virtual",
-							name: undefined,
-						},
-						dependencies: {},
-						sourceMapPath: undefined,
-						sourceMapMetadata: undefined,
-					};
-
-					devEnv.proxy.onConfigUpdate({
-						type: "configUpdate",
-						config,
-					});
-
-					devEnv.runtimes.forEach((runtime) =>
-						runtime.onBundleStart({
-							type: "bundleStart",
-							config,
-						})
-					);
+				import { setTimeout } from "timers/promises";
+				import { unstable_DevEnv as DevEnv } from "${WRANGLER_IMPORT}";
 
-					devEnv.runtimes.forEach((runtime) =>
-						runtime.onBundleComplete({
-							type: "bundleComplete",
-							config,
-							bundle,
-						})
-					);
+				const firstRemote = process.argv[2] === "remote";
 
-					// Immediately switch runtime
-					config = { ...config, dev: { ...config.dev, remote: !firstRemote } };
-					bundle = {...bundle, entrypointSource: "export default { fetch() { return new Response('Hello World " + (firstRemote ? 'local' : 'remote') + " runtime') } }"}
+				const devEnv = new DevEnv();
 
-					devEnv.proxy.onConfigUpdate({
-						type: "configUpdate",
-						config,
-					});
+				let config = {
+					name: "worker",
+					entrypoint: "index.ts",
+					compatibilityFlags: ["nodejs_compat"],
+					compatibilityDate: "2023-10-01",
+					bindings: {
+						REMOTE: {
+							type: "json",
+							value: firstRemote,
+						},
+						ORDER: {
+							type: "plain_text",
+							value: "1",
+						},
+					},
+					dev: {
+						remote: firstRemote,
+						auth: {
+							accountId: process.env.CLOUDFLARE_ACCOUNT_ID,
+							apiToken: process.env.CLOUDFLARE_API_TOKEN,
+						},
+					},
+				};
+				void devEnv.config.set(config);
 
-					devEnv.runtimes.forEach((runtime) =>
-						runtime.onBundleStart({
-							type: "bundleStart",
-							config,
-						})
-					);
+				const { url } = await devEnv.proxy.ready.promise;
+				console.log(await fetch(url).then((r) => r.text()));
 
-					devEnv.runtimes.forEach((runtime) =>
-						runtime.onBundleComplete({
-							type: "bundleComplete",
-							config,
-							bundle,
-						})
-					);
+				void devEnv.config.patch({
+					bindings: {
+						REMOTE: {
+							type: "json",
+							value: !firstRemote,
+						},
+						ORDER: {
+							type: "plain_text",
+							value: "2",
+						},
+					},
+					dev: {
+						...config.dev,
+						remote: !firstRemote,
+					},
+				});
 
-					const { proxyWorker } = await devEnv.proxy.ready.promise;
-					await devEnv.proxy.runtimeMessageMutex.drained();
+				// Give the config some time to propagate
+				await setTimeout(500);
 
-					console.log(await proxyWorker.dispatchFetch("http://example.com").then(r => r.text()))
+				console.log(await fetch(url).then((r) => r.text()));
 
-					process.exit(0);
+				await devEnv.teardown();
+				process.exit(0);
 					`,
 			"package.json": dedent`
 					{
@@ -113,22 +95,24 @@ describe("switching runtimes", () => {
 					`,
 		});
 	});
-	it("can switch from local to remote, with first fetch returning remote", async () => {
+	it("can switch from local to remote", async () => {
 		const stdout = execSync(`node index.mjs local`, {
 			timeout: 20_000,
 			encoding: "utf-8",
 			cwd: root,
 			stdio: "pipe",
 		});
-		expect(stdout).toContain("Hello World remote runtime");
+		expect(stdout).toContain("1: I am local");
+		expect(stdout).toContain("2: I am remote");
 	});
-	it("can switch from remote to local, with first fetch returning local", async () => {
+	it("can switch from remote to local", async () => {
 		const stdout = execSync(`node index.mjs remote`, {
 			timeout: 20_000,
 			encoding: "utf-8",
 			cwd: root,
 			stdio: "pipe",
 		});
-		expect(stdout).toContain("Hello World local runtime");
+		expect(stdout).toContain("1: I am remote");
+		expect(stdout).toContain("2: I am local");
 	});
 });

packages/wrangler/e2e/dev-with-resources.test.ts

@@ -4,7 +4,7 @@ import getPort from "get-port";
 import dedent from "ts-dedent";
 import { Agent, fetch } from "undici";
 import { beforeEach, describe, expect, it } from "vitest";
-import { WebSocket } from "ws";
+import WebSocket from "ws";
 import { WranglerE2ETestHelper } from "./helpers/e2e-wrangler-test";
 import { generateResourceName } from "./helpers/generate-resource-name";
 
@@ -305,7 +305,7 @@ describe.each(RUNTIMES)("Bindings: $flags", ({ runtime, flags }) => {
 
 	it("exposes KV namespace bindings", async () => {
 		const ns = await helper.kv(isLocal);
-		await helper.runLongLived(
+		await helper.run(
 			`wrangler kv key put ${resourceFlags} --namespace-id=${ns} existing-key existing-value`
 		);