Importing functions from JS - The `wasm-bindgen` Guide

## Keyboard shortcuts

Press `←` or `→` to navigate between chapters

Press `S` or `/` to search in the book

Press `?` to show this help

Press `Esc` to hide this help

# Importing non-browser JS

View full source code or view the compiled example online

The `#[wasm_bindgen]` attribute can be used on `extern "C" { .. }` blocks to import functionality from JS. This is how the `js-sys` and the `web-sys` crates are built, but you can also use it in your own crate!

For example if you're working with this JS file:

    // defined-in-js.js
    export function name() {
        return 'Rust';
    }

    export class MyClass {
        constructor() {
            this._number = 42;
        }

        get number() {
            return this._number;
        }

        set number(n) {
            return this._number = n;
        }

        render() {
            return `My number is: ${this.number}`;
        }
    }

you can use it in Rust with:

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

    #[wasm_bindgen(module = "/defined-in-js.js")]
    extern "C" {
        fn name() -> String;

        type MyClass;

        #[wasm_bindgen(constructor)]
        fn new() -> MyClass;

        #[wasm_bindgen(method, getter)]
        fn number(this: &MyClass) -> u32;
        #[wasm_bindgen(method, setter)]
        fn set_number(this: &MyClass, number: u32) -> MyClass;
        #[wasm_bindgen(method)]
        fn render(this: &MyClass) -> String;
    }

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

    #[wasm_bindgen(start)]
    fn run() {
        log(&format!("Hello from {}!", name())); // should output "Hello from Rust!"

        let x = MyClass::new();
        assert_eq!(x.number(), 42);
        x.set_number(10);
        log(&x.render());
    }
    }

You can also explore the full list of ways to configure imports