vite-plugin-wat2wasm

A simple Vite plugin that enables .wat (WebAssembly Text Format) compilation and allows usage of WebAssembly within your codebase/library.

Installation

$ <your-preferred-package-manager> install -D vite-plugin-wat2wasm

Usage

Adding into your Vite configuration

import { defineConfig } from "vite";
import wat2WasmPlugin from "vite-plugin-wat2wasm";

export default defineConfig({
    plugins: [
        wat2WasmPlugin({ /* Refer to the API docs below for options */ }),
        /* ...other plugins */
    ],

    // ... other configuration settings
});

Adding types for import statements

Reference it as a comment...

/// <reference types="vite-plugin-wat2wasm/types" />

or include it in your tsconfig.json file

{
    "include": ["src"],
    "compilerOptions": {
        "types": ["vite-plugin-wat2wasm/types", /* ... other type files/packages */]
        // ... other options for Typescript
    }
}

Using it in your application/library

import initFoo from "./foo.wat"

const bar = new WebAssembly.Global("i32", { value: 13 });
const foo = await initFoo<FooExports, FooImports>({
    bar: { val: bar },

    console: {
        log(a: number) {
            console.log(a);
        }
    }
});

console.log(foo.add(21, 46)); // returns 67
foo.logBar(); // logs 13

// In Typescript, you can also specify the types of your .wat file module.
interface FooExports {
    add(a: number, b: number): number;
    logBar(): void;
}

interface FooImports {
    bar: { val: WebAssembly.Global<"i32">; };
    console: { log(a: number): void; };
}

Reference

This section contains more in-depth details about the vite-plugin-wat2wasm library and how to make use of what vite-plugin-wat2wasm offers.

wat2WasmPlugin

Enables compilation of .wat files and generation of .wasm, with modifiable settings.

wat2WasmPlugin(options: Wat2WasmOptions):Plugin

Parameters

• options: Wat2WasmOptions = {} - the configuration options for vite-plugin-wat2wasm.

Returns

• Plugin - a Vite plugin object that allows for compilation of .wat files.

Wat2WasmOptions

The configuration settings for vite-plugin-wat2wasm.

Properties

• parser?: WasmParserOptions = {} - Configures .wasm features you wish to enable for vite-plugin-wat2wasm.

• generator?: WasmGeneratorOptions = {} - Configures how vite-plugin-wat2wasm to generate .wasm files.

WasmParserOptions

See wabt.WasmFeatures for more info.

WasmGeneratorOptions

See wabt.ToBinaryOptions for more info.