Refactor some of the shared no bundle logic and address misc PR comments

Author: GregBrimble

.changeset/cuddly-rules-rest.md

@@ -1,5 +1,5 @@
 ---
-"wrangler": patch
+"wrangler": minor
 ---
 
 feat: Add support for the undocumented `_worker.js/` directory in Pages

fixtures/local-mode-tests/package.json

@@ -9,25 +9,8 @@
 	"main": "index.js",
 	"scripts": {
 		"check:type": "tsc && tsc -p tests/tsconfig.json",
-		"test": "cross-env NODE_ENV=local-testing NODE_OPTIONS=--experimental-vm-modules npx jest --forceExit",
-		"test:ci": "cross-env NODE_ENV=local-testing NODE_OPTIONS=--experimental-vm-modules npx jest --forceExit"
-	},
-	"jest": {
-		"restoreMocks": true,
-		"testRegex": ".*.(test|spec)\\.[jt]sx?$",
-		"testTimeout": 30000,
-		"transform": {
-			"^.+\\.c?(t|j)sx?$": [
-				"esbuild-jest",
-				{
-					"sourcemap": true
-				}
-			]
-		},
-		"transformIgnorePatterns": [
-			"node_modules/(?!find-up|locate-path|p-locate|p-limit|p-timeout|p-queue|yocto-queue|path-exists|execa|strip-final-newline|npm-run-path|path-key|onetime|mimic-fn|human-signals|is-stream|get-port|supports-color|pretty-bytes)",
-			"wrangler-dist/cli.js"
-		]
+		"test": "npx vitest",
+		"test:ci": "npx vitest"
 	},
 	"devDependencies": {
 		"@cloudflare/workers-types": "^4.20221111.1",

fixtures/pages-workerjs-directory/public/_worker.js/add.wasm

@@ -1,6 +1,19 @@
+import staticMod from "./static.js";
+import add from "./add.wasm";
+
 export default {
 	async fetch(request, env) {
 		const { pathname } = new URL(request.url);
+
+		if (pathname === "/wasm") {
+			const addModule = await WebAssembly.instantiate(add);
+			return new Response(addModule.exports.add(1, 2).toString());
+		}
+
+		if (pathname === "/static") {
+			return new Response(staticMod);
+		}
+
 		if (pathname !== "/") {
 			return new Response((await import(`./${pathname.slice(1)}`)).default);
 		}

fixtures/pages-workerjs-directory/public/_worker.js/index.js

@@ -0,0 +1 @@
+export default "static";

fixtures/pages-workerjs-directory/public/_worker.js/static.js

@@ -1,4 +1,7 @@
-import { resolve } from "node:path";
+import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path, { join, resolve } from "node:path";
 import { fetch } from "undici";
 import { describe, it } from "vitest";
 import { runWranglerPagesDev } from "../../shared/src/run-wrangler-long-lived";
@@ -13,9 +16,30 @@ describe.concurrent("Pages _worker.js/ directory", () => {
 		await expect(
 			fetch(`http://${ip}:${port}/`).then((resp) => resp.text())
 		).resolves.toContain("Hello, world!");
+		await expect(
+			fetch(`http://${ip}:${port}/wasm`).then((resp) => resp.text())
+		).resolves.toContain("3");
+		await expect(
+			fetch(`http://${ip}:${port}/static`).then((resp) => resp.text())
+		).resolves.toContain("static");
 		await expect(
 			fetch(`http://${ip}:${port}/other-script`).then((resp) => resp.text())
 		).resolves.toContain("test");
 		await stop();
 	});
+
+	it("should bundle", async ({ expect }) => {
+		const dir = tmpdir();
+		const file = join(dir, "./_worker.bundle");
+
+		execSync(
+			`npx wrangler pages functions build --build-output-directory public --outfile ${file} --bindings="{\\"d1_databases\\":{\\"FOO\\":{}}}"`,
+			{
+				cwd: path.resolve(__dirname, ".."),
+			}
+		);
+
+		expect(readFileSync(file, "utf-8")).toContain("D1_ERROR");
+		expect(readFileSync(file, "utf-8")).toContain('"static"');
+	});
 });

fixtures/pages-workerjs-directory/tests/index.test.ts

@@ -470,9 +470,7 @@ export default {
 export const cat = "cat";`
 		);
 
-		await runWrangler(
-			`pages functions build --outfile=public/_worker.bundle --compatibility-flag=nodejs_compat`
-		);
+		await runWrangler(`pages functions build --outfile=public/_worker.bundle`);
 
 		expect(existsSync("public/_worker.bundle")).toBe(true);
 		expect(std.out).toMatchInlineSnapshot(`
@@ -485,17 +483,18 @@ export const cat = "cat";`
 			workerBundleContents,
 			[
 				[/------formdata-undici-0.[0-9]*/g, "------formdata-undici-0.test"],
-				[/functionsWorker-0.[0-9]*.js/g, "functionsWorker-0.test.js"],
+				[/bundledWorker-0.[0-9]*.mjs/g, "bundledWorker-0.test.mjs"],
+				[/bundledWorker-0.[0-9]*.map/g, "bundledWorker-0.test.map"],
 			]
 		);
 
 		expect(workerBundleWithConstantData).toMatchInlineSnapshot(`
 		"------formdata-undici-0.test
 		Content-Disposition: form-data; name=\\"metadata\\"
 
-		{\\"main_module\\":\\"functionsWorker-0.test.js\\"}
+		{\\"main_module\\":\\"bundledWorker-0.test.mjs\\"}
 		------formdata-undici-0.test
-		Content-Disposition: form-data; name=\\"functionsWorker-0.test.js\\"; filename=\\"functionsWorker-0.test.js\\"
+		Content-Disposition: form-data; name=\\"bundledWorker-0.test.mjs\\"; filename=\\"bundledWorker-0.test.mjs\\"
 		Content-Type: application/javascript+module
 
 		import { cat } from \\"./cat.js\\";
@@ -507,6 +506,7 @@ export const cat = "cat";`
 		export {
 		  worker_default as default
 		};
+		//# sourceMappingURL=bundledWorker-0.test.mjs.map
 
 		------formdata-undici-0.test
 		Content-Disposition: form-data; name=\\"cat.js\\"; filename=\\"cat.js\\"

packages/wrangler/src/__tests__/pages/functions-build.test.ts

@@ -43,7 +43,7 @@ export interface UnstableDevOptions {
 		bucket_name: string;
 		preview_bucket_name?: string;
 	}[];
-	bundleEntrypoint?: boolean;
+	processEntrypoint?: boolean;
 	moduleRoot?: string;
 	rules?: Rule[];
 	logLevel?: "none" | "info" | "error" | "log" | "warn" | "debug"; // Specify logging level  [choices: "debug", "info", "log", "warn", "error", "none"] [default: "log"]
@@ -154,7 +154,7 @@ export async function unstable_dev(
 					},
 					config: options?.config,
 					env: options?.env,
-					bundleEntrypoint: !!options?.bundleEntrypoint,
+					processEntrypoint: !!options?.processEntrypoint,
 					bundle: options?.bundle,
 					compatibilityDate: options?.compatibilityDate,
 					compatibilityFlags: options?.compatibilityFlags,

packages/wrangler/src/api/dev.ts

@@ -14,10 +14,10 @@ import {
 import {
 	buildRawWorker,
 	checkRawWorker,
+	traverseAndBuildWorkerJSDirectory,
 } from "../../pages/functions/buildWorker";
 import { validateRoutes } from "../../pages/functions/routes-validation";
 import { upload } from "../../pages/upload";
-import traverseModuleGraph from "../../traverse-module-graph";
 import { createUploadWorkerBundleContents } from "./create-worker-bundle-contents";
 import type { BundleResult } from "../../bundle";
 import type { Project, Deployment } from "@cloudflare/types";
@@ -66,7 +66,7 @@ interface PagesPublishOptions {
 
 	/**
 	 * Whether to run bundling on `_worker.js` before deploying.
-	 * Default: false
+	 * Default: true
 	 */
 	bundle?: boolean;
 
@@ -96,9 +96,11 @@ export async function publish({
 		_redirects: string | undefined,
 		_routesGenerated: string | undefined,
 		_routesCustom: string | undefined,
-		_workerJSDirectory = false,
+		_workerJSIsDirectory = false,
 		_workerJS: string | undefined;
 
+	bundle = bundle ?? true;
+
 	const _workerPath = resolvePath(directory, "_worker.js");
 
 	try {
@@ -118,8 +120,8 @@ export async function publish({
 	} catch {}
 
 	try {
-		_workerJSDirectory = lstatSync(_workerPath).isDirectory();
-		if (!_workerJSDirectory) {
+		_workerJSIsDirectory = lstatSync(_workerPath).isDirectory();
+		if (!_workerJSIsDirectory) {
 			_workerJS = readFileSync(_workerPath, "utf-8");
 		}
 	} catch {}
@@ -245,51 +247,16 @@ export async function publish({
 	 * Advanced Mode
 	 * https://developers.cloudflare.com/pages/platform/functions/#advanced-mode
 	 *
-	 * When using a _worker.js file, the entire /functions directory is ignored
+	 * When using a _worker.js file or _worker.js/ directory, the entire /functions directory is ignored
 	 * – this includes its routing and middleware characteristics.
 	 */
-	if (_workerJSDirectory) {
-		const traverseModuleGraphResult = await traverseModuleGraph(
-			{
-				file: resolvePath(join(_workerPath, "index.js")),
-				directory: resolvePath(_workerPath),
-				format: "modules",
-				moduleRoot: resolvePath(_workerPath),
-			},
-			[
-				{
-					type: "ESModule",
-					globs: ["**/*.js"],
-				},
-			]
-		);
-
-		const outfile = join(tmpdir(), `./bundledWorker-${Math.random()}.mjs`);
-		const bundleResult = await buildRawWorker({
-			workerScriptPath: _workerPath,
-			bundle: false,
-			outfile,
-			directory,
-			local: false,
-			sourcemap: true,
-			watch: false,
-			onEnd: () => {},
-			betaD1Shims: d1Databases,
+	if (_workerJSIsDirectory) {
+		workerBundle = await traverseAndBuildWorkerJSDirectory({
+			workerJSDirectory: _workerPath,
+			buildOutputDirectory: directory,
+			d1Databases,
 			nodejsCompat,
 		});
-
-		workerBundle = {
-			modules: (traverseModuleGraphResult?.modules ??
-				bundleResult?.modules) as BundleResult["modules"],
-			dependencies: (bundleResult?.dependencies ??
-				traverseModuleGraphResult?.dependencies) as BundleResult["dependencies"],
-			resolvedEntryPointPath: (bundleResult?.resolvedEntryPointPath ??
-				traverseModuleGraphResult?.resolvedEntryPointPath) as BundleResult["resolvedEntryPointPath"],
-			bundleType: (bundleResult?.bundleType ??
-				traverseModuleGraphResult?.bundleType) as BundleResult["bundleType"],
-			stop: bundleResult?.stop,
-			sourceMapPath: bundleResult?.sourceMapPath,
-		};
 	} else if (_workerJS) {
 		if (bundle) {
 			const outfile = join(tmpdir(), `./bundledWorker-${Math.random()}.mjs`);
@@ -317,7 +284,7 @@ export async function publish({
 		}
 	}
 
-	if (_workerJS || _workerJSDirectory) {
+	if (_workerJS || _workerJSIsDirectory) {
 		const workerBundleContents = await createUploadWorkerBundleContents(
 			workerBundle as BundleResult
 		);
@@ -351,7 +318,7 @@ export async function publish({
 	 * Pages Functions
 	 * https://developers.cloudflare.com/pages/platform/functions/
 	 */
-	if (builtFunctions && !_workerJS) {
+	if (builtFunctions && !_workerJS && !_workerJSIsDirectory) {
 		const workerBundleContents = await createUploadWorkerBundleContents(
 			workerBundle as BundleResult
 		);

packages/wrangler/src/api/pages/publish.tsx

@@ -117,6 +117,7 @@ export async function bundleWorker(
 	entry: Entry,
 	destination: string,
 	options: {
+		// When `bundle` is set to false, we apply shims to the Worker, but won't pull in any imports
 		bundle?: boolean;
 		serveAssetsFromWorker: boolean;
 		assets?: StaticAssetsConfig;

packages/wrangler/src/bundle.ts

@@ -334,7 +334,7 @@ export type AdditionalDevProps = {
 		preview_bucket_name?: string;
 	}[];
 	d1Databases?: Environment["d1_databases"];
-	bundleEntrypoint?: boolean;
+	processEntrypoint?: boolean;
 	moduleRoot?: string;
 	rules?: Rule[];
 };
@@ -427,7 +427,7 @@ export async function startDev(args: StartDevOptions) {
 					zone={zoneId}
 					host={host}
 					routes={routes}
-					bundleEntrypoint={!!args.bundleEntrypoint}
+					processEntrypoint={!!args.processEntrypoint}
 					rules={args.rules ?? getRules(configParam)}
 					legacyEnv={isLegacyEnv(configParam)}
 					minify={args.minify ?? configParam.minify}
@@ -564,7 +564,7 @@ export async function startApiDev(args: StartDevOptions) {
 			zone: zoneId,
 			host: host,
 			routes: routes,
-			bundleEntrypoint: !!args.bundleEntrypoint,
+			processEntrypoint: !!args.processEntrypoint,
 			rules: args.rules ?? getRules(configParam),
 			legacyEnv: isLegacyEnv(configParam),
 			minify: args.minify ?? configParam.minify,

packages/wrangler/src/dev.tsx

@@ -116,7 +116,7 @@ export type DevProps = {
 	initialPort: number;
 	initialIp: string;
 	inspectorPort: number;
-	bundleEntrypoint: boolean;
+	processEntrypoint: boolean;
 	rules: Config["rules"];
 	accountId: string | undefined;
 	initialMode: "local" | "remote";
@@ -272,7 +272,7 @@ function DevSession(props: DevSessionProps) {
 		entry: props.entry,
 		destination: directory,
 		jsxFactory: props.jsxFactory,
-		bundleEntrypoint: props.bundleEntrypoint,
+		processEntrypoint: props.processEntrypoint,
 		rules: props.rules,
 		jsxFragment: props.jsxFragment,
 		serveAssetsFromWorker: Boolean(