napi-wasm
An implementation of the napi API for WASM. Enables using some native Node modules in browsers and other environments.
Setup
To use napi-wasm, there are a few requirements:
- Configure your linker to export an indirect function table. With ldd, this is the
--export-table
flag. This enables JavaScript to call callback functions registered by WASM. It is exposed in the WebAssembly exports as __indirect_function_table
. - Export a function from your WASM build named
napi_register_module_v1
(Node's default), or napi_register_wasm_v1
for WASM-specific builds. This is called during initialization to setup the exports
object for your module. It receives an environment and an exports object pointer as arguments, which you can add properties to. - Include a function named
napi_wasm_malloc
in your WASM build. This is called from JavaScript by napi-wasm to allocate memory in the WASM heap. It should accept a uint32
size argument indicating the number of bytes to allocate, and return a uint8
pointer to allocated memory. - Compile for the
wasm32-unknown-unknown
target.
In Rust
The above steps should apply for any programming language, but here's an example in Rust. First, define a napi_wasm_malloc
function so JavaScript can allocate memory in the WASM heap using the default allocator.
use std::alloc::{alloc, Layout};
#[no_mangle]
pub extern "C" fn napi_wasm_malloc(size: usize) -> *mut u8 {
let align = std::mem::align_of::<usize>();
if let Ok(layout) = Layout::from_size_align(size, align) {
unsafe {
if layout.size() > 0 {
let ptr = alloc(layout);
if !ptr.is_null() {
return ptr;
}
} else {
return align as *mut u8;
}
}
}
std::process::abort();
}
Next, implement napi_register_wasm_v1
to register your module exports. We'll use the napi-rs bindings in this example to make it a bit nicer than calling C APIs directly. Note that the napi-rs #[module_exports]
macro currently doesn't work in WASM because Rust doesn't support ctor setup functions in WASM targets yet, so we'll need to do this manually.
use napi::{Env, JsObject, NapiValue};
#[no_mangle]
pub unsafe extern "C" fn napi_register_wasm_v1(raw_env: napi::sys::napi_env, raw_exports: napi::sys::napi_value) {
let env = Env::from_raw(raw_env);
let exports = JsObject::from_raw_unchecked(raw_env, raw_exports);
exports.create_named_method("transform", transform);
}
#[js_function(1)]
fn transform(ctx: CallContext) -> napi::Result<JsUnknown> {
}
To compile, you need to export a function table and use the correct target.
RUSTFLAGS="-C link-arg=--export-table" cargo build --target wasm32-unknown-unknown
This will output a file in target/wasm32-unknown-unknown/debug/YOUR_CRATE.wasm
which you can load in a JavaScript environment.
You can also put the rust flags in a .cargo/config.toml
file so you don't need to provide the environment variable each time you run cargo build
.
[target.wasm32-unknown-unknown]
rustflags = ["-C", "link-arg=--export-table"]
Loading
To load a WASM file and initialize a napi environment, you'll need to import the napi-wasm
package. You instantiate a WASM module as usual, providing napi
as the env
import key. This provides the napi functions for your WASM module to use.
Then, pass the WASM instance to the Environment
constructor to setup a napi environment. This will call napi_register_wasm_v1
or napi_register_module_v1
to setup the exports object. Then you can call functions on the exports object as you would in Node.
import { Environment, napi } from 'napi-wasm';
const url = new URL('path/to/lib.wasm', import.meta.url);
const { instance } = await WebAssembly.instantiateStreaming(fetch(url), {
env: napi
});
let env = new Environment(instance);
let exports = env.exports;
exports.transform({
});
When you are done with an Environment
, call the destroy()
function to clean up memory.