vite-plugin-wat

A Vite plugin for WebAssembly Text Format.

Install

npm install -D vite-plugin-wat

Usage

vite.config.js:

import { defineConfig } from 'vite'
import Wat from 'vite-plugin-wat'

export default defineConfig({
  plugins: [Wat()]
})

src/add.wat:

(module
  (func $add (param $p0 i32) (param $p1 i32) (result i32)
    local.get $p0
    local.get $p1
    i32.add
  )
  (export "add" (func $add))
)

src/index.js:

import initAddModule from './add.wat?init'

const { add } = (await initAddModule({})).exports
console.log(add(1, 2)) // 3

NOTE: See this for more information about ?init.

TypeScript Support

Create src/shims.d.ts with the following content:

/// <reference types="vite/client" />

declare module '*.wat?init' {
  export { default } from '*.wasm?init'
}

Use type casting when importing from WASM module:

import initAddModule from './add.wat?init'

interface AddModuleExports {
  add(a: number, b: number): number
}

const { add } = (await initAddModule({}))
  .exports as unknown as AddModuleExports
console.log(add(1, 2)) // 3

License

MIT