MLF Website#

Static website for MLF (Matt's Lexicon Format) with interactive playground powered by WebAssembly.

Features#

• 📄 Landing page with project overview
• 📚 Documentation (to be added)
• 🎮 Interactive playground for editing and testing MLF
• 🚀 Client-side WASM for instant validation and generation
• 🎨 No external dependencies - pure HTML/CSS/JS

Building the WASM Module#

Prerequisites#

# Install wasm-pack
cargo install wasm-pack

Build#

# From the project root
wasm-pack build mlf-wasm --target web --out-dir ../website/js/pkg

# Or with optimization
wasm-pack build mlf-wasm --target web --out-dir ../website/js/pkg --release

This will generate:

• website/js/pkg/mlf_wasm.js - JavaScript bindings
• website/js/pkg/mlf_wasm_bg.wasm - WASM binary
• website/js/pkg/mlf_wasm.d.ts - TypeScript definitions

Update the JavaScript#

After building, update js/app.js to import the WASM module:

// Replace the init() function with:
async function init() {
    try {
        const wasmModule = await import('./pkg/mlf_wasm.js');
        await wasmModule.default();
        wasm = wasmModule;

        setupEventListeners();
        // Initial generation
        handleCheck();
    } catch (error) {
        console.error('Failed to load WASM module:', error);
        showError('Failed to load MLF WASM module.');
    }
}

Development#

Local Server#

You need a local server to serve the WASM files (due to CORS restrictions):

# Python 3
cd website
python3 -m http.server 8000

# Or use any static file server
npx serve website

Then open http://localhost:8000

Deployment#

The website is completely static and can be deployed to:

• GitHub Pages: Push to gh-pages branch
• Netlify: Drag and drop the website/ folder
• Vercel: Connect to repository
• Any static host: Upload the files

GitHub Pages Example#

# Build WASM
wasm-pack build mlf-wasm --target web --out-dir ../website/js/pkg --release

# Deploy (from website directory)
git subtree push --prefix website origin gh-pages

Project Structure#

website/
├── index.html          # Main landing page
├── css/
│   └── style.css       # Styles
├── js/
│   ├── app.js          # Main application logic
│   └── pkg/            # WASM module (generated)
└── docs/               # Documentation pages (to be added)

WASM API#

The WASM module exposes these functions:

parse(source: string) -> ParseResult#

Parses MLF source and returns whether it's valid.

check(source: string) -> CheckResult#

Checks MLF source for syntax and validation errors.

generate_lexicon(source: string, namespace: string) -> GenerateResult#

Generates a JSON lexicon from MLF source.

validate_record(lexicon_source: string, record_json: string) -> ValidateResult#

Validates a JSON record against an MLF lexicon schema.

Browser Compatibility#

The WASM module requires:

• WebAssembly support (all modern browsers)
• ES6 modules support
• Async/await support

Works in:

• Chrome/Edge 61+
• Firefox 60+
• Safari 11+

Size Optimization#

To reduce WASM bundle size:

# Build with optimizations
wasm-pack build mlf-wasm --target web --release

# Further optimize with wasm-opt (from binaryen)
wasm-opt -Oz website/js/pkg/mlf_wasm_bg.wasm -o website/js/pkg/mlf_wasm_bg.wasm

Expected sizes:

• Unoptimized: ~200KB
• Release: ~100KB
• With wasm-opt: ~80KB
• Gzipped: ~30KB