WebAssembly dengan Rust

# 1. Install Rust (jika belum)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env

# 2. Tambahkan WebAssembly target
rustup target add wasm32-unknown-unknown

# 3. Install wasm-pack (build tool untuk Rust → Wasm)
cargo install wasm-pack

# 4. Install cargo-generate (untuk scaffolding)
cargo install cargo-generate

# Verifikasi
rustc --version
wasm-pack --version

# Membuat project baru
cargo generate --name my-wasm-app https://github.com/rustwasm/wasm-pack-template
cd my-wasm-app

# Struktur project:
# my-wasm-app/
# ├── Cargo.toml        ← Rust dependencies
# ├── src/
# │   └── lib.rs        ← Rust source code
# └── pkg/              ← Output setelah build (auto-generated)
#     ├── my_wasm_app_bg.wasm
#     ├── my_wasm_app.js
#     └── package.json

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

[lib]
crate-type = ["cdylib", "rlib"]  # cdylib untuk Wasm output

[dependencies]
wasm-bindgen = "0.2"             # JS ↔ Rust interop
web-sys = { version = "0.3", features = [
  "Document", "Element", "HtmlElement", "Window",
  "console", "Performance",
]}                                # Browser API bindings
js-sys = "0.3"                    # JavaScript built-in bindings

[dev-dependencies]
wasm-bindgen-test = "0.3"        # Testing framework

[profile.release]
opt-level = "s"                   # Optimize for size
lto = true                        # Link-time optimization

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

// Ekspor fungsi ke JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! Dari Rust via WebAssembly 🦀", name)
}

// Fungsi komputasi berat
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 { return n as u64; }
    let mut a: u64 = 0;
    let mut b: u64 = 1;
    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    b
}

// Fungsi dengan multiple parameters
#[wasm_bindgen]
pub fn process_array(data: &[f64]) -> f64 {
    data.iter().sum::<f64>() / data.len() as f64
}

// Struct yang bisa diakses dari JS
#[wasm_bindgen]
pub struct Calculator {
    value: f64,
}

#[wasm_bindgen]
impl Calculator {
    #[wasm_bindgen(constructor)]
    pub fn new(initial: f64) -> Calculator {
        Calculator { value: initial }
    }

    pub fn add(&mut self, x: f64) {
        self.value += x;
    }

    pub fn multiply(&mut self, x: f64) {
        self.value *= x;
    }

    pub fn get_value(&self) -> f64 {
        self.value
    }
}

// Menggunakan console.log dari Rust
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// Macro untuk println!-like logging
macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*)).to_string())
}

#[wasm_bindgen(start)]
pub fn main() {
    console_log!("Rust WASM module initialized! 🚀");
}

// Import dari package yang di-generate wasm-pack
import init, {
  greet,
  fibonacci,
  Calculator,
  process_array,
} from './pkg/my_wasm_app.js';

async function main() {
  // Inisialisasi Wasm module
  await init();

  // Menggunakan fungsi yang diekspor
  console.log(greet("Budi"));
  // Output: "Hello, Budi! Dari Rust via WebAssembly 🦀"

  // Benchmark: Fibonacci
  const start = performance.now();
  const result = fibonacci(50);
  const elapsed = performance.now() - start;
  console.log(`Fibonacci(50) = ${result}, took ${elapsed.toFixed(2)}ms`);

  // Menggunakan struct
  const calc = new Calculator(100);
  calc.add(50);
  calc.multiply(2);
  console.log(calc.get_value()); // 300

  // Jangan lupa free memory untuk struct yang tidak dipakai
  calc.free();

  // Menggunakan array
  const data = new Float64Array([1.5, 2.3, 3.7, 4.1, 5.9]);
  const avg = process_array(data);
  console.log(`Average: ${avg.toFixed(2)}`); // 3.50
}

main();

# Build untuk web target
wasm-pack build --target web
# Output di folder: pkg/
# - my_wasm_app_bg.wasm     (binary)
# - my_wasm_app.js           (JS glue)
# - my_wasm_app.d.ts         (TypeScript types)
# - package.json

# Build untuk bundler (webpack/vite)
wasm-pack build --target bundler

# Build untuk Node.js
wasm-pack build --target nodejs

# Build untuk no-modules (tanpa bundler)
wasm-pack build --target no-modules

# Build release (optimized)
wasm-pack build --release --target web

# Publish ke npm
wasm-pack login
wasm-pack publish

# Ukuran output:
# debug:   ~500KB - 2MB
# release: ~50KB - 200KB (setelah optimasi)

<!DOCTYPE html>
<html>
<body>
  <h1>WebAssembly Demo</h1>
  <div id="output"></div>

  <script type="module">
    import init, { greet, fibonacci } from './pkg/my_wasm_app.js';

    async function run() {
      await init();

      document.getElementById('output').innerHTML = `
        <p>${greet('World')}</p>
        <p>Fibonacci(40) = ${fibonacci(40)}</p>
      `;
    }

    run();
  </script>
</body>
</html>

use wasm_bindgen::prelude::*;

// Mengembalikan Uint8Array ke JS (zero-copy view ke Wasm memory)
#[wasm_bindgen]
pub fn get_image_buffer() -> Vec<u8> {
    // wasm-bindgen otomatis konversi Vec<u8> ke Uint8Array
    let mut buffer = vec![0u8; 1024];
    // Isi buffer dengan data...
    buffer
}

// Menerima Uint8Array dari JS
#[wasm_bindgen]
pub fn process_image(data: &[u8]) -> Vec<u8> {
    // data adalah view ke Wasm memory, bukan copy
    let mut output = Vec::with_capacity(data.len());
    for &byte in data {
        output.push(byte.wrapping_add(1)); // Contoh transformasi
    }
    output
}

// Menerima dan mengembalikan Float64Array
#[wasm_bindgen]
pub fn transform_matrix(input: &[f64], rows: usize, cols: usize) -> Vec<f64> {
    let mut output = vec![0.0f64; rows * cols];
    for i in 0..rows {
        for j in 0..cols {
            // Transpose matrix
            output[j * rows + i] = input[i * cols + j];
        }
    }
    output
}

// Warning: jangan simpan pointer ke Wasm memory dari Rust
// karena memory bisa di-reallocate!

use wasm_bindgen::prelude::*;

// Deklarasi fungsi JS yang bisa dipanggil dari Rust
#[wasm_bindgen]
extern "C" {
    // Memanggil fungsi JS global
    fn alert(s: &str);

    // Mengakses browser APIs
    type HTMLDocument;
    static document: HTMLDocument;

    #[wasm_bindgen(method)]
    fn getElementById(this: &HTMLDocument, id: &str) -> web_sys::Element;

    // Mengakses namespace JS
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_u32(a: u32);

    // Mengakses property
    #[wasm_bindgen(method, getter)]
    fn innerText(this: &web_sys::Element) -> String;

    // Callback dari Rust ke JS
    type Function;
    #[wasm_bindgen(constructor)]
    fn new(args: &str, body: &str) -> Function;
    #[wasm_bindgen(method)]
    fn call(this: &Function, this_arg: &JsValue, args: &JsValue) -> JsValue;
}

// Menggunakan closures (JS callbacks)
#[wasm_bindgen]
pub fn set_timeout(callback: &js_sys::Function, ms: i32) {
    web_sys::window()
        .unwrap()
        .set_timeout_with_callback_and_timeout_and_arguments_0(
            callback,
            ms,
        )
        .unwrap();
}

// Promise dari Rust
#[wasm_bindgen]
pub async fn fetch_data(url: &str) -> Result<JsValue, JsValue> {
    let window = web_sys::window().unwrap();
    let resp_value = wasm_bindgen_futures::JsFuture::from(
        window.fetch_with_str(url)
    ).await?;

    let resp: web_sys::Response = resp_value.dyn_into()?;
    let json = wasm_bindgen_futures::JsFuture::from(resp.json()?).await?;

    Ok(json)
}