--- name: wasm-edge-computing-expert description: "Expert guide for WebAssembly (WASM) and Edge Computing. Covers WASI preview 2, Spin/Fermyon, Cloudflare Workers WASM, and high-performance browser computing / Panduan ahli untuk WebAssembly (WASM) dan Edge Computing. Mencakup WASI preview 2, Spin/Fermyon, Cloudflare Workers WASM, dan komputasi performa tinggi di browser." author: "Roedy Rustam" version: "4.4.2" --- # WASM & Edge Computing Expert (2026 WASI 0.2 Component Edition) [English](#english) | [Bahasa Indonesia](#bahasa-indonesia) --- ## English ### Orchestration & Integration - **Upstream Languages & Toolchains**: `rust-programming-expert`, `go-programming-expert`, `bun-runtime-expert` - **Edge Deployment Targets**: `cloudflare-workers-expert`, `cloud-hosting-expert`, `api-gateway-proxy-expert` - **Sandbox & Execution**: `ephemeral-wasm-sandbox-executor`, `local-slm-edge-ai-expert` - **Client Performance**: `performance-web-vitals`, `web-3d-graphics-expert`, `anti-slop` - **Lifecycle & Governance**: `zero-to-prod-orchestrator`, `session-memory-manager` ### Description Specialized engineering guide for writing, compiling, and deploying **WebAssembly (WASM)** components across Edge runtimes and browser worker threads. Covers the **WASI 0.2 (Preview 2) Component Model** (`WIT` interface types, `cargo-component`), sub-millisecond serverless execution (**Cloudflare Workers WASM**, **Fermyon Spin**, **Fastly Compute**), zero-copy linear memory transfers between JavaScript and Rust (`wasm-bindgen`), and multi-threaded `SharedArrayBuffer` compute pools. ### Trigger Conditions - Offloading CPU-intensive workloads (cryptographic hashing, image/PDF rasterization, AST parsing, physics simulation, vector quantization) from JavaScript to Rust/Go WASM. - Deploying sub-millisecond cold-start edge functions using WASI 0.2 components. - Designing capability-based isolated plugin systems using Wasmtime or Extism. - Optimizing browser main-thread responsiveness (INP < 50ms) by running WASM inside dedicated Web Workers. --- ### Toolchain & Target Selection Matrix | Target Environment | Recommended Toolchain | Interface Standard | Typical Cold Start | Binary Budget | | :--- | :--- | :--- | :---: | :---: | | **Browser / Web Worker** | Rust + `wasm-pack` (`wasm32-unknown-unknown`) | `wasm-bindgen` | ~2–5 ms | < 300 KB (Brotli) | | **Cloudflare Workers** | Rust `workers-rs` or imported `.wasm` | JS Host Bindings | < 1 ms | < 10 MB | | **Fermyon Spin / Wasmtime** | Rust `cargo component` (`wasm32-wasip2`) | WASI 0.2 (`wasi:http/proxy`) | < 0.5 ms | < 2 MB | | **Polyglot Host Plugins** | Rust / Go / Zig + **Extism** | Host PDK /Shared Linear Memory | < 1 ms | < 1 MB | --- ### Core Implementation Patterns #### 1. WASI 0.2 Component Model (`WIT` Interface Contract) WASI 0.2 replaces raw pointer ABI hacks with strongly-typed **WebAssembly Interface Types (WIT)**: ```wit // wit/world.wit package vibes:crypto-engine@1.0.0; interface payload-signer { record signature-result { algorithm: string, digest-hex: string, verified: bool, } sign-payload: func(payload: list, secret-key: string) -> result; } world edge-signer { export payload-signer; } ``` #### 2. High-Performance Rust WASM Module with Zero-Copy Slice Access Minimize boundary crossings between JS and WASM. Allocate buffers once or pass `Uint8Array` views directly into linear memory, and optimize binary size with `lto = true` and `opt-level = "z"`: ```toml # Cargo.toml [package] name = "vibes-wasm-kernel" version = "0.1.0" edition = "2024" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" sha2 = "0.10" hex = "0.4" [profile.release] opt-level = "z" lto = true codegen-units = 1 panic = "abort" strip = true ``` ```rust // src/lib.rs use sha2::{Digest, Sha256}; use wasm_bindgen::prelude::*; #[wasm_bindgen] pub struct BatchHashResult { digest_hex: String, bytes_processed: usize, } #[wasm_bindgen] impl BatchHashResult { #[wasm_bindgen(getter)] pub fn digest_hex(&self) -> String { self.digest_hex.clone() } #[wasm_bindgen(getter)] pub fn bytes_processed(&self) -> usize { self.bytes_processed } } #[wasm_bindgen] pub fn compute_sha256_batch(input: &[u8], iterations: u32) -> Result { if input.is_empty() { return Err(JsError::new("Input byte buffer cannot be empty")); } let rounds = iterations.clamp(1, 100_000); let mut current = input.to_vec(); for _ in 0..rounds { let mut hasher = Sha256::new(); hasher.update(¤t); current = hasher.finalize().to_vec(); } Ok(BatchHashResult { digest_hex: hex::encode(current), bytes_processed: input.len() * (rounds as usize), }) } ``` --- #### 3. Non-Blocking Browser Web Worker WASM Bridge (TypeScript) Never execute heavy synchronous WASM compute on the main UI thread; always wrap WASM initialization inside a dedicated Web Worker with `WebAssembly.instantiateStreaming`: ```typescript // src/workers/wasm-compute.worker.ts import initWasm, { compute_sha256_batch } from '../pkg/vibes_wasm_kernel.js'; let initialized = false; self.onmessage = async (event: MessageEvent<{ id: string; payload: Uint8Array; rounds: number }>) => { const { id, payload, rounds } = event.data; try { if (!initialized) { await initWasm(); initialized = true; } const result = compute_sha256_batch(payload, rounds); self.postMessage({ id, ok: true, digestHex: result.digest_hex, bytesProcessed: result.bytes_processed, }); result.free(); } catch (err) { self.postMessage({ id, ok: false, error: err instanceof Error ? err.message : String(err), }); } }; ``` --- ### Verification Checklist - [ ] `Cargo.toml` release profile enables `lto = true`, `panic = "abort"`, and `wasm-opt -Oz` post-processing. - [ ] Heavy WASM functions execute inside Web Workers or Edge isolates, never blocking the browser main UI thread. - [ ] Explicitly call `.free()` on heap-allocated `wasm-bindgen` structs in JavaScript or use `FinalizationRegistry` to prevent linear memory leaks. - [ ] Multi-threaded `SharedArrayBuffer` deployments configure `Cross-Origin-Opener-Policy: same-origin` and `Cross-Origin-Embedder-Policy: require-corp`. ### Sovereign Execution, Token Efficiency & Invariants | Dimension | Sovereign Mandate & Deterministic Contract | | :--- | :--- | | **Frontier Model Cascade** | Medium / High (`GPT-5.6 Sol Medium`, `Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Grok 4.7 High Fast`) | | **Availability Fallback** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Zero unhandled missing-model errors) | | **KV-Cache & Token Protocol** | Pin static instructions & schemas at prompt prefix (`kv-cache-prefix-optimizer`); pass surgical `CONTEXT_MAP.md` slices (<250 tokens/call) during Swarm Fan-Out | | **SaaT CLI & MCP Dispatch** | CLI: `vibes skill exec wasm-edge-computing-expert ` / MCP: `vibes_skill_dispatch`, `vibes_ast_query`, `vibes_compile_cache`, `vibes_optimize_budget`, `vibes_verify_gate` | | **NFR & Anti-Slop Invariants** | P99 API Gateway Latency < 85ms, OpenAPI 3.1 / TypeSpec strict schema parity, RFC 9457 Problem Details error contracts, Idempotency-Key enforcement; 100% complete zero-placeholder output verified via `node scripts/check-anti-slop.js --strict` | --- --- ## Bahasa Indonesia ### Integrasi Orkestrasi - **Bahasa & Toolchain Hulu**: `rust-programming-expert`, `go-programming-expert`, `bun-runtime-expert` - **Target Deployment Edge**: `cloudflare-workers-expert`, `cloud-hosting-expert`, `api-gateway-proxy-expert` - **Sandbox & Eksekusi**: `ephemeral-wasm-sandbox-executor`, `local-slm-edge-ai-expert` - **Performa Klien**: `performance-web-vitals`, `web-3d-graphics-expert`, `anti-slop` - **Siklus Hidup & Tata Kelola**: `zero-to-prod-orchestrator`, `session-memory-manager` ### Deskripsi Panduan rekayasa khusus untuk menulis, mengompilasi, dan men-deploy komponen **WebAssembly (WASM)** di runtime Edge maupun Web Worker browser. Mencakup **WASI 0.2 (Preview 2) Component Model** (`WIT`), eksekusi serverless sub-milidetik (**Cloudflare Workers**, **Fermyon Spin**), pertukaran memori linear tanpa salinan (*zero-copy*) dengan `wasm-bindgen`, serta pemrosesan paralel `SharedArrayBuffer`. ### Panduan Arsitektur Inti 1. **Minimalkan Boundary Crossing**: Kirim buffer biner (`Uint8Array`) sekali ke dalam memori linear WASM, jalankan seluruh komputasi di dalam Rust, dan kembalikan hasil akhirnya. 2. **Optimasi Ukuran Biner**: Aktifkan `opt-level = "z"`, `lto = true`, dan `panic = "abort"` pada `Cargo.toml` agar ukuran `.wasm` di bawah 300 KB setelah kompresi Brotli. 3. **Isolasi Web Worker**: Jangan pernah menjalankan komputasi sinkron WASM yang berat di *main thread* UI browser; jalankan di dalam Web Worker dan panggil `.free()` pada objek struct WASM untuk mencegah kebocoran memori linear. ### Daftar Periksa Verifikasi (Checklist) - [ ] Profil rilis `Cargo.toml` mengaktifkan `lto = true` dan `panic = "abort"`. - [ ] Komputasi WASM di sisi klien berjalan di dalam Web Worker tanpa memblokir INP. - [ ] Objek struct `wasm-bindgen` dibebaskan dengan `.free()` setelah selesai digunakan. - [ ] Penggunaan `SharedArrayBuffer` menyertakan header COOP (`same-origin`) dan COEP (`require-corp`). ### Matriks Eksekusi Berdaulat, Efisiensi Token & Invarian | Dimensi | Mandat Berdaulat & Kontrak Deterministik | | :--- | :--- | | **Kaskade Model Frontier** | Medium / High (`GPT-5.6 Sol Medium`, `Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Grok 4.7 High Fast`) | | **Invarian Fallback Ketersediaan** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Bebas gagal saat model belum tersedia/kuota penuh) | | **Protokol Hemat Token & KV-Cache** | Kunci instruksi & skema statis di prefix awal (`kv-cache-prefix-optimizer`); kirim potongan `CONTEXT_MAP.md` (<250 token/panggilan) saat Fan-Out | | **Eksekusi SaaT CLI & MCP** | CLI: `vibes skill exec wasm-edge-computing-expert ` / MCP: `vibes_skill_dispatch`, `vibes_ast_query`, `vibes_compile_cache`, `vibes_optimize_budget`, `vibes_verify_gate` | | **Invarian NFR & Anti-Slop** | Latensi P99 API < 85ms, paritas skema ketat OpenAPI 3.1 / TypeSpec, kontrak error RFC 9457 Problem Details, penegakan Idempotency-Key; kode 100% tuntas tanpa placeholder diverifikasi melalui `node scripts/check-anti-slop.js --strict` |