Wasm Hello World dengan WAT

WAT (WebAssembly Text Format) adalah representasi teks yang human-readable dari Wasm binary. Memahami WAT membantu kamu memahami apa yang terjadi "di balik layar" saat Wasm dieksekusi.

WAT Text Format

;; add.wat — modul Wasm pertama kamu
(module
  ;; Fungsi yang menjumlahkan dua angka
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )

  ;; Export agar bisa dipanggil dari JavaScript
  (export "add" (func $add))
)

Compile WAT ke Wasm

# Install wabt (WebAssembly Binary Toolkit)
# macOS
brew install wabt

# Ubuntu
sudo apt install wabt

# Compile .wat menjadi .wasm
wat2wasm add.wat -o add.wasm

# Inspect isi .wasm (disassemble kembali)
wasm2wat add.wasm

Load dari JavaScript

// Cara 1: WebAssembly.instantiateStreaming (recommended)
const response = await fetch("add.wasm");
const { instance } = await WebAssembly.instantiateStreaming(response);

console.log(instance.exports.add(40, 2)); // 42

// Cara 2: Manual instantiate
const response = await fetch("add.wasm");
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);

console.log(instance.exports.add(10, 20)); // 30

Tipe Data di WAT

• i32 — 32-bit integer (setara int di C)
• i64 — 64-bit integer (setara long di C)
• f32 — 32-bit float (setara float di C)
• f64 — 64-bit float (setara double di C)

Stack Machine

Wasm menggunakan model stack machine. Setiap instruksi push atau pop value dari stack:

;; Menghitung (2 + 3) * 4
(module
  (func $calc (result i32)
    i32.const 2    ;; stack: [2]
    i32.const 3    ;; stack: [2, 3]
    i32.add        ;; stack: [5]
    i32.const 4    ;; stack: [5, 4]
    i32.mul        ;; stack: [20]
  )
  (export "calc" (func $calc))
)