Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Use 'console.log' From WASM in Rust

This is how I'm calling out to console log from WASM Rust code. You don't really need to send the data in from the outside, but it shows that bridge as well which I find useful

Cargo.toml

[package]
name = "wasm_web_component"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = { version = "0.2.87" }
web-sys = { version = "0.3.64", features = ["console"]}

src/lib.rs

use wasm_bindgen::prelude::*;
use web_sys::console::log_1;

#[wasm_bindgen]
extern "C" {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn log(msg: &str) {
    log_1(&msg.into());
}

Notes

  • You have to open the index file through a server (e.g. browser-sync) for it to work. Otherwise you'll get a cors error.

  • Building this is done with `wasm-pack`` which can be installed with `cargo install wasm-pack``

  • The build command is `wasm-pack build --target web``

  • Webpack is not used in this approach

index.html

<!DOCTYPE html>
<html>
<body>
  <script type="module">
    import init, {log} from "./pkg/wasm_web_component.js";
    init().then(() => {
      log("ping test alfa");
    })
  </script>
</body>
</html>

References