examples: update with-wasm (nuxt#2060)

TheColaber · Nov 21, 2021 · 07c7a20 · 07c7a20
1 parent 583679f
commit 07c7a20
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 9 deletions.
diff --git a/examples/with-wasm/app.vue b/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>
diff --git a/examples/with-wasm/nuxt.config.ts b/examples/with-wasm/nuxt.config.ts
@@ -0,0 +1,9 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  nitro: {
+    experiments: {
+      wasm: true
+    }
+  }
+})
diff --git a/examples/with-wasm/server/api/hello.ts b/examples/with-wasm/server/api/hello.ts
diff --git a/examples/with-wasm/server/api/sample.wasm b/examples/with-wasm/server/api/sample.wasm
diff --git a/examples/with-wasm/server/api/sum.ts b/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
+}
diff --git a/examples/with-wasm/server/wasm/sum.wasm b/examples/with-wasm/server/wasm/sum.wasm
diff --git a/examples/with-wasm/server/wasm/sum.wat b/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))