As part of my research on options for building the peer-to-peer Git Portal I’ve built an example which shows how to use wasm-bindgen in a Rust WASI web app.
wasm-bindgen makes it much easier to work in the browser with Rust, but only supports the WASM not WASI Rust target, so it took a while to figure out how to do this (for the first time I believe).
The reason for using WASI, the Web Assembly System Interface is so that I can have a filesystem accessible from JavaScript and Rust. For the Git Portal this should enable me to develop the prototype and then replace the filesystem with Safe sn_fs when that’s available in the browser.
I’m case any of this is useful for other Safe apps, here’s a summary of the demo from the README:
Svelte Rust/WASI in Browser Example
This example uses Rust Web Assembly compiled for WASI (the Web Assembly System Interface) running in the browser using WasmerJS, and uses wasm-bindgen to make it easy to pass data from JavaScript to Rust and vice versa.
Rust is compiled for target wasm32-wasi and bindings are generated using wasm-bindgen plus a small amount of post-processing to adapt the bindings for WASI.
For a non-Rust example and Svelte + Wasmer/WASI template see simple-svelte-wasmer-webpack which was the starting point for this project.
Features
- A Svelte WASM/WASI app with Rust subsystem (using target
wasm32-wasi) - JavaScript and Rust both accessing the WasmerJS/wasmFS filesystem
- Calling Rust from JavaScript and vice versa using
wasm-bindgen+ - Passing and returning JavaScript and Rust native types with no mucking about
- Passing and returning JavaScript objects and arrays to/from Rust structs
Check it out here: GitHub - happybeing/svelte-wasi-with-rust: Svelte Rust/WASI in Browser Example