wrangler 2.0.29 → 2.1.2

package/src/__tests__/whoami.test.tsx

@@ -1,15 +1,11 @@
 import { render } from "ink-testing-library";
+import { rest } from "msw";
 import React from "react";
 import { writeAuthConfigFile } from "../user";
 import { getUserInfo, WhoAmI } from "../whoami";
-import {
-	createFetchResult,
-	setMockRawResponse,
-	setMockResponse,
-	unsetAllMocks,
-} from "./helpers/mock-cfetch";
 import { mockConsoleMethods } from "./helpers/mock-console";
 import { useMockIsTTY } from "./helpers/mock-istty";
+import { msw } from "./helpers/msw";
 import { runInTempDir } from "./helpers/run-in-tmp";
 import type { UserInfo } from "../whoami";
 
@@ -26,7 +22,6 @@ describe("getUserInfo()", () => {
 
 	afterEach(() => {
 		process.env = ENV_COPY;
-		unsetAllMocks();
 	});
 
 	it("should return undefined if there is no config file", async () => {
@@ -44,12 +39,47 @@ describe("getUserInfo()", () => {
 		process.env = {
 			CLOUDFLARE_API_TOKEN: "123456789",
 		};
-		setMockRawResponse("/user", () =>
-			createFetchResult(undefined, false, [
-				{ code: 9109, message: "Uauthorized to access requested resource" },
-			])
+		msw.use(
+			rest.get("*/user", (_, res, ctx) => {
+				return res.once(
+					ctx.status(200),
+					ctx.json({
+						success: false,
+						errors: [
+							{
+								code: 9109,
+								message: "Uauthorized to access requested resource",
+							},
+						],
+						messages: [],
+						result: {},
+					})
+				);
+			}),
+			rest.get("*/accounts", (request, res, ctx) => {
+				const headersObject = request.headers.all();
+				delete headersObject["user-agent"];
+
+				expect(headersObject).toMatchInlineSnapshot(`
+			Object {
+			  "accept": "*/*",
+			  "accept-encoding": "gzip,deflate",
+			  "authorization": "Bearer 123456789",
+			  "connection": "close",
+			  "host": "api.cloudflare.com",
+			}
+		`);
+				return res.once(
+					ctx.status(200),
+					ctx.json({
+						success: true,
+						errors: [],
+						messages: [],
+						result: [],
+					})
+				);
+			})
 		);
-		setMockResponse("/accounts", () => []);
 		const userInfo = await getUserInfo();
 		expect(userInfo?.email).toBeUndefined();
 	});
@@ -58,16 +88,6 @@ describe("getUserInfo()", () => {
 		process.env = {
 			CLOUDFLARE_API_TOKEN: "123456789",
 		};
-		setMockResponse("/user", () => {
-			return { email: "user@example.com" };
-		});
-		setMockResponse("/accounts", () => {
-			return [
-				{ name: "Account One", id: "account-1" },
-				{ name: "Account Two", id: "account-2" },
-				{ name: "Account Three", id: "account-3" },
-			];
-		});
 
 		const userInfo = await getUserInfo();
 		expect(userInfo).toEqual({
@@ -87,13 +107,6 @@ describe("getUserInfo()", () => {
 			CLOUDFLARE_API_KEY: "123456789",
 			CLOUDFLARE_EMAIL: "user@example.com",
 		};
-		setMockResponse("/accounts", () => {
-			return [
-				{ name: "Account One", id: "account-1" },
-				{ name: "Account Two", id: "account-2" },
-				{ name: "Account Three", id: "account-3" },
-			];
-		});
 
 		const userInfo = await getUserInfo();
 		expect(userInfo).toEqual({
@@ -114,13 +127,6 @@ describe("getUserInfo()", () => {
 			CLOUDFLARE_EMAIL: "user@example.com",
 			CLOUDFLARE_API_TOKEN: "123456789",
 		};
-		setMockResponse("/accounts", () => {
-			return [
-				{ name: "Account One", id: "account-1" },
-				{ name: "Account Two", id: "account-2" },
-				{ name: "Account Three", id: "account-3" },
-			];
-		});
 
 		const userInfo = await getUserInfo();
 		expect(userInfo).toEqual({
@@ -145,18 +151,6 @@ describe("getUserInfo()", () => {
 
 	it("should return the user's email and accounts if authenticated via config token", async () => {
 		writeAuthConfigFile({ oauth_token: "some-oauth-token" });
-
-		setMockResponse("/user", () => {
-			return { email: "user@example.com" };
-		});
-		setMockResponse("/accounts", () => {
-			return [
-				{ name: "Account One", id: "account-1" },
-				{ name: "Account Two", id: "account-2" },
-				{ name: "Account Three", id: "account-3" },
-			];
-		});
-
 		const userInfo = await getUserInfo();
 
 		expect(userInfo).toEqual({
@@ -173,26 +167,17 @@ describe("getUserInfo()", () => {
 
 	it("should display a warning message if the config file contains a legacy api_token field", async () => {
 		writeAuthConfigFile({ api_token: "API_TOKEN" });
-		setMockResponse("/user", () => {
-			return { email: "user@example.com" };
-		});
-		setMockResponse("/accounts", () => {
-			return [
-				{ name: "Account One", id: "account-1" },
-				{ name: "Account Two", id: "account-2" },
-				{ name: "Account Three", id: "account-3" },
-			];
-		});
 		await getUserInfo();
+
 		expect(std.warn).toMatchInlineSnapshot(`
-      "▲ [WARNING] It looks like you have used Wrangler 1's \`config\` command to login with an API token.
+		      "▲ [WARNING] It looks like you have used Wrangler 1's \`config\` command to login with an API token.
 
-        This is no longer supported in the current version of Wrangler.
-        If you wish to authenticate via an API token then please set the \`CLOUDFLARE_API_TOKEN\`
-        environment variable.
+		        This is no longer supported in the current version of Wrangler.
+		        If you wish to authenticate via an API token then please set the \`CLOUDFLARE_API_TOKEN\`
+		        environment variable.
 
-      "
-    `);
+		      "
+	    `);
 	});
 });
 

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;
 }

package/src/dev/start-server.ts

@@ -177,6 +177,7 @@ async function runEsbuild({
 				services: undefined,
 				workerDefinitions: undefined,
 				firstPartyWorkerDevFacade: undefined,
+				targetConsumer: "dev", // We are starting a dev server
 		  });
 
 	return {
@@ -237,11 +238,14 @@ export async function startLocalServer({
 		if (!bundle || !format) return;
 
 		// port for the worker
-		await waitForPortToBeAvailable(port, {
-			retryPeriod: 200,
-			timeout: 2000,
-			abortSignal: abortController.signal,
-		});
+
+		if (port !== 0) {
+			await waitForPortToBeAvailable(port, {
+				retryPeriod: 200,
+				timeout: 2000,
+				abortSignal: abortController.signal,
+			});
+		}
 
 		if (bindings.services && bindings.services.length > 0) {
 			throw new Error(
@@ -327,7 +331,7 @@ export async function startLocalServer({
 					await registerWorker(workerName, {
 						protocol: localProtocol,
 						mode: "local",
-						port,
+						port: message.mfPort,
 						host: ip,
 						durableObjects: internalDurableObjects.map((binding) => ({
 							name: binding.name,
@@ -341,7 +345,7 @@ export async function startLocalServer({
 							: {}),
 					});
 				}
-				onReady?.();
+				onReady?.(ip, message.mfPort);
 			}
 		});
 

package/src/dev/use-esbuild.ts

@@ -36,6 +36,7 @@ export function useEsbuild({
 	services,
 	durableObjects,
 	firstPartyWorkerDevFacade,
+	targetConsumer,
 }: {
 	entry: Entry;
 	destination: string | undefined;
@@ -53,6 +54,7 @@ export function useEsbuild({
 	workerDefinitions: WorkerRegistry;
 	durableObjects: Config["durable_objects"];
 	firstPartyWorkerDevFacade: boolean | undefined;
+	targetConsumer: "dev" | "publish";
 }): EsbuildBundle | undefined {
 	const [bundle, setBundle] = useState<EsbuildBundle>();
 	const { exit } = useApp();
@@ -116,6 +118,7 @@ export function useEsbuild({
 						workerDefinitions,
 						services,
 						firstPartyWorkerDevFacade,
+						targetConsumer,
 				  });
 
 			// Capture the `stop()` method to use as the `useEffect()` destructor.
@@ -173,6 +176,7 @@ export function useEsbuild({
 		durableObjects,
 		workerDefinitions,
 		firstPartyWorkerDevFacade,
+		targetConsumer,
 	]);
 	return bundle;
 }