Pages Functions Wasm cleanup (#2806)

.changeset/fast-mayflies-kick.md

@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+chore: Remove the `--experimental-worker-bundle` option from Pages Functions

.changeset/hot-berries-punch.md

@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+feat: Add `--outdir` as an option when running `wrangler pages functions build`.
+
+This deprecates `--outfile` when building a Pages Plugin with `--plugin`.
+
+When building functions normally, `--outdir` may be used to produce a human-inspectable format of the `_worker.bundle` that is produced.

.changeset/lucky-ads-fry.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Enable bundling in Pages Functions by default.
+
+We now enable bundling by default for a `functions/` folder and for an `_worker.js` in Pages Functions. This allows you to use external modules such as Wasm. You can disable this behavior in Direct Upload projects by using the `--no-bundle` argument in `wrangler pages publish` and `wrangler pages dev`.

.gitignore

@@ -180,7 +180,7 @@ dist
 wrangler-dist/
 miniflare-dist
 packages/wrangler/wrangler.toml
-packages/prerelease-registry/_worker.js
+packages/prerelease-registry/_worker.bundle
 packages/wranglerjs-compat-webpack-plugin/lib
 .wrangler-1-cache
 emitted-types/
@@ -189,5 +189,5 @@ _routes.generated.json
 # Vendored npm dependencies
 !vendor/*.tgz
 
-# IntelliJ 
+# IntelliJ
 .idea/

.prettierignore

@@ -6,11 +6,11 @@ packages/wrangler/emitted-types/
 packages/wrangler/coverage/
 packages/wrangler/CHANGELOG.md
 packages/jest-environment-wrangler/CHANGELOG.md
-packages/prerelease-registry/_worker.js
+packages/prerelease-registry/dist/
 packages/jest-environment-wrangler/dist/
 packages/wranglerjs-compat-webpack-plugin/lib
 packages/wrangler-devtools/built-devtools
-fixtures/pages-plugin-example/index.js
+fixtures/pages-plugin-example/dist/
 fixtures/remix-pages-app/build/
 fixtures/remix-pages-app/public/build/
 fixtures/worker-app/dist/

fixtures/pages-functions-wasm-app/package.json

@@ -5,8 +5,8 @@
 	"sideEffects": false,
 	"scripts": {
 		"check:type": "tsc",
-		"dev": "npx wrangler pages dev public --experimental-worker-bundle=true --port 8776",
-		"publish": "npx wrangler pages publish public --experimental-worker-bundle=true",
+		"dev": "npx wrangler pages dev public --port 8776",
+		"publish": "npx wrangler pages publish public",
 		"test": "npx vitest",
 		"test:ci": "npx vitest"
 	},

fixtures/pages-functions-wasm-app/tests/index.test.ts

@@ -10,7 +10,7 @@ describe.concurrent("Pages Functions with wasm module imports", () => {
 		({ ip, port, stop } = await runWranglerPagesDev(
 			resolve(__dirname, ".."),
 			"public",
-			["--port=0", "--experimental-worker-bundle=true"]
+			["--port=0"]
 		));
 	});
 
@@ -25,8 +25,8 @@ describe.concurrent("Pages Functions with wasm module imports", () => {
 	it("should resolve any wasm module imports and render /meaning-of-life", async ({
 		expect,
 	}) => {
-		let response = await fetch(`http://${ip}:${port}/meaning-of-life`);
-		let text = await response.text();
+		const response = await fetch(`http://${ip}:${port}/meaning-of-life`);
+		const text = await response.text();
 		expect(text).toEqual("Hello WASM World! The meaning of life is 21");
 	});
 });

fixtures/pages-plugin-example/functions/_middleware.ts

@@ -1,3 +1,12 @@
+import type { PluginArgs } from "..";
+
+type ExamplePagesPluginFunction<
+	Env = unknown,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	Params extends string = any,
+	Data extends Record<string, unknown> = Record<string, unknown>
+> = PagesPluginFunction<Env, Params, Data, PluginArgs>;
+
 class BodyHandler {
 	footerText: string;
 
@@ -11,12 +20,10 @@ class BodyHandler {
 	}
 }
 
-export const onRequest: PagesPluginFunction<
-	unknown,
-	never,
-	Record<string, unknown>,
-	{ footerText: string }
-> = async ({ next, pluginArgs }) => {
+export const onRequest: ExamplePagesPluginFunction = async ({
+	next,
+	pluginArgs,
+}) => {
 	const response = await next();
 
 	return new HTMLRewriter()

fixtures/pages-plugin-example/index.d.ts

@@ -0,0 +1,5 @@
+export type PluginArgs = {
+	footerText: string;
+};
+
+export default function (args: PluginArgs): PagesFunction;

fixtures/pages-plugin-example/package.json

@@ -2,16 +2,16 @@
 	"name": "pages-plugin-example",
 	"version": "0.0.0",
 	"private": true,
-	"main": "index.js",
+	"main": "dist/index.js",
 	"types": "index.d.ts",
 	"files": [
-		"index.js",
+		"dist/",
 		"index.d.ts",
 		"tsconfig.json",
 		"public/"
 	],
 	"scripts": {
-		"build": "npx wrangler pages functions build --plugin --outfile=index.js",
+		"build": "npx wrangler pages functions build --plugin --outdir=dist",
 		"check:type": "tsc"
 	}
 }

fixtures/pages-plugin-example/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"include": ["functions"],
+	"include": ["functions", "index.d.ts"],
 	"compilerOptions": {
 		"target": "ES2020",
 		"module": "CommonJS",

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

@@ -5,11 +5,22 @@ import { describe, it } from "vitest";
 import { runWranglerPagesDev } from "../../shared/src/run-wrangler-long-lived";
 
 describe.concurrent("Pages _worker.js", () => {
-	it("should throw an error when the _worker.js file imports something", ({
+	it("should throw an error when the _worker.js file imports something and --bundle is false", ({
 		expect,
 	}) => {
 		expect(() =>
-			execSync("npm run dev", {
+			execSync("npm run dev -- --bundle=false", {
+				cwd: path.resolve(__dirname, ".."),
+				stdio: "ignore",
+			})
+		).toThrowError();
+	});
+
+	it("should throw an error when the _worker.js file imports something and --no-bundle is true", ({
+		expect,
+	}) => {
+		expect(() =>
+			execSync("npm run dev -- --no-bundle", {
 				cwd: path.resolve(__dirname, ".."),
 				stdio: "ignore",
 			})

fixtures/pages-workerjs-wasm-app/package.json

@@ -6,7 +6,7 @@
 	"scripts": {
 		"check:type": "tsc",
 		"dev": "npx wrangler pages dev public --port 8776",
-		"publish": "npx wrangler pages publish public --experimental-worker-bundle=true",
+		"publish": "npx wrangler pages publish public",
 		"test": "npx vitest",
 		"test:ci": "npx vitest"
 	},

fixtures/pages-workerjs-wasm-app/tests/index.test.ts

@@ -10,7 +10,7 @@ describe.concurrent("Pages Advanced Mode with wasm module imports", () => {
 		({ ip, port, stop } = await runWranglerPagesDev(
 			resolve(__dirname, ".."),
 			"public",
-			["--port=0", "--experimental-worker-bundle=true"]
+			["--port=0"]
 		));
 	});
 
@@ -25,8 +25,8 @@ describe.concurrent("Pages Advanced Mode with wasm module imports", () => {
 	it("should resolve any wasm module imports and render the correct response", async ({
 		expect,
 	}) => {
-		let response = await fetch(`http://${ip}:${port}/meaning-of-life`);
-		let text = await response.text();
+		const response = await fetch(`http://${ip}:${port}/meaning-of-life`);
+		const text = await response.text();
 		expect(text).toEqual(
 			"Hello _worker.js WASM World! The meaning of life is 21"
 		);

packages/prerelease-registry/package.json

@@ -2,14 +2,14 @@
 	"name": "@cloudflare/prerelease-registry",
 	"version": "0.0.1",
 	"private": true,
-	"main": "_worker.js",
+	"main": "dist/index.js",
 	"scripts": {
-		"build": "npx wrangler pages functions build --fallback-service='' ./functions/routes",
+		"build": "npx wrangler pages functions build --fallback-service='' ./functions/routes --outdir=dist",
 		"check:type": "tsc",
 		"prepublish": "npm run build",
-		"publish": "npx wrangler publish _worker.js",
+		"publish": "npx wrangler publish dist/index.js",
 		"prestart": "npm run build",
-		"start": "npx wrangler dev _worker.js"
+		"start": "npx wrangler dev dist/index.js"
 	},
 	"dependencies": {
 		"jszip": "^3.7.1"