index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>rontolisp WASM in the browser</title>
    <style>
      :root {
        color-scheme: light dark;
        --fg: #1a1a1a;
        --bg: #fafafa;
        --accent: #2d6cdf;
        --term-bg: #1e1e2e;
        --term-fg: #cdd6f4;
      }
      body {
        font-family: system-ui, -apple-system, sans-serif;
        max-width: 760px;
        margin: 2rem auto;
        padding: 0 1rem;
        color: var(--fg);
        background: var(--bg);
        line-height: 1.5;
      }
      h1 {
        font-size: 1.5rem;
      }
      h2 {
        font-size: 1.15rem;
        margin-top: 2rem;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.25rem;
      }
      p.lead {
        color: #555;
      }
      button {
        background: var(--accent);
        color: #fff;
        border: 0;
        border-radius: 6px;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        cursor: pointer;
      }
      button:disabled {
        opacity: 0.5;
        cursor: default;
      }
      textarea {
        width: 100%;
        box-sizing: border-box;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.9rem;
        padding: 0.5rem;
        border: 1px solid #bbb;
        border-radius: 6px;
        resize: vertical;
      }
      pre.term {
        background: var(--term-bg);
        color: var(--term-fg);
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
        white-space: pre-wrap;
        min-height: 2rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.9rem;
      }
      .row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
      }
      code {
        background: #00000010;
        padding: 0.1rem 0.3rem;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <h1>Running rontolisp WASM in plain HTML + JavaScript</h1>
    <p class="lead">
      The two programs below were written in Lisp and compiled <em>ahead of
      time</em> to WebAssembly (WASI Preview 1) with rontolisp. This page
      provides a tiny WASI shim in JavaScript, instantiates each
      <code>.wasm</code> module, runs its <code>_start</code>, and shows whatever
      it printed to stdout. No server, no framework. All the Lisp sources and the
      shim live in
      <a href="https://github.com/making/rontolisp/tree/develop/examples/browser/wasm-browser"
        >examples/browser/wasm-browser</a
      >.
    </p>
    <p class="lead">
      Want to write Lisp and compile it to WASM <em>in the browser</em>, then run
      the result here? See the
      <a href="../">playground</a> and its
      <a href="../compile-run.html">compile&nbsp;&amp;&nbsp;run</a> page (these
      links work on the published site).
    </p>

    <h2>1. Run a self-contained program</h2>
    <p>
      <code>hello.wasm</code> computes Fibonacci numbers and some exact rational
      arithmetic, printing the result. Click to run it in your browser.
      Source:
      <a href="https://github.com/making/rontolisp/blob/develop/examples/browser/wasm-browser/hello.lisp"
        >hello.lisp</a
      >.
    </p>
    <div class="row">
      <button id="run-hello">Run hello.wasm</button>
    </div>
    <pre class="term" id="out-hello">(output appears here)</pre>

    <h2>2. Pass input from the page into the program</h2>
    <p>
      <code>greet.wasm</code> reads one line from <em>stdin</em>. The shim feeds
      the text below as stdin, so this shows how to send data from the browser
      into a WASM program. Source:
      <a href="https://github.com/making/rontolisp/blob/develop/examples/browser/wasm-browser/greet.lisp"
        >greet.lisp</a
      >.
    </p>
    <div class="row" style="flex-direction: column; align-items: stretch">
      <textarea id="stdin" rows="1" placeholder="type a name..."></textarea>
      <div class="row">
        <button id="run-greet">Run greet.wasm</button>
      </div>
    </div>
    <pre class="term" id="out-greet">(output appears here)</pre>

    <h2>3. Real randomness from the host</h2>
    <p>
      <code>dice.wasm</code> rolls five dice with <code>random</code>. On WASI
      Preview 1 <code>random</code> draws real entropy from the host's
      <code>random_get</code> (the shim backs it with
      <code>crypto.getRandomValues</code>), so click <em>Roll again</em> and the
      result changes every time -- it is not a fixed pseudo-random sequence.
      Source:
      <a href="https://github.com/making/rontolisp/blob/develop/examples/browser/wasm-browser/dice.lisp"
        >dice.lisp</a
      >.
    </p>
    <div class="row">
      <button id="run-dice">Roll dice.wasm</button>
    </div>
    <pre class="term" id="out-dice">(output appears here)</pre>

    <script type="module">
      import { runWasm } from "./wasi-shim.js";

      async function run(buttonId, outId, wasmUrl, opts) {
        const btn = document.getElementById(buttonId);
        const out = document.getElementById(outId);
        btn.disabled = true;
        out.textContent = "running...";
        try {
          const { stdout, stderr } = await runWasm(wasmUrl, opts);
          out.textContent = stdout + (stderr ? "\n[stderr]\n" + stderr : "");
        } catch (e) {
          out.textContent = "Error: " + e.message + "\n\n" +
            "If you see a WebAssembly compile/link error, your browser may " +
            "lack WebAssembly GC support (needs Chrome 119+, Firefox 120+, " +
            "or Safari 18.2+). Also make sure you are serving this page over " +
            "http:// (not opening the file directly).";
        } finally {
          btn.disabled = false;
        }
      }

      document.getElementById("run-hello").addEventListener("click", () =>
        run("run-hello", "out-hello", "./hello.wasm"),
      );

      document.getElementById("run-greet").addEventListener("click", () => {
        const stdin = document.getElementById("stdin").value + "\n";
        run("run-greet", "out-greet", "./greet.wasm", { stdin });
      });

      const diceBtn = document.getElementById("run-dice");
      diceBtn.addEventListener("click", async () => {
        await run("run-dice", "out-dice", "./dice.wasm");
        diceBtn.textContent = "Roll again";
      });
    </script>
  </body>
</html>