feat: support [wasm_modules] for service-worker format workers

.changeset/thick-cooks-leave.md

@@ -0,0 +1,18 @@
+---
+"wrangler": patch
+---
+
+feat: support `[wasm_modules]` for service-worker format workers
+
+This lands support for `[wasm_modules]` as defined by https://github.com/cloudflare/wrangler/pull/1677.
+
+wasm modules can be defined in service-worker format with configuration in wrangler.toml as -
+
+```
+[wasm_modules]
+MYWASM = "./path/to/my-wasm.wasm"
+```
+
+The module will then be available as the global `MYWASM` inside your code. Note that this ONLY makes sense in service-worker format workers (for now).
+
+(In the future, we MAY enable wasm module imports in service-worker format (i.e. `import MYWASM from './path/to/my-wasm.wasm'`) and global imports inside modules format workers.)

packages/example-wasm-app/README.md

@@ -1,3 +1,9 @@
 ## example-wasm-app
 
-This is a sample wasm worker. It was created by creating a [`workers-rs`](https://github.com/cloudflare/workers-rs) project, running a build, removing unneeded artifacts, and copying the output folder here. You can run this worker with `npx wrangler dev worker/shim.js` (or from the `wrangler` package directory with `npm start -- dev ../example-wasm-app/worker/shim.js`).
+There are 2 workers in this package. They were both created with a [`workers-rs`](https://github.com/cloudflare/workers-rs) project, running a build, removing unneeded artifacts, and copying the output folders.
+
+The wasm file generated, `index_bg.wasm` is copied into `./worker`, and shared by the 2 workers. `./worker/module` contains a "modules" format worker and imports the wasm module as a regular es module, while `./worker/service-worker` contains a "service-worker" format worker and uses wrangler.toml to bind the wasm module as a global `MYWASM`. They're otherwise identical.
+
+You can run the module worker with `npx wrangler dev worker/module/index.js` (or from the `wrangler` package directory with `npm start -- dev ../example-wasm-app/worker/module/index.js`).
+
+You can run the service-worker worker with `npx wrangler dev worker/service-worker/index.js --config worker/service-worker/wrangler.toml` (or from the `wrangler` package directory with `npm start -- dev ../example-wasm-app/worker/service-worker/index.js --config ../example-wasm-app/worker/service-worker/wrangler.toml`).

packages/example-wasm-app/package.json

@@ -1,6 +1,5 @@
 {
   "name": "example-wasm-app",
   "version": "1.0.0",
-  "module": "worker/shim.js",
   "private": true
 }

packages/example-wasm-app/worker/module/export_wasm.js

@@ -0,0 +1,10 @@
+import * as index_bg from "./index_bg.js";
+import _wasm from "../index_bg.wasm";
+
+const _wasm_memory = new WebAssembly.Memory({ initial: 512 });
+let importsObject = {
+  env: { memory: _wasm_memory },
+  "./index_bg.js": index_bg,
+};
+
+export default new WebAssembly.Instance(_wasm, importsObject).exports;

packages/example-wasm-app/worker/export_wasm.js → packages/example-wasm-app/worker/service-worker/export_wasm.js

@@ -1,5 +1,5 @@
 import * as index_bg from "./index_bg.js";
-import _wasm from "./index_bg.wasm";
+const _wasm = MYWASM;
 
 const _wasm_memory = new WebAssembly.Memory({ initial: 512 });
 let importsObject = {

packages/example-wasm-app/worker/service-worker/index.js

@@ -0,0 +1,5 @@
+import * as worker from "./index_bg.js";
+
+addEventListener("fetch", (event) => {
+  event.respondWith(worker.fetch(event.request));
+});