JavaScript ↔ Wasm Bridge

WebAssembly dan JavaScript berkomunikasi melalui mekanisme imports dan exports. Memahami bridge ini krusial karena ini adalah "gerbang" antara dua dunia.

Exports: Wasm → JavaScript

;; WAT: export fungsi dan memory
(module
  (memory (export "memory") 1)  ;; 1 page = 64KB

  (func $multiply (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.mul
  )
  (export "multiply" (func $multiply))
)

// JavaScript memanggil fungsi Wasm
const { instance } = await WebAssembly.instantiateStreaming(
  fetch("module.wasm")
);

const result = instance.exports.multiply(6, 7);
console.log(result); // 42

// Akses memory Wasm dari JS
const memory = new Uint8Array(instance.exports.memory.buffer);
console.log(memory.length); // 65536 (64KB)

Imports: JavaScript → Wasm

;; WAT: import fungsi dari JavaScript
(module
  (import "env" "log" (func $log (param i32)))
  (import "env" "getTime" (func $getTime (result f64)))

  (func $benchmark (export "benchmark")
    ;; Panggil JS function dari Wasm
    call $getTime
    drop
    i32.const 42
    call $log
  )
)

// Sediakan import object saat instantiate
const importObject = {
  env: {
    log: (value) => console.log("Dari Wasm:", value),
    getTime: () => performance.now(),
  },
};

const { instance } = await WebAssembly.instantiateStreaming(
  fetch("module.wasm"),
  importObject
);

instance.exports.benchmark();

Passing Strings

Wasm hanya mengerti angka (i32, i64, f32, f64). Untuk string, kamu harus encode ke memory buffer:

// Tulis string ke Wasm memory
function writeString(instance, str) {
  const memory = new Uint8Array(instance.exports.memory.buffer);
  const encoder = new TextEncoder();
  const encoded = encoder.encode(str);
  // Tulis ke offset tertentu di linear memory
  memory.set(encoded, 0);
  return { ptr: 0, len: encoded.length };
}

// Baca string dari Wasm memory
function readString(instance, ptr, len) {
  const memory = new Uint8Array(instance.exports.memory.buffer);
  const decoder = new TextDecoder();
  return decoder.decode(memory.slice(ptr, ptr + len));
}

Tips

• Minimize bridge calls — Setiap crossing JS↔Wasm ada overhead. Batch operations lebih efisien.
• Use TypedArrays — Untuk transfer data besar, tulis langsung ke shared memory
• wasm-bindgen — Untuk Rust, library ini otomatis generate bridge code