Rust WebAssembly开发实战

// src/lib.rs
use wasm_bindgen::prelude::*;

// 导出到JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! From Rust Wasm", name)
}

// 调用JavaScript函数
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);

    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

#[wasm_bindgen(start)]
pub fn main() {
    log("Wasm module initialized!");
}

// 导出结构体
#[wasm_bindgen]
pub struct Calculator {
    history: Vec<f64>,
}

#[wasm_bindgen]
impl Calculator {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Calculator {
        Calculator {
            history: Vec::new(),
        }
    }

    pub fn add(&mut self, a: f64, b: f64) -> f64 {
        let result = a + b;
        self.history.push(result);
        result
    }

    pub fn get_history(&self) -> Vec<f64> {
        self.history.clone()
    }
}

use wasm_bindgen::prelude::*;
use js_sys::{Array, Date, Function, Object, Promise, Reflect};
use wasm_bindgen_futures::JsFuture;

// 1. 调用JavaScript全局函数
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_name = setTimeout)]
    fn set_timeout(closure: &Closure<dyn FnMut()>, millis: u32) -> i32;
}

// 2. 操作JavaScript对象
#[wasm_bindgen]
pub fn create_object() -> JsValue {
    let obj = Object::new();
    Reflect::set(&obj, &"name".into(), &"Rust".into()).unwrap();
    Reflect::set(&obj, &"version".into(), &JsValue::from_f64(1.0)).unwrap();
    obj.into()
}

// 3. 使用Promise（async/await）
#[wasm_bindgen]
pub async fn fetch_data(url: &str) -> Result<JsValue, JsValue> {
    let window = web_sys::window().unwrap();
    let resp_value = JsFuture::from(window.fetch_with_str(url)).await?;
    let resp: web_sys::Response = resp_value.dyn_into()?;
    let json = JsFuture::from(resp.json()?).await?;
    Ok(json)
}

// 4. 回调函数
#[wasm_bindgen]
pub fn set_callback(callback: &js_sys::Function) {
    let result = JsValue::from_str("data from Rust");
    callback.call1(&JsValue::NULL, &result).unwrap();
}

// 5. 闭包（Closure）
#[wasm_bindgen]
pub fn create_timer() {
    let closure = Closure::wrap(Box::new(|| {
        web_sys::console::log_1(&"Timer fired!".into());
    }) as Box<dyn FnMut()>);

    web_sys::window()
        .unwrap()
        .set_timeout_with_callback_and_timeout_and_arguments_0(
            closure.as_ref().unchecked_ref(),
            1000,
        )
        .unwrap();

    closure.forget(); // 防止闭包被drop
}

use wasm_bindgen::prelude::*;
use web_sys::{Document, Element, HtmlElement};

#[wasm_bindgen]
pub fn setup_ui() -> Result<(), JsValue> {
    let window = web_sys::window().unwrap();
    let document = window.document().unwrap();

    // 创建元素
    let container = document.create_element("div")?;
    container.set_id("app");
    container.set_class_name("container");

    // 创建标题
    let title = document.create_element("h1")?;
    title.set_text_content(Some("Rust Wasm App"));

    // 创建按钮
    let button = document.create_element("button")?;
    button.set_text_content(Some("Click me!"));

    // 添加事件监听器
    let click_count = std::cell::Cell::new(0u32);
    let output = document.create_element("p")?;
    output.set_id("output");

    let output_clone = output.clone();
    let closure = Closure::wrap(Box::new(move || {
        let count = click_count.get() + 1;
        click_count.set(count);
        output_clone.set_text_content(
            Some(&format!("Clicked {} times", count))
        );
    }) as Box<dyn FnMut()>);

    button.add_event_listener_with_callback(
        "click",
        closure.as_ref().unchecked_ref(),
    )?;
    closure.forget();

    // 组装DOM
    container.append_child(&title)?;
    container.append_child(&button)?;
    container.append_child(&output)?;

    document.body().unwrap().append_child(&container)?;

    Ok(())
}

// 内存传递模式

// 1. 传递字符串（自动处理）
#[wasm_bindgen]
pub fn process_string(input: &str) -> String {
    // wasm-bindgen自动在JS堆和Wasm内存之间复制字符串
    input.to_uppercase()
}

// 2. 传递二进制数据
#[wasm_bindgen]
pub fn process_bytes(data: &[u8]) -> Vec<u8> {
    // 自动处理内存复制
    data.iter().map(|b| b.wrapping_add(1)).collect()
}

// 3. 零拷贝方式（高性能场景）
#[wasm_bindgen]
pub fn process_image(width: u32, height: u32) -> Vec<u8> {
    let size = (width * height * 4) as usize;
    let mut pixels = vec![0u8; size];

    // 直接操作像素数据
    for i in (0..size).step_by(4) {
        pixels[i] = 255;     // R
        pixels[i + 1] = 0;   // G
        pixels[i + 2] = 0;   // B
        pixels[i + 3] = 255; // A
    }

    pixels
}

// 使用wee_alloc替代默认分配器（减小约10KB）
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

// 图像处理示例 - 灰度转换
#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
        // chunk[3] (alpha) 保持不变
    }
}

// 使用SIMD加速（需要simd128 feature）
// #[target_feature(enable = "simd128")]
// pub fn grayscale_simd(pixels: &mut [u8]) { ... }

// 使用wit-bindgen实现Component
// Cargo.toml: wit-bindgen = "0.24"

wit_bindgen::generate!({
    world: "hello-world",
});

struct MyComponent;

impl Guest for MyComponent {
    fn greet(name: String) -> String {
        format!("Hello, {}!", name)
    }
}

export!(MyComponent);