lumbda/www/playground/index.html
russell@unturf.com 1b7de2c9c6
wasm/playground: cancel button, asm state-leak fix, restyle to match homepage
User-visible changes
  - Cancel button — terminates the running worker. Pyodide's slow mandelbrot
    no longer freezes the UI; click cancel and the elapsed counter freezes
    at "(cancelled @ NNNN ms)".
  - Live ms counter ticks per animation frame while a tier is busy, so the
    Pyodide tier's ~5-15 s wait is visible instead of looking hung.
  - Restyled to match lumbda.com: chunkfive wordmark, --green: #227842
    (light) / #5ec07a (dark), lumbda-logo-green.png, lowercase "lumbda"
    everywhere. Pulls fonts/chunkfive locally so the playground stays
    self-contained.

Architecture
  - All tier evaluations now run inside a Web Worker (wasm/app/worker.mjs)
    so the main thread stays responsive. Cancel = worker.terminate(); next
    eval respawns a fresh worker.
  - Loaders use new URL("./...", import.meta.url) so paths resolve against
    the loader file's own location — works identically in window and
    worker contexts, no baseURL argument needed.
  - C tier Emscripten build flipped to EXPORT_ES6=1; loader uses dynamic
    `import()` of the factory module. Integration test updated accordingly.
  - Python loader uses `import("pyodide.mjs")` (ES module) instead of
    document.createElement, which doesn't exist in workers.

Bug fixes
  - Asm tier state leak: running the same demo twice on a cached WASM
    instance produced corrupted output (every other cell on row 2+ rendered
    as " " instead of the expected shade char). Root cause: top-level eval
    passed `global_env` as the env, so closures captured stale globals;
    fixed by passing NIL — env_lookup falls back to the CURRENT global_env
    via its existing two-pass walk. Multi-run regression added to the
    functional test suite.
  - fib-ack demo: (ack 3 4) was too heavy for Pyodide (minutes). Cut to
    (ack 3 3) + (fib 20) max so every tier finishes in seconds.

Test discipline
  - Root `make test-all` now includes `wasm-test`. Adding a language
    feature without exercising it on all six implementations is no longer
    possible by accident.
  - Functional suite: 11 assertions (was 10) — adds asm multi-run stability.
  - Integration + unit: still 20 + 8.
2026-06-14 12:13:20 -04:00

84 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lumbda playground — lisp in your browser, three tiers</title>
<link rel="stylesheet" href="style.css">
<script type="importmap">
{
"imports": {
"@codemirror/state": "https://esm.sh/*@codemirror/state@6.4.1",
"@codemirror/view": "https://esm.sh/*@codemirror/view@6.34.1",
"@codemirror/commands": "https://esm.sh/*@codemirror/commands@6.6.2",
"@codemirror/language": "https://esm.sh/*@codemirror/language@6.10.3",
"@codemirror/legacy-modes/mode/scheme": "https://esm.sh/*@codemirror/legacy-modes@6.4.1/mode/scheme",
"@codemirror/theme-one-dark": "https://esm.sh/*@codemirror/theme-one-dark@6.1.2",
"@lezer/highlight": "https://esm.sh/*@lezer/highlight@1.2.1",
"@lezer/common": "https://esm.sh/*@lezer/common@1.2.3",
"style-mod": "https://esm.sh/*style-mod@4.1.2",
"crelt": "https://esm.sh/*crelt@1.0.6",
"w3c-keyname": "https://esm.sh/*w3c-keyname@2.2.8"
}
}
</script>
</head>
<body>
<header>
<a class="brand" href="../" aria-label="lumbda home">
<img class="logo" src="lumbda-logo-green.png" alt="" aria-hidden="true">
<h1 aria-label="lumbda.">lumbda<span class="period" aria-hidden="true">.</span></h1>
</a>
<p class="tagline">lisp/scheme in your browser, three tiers in parallel</p>
<p class="lede">
same lisp source. three implementations compiled to webassembly:
<strong>python</strong> (cpython via pyodide hosting <code>lumbda.py</code>),
<strong>c</strong> (emscripten build of the tree-walker + bytecode vm),
<strong>asm</strong> (hand-written webassembly text format &mdash; parallel to <code>asm/lumbda.s</code>).
</p>
</header>
<section class="controls">
<fieldset class="program">
<legend>demo program</legend>
<label><input type="radio" name="program" value="mandelbrot" checked> mandelbrot</label>
<label><input type="radio" name="program" value="fib-ack"> fib + ackermann</label>
<label><input type="radio" name="program" value="sieve"> sieve of eratosthenes</label>
<label><input type="radio" name="program" value="self-interp"> lisp-in-lisp meta-eval</label>
</fieldset>
<fieldset class="tier">
<legend>tier</legend>
<label><input type="radio" name="tier" value="python"> python (pyodide)</label>
<label><input type="radio" name="tier" value="c" checked> c (emcc)</label>
<label><input type="radio" name="tier" value="asm"> asm (wat)</label>
<label><input type="radio" name="tier" value="all"> all three</label>
</fieldset>
<button id="run" class="primary">run</button>
<button id="cancel" class="secondary">cancel</button>
<span id="status" class="status"></span>
</section>
<section class="panes">
<div class="pane code-pane">
<h2>code</h2>
<div id="editor"></div>
</div>
<div class="pane output-pane">
<h2>output</h2>
<div id="output"></div>
</div>
</section>
<footer>
<p>
<strong>asm tier note:</strong> the wat implementation ships a minimal lisp
subset (special forms, arithmetic, list ops, recursion) &mdash; enough for the
four demos above. symbol lookup is linear; would be moad-0001 at scale,
documented in <code>asm/lumbda.wat</code>.
see <a href="../">lumbda.</a>
</p>
</footer>
<script type="module" src="app.js"></script>
</body>
</html>