Add Wasm helper (#8587)

* Added wasm-helper plugin

* Added changeset

* Fix plugin name

Author: jamesopstad

.changeset/eighty-glasses-talk.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+Add support for `.wasm?init` extension to load WebAssembly as documented by Vite (https://vite.dev/guide/features.html#webassembly).

packages/vite-plugin-cloudflare/playground/additional-modules/__tests__/additional-modules.spec.ts

@@ -28,6 +28,11 @@ test("supports CompiledWasm modules with a '.wasm' extension", async () => {
 });
 
 test("supports CompiledWasm modules with a '.wasm?module' extension", async () => {
-	const result = await getJsonResponse("/wasm-with-param");
+	const result = await getJsonResponse("/wasm-with-module-param");
 	expect(result).toEqual({ result: 11 });
 });
+
+test("supports CompiledWasm modules with a '.wasm?init' extension", async () => {
+	const result = await getJsonResponse("/wasm-with-init-param");
+	expect(result).toEqual({ result: 15 });
+});

packages/vite-plugin-cloudflare/playground/additional-modules/src/index.ts

@@ -2,7 +2,8 @@ import bin from "./modules/bin-example.bin";
 import html from "./modules/html-example.html";
 import text from "./modules/text-example.txt";
 import wasm from "./modules/wasm-example.wasm";
-import wasmWithParam from "./modules/wasm-example.wasm?module";
+import init from "./modules/wasm-example.wasm?init";
+import wasmWithModuleParam from "./modules/wasm-example.wasm?module";
 
 export default {
 	async fetch(request) {
@@ -26,12 +27,18 @@ export default {
 
 				return Response.json({ result });
 			}
-			case "/wasm-with-param": {
-				const instance = await WebAssembly.instantiate(wasmWithParam);
+			case "/wasm-with-module-param": {
+				const instance = await WebAssembly.instantiate(wasmWithModuleParam);
 				const result = instance.exports.add(5, 6);
 
 				return Response.json({ result });
 			}
+			case "/wasm-with-init-param": {
+				const instance = await init();
+				const result = instance.exports.add(7, 8);
+
+				return Response.json({ result });
+			}
 			default: {
 				return new Response(null, { status: 404 });
 			}

packages/vite-plugin-cloudflare/src/index.ts

@@ -341,6 +341,26 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 				});
 			},
 		},
+		// Plugin to support `.wasm?init` extension
+		{
+			name: "vite-plugin-cloudflare:wasm-helper",
+			enforce: "pre",
+			applyToEnvironment(environment) {
+				return getWorkerConfig(environment.name) !== undefined;
+			},
+			load(id) {
+				if (!id.endsWith(".wasm?init")) {
+					return;
+				}
+
+				return `
+					import wasm from "${cleanUrl(id)}";
+					export default function(opts = {}) {
+						return WebAssembly.instantiate(wasm, opts);
+					}
+				`;
+			},
+		},
 		// Plugin to support additional modules
 		{
 			name: "vite-plugin-cloudflare:additional-modules",