docs/index.html

<head>
  <title>easywasi example</title>
  <style>
    /* this is not realy needed, but make it look nicer */
    body,
    html {
      margin: 0;
      height: 90vh;
    }
    body {
      font-family: sans-serif;
      background: #000;
      color: #fff;
      padding: 20px;
    }
    #stdio {
      height: 100%;
      display: flex;
      gap: 10px;
    }
    textarea {
      flex-grow: 1;
      background: #000;
      color: #fff;
      padding: 10px;
      height: 80%;
    }
    textarea::-webkit-scrollbar {
      width: 1em;
    }

    textarea::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    textarea::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
      cursor: grab;
    }
  </style>
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "@easywasm/wasi": "./easywasm/easywasi.js",
        "@zenfs/core": "https://esm.sh/@zenfs/core",
        "@zenfs/dom": "https://esm.sh/@zenfs/dom",
        "@zenfs/archives": "https://esm.sh/@zenfs/archives"
      }
    }
  </script>

  <!-- this is nasty, but there is a bug in CDN/zenfs -->
  <script type="importmap">
    {
      "imports": {
        "https://esm.sh/@zenfs/core@%5E2.0.0/path?target=es2022": "https://esm.sh/@zenfs/core/dist/path.js"
      }
    }
  </script>

  <p>
    This is an example page for
    <a href="https://github.com/easywasm/wasi">easywasm/wasi</a>.
  </p>

  <div id="stdio">
    <textarea id="out"></textarea>
    <textarea id="err"></textarea>
  </div>

  <script type="module">
    import { WasiPreview1 } from '@easywasm/wasi'
    import { configure, InMemory, fs } from '@zenfs/core'
    import { IndexedDB } from '@zenfs/dom'
    import { Zip } from '@zenfs/archives'

    await configure({
      mounts: {
        '/zip': {
          backend: Zip,
          data: await fetch('example.zip').then((r) => r.arrayBuffer())
        },
        '/tmp': InMemory, // goes away on refresh
        '/home': IndexedDB // lives between page-loads
      }
    })

    // write persistant counter file, if it does not exist
    if (!fs.existsSync('/home/counter')) {
      fs.writeFileSync('/home/counter', '\0')
    }

    const wasi_snapshot_preview1 = new WasiPreview1({
      fs,
      args: ['coolguy', 'a', 'b', 'c'],
      env: {
        COOL: 'yep'
      }
    })

    const { instance } = await WebAssembly.instantiateStreaming(fetch('example.wasm'), {
      wasi_snapshot_preview1
    })

    // Here I implement custom stdio. In yours, you don't have to do this, and it will just log/warn
    function addText(t, buffer) {
      t.value += d.decode(buffer)
      t.selectionStart = t.selectionEnd = t.value.length
      t.blur()
      t.focus()
      t.blur()
    }
    const d = new TextDecoder()
    wasi_snapshot_preview1.stdout = (buffer) => addText(document.getElementById('out'), buffer)
    wasi_snapshot_preview1.stderr = (buffer) => addText(document.getElementById('err'), buffer)

    // this sets up the memory & calls the wasm file's main()
    const exitCode = wasi_snapshot_preview1.start(instance.exports)
    console.log(`Test run: ${exitCode}`)
  </script>
</body>