Svelte Rust/WASI in Browser Example

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

3 Likes