wasm-bindgen

https://rustwasm.github.io/docs/wasm-bindgen/
Admin
wasm-bindgen is a Rust library and CLI tool that facilitates high-level interactions between...
Tokens:145,947
Snippets:1,009
Trust Score:9.7
Update:1 week ago
Show doc for...
Tokens:
Raw
### src/lib.rs for the DOM example

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/dom.html

Rust source for the DOM example. It uses web-sys to get the window, document, and body, creates a <p> element, sets its text content to "Hello from Rust!", and appends it to the body.

```rust
#![allow(unused_variables)]
fn main() {
use wasm_bindgen::prelude::*;

// Called by our JS entry point to run the example
#[wasm_bindgen(start)]
fn run() -> Result<(), JsValue> {
    // Use `web_sys`'s global `window` function to get a handle on the global
    // window object.
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");

    // Manufacture the element we're gonna append
    let val = document.create_element("p")?;
    val.set_text_content(Some("Hello from Rust!"));

    body.append_child(&val)?;

    Ok(())
}

}

```

--------------------------------

### src/lib.rs for fetch example

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Rust code for the fetch example. It defines an async function `run` that takes a repository name, makes a GET request to the GitHub API, and returns the JSON response as a JsValue. It uses `JsFuture` to await the fetch and JSON parsing promises.

```rust
#![allow(unused_variables)]
fn main() {
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use web_sys::{Request, RequestInit, RequestMode, Response};

#[wasm_bindgen]
pub async fn run(repo: String) -> Result<JsValue, JsValue> {
    let opts = RequestInit::new();
    opts.set_method("GET");
    opts.set_mode(RequestMode::Cors);

    let url = format!("https://api.github.com/repos/{}/branches/master", repo);

    let request = Request::new_with_str_and_init(&url, &opts)?;

    request
        .headers()
        .set("Accept", "application/vnd.github.v3+json")?;

    let window = web_sys::window().unwrap();
    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;

    // `resp_value` is a `Response` object.
    assert!(resp_value.is_instance_of::<Response>());
    let resp: Response = resp_value.dyn_into().unwrap();

    // Convert this other `Promise` into a rust `Future`.
    let json = JsFuture::from(resp.json()?).await?;

    // Send the JSON response back to JS.
    Ok(json)
}

}
```

--------------------------------

### Rust example using performance.now() and performance.timing()

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/performance.html

Use web_sys::window().performance() to get the Performance object, then call performance.now() for the current time in milliseconds and performance.timing().request_start()/response_end() to get request timing. The example logs these values using a console.log wrapper and converts the timing values to SystemTime for human-readable output.

```rust
use std::time::{Duration, SystemTime, UNIX_EPOCH};

use wasm_bindgen::prelude::*;

// lifted from the `console_log` example
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(a: &str);
}

macro_rules! console_log {
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

#[wasm_bindgen(start)]
fn run() {
    let window = web_sys::window().expect("should have a window in this context");
    let performance = window
        .performance()
        .expect("performance should be available");

    console_log!("the current time (in ms) is {}", performance.now());

    let start = perf_to_system(performance.timing().request_start());
    let end = perf_to_system(performance.timing().response_end());

    console_log!("request started at {}", humantime::format_rfc3339(start));
    console_log!("request ended at {}", humantime::format_rfc3339(end));
}

fn perf_to_system(amt: f64) -> SystemTime {
    let secs = (amt as u64) / 1_000;
    let nanos = (((amt as u64) % 1_000) as u32) * 1_000_000;
    UNIX_EPOCH + Duration::new(secs, nanos)
}
```

--------------------------------

### JavaScript Example: Send and Receive Example Object

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/arbitrary-data-with-serde.html

Imports the wasm functions and demonstrates sending an example object to wasm, modifying its field2 array, and sending it back. This shows the round-trip workflow.

```javascript
import { send_example_to_js, receive_example_from_js } from "example";

// Get the example object from wasm.
let example = send_example_to_js();

// Add another "Vec" element to the end of the "Vec<Vec<f32>>"
example.field2.push([5, 6]);

// Send the example object back to wasm.
receive_example_from_js(example);

```

--------------------------------

### Commands: Install and run miniserve via Cargo

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Alternative to Python: install miniserve with Cargo and serve the directory on port 8080. This is provided for users without Python installed.

```bash
cargo install miniserve
miniserve . --index "index.html" -p 8080
```

--------------------------------

### Install wasm-bindgen-cli test runner

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Install the wasm-bindgen test runner CLI with cargo. Replace X.Y.Z with the same version of wasm-bindgen as in Cargo.toml.

```bash
cargo install wasm-bindgen-cli --vers "X.Y.Z"
```

--------------------------------

### webdriver.json capabilities example

Source: https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/browsers.html

Add a webdriver.json file to the crate root to configure browser capabilities for headless testing. Each browser has its own section; this example sets fake media streams for Firefox and Chrome.

```json
{
  "moz:firefoxOptions": {
    "prefs": {
      "media.navigator.streams.fake": true,
      "media.navigator.permission.disabled": true
    },
    "args": []
  },
  "goog:chromeOptions": {
    "args": [
      "--use-fake-device-for-media-stream",
      "--use-fake-ui-for-media-stream"
    ]
  }
}
```

--------------------------------

### --target web example: Cargo.toml web-sys dependencies

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Cargo.toml snippet adding web-sys with features for Document, Element, HtmlElement, Node, and Window.

```toml
[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
  'HtmlElement',
  'Node',
  'Window',
]
```

--------------------------------

### Cargo.toml for fetch example

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Cargo.toml configuration for the fetch example. It enables web-sys features for Headers, Request, RequestInit, RequestMode, Response, and Window, and includes dependencies on js-sys, wasm-bindgen, and wasm-bindgen-futures.

```toml
[package]
authors = ["The wasm-bindgen Developers"]
edition = "2021"
name = "fetch"
publish = false
version = "0.0.0"

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

[dependencies]
js-sys = { path = "../../crates/js-sys" }
wasm-bindgen = { path = "../../" }
wasm-bindgen-futures = { path = "../../crates/futures" }

[dependencies.web-sys]
features = ['Headers', 'Request', 'RequestInit', 'RequestMode', 'Response', 'Window']
path = "../../crates/web-sys"

[lints]
workspace = true
```

--------------------------------

### Travis CI configuration for wasm-bindgen-test

Source: https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/continuous-integration.html

Example Travis CI configuration that installs wasm-pack and runs tests with cargo test and wasm-pack test for Firefox and Chrome in headless mode.

```yaml
language: rust
rust    : nightly

addons:
  firefox: latest
  chrome : stable

install:
  - curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

script:

  # this will test the non Wasm targets if your crate has those, otherwise remove this line.
  #
  - cargo test

  - wasm-pack test --firefox --headless
  - wasm-pack test --chrome  --headless

```

--------------------------------

### src/lib.rs: Create and append a DOM element with web-sys

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Rust code that uses web-sys to get the window, document, and body, then creates a <p> element, sets its text to 'Hello from Rust!', and appends it to the body. The #[wasm_bindgen(start)] attribute marks the run function as the entry point.

```rust
#![allow(unused_variables)]
fn main() {
use wasm_bindgen::prelude::*;

// Called by our JS entry point to run the example
#[wasm_bindgen(start)]
fn run() -> Result<(), JsValue> {
    // Use `web_sys`'s global `window` function to get a handle on the global
    // window object.
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");

    // Manufacture the element we're gonna append
    let val = document.create_element("p")?;
    val.set_text_content(Some("Hello from Rust!"));

    body.append_child(&val)?;

    Ok(())
}

}
```

--------------------------------

### Install wasm-bindgen-cli with cargo

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/cli.html

Installs the wasm-bindgen CLI tool using cargo. This is required to use the wasm-bindgen command.

```bash
cargo install -f wasm-bindgen-cli
```

--------------------------------

### Cargo.toml for the DOM example

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/dom.html

Cargo.toml for the DOM example. It declares a cdylib crate and depends on wasm-bindgen and web-sys, enabling the Document, Element, HtmlElement, Node, and Window features.

```toml
[package]
authors = ["The wasm-bindgen Developers"]
edition = "2021"
name = "dom"
publish = false
version = "0.0.0"

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

[dependencies]
wasm-bindgen = { path = "../../" }

[dependencies.web-sys]
features = ['Document', 'Element', 'HtmlElement', 'Node', 'Window']
path = "../../crates/web-sys"

[lints]
workspace = true

```

--------------------------------

### Small Wasm example: Cargo.toml release profile with LTO

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Cargo.toml configuration to enable LTO for smaller binaries in release mode.

```toml
[profile.release]
lto = true
```

--------------------------------

### Define a start function with #[wasm_bindgen(start)]

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-rust-exports/start.html

Use this attribute to mark a function that runs automatically when the Wasm module is instantiated. The function must take no arguments and return either `()` or `Result<(), JsValue>`. Only one `start` function is allowed per module, and it is not executed during testing.

```rust
#![allow(unused_variables)]
fn main() {
#[wasm_bindgen(start)]
fn start() {
    // executed automatically ...
}
}
```

--------------------------------

### Serialize Example to JsValue with serde_wasm_bindgen::to_value

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Defines a `#[wasm_bindgen]` function that creates an `Example` instance and serializes it to a `JsValue` using `serde_wasm_bindgen::to_value`, unwrapping the result. This allows passing the complex struct to JavaScript.

```rust
#![allow(unused_variables)]
fn main() {
#[wasm_bindgen]
pub fn send_example_to_js() -> JsValue {
    let mut field1 = HashMap::new();
    field1.insert(0, String::from("ex"));
    let example = Example {
        field1,
        field2: vec![vec![1., 2.], vec![3., 4.]],
        field3: [1., 2., 3., 4.]
    };

    serde_wasm_bindgen::to_value(&example).unwrap()
}
}
```

--------------------------------

### Cargo.toml for wasm-bindgen paint example

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/paint.html

Configures the Rust crate as a cdylib and enables the necessary web-sys features for DOM, events, and 2D canvas.

```toml
[package]
authors = ["The wasm-bindgen Developers"]
edition = "2021"
name = "wasm-bindgen-paint"
publish = false
version = "0.0.0"

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

[dependencies]
js-sys = { path = "../../crates/js-sys" }
wasm-bindgen = { path = "../../" }

[dependencies.web-sys]
features = [
  'CanvasRenderingContext2d',
  'CssStyleDeclaration',
  'Document',
  'Element',
  'EventTarget',
  'HtmlCanvasElement',
  'HtmlElement',
  'MouseEvent',
  'Node',
  'Window',
]
path = "../../crates/web-sys"

[lints]
workspace = true
```

--------------------------------

### Resize window using web_sys::Window

Source: https://rustwasm.github.io/docs/wasm-bindgen/web-sys/using-web-sys.html

Rust example using web_sys::window() and resize_to to resize the window to 500x500. Requires the Window feature. The function returns a Result and uses expect to handle errors.

```rust
#![allow(unused_variables)]
fn main() {
use wasm_bindgen::prelude::*;
use web_sys::Window;

#[wasm_bindgen]
pub fn make_the_window_small() {
    // Resize the window to 500px by 500px.
    let window = web_sys::window().unwrap();
    window.resize_to(500, 500)
        .expect("could not resize the window");
}
}

```

--------------------------------

### JavaScript Proxy example for indexing_getter/setter/deleter

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-js-imports/indexing-getter-setter-deleter.html

Shows a JavaScript Proxy that intercepts get, set, and deleteProperty operations. The get handler returns the property length if the property is not present, and the set handler assigns the value. The example demonstrates the behavior with foo.ten, showing that get returns 3, set assigns 10, and delete removes the property.

```javascript
const foo = new Proxy({}, {
    get(obj, prop) {
        return prop in obj ? obj[prop] : prop.length;
    },
    set(obj, prop, value) {
        obj[prop] = value;
    },
    deleteProperty(obj, prop) {
        delete obj[prop];
    },
});

foo.ten;
// 3

foo.ten = 10;
foo.ten;
// 10

delete foo.ten;
foo.ten;
// 3
```

--------------------------------

### --target web example: src/lib.rs

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Rust code using web_sys to access the window and document objects, demonstrating that --target web retains full functionality.

```rust
use wasm_bindgen::prelude::*;

// Called when the Wasm module is instantiated
#[wasm_bindgen(start)]
fn main() -> Result<(), JsValue> {
    // Use `web_sys`'s global `window` function to get a handle on the global
    // window object.
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");
```

--------------------------------

### AppVeyor configuration for wasm-bindgen-test

Source: https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/continuous-integration.html

Example AppVeyor configuration that installs Node, Rust nightly, and wasm-bindgen-cli, then runs tests in Chrome and Firefox using cargo test.

```yaml
install:
  - ps: Install-Product node 10
  - appveyor-retry appveyor DownloadFile https://win.rustup.rs/ -FileName rustup-init.exe
  - rustup-init.exe -y --default-host x86_64-pc-windows-msvc --default-toolchain nightly
  - set PATH=%PATH%;C:\Users\appveyor\.cargo\bin
  - rustc -V
  - cargo -V
  - rustup target add wasm32-unknown-unknown
  - cargo install wasm-bindgen-cli

build: false

test_script:
  # Test in Chrome. chromedriver is installed by default in appveyor.
  - set CHROMEDRIVER=C:\Tools\WebDriver\chromedriver.exe
  - cargo test --target wasm32-unknown-unknown
  - set CHROMEDRIVER=
  # Test in Firefox. geckodriver is also installed by default.
  - set GECKODRIVER=C:\Tools\WebDriver\geckodriver.exe
  - cargo test --target wasm32-unknown-unknown

```

--------------------------------

### HTML example for loading `--target no-modules` output

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html

This HTML file includes the generated JS from `wasm-pack` and initializes the module. The exports are available on the `wasm_bindgen` global, which is also the initialization function. The global name can be configured with the `--no-modules-global` CLI flag.

```html
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <!-- Include the JS generated by `wasm-pack build` -->
    <script src='pkg/without_a_bundler_no_modules.js'></script>

    <script>
      // Like with the `--target web` output the exports are immediately
      // available but they won't work until we initialize the module. Unlike
      // `--target web`, however, the globals are all stored on a
      // `wasm_bindgen` global. The global itself is the initialization
      // function and then the properties of the global are all the exported
      // functions.
      //
      // Note that the name `wasm_bindgen` can be configured with the
      // `--no-modules-global` CLI flag
      const { add } = wasm_bindgen;

      async function run() {
        await wasm_bindgen();

        const result = add(1, 2);
        console.log(`1 + 2 = ${result}`);
      }

      run();
    </script>
  </body>
</html>
```

--------------------------------

### Generated JS interface for skip_jsdoc example

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Shows the expected generated JS: `foo` gets auto-generated JSDoc with @param and @returns, while `bar` keeps the manually written JSDoc because of `skip_jsdoc`.

```javascript
/**
* Autogenerated docs.
*
* @param {number} arg
* @returns {number}
*/
export function foo(arg) { /* ... */ }

/**
* Manually written docs.
*
* @param {number} arg - A descriptive description.
* @returns {number} Something a bit bigger.
*/
export function bar(arg) { /* ... */ }
```

--------------------------------

### GitHub Actions configuration for wasm-bindgen-test

Source: https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/continuous-integration.html

Example GitHub Actions workflow that runs on push and pull requests, installs wasm-pack, and runs tests with cargo test and wasm-pack test for Chrome and Firefox.

```yaml
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Install
        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

      - run: cargo test
      - run: wasm-pack test --headless --chrome
      - run: wasm-pack test --headless --firefox

```

--------------------------------

### Rust example with return_description and param_description

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-rust-exports/description.html

Shows a Rust function `add` and a method `number` on `FooList` using `#[wasm_bindgen(return_description)]` and `#[wasm_bindgen(param_description)]` to add documentation. The `add` function takes two `u32` parameters and returns a `u32`. The `number` method takes an index and returns a `u32`.

```rust
#![allow(unused_variables)]
fn main() {
/// Adds `arg1` and `arg2`.
#[wasm_bindgen(return_description = "the result of the addition of `arg1` and `arg2`")]
pub fn add(
    #[wasm_bindgen(param_description = "the first number")]
    arg1: u32,
    #[wasm_bindgen(param_description = "the second number")]
    arg2: u32,
) -> u32 {
    arg1 + arg2
}

#[wasm_bindgen]
pub struct FooList {
    // properties
}

#[wasm_bindgen]
impl FooList {
    /// Returns the number at the given index.
    #[wasm_bindgen(return_description = "the number at the given index")]
    pub fn number(
        &self,
        #[wasm_bindgen(param_description = "the index of the number to be returned")]
        index: u32,
    ) -> u32 {
        // function body
    }
}
}
```

--------------------------------

### src/lib.rs: Draw smiley face with 2D canvas

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/2d-canvas.html

Rust code that gets the canvas element, creates a 2D rendering context, and draws a smiley face using arcs and strokes. Uses the wasm_bindgen start attribute to run on page load.

```rust
#![allow(unused_variables)]
fn main() {
use std::f64;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
fn start() {
    let document = web_sys::window().unwrap().document().unwrap();
    let canvas = document.get_element_by_id("canvas").unwrap();
    let canvas: web_sys::HtmlCanvasElement = canvas
        .dyn_into::<web_sys::HtmlCanvasElement>()
        .map_err(|_| ())
        .unwrap();

    let context = canvas
        .get_context("2d")
        .unwrap()
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()
        .unwrap();

    context.begin_path();

    // Draw the outer circle.
    context
        .arc(75.0, 75.0, 50.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    // Draw the mouth.
    context.move_to(110.0, 75.0);
    context.arc(75.0, 75.0, 35.0, 0.0, f64::consts::PI).unwrap();

    // Draw the left eye.
    context.move_to(65.0, 65.0);
    context
        .arc(60.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    // Draw the right eye.
    context.move_to(95.0, 65.0);
    context
        .arc(90.0, 65.0, 5.0, 0.0, f64::consts::PI * 2.0)
        .unwrap();

    context.stroke();
}

}

```

--------------------------------

### index.js: Import and call greet

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/hello-world.html

JavaScript entry point that imports the greet function from the generated pkg module and calls it with 'World'.

```javascript
import { greet } from './pkg';

greet('World');

```

--------------------------------

### src/lib.rs – requestAnimationFrame loop with Closure and Rc

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/request-animation-frame.html

Implements a `requestAnimationFrame` loop that uses a `Closure` stored in an `Rc<RefCell<Option<_>>>` to update the body text and reschedule itself until 300 frames have run, then clears the closure and sets the text to "All done!". The `#[wasm_bindgen(start)]` run function is invoked automatically after the Wasm module is instantiated, and the example expects a global `window` and `document`.

```rust

#![allow(unused_variables)]
fn main() {
use std::cell::RefCell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;

fn window() -> web_sys::Window {
    web_sys::window().expect("no global `window` exists")
}

fn request_animation_frame(f: &Closure<dyn FnMut()>) {
    window()
        .request_animation_frame(f.as_ref().unchecked_ref())
        .expect("should register `requestAnimationFrame` OK");
}

fn document() -> web_sys::Document {
    window()
        .document()
        .expect("should have a document on window")
}

fn body() -> web_sys::HtmlElement {
    document().body().expect("document should have a body")
}

// This function is automatically invoked after the Wasm module is instantiated.
#[wasm_bindgen(start)]
fn run() -> Result<(), JsValue> {
    // Here we want to call `requestAnimationFrame` in a loop, but only a fixed
    // number of times. After it's done we want all our resources cleaned up. To
    // achieve this we're using an `Rc`. The `Rc` will eventually store the
    // closure we want to execute on each frame, but to start out it contains
    // `None`.
    //
    // After the `Rc` is made we'll actually create the closure, and the closure
    // will reference one of the `Rc` instances. The other `Rc` reference is
    // used to store the closure, request the first frame, and then is dropped
    // by this function.
    //
    // Inside the closure we've got a persistent `Rc` reference, which we use
    // for all future iterations of the loop
    let f = Rc::new(RefCell::new(None));
    let g = f.clone();

    let mut i = 0;
    *g.borrow_mut() = Some(Closure::new(move || {
        if i > 300 {
            body().set_text_content(Some("All done!"));

            // Drop our handle to this closure so that it will get cleaned
            // up once we return.
            let _ = f.borrow_mut().take();
            return;
        }

        // Set the body's text content to how many times this
        // requestAnimationFrame callback has fired.
        i += 1;
        let text = format!("requestAnimationFrame has been called {} times.", i);
        body().set_text_content(Some(&text));

        // Schedule ourself for another requestAnimationFrame callback.
        request_animation_frame(f.borrow().as_ref().unwrap());
    }));

    request_animation_frame(g.borrow().as_ref().unwrap());
    Ok(())
}

}

```

--------------------------------

### Receive Example from JavaScript with serde_wasm_bindgen::from_value

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/arbitrary-data-with-serde.html

Defines a wasm_bindgen function that receives a JsValue and deserializes it into an Example using serde_wasm_bindgen::from_value. The function unwraps the result and then processes the example.

```rust
#![allow(unused_variables)]
fn main() {
#[wasm_bindgen]
pub fn receive_example_from_js(val: JsValue) {
    let example: Example = serde_wasm_bindgen::from_value(val).unwrap();
    ...
}
}

```

--------------------------------

### src/lib.rs: console.log bindings and usage

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/console-log.html

This is the main Rust file for the example. It defines manual bindings for console.log, a macro for formatted logging, and uses web_sys for console logging. The code is wrapped in a main function for documentation purposes.

```rust
#![allow(unused_variables)]
fn main() {
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
fn run() {
    bare_bones();
    using_a_macro();
    using_web_sys();
}

// First up let's take a look of binding `console.log` manually, without the
// help of `web_sys`. Here we're writing the `#[wasm_bindgen]` annotations
// manually ourselves, and the correctness of our program relies on the
// correctness of these annotations!

#[wasm_bindgen]
extern "C" {
    // Use `js_namespace` here to bind `console.log(..)` instead of just
    // `log(..)`
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // The `console.log` is quite polymorphic, so we can bind it with multiple
    // signatures. Note that we need to use `js_name` to ensure we always call
    // `log` in JS.
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_u32(a: u32);

    // Multiple arguments too!
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_many(a: &str, b: &str);
}

fn bare_bones() {
    log("Hello from Rust!");
    log_u32(42);
    log_many("Logging", "many values!");
}

// Next let's define a macro that's like `println!`, only it works for
// `console.log`. Note that `println!` doesn't actually work on the Wasm target
// because the standard library currently just eats all output. To get
// `println!`-like behavior in your app you'll likely want a macro like this.

macro_rules! console_log {
    // Note that this is using the `log` function imported above during
    // `bare_bones`
    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}

fn using_a_macro() {
    console_log!("Hello {}!", "world");
    console_log!("Let's print some numbers...");
    console_log!("1 + 3 = {}", 1 + 3);
}

// And finally, we don't even have to define the `log` function ourselves! The
// `web_sys` crate already has it defined for us.

fn using_web_sys() {
    use web_sys::console;

    console::log_1(&"Hello using web-sys".into());

    let js: JsValue = 4.into();
    console::log_2(&"Logging arbitrary values looks like".into(), &js);
}

}
```

--------------------------------

### Send Example to JavaScript with serde_wasm_bindgen::to_value

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/arbitrary-data-with-serde.html

Defines a wasm_bindgen function that serializes an Example struct to a JsValue using serde_wasm_bindgen::to_value. The Example contains a HashMap, a nested Vec, and an array.

```rust
#![allow(unused_variables)]
fn main() {
#[wasm_bindgen]
pub fn send_example_to_js() -> JsValue {
    let mut field1 = HashMap::new();
    field1.insert(0, String::from("ex"));
    let example = Example {
        field1,
        field2: vec![vec![1., 2.], vec![3., 4.]],
        field3: [1., 2., 3., 4.]
    };

    serde_wasm_bindgen::to_value(&example).unwrap()
}
}

```

--------------------------------

### Rust source for wasm-bindgen paint example

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/paint.html

Creates a canvas element, sets its size and border, obtains a 2D rendering context, and attaches mouse event listeners to draw lines.

```rust
#![allow(unused_variables)]
fn main() {
use std::cell::Cell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
fn start() -> Result<(), JsValue> {
    let document = web_sys::window().unwrap().document().unwrap();
    let canvas = document
        .create_element("canvas")?
        .dyn_into::<web_sys::HtmlCanvasElement>()?;
    document.body().unwrap().append_child(&canvas)?;
    canvas.set_width(640);
    canvas.set_height(480);
    canvas.style().set_property("border", "solid")?;
    let context = canvas
        .get_context("2d")?
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()?;
    let context = Rc::new(context);
    let pressed = Rc::new(Cell::new(false));
    {
        let context = context.clone();
        let pressed = pressed.clone();
        let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::MouseEvent| {
            context.begin_path();
            context.move_to(event.offset_x() as f64, event.offset_y() as f64);
            pressed.set(true);
        });
        canvas.add_event_listener_with_callback("mousedown", closure.as_ref().unchecked_ref())?;
        closure.forget();
    }
    {
        let context = context.clone();
        let pressed = pressed.clone();
        let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::MouseEvent| {
            if pressed.get() {
                context.line_to(event.offset_x() as f64, event.offset_y() as f64);
                context.stroke();
                context.begin_path();
                context.move_to(event.offset_x() as f64, event.offset_y() as f64);
            }
        });
        canvas.add_event_listener_with_callback("mousemove", closure.as_ref().unchecked_ref())?;
        closure.forget();
    }
    {
        let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::MouseEvent| {
            pressed.set(false);
            context.line_to(event.offset_x() as f64, event.offset_y() as f64);
            context.stroke();
        });
        canvas.add_event_listener_with_callback("mouseup", closure.as_ref().unchecked_ref())?;
        closure.forget();
    }

    Ok(())
}

}
```

--------------------------------

### Rust wasm-bindgen indexing_getter/setter/deleter example

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-js-imports/indexing-getter-setter-deleter.html

Rust code that binds to the JavaScript Proxy using the indexing_getter, indexing_setter, and indexing_deleter attributes. The methods are declared with the structural and method flags, and the example shows how to call them on a thread-local static FOO, asserting the same behavior as the JavaScript example.

```rust
#![allow(unused_variables)]
fn main() {
#[wasm_bindgen]
extern "C" {
    type Foo;
    #[wasm_bindgen(thread_local_v2)]
    static FOO: Foo;

    #[wasm_bindgen(method, structural, indexing_getter)]
    fn get(this: &Foo, prop: &str) -> u32;

    #[wasm_bindgen(method, structural, indexing_setter)]
    fn set(this: &Foo, prop: &str, val: u32);

    #[wasm_bindgen(method, structural, indexing_deleter)]
    fn delete(this: &Foo, prop: &str);
}

FOO.with(|foo| {
    assert_eq!(foo.get("ten"), 3);

    foo.set("ten", 10);
    assert_eq!(foo.get("ten"), 10);

    foo.delete("ten");
    assert_eq!(foo.get("ten"), 3);
});
}
```

--------------------------------

### src/lib.rs: Export greet function and call alert

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/hello-world.html

Rust entry point that imports the wasm_bindgen prelude, declares the alert function, and exports a greet function that calls alert with a formatted string.

```rust
#![allow(unused_variables)]
fn main() {
use wasm_bindgen::prelude::*;

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

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

}

```

--------------------------------

### Cargo.toml for WebGL example

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/webgl.html

Configures the Rust crate as a cdylib and enables web-sys features for WebGL2 rendering context, including Document, Element, HtmlCanvasElement, WebGlBuffer, WebGlVertexArrayObject, WebGl2RenderingContext, WebGlProgram, WebGlShader, and Window.

```toml
[package]
authors = ["The wasm-bindgen Developers"]
edition = "2021"
name = "webgl"
publish = false
version = "0.0.0"

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

[dependencies]
js-sys = { path = "../../crates/js-sys" }
wasm-bindgen = { path = "../../" }

[dependencies.web-sys]
features = [
  'Document',
  'Element',
  'HtmlCanvasElement',
  'WebGlBuffer',
  'WebGlVertexArrayObject',
  'WebGl2RenderingContext',
  'WebGlProgram',
  'WebGlShader',
  'Window',
]
path = "../../crates/web-sys"

[lints]
workspace = true

```

--------------------------------

### Cargo.toml: Enable fetch-related web-sys features

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/fetch.html

Configures the crate as a cdylib and enables web-sys features for Headers, Request, RequestInit, RequestMode, Response, and Window. Required for the fetch example to compile.

```toml
[package]
authors = ["The wasm-bindgen Developers"]
edition = "2021"
name = "fetch"
publish = false
version = "0.0.0"

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

[dependencies]
js-sys = { path = "../../crates/js-sys" }
wasm-bindgen = { path = "../../" }
wasm-bindgen-futures = { path = "../../crates/futures" }

[dependencies.web-sys]
features = ['Headers', 'Request', 'RequestInit', 'RequestMode', 'Response', 'Window']
path = "../../crates/web-sys"

[lints]
workspace = true

```

--------------------------------

### static_method_of attribute example

Source: https://rustwasm.github.io/docs/wasm-bindgen/print.html

Binds a static method of an imported JS class. The example binds Date.now() and shows that the function becomes a static method of the imported type in Rust.

```rust
#![allow(unused_variables)]
fn main() {
#[wasm_bindgen]
extern "C" {
    type Date;

    #[wasm_bindgen(static_method_of = Date)]
    pub fn now() -> f64;
}
}
```

```rust
#![allow(unused_variables)]
fn main() {
let instant = Date::now();
}
```

--------------------------------

### src/lib.rs worker and startup logic for wasm-in-web-worker

Source: https://rustwasm.github.io/docs/wasm-bindgen/examples/wasm-in-web-worker.html

Rust module for the web worker example. Defines the `NumberEval` struct with `new`, `is_even`, and `get_last_number` methods, and the `startup` function that creates a worker and sets up its `oninput` callback. Uses `Rc<RefCell<Worker>>` for interior mutability and keeps a persistent `onmessage` callback handle to avoid leaks.

```rust
#![allow(unused_variables)]
fn main() {
use std::cell::RefCell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;
use web_sys::{console, HtmlElement, HtmlInputElement, MessageEvent, Worker};

/// A number evaluation struct
///
/// This struct will be the main object which responds to messages passed to the
/// worker. It stores the last number which it was passed to have a state. The
/// statefulness is not required in this example but should show how
/// larger, more complex scenarios with statefulness can be set up.
#[wasm_bindgen]
pub struct NumberEval {
    number: i32,
}

#[wasm_bindgen]
impl NumberEval {
    /// Create new instance.
    pub fn new() -> NumberEval {
        NumberEval { number: 0 }
    }

    /// Check if a number is even and store it as last processed number.
    ///
    /// # Arguments
    ///
    /// * `number` - The number to be checked for being even/odd.
    pub fn is_even(&mut self, number: i32) -> bool {
        self.number = number;
        self.number % 2 == 0
    }

    /// Get last number that was checked - this method is added to work with
    /// statefulness.
    pub fn get_last_number(&self) -> i32 {
        self.number
    }
}

/// Run entry point for the main thread.
#[wasm_bindgen]
pub fn startup() {
    // Here, we create our worker. In a larger app, multiple callbacks should be
    // able to interact with the code in the worker. Therefore, we wrap it in
    // `Rc<RefCell>` following the interior mutability pattern. Here, it would
    // not be needed but we include the wrapping anyway as example.
    let worker_handle = Rc::new(RefCell::new(Worker::new("./worker.js").unwrap()));
    console::log_1(&"Created a new worker from within Wasm".into());

    // Pass the worker to the function which sets up the `oninput` callback.
    setup_input_oninput_callback(worker_handle);
}

fn setup_input_oninput_callback(worker: Rc<RefCell<web_sys::Worker>>) {
    let document = web_sys::window().unwrap().document().unwrap();

    // If our `onmessage` callback should stay valid after exiting from the
    // `oninput` closure scope, we need to either forget it (so it is not
    // destroyed) or store it somewhere. To avoid leaking memory every time we
    // want to receive a response from the worker, we move a handle into the
    // `oninput` closure to which we will always attach the last `onmessage`
    // callback. The initial value will not be used and we silence the warning.
    #[allow(unused_assignments)]
    let mut persistent_callback_handle = get_on_msg_callback();

    let callback = Closure::new(move || {
        console::log_1(&"oninput callback triggered".into());
        let document = web_sys::window().unwrap().document().unwrap();

        let input_field = document
            .get_element_by_id("inputNumber")
            .expect("#inputNumber should exist");
        let input_field = input_field
            .dyn_ref::<HtmlInputElement>()
            .expect("#inputNumber should be a HtmlInputElement");

```

--------------------------------

### TypeScript: Use the generated module

Source: https://rustwasm.github.io/docs/wasm-bindgen/reference/attributes/on-js-imports/typescript_type.html

Shows how to import the generated `ITextStyle` and `TextStyle` from the module and create instances using the constructor and the optional method.

```typescript
import { ITextStyle, TextStyle } from "./my_awesome_module";

const style: TextStyle = new TextStyle({
  bold: true,
  italic: true,
  size: 42,
});

const optional_style: TextStyle = TextStyle.optional_new();
```

--------------------------------

### Build web-sys with wasm_bindgen_webidl logging enabled

Source: https://rustwasm.github.io/docs/wasm-bindgen/contributing/web-sys/logging.html

Run this command from the crates/web-sys directory to build web-sys with verbose output and the RUST_LOG environment variable set to wasm_bindgen_webidl, which enables logging from the build script.

```bash
cd crates/web-sys
RUST_LOG=wasm_bindgen_webidl cargo build -vv

```
Tokens:
Raw