WebAssembly Integration Guide

# WebAssembly Integration Guide for Google Antigravity

WebAssembly (WASM) enables near-native performance in web applications. This guide covers integrating WebAssembly modules with your Google Antigravity projects for compute-intensive tasks.

## Rust WASM Module Setup

```rust
// src/lib.rs - Rust WASM module
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    pixels: Vec<u8>,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> ImageProcessor {
        ImageProcessor {
            width,
            height,
            pixels: vec![0; (width * height * 4) as usize],
        }
    }

    pub fn apply_grayscale(&mut self, data: &[u8]) -> Vec<u8> {
        let mut result = data.to_vec();
        for i in (0..result.len()).step_by(4) {
            let gray = (0.299 * result[i] as f32
                + 0.587 * result[i + 1] as f32
                + 0.114 * result[i + 2] as f32) as u8;
            result[i] = gray;
            result[i + 1] = gray;
            result[i + 2] = gray;
        }
        result
    }

    pub fn apply_blur(&mut self, data: &[u8], radius: u32) -> Vec<u8> {
        let mut result = data.to_vec();
        let kernel_size = (radius * 2 + 1) as usize;
        for y in radius..(self.height - radius) {
            for x in radius..(self.width - radius) {
                let idx = ((y * self.width + x) * 4) as usize;
                let mut r_sum = 0u32;
                let mut g_sum = 0u32;
                let mut b_sum = 0u32;
                let mut count = 0u32;
                
                for ky in 0..kernel_size {
                    for kx in 0..kernel_size {
                        let px = (x as usize + kx - radius as usize);
                        let py = (y as usize + ky - radius as usize);
                        let pidx = (py * self.width as usize + px) * 4;
                        r_sum += data[pidx] as u32;
                        g_sum += data[pidx + 1] as u32;
                        b_sum += data[pidx + 2] as u32;
                        count += 1;
                    }
                }
                result[idx] = (r_sum / count) as u8;
                result[idx + 1] = (g_sum / count) as u8;
                result[idx + 2] = (b_sum / count) as u8;
            }
        }
        result
    }
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}
```

## TypeScript Integration

```typescript
// lib/wasm-loader.ts
let wasmModule: typeof import("../pkg/image_processor") | null = null;

export async function loadWasm() {
    if (wasmModule) return wasmModule;
    wasmModule = await import("../pkg/image_processor");
    return wasmModule;
}

export async function processImage(
    imageData: ImageData,
    operation: "grayscale" | "blur",
    options?: { radius?: number }
): Promise<ImageData> {
    const wasm = await loadWasm();
    const processor = new wasm.ImageProcessor(imageData.width, imageData.height);
    let result: Uint8Array;
    
    switch (operation) {
        case "grayscale":
            result = processor.apply_grayscale(imageData.data);
            break;
        case "blur":
            result = processor.apply_blur(imageData.data, options?.radius ?? 3);
            break;
    }
    
    return new ImageData(new Uint8ClampedArray(result), imageData.width, imageData.height);
}
```

## React Hook for WASM

```typescript
// hooks/useWasm.ts
import { useState, useEffect } from "react";

export function useWasm<T>(loader: () => Promise<T>) {
    const [module, setModule] = useState<T | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        let mounted = true;
        loader()
            .then((mod) => { if (mounted) { setModule(mod); setLoading(false); } })
            .catch((err) => { if (mounted) { setError(err); setLoading(false); } });
        return () => { mounted = false; };
    }, [loader]);

    return { module, loading, error };
}
```

## Next.js Configuration

```javascript
// next.config.js
module.exports = {
    webpack: (config) => {
        config.experiments = { ...config.experiments, asyncWebAssembly: true, layers: true };
        config.module.rules.push({ test: /\.wasm$/, type: "webassembly/async" });
        return config;
    },
};
```

## Best Practices

1. **Lazy Loading**: Load WASM modules only when needed to reduce initial bundle size
2. **Web Workers**: Run compute-intensive WASM operations in Web Workers
3. **Memory Management**: Explicitly free WASM memory when processing large data
4. **Fallbacks**: Provide JavaScript fallbacks for browsers without WASM support
5. **Streaming Compilation**: Use instantiateStreaming for faster module loading