wasm-bindgen

Faça a ponte entre Rust e JavaScript com macros wasm-bindgen e geração de código de cola.

Receita

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {name}!")
}

wasm-pack build --target web

Quando usar isso: WASM para navegador que precisa chamar APIs JS e expor funções Rust para JavaScript.

Exemplo de Trabalho

use wasm_bindgen::prelude::*;
use serde::{Deserialize, Serialize};
 
#[wasm_bindgen]
pub struct Counter {
    value: u32,
}
 
#[wasm_bindgen]
impl Counter {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Counter {
        Counter { value: 0 }
    }
 
    pub fn increment(&mut self) {
        self.value += 1;
    }
 
    pub fn value(&self) -> u32 {
        self.value
    }
}
 
#[wasm_bindgen]
pub fn parse_json(input: &str) -> Result<JsValue, JsValue> {
    let data: serde_json::Value = serde_json::from_str(input)
        .map_err(|e| JsValue::from_str(&e.to_string()))?;
    Ok(JsValue::from_serde(&data)?)
}

import init, { Counter, parse_json } from "./pkg/mylib.js";
 
await init();
const c = new Counter();
c.increment();
console.log(c.value());
console.log(parse_json('{"ok":true}'));

O que isso demonstra:

• #[wasm_bindgen] exporta tipos Rust para classes JS
• constructor mapeia para new Counter()
• JsValue atravessa a fronteira para JSON dinâmico
• wasm-pack gera wrappers JS amigáveis ao TypeScript

Mergulho Profundo

Mapeamento de Tipos

Importando JS

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

Armadilhas

• Propriedade através da fronteira - O JS pode reter referências de forma imprevisível. Correção: Prefira retornos de propriedade (String, Vec) em vez de empréstimos de longa duração.
• Panic em fn exportada - Trava a instância WASM. Correção: Retorne Result<JsValue, JsValue> para JS.
• Tipos não-Send em async - wasm-bindgen-futures requer futures Send. Correção: Use spawn_local para futures DOM.
• serde e JsValue - from_serde precisa de serde-wasm-bindgen em pilhas modernas. Correção: Use serde-wasm-bindgen para desempenho.
• Tamanho Debug vs release - WASM de depuração é enorme. Correção: Sempre use --release para implantações no navegador.

Alternativas

FAQs

Relacionado

• Noções Básicas de WebAssembly - alvos e compilações
• wasm-pack & Bundling - enviando pacotes npm
• DOM & Web APIs (web-sys) - APIs do navegador
• Desempenho & Tamanho - encolhendo binários

Versões da Pilha: Esta página foi escrita para Rust 1.97.0 (edição 2024), Tokio 1.x, Axum 0.8, serde 1.0, sqlx 0.8, clap 4, e Polars 0.46+.