wrangler 2.0.27 → 2.1.0

package/src/bundle.ts

@@ -7,6 +7,7 @@ import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
 import * as esbuild from "esbuild";
 import tmp from "tmp-promise";
 import createModuleCollector from "./module-collection";
+import { getBasePath } from "./paths";
 import type { Config } from "./config";
 import type { WorkerRegistry } from "./dev-registry";
 import type { Entry } from "./entry";
@@ -71,9 +72,10 @@ export async function bundleWorker(
 		nodeCompat: boolean | undefined;
 		define: Config["define"];
 		checkFetch: boolean;
-		services: Config["services"];
+		services: Config["services"] | undefined;
 		workerDefinitions: WorkerRegistry | undefined;
 		firstPartyWorkerDevFacade: boolean | undefined;
+		targetConsumer: "dev" | "publish";
 	}
 ): Promise<BundleResult> {
 	const {
@@ -90,6 +92,7 @@ export async function bundleWorker(
 		workerDefinitions,
 		services,
 		firstPartyWorkerDevFacade,
+		targetConsumer,
 	} = options;
 
 	// We create a temporary directory for any oneoff files we
@@ -129,7 +132,7 @@ export async function bundleWorker(
 		});
 		fs.writeFileSync(
 			checkedFetchFileToInject,
-			fs.readFileSync(path.resolve(__dirname, "../templates/checked-fetch.js"))
+			fs.readFileSync(path.resolve(getBasePath(), "templates/checked-fetch.js"))
 		);
 	}
 
@@ -139,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
@@ -172,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;
@@ -214,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
@@ -302,7 +348,9 @@ async function applyFormatDevErrorsFacade(
 ): Promise<Entry> {
 	const targetPath = path.join(tmpDirPath, "format-dev-errors.entry.js");
 	await esbuild.build({
-		entryPoints: [path.resolve(__dirname, "../templates/format-dev-errors.ts")],
+		entryPoints: [
+			path.resolve(getBasePath(), "templates/format-dev-errors.ts"),
+		],
 		bundle: true,
 		sourcemap: true,
 		format: "esm",
@@ -320,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
@@ -334,7 +561,7 @@ async function applyStaticAssetFacade(
 
 	await esbuild.build({
 		entryPoints: [
-			path.resolve(__dirname, "../templates/serve-static-assets.ts"),
+			path.resolve(getBasePath(), "templates/serve-static-assets.ts"),
 		],
 		bundle: true,
 		format: "esm",
@@ -342,7 +569,7 @@ async function applyStaticAssetFacade(
 		plugins: [
 			esbuildAliasExternalPlugin({
 				__ENTRY_POINT__: entry.file,
-				__KV_ASSET_HANDLER__: path.join(__dirname, "../kv-asset-handler.js"),
+				__KV_ASSET_HANDLER__: path.join(getBasePath(), "kv-asset-handler.js"),
 				__STATIC_CONTENT_MANIFEST: "__STATIC_CONTENT_MANIFEST",
 			}),
 		],
@@ -380,7 +607,7 @@ async function applyMultiWorkerDevFacade(
 	services: Config["services"],
 	workerDefinitions: WorkerRegistry
 ) {
-	const targetPath = path.join(tmpDirPath, "serve-static-assets.entry.js");
+	const targetPath = path.join(tmpDirPath, "multiworker-dev-facade.entry.js");
 	const serviceMap = Object.fromEntries(
 		(services || []).map((serviceBinding) => [
 			serviceBinding.binding,
@@ -391,10 +618,10 @@ async function applyMultiWorkerDevFacade(
 	await esbuild.build({
 		entryPoints: [
 			path.join(
-				__dirname,
+				getBasePath(),
 				entry.format === "modules"
-					? "../templates/service-bindings-module-facade.js"
-					: "../templates/service-bindings-sw-facade.js"
+					? "templates/service-bindings-module-facade.js"
+					: "templates/service-bindings-sw-facade.js"
 			),
 		],
 		bundle: true,
@@ -440,8 +667,8 @@ async function applyFirstPartyWorkerDevFacade(
 	await esbuild.build({
 		entryPoints: [
 			path.resolve(
-				__dirname,
-				"../templates/first-party-worker-module-facade.ts"
+				getBasePath(),
+				"templates/first-party-worker-module-facade.ts"
 			),
 		],
 		bundle: true,

package/src/cfetch/internal.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert";
-import { fetch, Headers } from "undici";
+import Busboy from "busboy";
+import { fetch, File, FormData, Headers } from "undici";
 import { version as wranglerVersion } from "../../package.json";
 import { getEnvironmentVariableFactory } from "../environment-variables";
 import { logger } from "../logger";
@@ -226,12 +227,72 @@ export async function fetchDashboardScript(
 		?.startsWith("multipart");
 
 	if (usesModules) {
-		const file = await response.text();
+		// Response from edge contains generic "name = worker.js" for dashboard created scripts
+		const form = await formData(response);
+		const entries = Array.from(form.entries());
+		if (entries.length > 1)
+			throw new RangeError("Expected only one entry in multipart response");
+		const [_, file] = entries[0];
+
+		if (file instanceof File) {
+			return await file.text();
+		}
+
+		return file ?? "";
 
 		// Follow up on issue in Undici about multipart/form-data support & replace the workaround: https://github.com/nodejs/undici/issues/974
 		// This should be using a builtin formData() parser pattern.
-		return file.split("\n").slice(4, -4).join("\n");
 	} else {
 		return response.text();
 	}
 }
+
+async function formData({ headers, body }: Response): Promise<FormData> {
+	// undici doesn't include a multipart/form-data parser yet, so we parse
+	// form data with busboy instead
+	const contentType = headers.get("Content-Type") ?? "";
+	if (!/multipart\/form-data/.test(contentType))
+		throw Error("Need Content-Type for multipart/form-data");
+
+	const responseFormData = new FormData();
+
+	let busboy: Busboy.Busboy;
+
+	const parsedHeaders = Object.fromEntries(
+		Array.from(headers).map(([header, value]) => [header.toLowerCase(), value])
+	);
+	try {
+		busboy = Busboy({ headers: parsedHeaders });
+	} catch (err) {
+		// Error due to headers:
+		throw Object.assign(new TypeError(), { cause: err });
+	}
+
+	busboy.on("field", (name, value) => {
+		responseFormData.append(name, value);
+	});
+	busboy.on("file", (name, value, info) => {
+		const { filename, encoding, mimeType } = info;
+		const base64 = encoding.toLowerCase() === "base64";
+		const chunks: Buffer[] = [];
+		value.on("data", (chunk) => {
+			if (base64) chunk = Buffer.from(chunk.toString(), "base64");
+			chunks.push(chunk);
+		});
+		value.on("end", () => {
+			const file = new File(chunks, filename, { type: mimeType });
+			responseFormData.append(name, file);
+		});
+	});
+
+	const busboyResolve = new Promise((resolve, reject) => {
+		busboy.on("finish", resolve);
+		busboy.on("error", (err) => reject(err));
+	});
+
+	if (body !== null) for await (const chunk of body) busboy.write(chunk);
+	busboy.end();
+	await busboyResolve;
+
+	return responseFormData;
+}

package/src/cli.ts

@@ -24,4 +24,4 @@ if (typeof jest === "undefined" && require.main) {
  * It makes it possible to import wrangler from 'wrangler',
  * and call wrangler.unstable_dev().
  */
-export default { unstable_dev };
+export { unstable_dev };

package/src/config/environment.ts

@@ -210,7 +210,7 @@ interface EnvironmentInheritable {
 	 * @default `[]`
 	 * @nonInheritable
 	 */
-	worker_namespaces: {
+	dispatch_namespaces: {
 		/** The binding name used to refer to the bound service. */
 		binding: string;
 		/** The namespace to bind to. */

package/src/config/index.ts

@@ -91,7 +91,7 @@ export function printBindings(bindings: CfWorkerInit["bindings"]) {
 		unsafe,
 		vars,
 		wasm_modules,
-		worker_namespaces,
+		dispatch_namespaces,
 	} = bindings;
 
 	if (data_blobs !== undefined && Object.keys(data_blobs).length > 0) {
@@ -219,10 +219,10 @@ export function printBindings(bindings: CfWorkerInit["bindings"]) {
 		});
 	}
 
-	if (worker_namespaces !== undefined && worker_namespaces.length > 0) {
+	if (dispatch_namespaces !== undefined && dispatch_namespaces.length > 0) {
 		output.push({
-			type: "Worker Namespaces",
-			entries: worker_namespaces.map(({ binding, namespace }) => {
+			type: "dispatch namespaces",
+			entries: dispatch_namespaces.map(({ binding, namespace }) => {
 				return {
 					key: binding,
 					value: namespace,

package/src/config/validation.ts

@@ -899,7 +899,7 @@ function normalizeAndValidateEnvironment(
 
 	experimental(diagnostics, rawEnv, "unsafe");
 	experimental(diagnostics, rawEnv, "services");
-	experimental(diagnostics, rawEnv, "worker_namespaces");
+	experimental(diagnostics, rawEnv, "dispatch_namespaces");
 
 	const route = normalizeAndValidateRoute(diagnostics, topLevelEnv, rawEnv);
 
@@ -1085,13 +1085,13 @@ function normalizeAndValidateEnvironment(
 			validateBindingArray(envName, validateServiceBinding),
 			[]
 		),
-		worker_namespaces: notInheritable(
+		dispatch_namespaces: notInheritable(
 			diagnostics,
 			topLevelEnv,
 			rawConfig,
 			rawEnv,
 			envName,
-			"worker_namespaces",
+			"dispatch_namespaces",
 			validateBindingArray(envName, validateWorkerNamespaceBinding),
 			[]
 		),

package/src/create-worker-upload-form.ts

@@ -23,6 +23,31 @@ export function toMimeType(type: CfModuleType): string {
 	}
 }
 
+type WorkerMetadataBinding =
+	// If you add any new binding types here, also add it to safeBindings
+	// under validateUnsafeBinding in config/validation.ts
+	| { type: "plain_text"; name: string; text: string }
+	| { type: "json"; name: string; json: unknown }
+	| { type: "wasm_module"; name: string; part: string }
+	| { type: "text_blob"; name: string; part: string }
+	| { type: "data_blob"; name: string; part: string }
+	| { type: "kv_namespace"; name: string; namespace_id: string }
+	| {
+			type: "durable_object_namespace";
+			name: string;
+			class_name: string;
+			script_name?: string;
+			environment?: string;
+	  }
+	| { type: "r2_bucket"; name: string; bucket_name: string }
+	| { type: "service"; name: string; service: string; environment?: string }
+	| { type: "namespace"; name: string; namespace: string }
+	| {
+			type: "logfwdr";
+			name: string;
+			destination: string;
+	  };
+
 export interface WorkerMetadata {
 	/** The name of the entry point module. Only exists when the worker is in the ES module format */
 	main_module?: string;
@@ -33,31 +58,8 @@ export interface WorkerMetadata {
 	usage_model?: "bundled" | "unbound";
 	migrations?: CfDurableObjectMigrations;
 	capnp_schema?: string;
-	// If you add any new binding types here, also add it to safeBindings
-	// under validateUnsafeBinding in config/validation.ts
-	bindings: (
-		| { type: "plain_text"; name: string; text: string }
-		| { type: "json"; name: string; json: unknown }
-		| { type: "wasm_module"; name: string; part: string }
-		| { type: "text_blob"; name: string; part: string }
-		| { type: "data_blob"; name: string; part: string }
-		| { type: "kv_namespace"; name: string; namespace_id: string }
-		| {
-				type: "durable_object_namespace";
-				name: string;
-				class_name: string;
-				script_name?: string;
-				environment?: string;
-		  }
-		| { type: "r2_bucket"; name: string; bucket_name: string }
-		| { type: "service"; name: string; service: string; environment?: string }
-		| { type: "namespace"; name: string; namespace: string }
-		| {
-				type: "logfwdr";
-				name: string;
-				destination: string;
-		  }
-	)[];
+	bindings: WorkerMetadataBinding[];
+	keep_bindings: WorkerMetadataBinding["type"][];
 }
 
 /**
@@ -123,7 +125,7 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
 		});
 	});
 
-	bindings.worker_namespaces?.forEach(({ binding, namespace }) => {
+	bindings.dispatch_namespaces?.forEach(({ binding, namespace }) => {
 		metadataBindings.push({
 			name: binding,
 			type: "namespace",
@@ -255,6 +257,7 @@ export function createWorkerUploadForm(worker: CfWorkerInit): FormData {
 		...(usage_model && { usage_model }),
 		...(migrations && { migrations }),
 		capnp_schema: bindings.logfwdr?.schema,
+		keep_bindings: ["plain_text", "json"],
 	};
 
 	formData.set("metadata", JSON.stringify(metadata));

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 ? (