matzo-web/js/index.js

import init, {matzo_run} from '../pkg/matzo_web.js';
import {EditorView, basicSetup} from "codemirror";
import {StreamLanguage} from "@codemirror/language";
import {matzoLang} from "./language.js";

window.onload = () => {
  const run = document.getElementById('run');
  const src = document.getElementById('src');
  const output = document.getElementById('output');
  const examples = document.getElementById('examples');
  const seed = document.getElementById('seed');

  let timer = null;

  init()
    .then(() => {

      const updateCode = () => {
        const code = editor.state.doc.toString();
        const data = JSON.stringify({
          'source': code,
          'seed': Number(seed.value),
        });
        // update the URL hash
        location.hash = '#' + encodeURIComponent(data);
        // run the code
        updateOutput(code);

        clearTimeout(timer);
        timer = null;
      };

      const updateOutput = (code) => {
        let result = matzo_run(code, BigInt(seed.value));
        output.innerHTML = result;
      };

      const editListener = EditorView.updateListener.of(_ => {
        if (timer !== null) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(updateCode, 500);
      });

      console.log(`Lang: ${matzoLang}`);

      const editor = new EditorView({
        extensions: [basicSetup, editListener, StreamLanguage.define(matzoLang)],
        parent: src,
      });

      if (location.hash) {
        const encoded = location.hash.substring(1);

        try {
          const data = JSON.parse(decodeURIComponent(encoded));
          editor.dispatch({
            changes: {from: 0, insert: data.source}
          });
          seed.value = Number(data.seed);
          console.log(`Setting seed value to ${seed.value}`);
        } catch (exn) {
          editor.dispatch({
            changes: {from: 0, insert: sources['simple']}
          });
          seed.value = 12345;
        }
      } else {
        editor.dispatch({
          changes: {from: 0, insert: sources['simple']}
        });
      }

      examples.onchange = () => {
        const stuff = sources[examples.value]
        editor.dispatch({changes: {from: 0, to: editor.state.doc.length, insert: stuff}});
      };

      seed.onchange = () => {
        updateCode();
      }

      run.onclick = () => {
        seed.value = Math.floor(Math.random() * 0xffffffff);
        updateCode();
      }
    });
};