In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.
First let's create a function in js:
const appendNumberToBody = (number) => { const text = document.createTextNode(number); document.body.appendChild(text); }
Wrap this function into a single object which contains 'env':
const importObject = {
env: {
appendNumberToBody: appendNumberToBody
}
};
When we load wasm, we can pass in the object:
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
It return a promise, we can run the exported function return by wasm inside the promise.
Now we are going to create a function in Rust:
extern { fn appendNumberToBody(x: u32); } #[no_mangle] pub extern fn run() { unsafe { // we need to wrap with unsafe if getting the passed in value from third party appendNumberToBody(42); } }
We exprot 'run' function, then we can invoke it inside promise:
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});
---------
Full code: Github
index.html:
<!DOCTYPE html> <html> <head> <script> // pass the data from Js to Rust const appendNumberToBody = (number) => { const text = document.createTextNode(number); document.body.appendChild(text); } const importObject = { env: { appendNumberToBody: appendNumberToBody, alert: alert } }; WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject) .then(wasmModule => { wasmModule.instance.exports.run(); }); </script> <head> <body></body> <html>
lib.rs:
extern {
fn appendNumberToBody(x: u32);
fn alert(x: u32);
}
#[no_mangle]
pub extern fn run() {
unsafe {
appendNumberToBody(42);
alert(33)
}
}