mirror of
https://github.com/vitejs/vite.git
synced 2024-11-22 07:09:05 +00:00
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<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>
|