examples: update with-wasm (#2060)

examples/with-wasm/app.vue

@@ -0,0 +1,19 @@
+
+<script setup>
+const a = ref(100)
+const b = ref(250)
+
+const { data } = await useAsyncData('sum',
+  () => $fetch('/api/sum', { params: { a: a.value, b: b.value } })
+)
+</script>
+
+<template>
+  <div>
+    <input v-model="a" type="number" readonly>
+    +
+    <input v-model="b" type="number" readonly>
+    =
+    <input v-model="data.sum" type="number" readonly>
+  </div>
+</template>

examples/with-wasm/nuxt.config.ts

@@ -0,0 +1,9 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  nitro: {
+    experiments: {
+      wasm: true
+    }
+  }
+})

examples/with-wasm/server/api/hello.ts

@@ -1,9 +0,0 @@
-import sample from './sample.wasm'
-
-export default async () => {
-  const { instance } = await sample({})
-
-  return {
-    result: instance.exports.main()
-  }
-}

examples/with-wasm/server/api/sum.ts

@@ -0,0 +1,19 @@
+import { useQuery, lazyHandle } from 'h3'
+
+export default lazyHandle(async () => {
+  const { exports: { sum } } = await loadWasmInstance(
+    // @ts-ignore
+    () => import('~/server/wasm/sum.wasm')
+  )
+
+  return (req) => {
+    const { a = 0, b = 0 } = useQuery(req)
+    return { sum: sum(a, b) }
+  }
+})
+
+async function loadWasmInstance (importFn, imports = {}) {
+  const init = await importFn().then(m => m.default || m)
+  const { instance } = await init(imports)
+  return instance
+}

examples/with-wasm/server/wasm/sum.wat

@@ -0,0 +1,7 @@
+;; https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format
+;; https://webassembly.github.io/wabt/demo/wat2wasm/
+(module
+  (func (export "sum") (param i32 i32) (result i32)
+    local.get 0
+    local.get 1
+    i32.add))