chore: bump esbuild to 0.18.20 (#5213)

.changeset/empty-kids-agree.md

@@ -0,0 +1,15 @@
+---
+"wrangler": major
+---
+
+feature: bump `esbuild` to [`0.18.20`](https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#01820)
+
+Previously, Wrangler used `esbuild@0.17.19` when bundling your Worker. Notable changes include:
+
+- [Breaking changes](https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0180) to `tsconfig.json` support
+- Support for [auto-accessors](https://github.com/tc39/proposal-grouped-and-auto-accessors?tab=readme-ov-file#auto-accessors)
+- Support for [explicit resource management](https://github.com/tc39/proposal-explicit-resource-management) with `using` declarations
+
+Note `esbuild` only transforms `using` syntax by default, relying on runtime support for `Symbol.dispose` and `Symbol.asyncDispose`. The Workers runtime doesn't provide these symbols yet, so Wrangler automatically injects polyfills for them. This allows you to use `using` without any additional changes.
+
+Unfortunately, we currently aren't able to bump to [`0.19.0`](https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0190) and above. This version changes how dynamic `import()`s are handled in a way that's incompatible with Wrangler's own module collection behaviour. We're currently investigating potential workarounds.

.prettierignore

@@ -53,3 +53,7 @@ packages/create-cloudflare/templates/**/*.*
 # support this syntax so exclude those files.
 fixtures/vitest-pool-workers-examples/basics-unit-integration-self/src/index.ts
 fixtures/vitest-pool-workers-examples/queues/src/index.ts
+
+# Prettier 2 doesn't support `using` syntax. We'd like to test this syntax works
+# so ignore files containing it until we upgrade to Prettier 3.
+fixtures/worker-app/src/explicit-resource-management.js

fixtures/additional-modules/test/index.test.ts

@@ -166,7 +166,11 @@ describe("find_additional_modules deploy", () => {
 		const bundledEntryPath = path.join(outDir, "index.js");
 		const bundledEntry = await fs.readFile(bundledEntryPath, "utf8");
 		expect(bundledEntry).toMatchInlineSnapshot(`
-			"// src/index.ts
+			"// ../../packages/wrangler/templates/symbol-dispose.js
+			Symbol.dispose ??= Symbol("Symbol.dispose");
+			Symbol.asyncDispose ??= Symbol("Symbol.asyncDispose");
+
+			// src/index.ts
 			import common from "./common.cjs";
 
 			// src/dep.ts

fixtures/worker-app/src/explicit-resource-management.js

@@ -0,0 +1,24 @@
+/** @param {string[]} logs */
+function connect(logs) {
+	logs.push("Connected");
+	return {
+		send(message) {
+			logs.push(`Sent ${message}`);
+		},
+		[Symbol.dispose]() {
+			logs.push("Disconnected synchronously");
+		},
+		async [Symbol.asyncDispose]() {
+			logs.push("Disconnected asynchronously");
+		},
+	};
+}
+
+/** @param {string[]} logs */
+export async function testExplicitResourceManagement(logs) {
+	using syncConnect = connect(logs);
+		await using asyncConnect = connect(logs);
+
+	syncConnect.send("hello");
+	asyncConnect.send("goodbye");
+}

fixtures/worker-app/src/index.js

@@ -1,6 +1,7 @@
 import cookie from "cookie";
 import { randomBytes } from "isomorphic-random-example";
 import { now } from "./dep";
+import { testExplicitResourceManagement } from "./explicit-resource-management";
 import { logErrors } from "./log";
 
 console.log("startup log");
@@ -39,6 +40,12 @@ export default {
 				],
 			});
 
+		if (pathname === "/explicit-resource-management") {
+			const logs = [];
+			await testExplicitResourceManagement(logs);
+			return Response.json(logs);
+		}
+
 		if (request.headers.get("X-Test-URL") !== null) {
 			return new Response(request.url);
 		}

fixtures/worker-app/tests/index.test.ts

@@ -148,4 +148,20 @@ describe("'wrangler dev' correctly renders pages", () => {
 			`hello2=world2; Domain=${ip}; Secure`,
 		]);
 	});
+
+	it("uses explicit resource management", async ({ expect }) => {
+		const response = await fetch(
+			`http://${ip}:${port}/explicit-resource-management`
+		);
+		expect(await response.json()).toMatchInlineSnapshot(`
+			[
+			  "Connected",
+			  "Connected",
+			  "Sent hello",
+			  "Sent goodbye",
+			  "Disconnected asynchronously",
+			  "Disconnected synchronously",
+			]
+		`);
+	});
 });

package.json

@@ -47,7 +47,7 @@
 		"@turbo/gen": "^1.10.13",
 		"@vue/compiler-sfc": "^3.3.4",
 		"dotenv-cli": "^7.3.0",
-		"esbuild": "0.17.19",
+		"esbuild": "0.18.20",
 		"turbo": "^1.10.14"
 	},
 	"engines": {

packages/cli/package.json

@@ -29,7 +29,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.55.0",
 		"@typescript-eslint/parser": "^5.55.0",
 		"chalk": "^2.4.2",
-		"esbuild": "^0.17.12",
+		"esbuild": "0.18.20",
 		"log-update": "^5.0.1",
 		"pnpm": "^8.6.11",
 		"undici": "5.28.3"

packages/miniflare/package.json

@@ -75,7 +75,7 @@
 		"concurrently": "^8.2.2",
 		"devalue": "^4.3.0",
 		"devtools-protocol": "^0.0.1182435",
-		"esbuild": "^0.16.17",
+		"esbuild": "0.18.20",
 		"eslint": "^8.6.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-es": "^4.1.0",

packages/miniflare/scripts/build.mjs

@@ -70,9 +70,9 @@ const rewriteNodeToInternalPlugin = {
 };
 
 /**
- * @type {Map<string, esbuild.BuildResult>}
+ * @type {Map<string, esbuild.BuildContext>}
  */
-const workersBuilders = new Map();
+const workerContexts = new Map();
 /**
  * @type {esbuild.Plugin}
  */
@@ -93,9 +93,9 @@ const embedWorkersPlugin = {
 			return { path: result.path, namespace };
 		});
 		build.onLoad({ filter: /.*/, namespace }, async (args) => {
-			let builder = workersBuilders.get(args.path);
-			if (builder === undefined) {
-				builder = await esbuild.build({
+			let context = workerContexts.get(args.path);
+			if (context === undefined) {
+				context = await esbuild.context({
 					platform: "node", // Marks `node:*` imports as external
 					format: "esm",
 					target: "esnext",
@@ -104,7 +104,6 @@ const embedWorkersPlugin = {
 					sourcesContent: false,
 					external: ["miniflare:shared", "miniflare:zod"],
 					metafile: true,
-					incremental: watch, // Allow `rebuild()` calls if watching
 					entryPoints: [args.path],
 					minifySyntax: true,
 					outdir: build.initialOptions.outdir,
@@ -115,22 +114,21 @@ const embedWorkersPlugin = {
 							? [rewriteNodeToInternalPlugin]
 							: [],
 				});
-			} else {
-				builder = await builder.rebuild();
+				workerContexts.set(args.path, context);
 			}
-			workersBuilders.set(args.path, builder);
+			const result = await context.rebuild();
 			await fs.mkdir("worker-metafiles", { recursive: true });
 			await fs.writeFile(
 				path.join(
 					"worker-metafiles",
 					path.basename(args.path) + ".metafile.json"
 				),
-				JSON.stringify(builder.metafile)
+				JSON.stringify(result.metafile)
 			);
 			let outPath = args.path.substring(workersRoot.length + 1);
 			outPath = outPath.substring(0, outPath.lastIndexOf(".")) + ".js";
 			outPath = JSON.stringify(outPath);
-			const watchFiles = Object.keys(builder.metafile.inputs);
+			const watchFiles = Object.keys(result.metafile.inputs);
 			const contents = `
       import fs from "fs";
       import path from "path";
@@ -164,7 +162,7 @@ async function buildPackage() {
 	}
 	const outPath = path.join(pkgRoot, "dist");
 
-	await esbuild.build({
+	const context = await esbuild.context({
 		platform: "node",
 		format: "cjs",
 		target: "esnext",
@@ -187,11 +185,19 @@ async function buildPackage() {
 		],
 		plugins: [embedWorkersPlugin],
 		logLevel: watch ? "info" : "warning",
-		watch,
 		outdir: outPath,
 		outbase: pkgRoot,
 		entryPoints: [indexPath, ...testPaths],
 	});
+	if (watch) {
+		await context.watch();
+	} else {
+		await context.rebuild();
+		await context.dispose();
+		for (const workerContext of workerContexts.values()) {
+			await workerContext.dispose();
+		}
+	}
 }
 
 await buildPackage();

packages/vitest-pool-workers/package.json

@@ -64,7 +64,7 @@
 		"birpc": "0.2.14",
 		"cjs-module-lexer": "^1.2.3",
 		"devalue": "^4.3.0",
-		"esbuild": "0.17.19",
+		"esbuild": "0.18.20",
 		"miniflare": "workspace:*",
 		"wrangler": "workspace:*",
 		"zod": "^3.20.6"

packages/wrangler/package.json

@@ -106,7 +106,7 @@
 		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
 		"blake3-wasm": "^2.1.5",
 		"chokidar": "^3.5.3",
-		"esbuild": "0.17.19",
+		"esbuild": "0.18.20",
 		"miniflare": "workspace:*",
 		"nanoid": "^3.3.3",
 		"path-to-regexp": "^6.2.0",

packages/wrangler/src/__tests__/deploy.test.ts

@@ -1858,8 +1858,13 @@ addEventListener('fetch', event => {});`
 						}
 					}`
 				);
+				// If this test fails in the future, it's likely the line number of the
+				// `ReferenceError` in `index.js` below is incorrect. To get the new
+				// number, run `wrangler deploy index.ts --dry-run --outdir=dist` with
+				// `index.ts` containing the contents above. Then look in `dist/index.js`
+				// for a line containing `x;`. This is the line number you want.
 				mockDeployWithValidationError(
-					"Uncaught ReferenceError: x is not defined\n  at index.js:2:1\n"
+					"Uncaught ReferenceError: x is not defined\n  at index.js:6:1\n"
 				);
 				mockSubDomainRequest();
 

packages/wrangler/src/__tests__/middleware.test.ts

@@ -784,7 +784,11 @@ describe("middleware", () => {
 					.replace(/\/\/ .*/g, "")
 					.trim()
 			).toMatchInlineSnapshot(`
-			"var src_default = {
+			"Symbol.dispose ??= Symbol(\\"Symbol.dispose\\");
+			Symbol.asyncDispose ??= Symbol(\\"Symbol.asyncDispose\\");
+
+
+			var src_default = {
 			  async fetch(request, env) {
 			    return Response.json(env);
 			  }
@@ -842,15 +846,15 @@ describe("middleware", () => {
 			}
 
 
-			var __Facade_ScheduledController__ = class {
+			var __Facade_ScheduledController__ = class ___Facade_ScheduledController__ {
 			  constructor(scheduledTime, cron, noRetry) {
 			    this.scheduledTime = scheduledTime;
 			    this.cron = cron;
 			    this.#noRetry = noRetry;
 			  }
 			  #noRetry;
 			  noRetry() {
-			    if (!(this instanceof __Facade_ScheduledController__)) {
+			    if (!(this instanceof ___Facade_ScheduledController__)) {
 			      throw new TypeError(\\"Illegal invocation\\");
 			    }
 			    this.#noRetry();