javascript/example.html

<!DOCTYPE html>
<html>
  <head>
    <title>@ruby/prism</title>
  </head>
  <body style="margin: 0;">
    <div style="display: grid; grid-template-columns: 1fr 1fr;">
      <div>
        <textarea id="input" style="box-sizing: border-box; width: 100%; height: 100vh; resize: none; vertical-align: top;"></textarea>
      </div>
      <div style="height: 100vh; overflow-y: scroll;">
        <code><pre id="output" style="margin: 0; padding: 1em;"></pre></code>  
      </div>
    </div>
    <script type="module">
import { WASI } from "https://unpkg.com/@bjorn3/browser_wasi_shim@latest/dist/index.js";
import { parsePrism } from "https://unpkg.com/@ruby/prism@latest/src/parsePrism.js";

const wasm = await WebAssembly.compileStreaming(fetch("https://unpkg.com/@ruby/prism@latest/src/prism.wasm"));
const wasi = new WASI([], [], []);

const instance = await WebAssembly.instantiate(wasm, { wasi_snapshot_preview1: wasi.wasiImport });
wasi.initialize(instance);

let timeout = null;
const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("input", function (event) {
  if (timeout) clearTimeout(timeout);

  timeout = setTimeout(function () {
    const result = parsePrism(instance.exports, event.target.value);
    output.textContent = JSON.stringify(result, null, 2);
  }, 250);
});
    </script>
  </body>
</html>