WASM Integration Guide

Project Links: GitHub · WASM Source · Playground

Overview

MaìLang supports compilation to WebAssembly (WASM), enabling execution in browsers and Node.js. This guide covers building, using, and optimizing the WASM version.

Building WASM

Prerequisites

# Install Rust WASM target
rustup target add wasm32-unknown-unknown

# Install wasm-pack
cargo install wasm-pack

Build Commands

# Build for browser
wasm-pack build --target web --release -p mailang-wasm

# Build for Node.js
wasm-pack build --target nodejs --release -p mailang-wasm

# Build for bundlers (Vite/Webpack)
wasm-pack build --target bundler --release -p mailang-wasm

Output is in crates/mailang-wasm/pkg/.

Browser Usage

Basic Usage

<!DOCTYPE html>
<html>
<body>
    <script type="module">
        import init, { WasmInterpreter } from './pkg/mailang_wasm.js';

        async function main() {
            await init();
            const interp = new WasmInterpreter();
            
            const result = interp.eval('1 + 2');
            console.log(result);  // "3"
            
            interp.free();
        }
        main();
    </script>
</body>
</html>

Structured Results

const jsonStr = interp.eval_json('1 + 2');
const result = JSON.parse(jsonStr);

if (result.ok) {
    console.log('Output:', result.output);
} else {
    console.error('Error:', result.error);
}

Node.js Usage

const { WasmInterpreter } = require('./pkg/mailang_wasm.js');

const interp = new WasmInterpreter();
console.log(interp.eval('println("Hello!")'));
interp.free();

Vue 3 Integration

<script setup>
import { ref, onMounted } from 'vue';
import init, { WasmInterpreter } from './pkg/mailang_wasm.js';

const output = ref('');
let interp = null;

onMounted(async () => {
    await init();
    interp = new WasmInterpreter();
});

function runCode(code) {
    output.value = interp.eval(code);
}
</script>

API Reference

WasmInterpreter

Method	Description
new WasmInterpreter()	Create interpreter
eval(code)	Execute code, return result string
eval_json(code)	Execute code, return JSON result
reset()	Reset interpreter state
free()	Free WASM memory
WasmInterpreter.version()	Get version string
WasmInterpreter.features()	Get features list

Playground

MaìLang includes a Vue + WASM playground:

cd playground
npm install
npm run build:wasm
npm run dev

Features:

• CodeMirror editor with syntax highlighting
• Real-time execution
• Built-in examples
• Error display

Size Optimization

[profile.release]
opt-level = "z"
lto = "fat"
codegen-units = 1
strip = "symbols"

Expected sizes:

• Full: ~2MB
• Minimal: ~800KB

Limitations

• No filesystem access
• No network requests
• No input() function
• Memory limited (default 256MB WASM limit)

Next Steps

• IoT Deployment - Embedded devices
• FFI - Other language bindings