Skip to content

Commit

Permalink
feat: support [wasm_modules] for service-worker format workers (#409)
Browse files Browse the repository at this point in the history
This lands support for `[wasm_modules]` as defined by cloudflare/wrangler-legacy#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.)
  • Loading branch information
threepointone committed Feb 9, 2022
1 parent f30426f commit f8bb523
Show file tree
Hide file tree
Showing 18 changed files with 916 additions and 17 deletions.
18 changes: 18 additions & 0 deletions .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.)
8 changes: 7 additions & 1 deletion 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`).
1 change: 0 additions & 1 deletion packages/example-wasm-app/package.json
@@ -1,6 +1,5 @@
{
"name": "example-wasm-app",
"version": "1.0.0",
"module": "worker/shim.js",
"private": true
}
10 changes: 10 additions & 0 deletions 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;
File renamed without changes.
@@ -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 = {
Expand Down
5 changes: 5 additions & 0 deletions 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));
});

0 comments on commit f8bb523

Please sign in to comment.