web/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <!-- stop google thinking this page is in spanish -->
    <meta name="google" content="notranslate" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ESL Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.20.0/src-min-noconflict/ace.min.js"></script>
    <style>
      /* layout taken from https://github.com/mwillsey/egg-smol */
      body {
        margin: 0;
        display: flex;
        height: 100vh;
        width: 100vw;
      }

      #editor {
        width: 60%;
        resize: horizontal;
        overflow: auto;
        padding: 5px;
      }

      /* someday */
      /* #editor .CodeMirror { */
      #editor #input {
        width: 97%;
        height: 97%;

        /* disable all textarea styling */
        border: none;
        overflow: auto;
        outline: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        resize: none;
      }

      #panel {
        padding: 10px;
        flex: 1 1 0;
        border-left: 2px solid gray;

        display: flex;
        flex-flow: column;

        /* this size causes no resizing of the output div when the output lines get long. */
        /* an alternative is break-all, see below */
        /* max-width: 37%; */
      }

      #toolbar button {
        margin-right: 5px;
      }

      #output {
        font-family: monospace;
        margin-top: 10px;
        flex-grow: 1;
        white-space: pre-wrap;
        overflow-y: scroll;
      }

      .output-error {
        /* color: red; */
        background-color: red;
        color: white;
        border-radius: 3px;
        padding: 0px 5px;
      }

      .output-ok {
        /* color: green; */
        background-color: green;
        color: white;
        border-radius: 3px;
        padding: 0px 5px;
      }

      .output-line {
        overflow-wrap: anywhere;
        /* overflow-wrap: break-word; */
        /* background: white; */
        min-height: 1em;
        line-height: 1;
      }

      /* .output-line:hover {
        background: lightblue;
      } */
    </style>
  </head>

  <body>
    <div id="editor"></div>
    <!-- <div id="editor">
      <textarea id="input" spellcheck="false"></textarea>
    </div> -->
    <div id="panel">
      <div id="toolbar">
        <button id="run-btn" disabled onclick="run()">Run</button>
        <select
          name="examples"
          id="examples"
          onchange="load_selected_example()"
        >
          <option
            value="hello"
            data-text="effect Eff : unit

let test ()
(*@ ex i z ret;
  Eff(i->0, ret);
  req i-> z;
  Norm(i->z+1, ret)
@*)
=
  let i = Sys.opaque_identity (ref 0) in
  let ret = perform Eff in
  i := !i + 1;
  ret"
          >
            Hello world
          </option>
          $MORE
        </select>
        <button id="share-btn" disabled onclick="share()">Share</button>
        <span style="display: inline-block">
          <!-- prevent the checkbox and label from wrapping separately -->
          <input type="checkbox" id="debug" style="vertical-align: middle" />
          <label for="debug" style="vertical-align: middle">Debug</label>
        </span>
      </div>
      <div id="output"></div>
    </div>
    <script type="text/javascript">
      const redirect_output = true;
      if (redirect_output) {
        const field = document.querySelector("#output");
        window.console = new Proxy(console, {
          get(_target, prop, _receiver) {
            let args = [...arguments];
            // old_console.warn(args);
            if (prop === "log") {
              return (...args) => {
                // field.value += args.join(' ') + '\n';
                field.innerHTML +=
                  '<div class="output-line">' +
                  args
                    .join(" ")
                    .replace(/\n/g, '</div><div class="output-line">') +
                  "</div>";
                // field.textContent += args.join(" ");
                // old_console.log(...args);
              };
            } else {
              return Reflect.get(...arguments);
            }
          },
        });
      }
    </script>
    <script src="coi-serviceworker.min.js"></script>
    <!-- z3-built has to be deferred -->
    <script type="text/javascript" src="z3-built.js"></script>
    <script type="text/javascript" src="ace_ocaml.js"></script>
    <script>
      // this is substituted at build time and is used in page.js
      function postExampleLoad() {
        console.log("$INITIAL_OUTPUT");
        console.log("loading z3...");
      }
    </script>
    <script type="text/javascript" src="page.js"></script>
    <!-- hipjs logs to the console (page) -->
    <script type="text/javascript" src="hipjs.bc.js"></script>
    <!-- bundle.js/main.js requires ocaml_ready (hipjs) and enable_buttons (page) to be defined -->
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>