diff --git a/src/SUMMARY.md b/src/SUMMARY.md index 49cd8263..85dc4e04 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -298,6 +298,7 @@ - [WebAssembly basics](webassembly.md) - [Load a WASM module](webassembly/load-wasm-module.md) +- [Import Method](webassembly/import-method.md) - [Expose a method](webassembly/expose-method.md) - [Expose user-defined Rust types](webassembly/expose-rust-type.md) - [Borrow Checker](webassembly/borrow-checker.md) diff --git a/src/webassembly/import-method.md b/src/webassembly/import-method.md new file mode 100644 index 00000000..a732e3e4 --- /dev/null +++ b/src/webassembly/import-method.md @@ -0,0 +1,48 @@ +# Import a Javascript method + +Since WASM runs in the browser, we will want to interact directly with Javascript APIs from Rust. +For instance `println!` will not log to the javascript console, so we need to use `console.log`. +Similarly, we want to be able to call `alert`. This works the same way as FFIs with C. + +```rust +#[wasm_bindgen] +extern "C" { + fn alert(s: &str); + + // `js_namespace` will get values inside of a nested object in window. Here, `window.console.log` + #[wasm_bindgen(js_namespace = console)] + pub fn log(s: &str); + + // jsMethod is a user defined method defined in the `window` object + pub fn jsMethod(); +} + +#[wasm_bindgen] +pub fn add_and_log(a: i32, b: i32) { + let result = a + b; + // Doesn't show in the console + println!("println! {}", result); + log(&format!("log {}", result)); + alert(&format!("alert {}", result)); + jsMethod("Hi from Rust"); +} +``` + +```javascript +import init, { add_and_log } from "/wasm/project.js"; + +export function jsMethod(value) { + alert(`Hello from JS! Value: ${value}`); +} + +window.jsMethod = jsMethod; + +(async () => { + await init(); + add_and_log(1, 2); +})(); +``` + +
+ +
\ No newline at end of file