WebAssembly Module Development

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0u64;
            let mut b = 1u64;
            for _ in 2..=n {
                let temp = a + b;
                a = b;
                b = temp;
            }
            b
        }
    }
}

#[wasm_bindgen]
pub struct Calculator {
    cache: Vec<u64>,
}

#[wasm_bindgen]
impl Calculator {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Calculator {
        Calculator { cache: vec![0, 1] }
    }

    pub fn nth(&mut self, n: usize) -> u64 {
        while self.cache.len() <= n {
            let len = self.cache.len();
            let next = self.cache[len - 1] + self.cache[len - 2];
            self.cache.push(next);
        }
        self.cache[n]
    }
}

use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;
use web_sys::ImageData;

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

#[wasm_bindgen]
pub fn process_image(image_data: ImageData) -> Result<ImageData, JsValue> {
    let mut data = image_data.data().to_vec();
    grayscale(&mut data);
    
    ImageData::new_with_u8_clamped_array_and_sh(
        Clamped(&data),
        image_data.width(),
        image_data.height(),
    )
}

import init, { fibonacci, Calculator } from './pkg/wasm_module.js';

async function runWasm() {
  // Initialize the WASM module
  await init();

  // Call simple function
  console.log('Fibonacci(10):', fibonacci(10));

  // Use class instance
  const calc = new Calculator();
  console.log('nth(20):', calc.nth(20));
  console.log('nth(30):', calc.nth(30));

  // Process image
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
  const processedImage = process_image(imageData);
  ctx.putImageData(processedImage, 0, 0);
}

runWasm();

[package]
name = "wasm-module"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["ImageData"] }
js-sys = "0.3"

[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"

[package.metadata.wasm-pack.profile.release]
wasm-opt = ['-Oz']