Rust & wasm-bindgen

rustup target add wasm32-unknown-unknown wasm32-wasip2
cargo build --release --target wasm32-unknown-unknown

[package]
name = "geom"
version = "0.1.0"
edition = "2024"
 
[lib]
crate-type = ["cdylib", "rlib"] # rlib: for tests/benches
 
[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
wasm-bindgen-futures = "0.4"
serde = { version = "1", features = ["derive"] }
serde-wasm-bindgen = "0.6"
console_error_panic_hook = "0.1"
 
[dependencies.web-sys]
version = "0.3"
features = ["console", "Window", "Document", "Element"]
 
[dev-dependencies]
wasm-bindgen-test = "0.3"
 
[profile.release]
opt-level = "z"     # or "s"; try 3 for speed
lto = true
codegen-units = 1
panic = "abort"
strip = true

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen(start)]
fn start() {
    console_error_panic_hook::set_once();
}
 
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}
 
#[wasm_bindgen(js_name = parseCsv)]
pub fn parse_csv(text: &str) -> Result<Vec<f64>, JsError> {
    text.split(',')
        .map(|s| s.trim().parse::<f64>())
        .collect::<Result<_, _>>()
        .map_err(|e| JsError::new(&e.to_string()))
}
 
#[wasm_bindgen]
pub struct Counter {
    count: u32,
    #[wasm_bindgen(readonly)]
    pub step: u32,
}
 
#[wasm_bindgen]
impl Counter {
    #[wasm_bindgen(constructor)]
    pub fn new(step: u32) -> Counter {
        Counter { count: 0, step }
    }
    pub fn tick(&mut self) -> u32 {
        self.count += self.step;
        self.count
    }
    #[wasm_bindgen(getter)]
    pub fn count(&self) -> u32 {
        self.count
    }
    #[wasm_bindgen(setter)]
    pub fn set_count(&mut self, v: u32) {
        self.count = v;
    }
}

import init, { add, parseCsv, Counter } from "./pkg/geom.js";
 
await init(); // --target web only; bundler target self-inits
add(2, 3);                  // 5
parseCsv("1, 2.5");         // Float64Array [1, 2.5]
const c = new Counter(2);
c.tick(); c.count = 10;     // getter / setter
c.free();                   // or `using c = new Counter(2)`

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
extern "C" {
    // global function
    fn alert(s: &str);
 
    // namespaced: console.log
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_str(s: &str);
 
    // throws? -> Result
    #[wasm_bindgen(catch, js_namespace = JSON)]
    fn parse(s: &str) -> Result<JsValue, JsValue>;
 
    // a JS class with methods and properties
    type Player;
    #[wasm_bindgen(constructor)]
    fn new(name: &str) -> Player;
    #[wasm_bindgen(method)]
    fn play(this: &Player, track: u32);
    #[wasm_bindgen(method, getter)]
    fn volume(this: &Player) -> f64;
    #[wasm_bindgen(method, setter)]
    fn set_volume(this: &Player, v: f64);
}
 
// module = ... goes on the whole extern block
#[wasm_bindgen(module = "/js/storage.js")]
extern "C" {
    fn save(key: &str, value: &str);
}

// Zero-copy view of Wasm memory (unsafe: invalidated
// by any allocation that grows memory)
let v: Vec<f32> = vec![0.0; 1024];
let view = unsafe { js_sys::Float32Array::view(&v) };
// Copy into a fresh JS array instead (safe):
let copy = js_sys::Float32Array::from(v.as_slice());

use wasm_bindgen::prelude::*;
use web_sys::{Document, Element, Window};
 
pub fn render(msg: &str) -> Result<(), JsValue> {
    let window: Window =
        web_sys::window().ok_or("no window")?;
    let doc: Document =
        window.document().ok_or("no document")?;
    let el: Element = doc.create_element("p")?;
    el.set_text_content(Some(msg));
    doc.body().ok_or("no body")?.append_child(&el)?;
    web_sys::console::log_1(&"rendered".into());
    Ok(())
}

use wasm_bindgen::prelude::*;
use web_sys::{EventTarget, MouseEvent};
 
pub fn on_click(
    target: &EventTarget,
) -> Result<Closure<dyn FnMut(MouseEvent)>, JsValue> {
    let cb = Closure::new(move |e: MouseEvent| {
        web_sys::console::log_1(&e.client_x().into());
    });
    target.add_event_listener_with_callback(
        "click",
        cb.as_ref().unchecked_ref(),
    )?;
    Ok(cb) // caller stores it; dropping it disables the
           // JS function ("closure invoked ... after being
           // dropped" error), so remove the listener first
}

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::{spawn_local, JsFuture};
use web_sys::Response;
 
// Exported async fn -> Promise<string> in TS
#[wasm_bindgen]
pub async fn fetch_text(
    url: String,
) -> Result<String, JsValue> {
    let window = web_sys::window().unwrap();
    let resp: Response =
        JsFuture::from(window.fetch_with_str(&url))
            .await?
            .dyn_into()?;
    let text = JsFuture::from(resp.text()?).await?;
    Ok(text.as_string().unwrap_or_default())
}
 
// Kick off a future from sync code (no return value)
pub fn background() {
    spawn_local(async {
        let _ = fetch_text("/ping".into()).await;
    });
}

use serde::{Deserialize, Serialize};
use wasm_bindgen::prelude::*;
 
#[derive(Serialize, Deserialize)]
pub struct Config {
    pub name: String,
    pub size: [u32; 2],
    pub tags: Vec<String>,
}
 
#[wasm_bindgen]
pub fn normalize(
    input: JsValue,
) -> Result<JsValue, JsValue> {
    let mut cfg: Config =
        serde_wasm_bindgen::from_value(input)?;
    cfg.tags.sort();
    Ok(serde_wasm_bindgen::to_value(&cfg)?)
}

cargo install wasm-pack      # or the installer script
wasm-pack new my-lib         # template project
wasm-pack build --target web --release
wasm-pack build --target bundler --out-dir pkg --scope me
wasm-pack test --headless --firefox
wasm-pack publish            # publishes pkg/ to npm

cargo install wasm-bindgen-cli --version 0.2.129 # = crate
cargo build --release --target wasm32-unknown-unknown
wasm-bindgen --target web --out-dir pkg \
  target/wasm32-unknown-unknown/release/geom.wasm
wasm-opt -Oz pkg/geom_bg.wasm -o pkg/geom_bg.wasm

twiggy top -n 15 pkg/geom_bg.wasm
twiggy dominators pkg/geom_bg.wasm | head -40
twiggy garbage pkg/geom_bg.wasm   # unreachable code

// tests/web.rs
use wasm_bindgen::JsValue;
use wasm_bindgen_test::*;
 
wasm_bindgen_test_configure!(run_in_browser);
 
#[wasm_bindgen_test]
fn adds() {
    assert_eq!(geom::add(2, 2), 4);
}
 
#[wasm_bindgen_test]
async fn fetches() {
    let p = js_sys::Promise::resolve(&JsValue::from(42));
    let v = wasm_bindgen_futures::JsFuture::from(p)
        .await
        .unwrap();
    assert_eq!(v, 42);
}

wasm-pack test --node
wasm-pack test --headless --chrome --firefox
 
# without wasm-pack
cargo install wasm-bindgen-cli --version 0.2.129
# .cargo/config.toml:
# [target.wasm32-unknown-unknown]
# runner = "wasm-bindgen-test-runner"
WASM_BINDGEN_USE_BROWSER=1 \
  cargo test --target wasm32-unknown-unknown

[unstable]
build-std = ["std", "panic_abort"]
 
[build]
target = "wasm32-unknown-unknown"
rustflags = ["-C", "target-feature=+atomics"]

cargo new --lib geom && cd geom
cargo add wasm-bindgen
# Cargo.toml: [lib] crate-type = ["cdylib"]
wasm-pack build --target web --out-dir ../web/src/geom

import init, { add } from "./geom/geom.js";
import wasmUrl from "./geom/geom_bg.wasm?url";
 
await init({ module_or_path: wasmUrl });
document.body.textContent = `2 + 3 = ${add(2, 3)}`;

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
pub fn grayscale(px: &mut [u8]) {
    for p in px.chunks_exact_mut(4) {
        let y = (0.299 * p[0] as f32
            + 0.587 * p[1] as f32
            + 0.114 * p[2] as f32) as u8;
        p[0] = y;
        p[1] = y;
        p[2] = y;
    }
}

const img = ctx.getImageData(0, 0, w, h);
const bytes = new Uint8Array(img.data.buffer);
grayscale(bytes); // copied in, mutated, copied back
ctx.putImageData(img, 0, 0);

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
pub struct World {
    pos: Vec<f32>,
    vel: Vec<f32>,
}
 
#[wasm_bindgen]
impl World {
    #[wasm_bindgen(constructor)]
    pub fn new(n: usize) -> World {
        World { pos: vec![0.0; n], vel: vec![1.0; n] }
    }
    pub fn step(&mut self, dt: f32) {
        for (p, v) in self.pos.iter_mut().zip(&self.vel) {
            *p += v * dt;
        }
    }
    /// Pointer into Wasm memory for zero-copy reads.
    pub fn positions_ptr(&self) -> *const f32 {
        self.pos.as_ptr()
    }
    pub fn len(&self) -> usize {
        self.pos.len()
    }
}

import init, { World } from "./pkg/sim.js";
const wasm = await init(); // exports, including memory
const world = new World(10_000);
world.step(1 / 60);
const pos = new Float32Array(
  wasm.memory.buffer, world.positions_ptr(), world.len(),
); // re-create after any call that may allocate

use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
 
#[wasm_bindgen(module = "/js/api.js")]
extern "C" {
    #[wasm_bindgen(catch)]
    fn loadUser(id: u32) -> Result<js_sys::Promise, JsValue>;
}
 
#[wasm_bindgen]
pub async fn user_name(id: u32) -> Result<String, JsValue> {
    let v = JsFuture::from(loadUser(id)?).await?;
    let name = js_sys::Reflect::get(&v, &"name".into())?;
    name.as_string().ok_or_else(|| "no name".into())
}

use std::{cell::RefCell, rc::Rc};
use wasm_bindgen::prelude::*;
 
fn raf(f: &Closure<dyn FnMut(f64)>) {
    web_sys::window()
        .unwrap()
        .request_animation_frame(f.as_ref().unchecked_ref())
        .unwrap();
}
 
#[wasm_bindgen]
pub fn run() {
    let f = Rc::new(RefCell::new(None));
    let g = f.clone();
    *g.borrow_mut() = Some(Closure::new(move |t: f64| {
        let _ = t; // draw frame at time t (ms)
        raf(f.borrow().as_ref().unwrap());
    }));
    raf(g.borrow().as_ref().unwrap());
}