index.html — vite Source File

Source Code

<h1>Web Assembly</h1>

<div class="inline-wasm">
  <h3>When wasm is inline, result should be 42</h3>
  <button class="run">Click to run</button>
  <span class="result"></span>
</div>

<div class="output-wasm">
  <h3>When wasm is output, result should be 24</h3>
  <button class="run">Click to run</button>
  <span class="result"></span>
</div>

<div class="init-returns-instance">
  <h3>init function returns WebAssembly.Instance</h3>
  <button class="run">Click to run</button>
  <span class="result"></span>
</div>

<div>
  <h3>Importing as URL</h3>
  <span class="url"></span>
</div>

<div class="worker-wasm">
  <h3>worker wasm</h3>
  <span class="result"></span>
</div>

<script type="module">
  import light from './light.wasm?init'
  import heavy from './heavy.wasm?init'
  import myWorker from './worker?worker'

  const w = new myWorker()
  w.addEventListener('message', (ev) => {
    text('.worker-wasm .result', ev.data.result)
  })

  async function testWasm(init, resultElement) {
    const { exported_func } = await init({
      imports: {
        imported_func: (res) => (resultElement.textContent = res),
      },
    }).then((i) => i.exports)
    exported_func()
  }

  function text(el, text) {
    document.querySelector(el).textContent = text
  }

  document
    .querySelector('.inline-wasm .run')
    .addEventListener('click', async () =>
      testWasm(light, document.querySelector('.inline-wasm .result')),
    )

  document
    .querySelector('.output-wasm .run')
    .addEventListener('click', async () =>
      testWasm(heavy, document.querySelector('.output-wasm .result')),
    )

  document
    .querySelector('.init-returns-instance .run')
    .addEventListener('click', async () => {
      const res = await light({
        imports: {
          imported_func: (res) => (resultElement.textContent = res),
        },
      })
      text(
        '.init-returns-instance .result',
        res instanceof WebAssembly.Instance,
      )
    })

  import lightUrl from './light.wasm?url'
  text('.url', lightUrl)
</script>