Skip to content
Access DOM from Rust web assembly easily
Branch: master
Clone or download
Richard Richard
Richard and Richard no std
Latest commit 09eb388 Apr 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples no std Apr 14, 2019
js Slight code improvements Apr 2, 2019
src no std Apr 14, 2019
tools no std Apr 14, 2019
webidl fixing optional Mar 27, 2019
.gitignore
.npmignore
Cargo.lock fixing optional Mar 27, 2019
Cargo.toml fixing optional Mar 27, 2019
Makefile dynamically call wasm Mar 26, 2019
README.md
dom_api.json fixing optional Mar 27, 2019
package-lock.json
package.json fixing optional Mar 27, 2019
web-dom.js no std Apr 14, 2019
web-dom.min.js no std Apr 14, 2019

README.md

web-dom

DOM access for web assembly

  • no magic
  • no abstractions
  • no code generation
  • api generated from webidl
  • can be used with many languages that compile to web assembly

Features:

  • dom
  • events
  • canvas
  • localStorage
  • webgl
  • audio
  • networking

Documentation: https://docs.rs/web-dom/

web-dom = "0.1"

Want to create web components? Check out https://github.com/web-dom/webcomponent

use web_dom::*;

#[no_mangle]
pub fn main() -> () {
    console::log("hello world")
}
<script src="http://unpkg.com/web-dom@latest/web-dom.min.js"></script>
<web-dom module="helloworld.wasm"></web-dom>
[package]
name = "helloworld"
version = "0.0.1"
edition = "2018"

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

[dependencies]
web-dom = "0.1"
cargo build --target wasm32-unknown-unknown --release

See it working here

Alert

use web_dom::*;

#[no_mangle]
pub fn main() -> () {
    window::alert(window(),"hello world!");
}

See it working here

Canvas

use web_dom::*;

#[no_mangle]
pub fn main() -> () {
    let doc = window::get_document(window());
    let canvas = document::query_selector(doc,"#screen");
    let ctx = htmlcanvas::get_context(canvas,"2d");
    canvas::fill_rect(ctx,0.0,0.0,50.0,50.0);
}

See it working here

Events

use web_dom::*;

#[no_mangle]
pub fn callback(_listener:EventListener,_event:Event) -> () {
    let input = document::query_selector(document(),"input");
    let msg = htmlinput::get_value(input);
    window::alert(window(),&msg);
}

#[no_mangle]
pub fn main() -> () {
    let btn = document::query_selector(document(),"button");
    let listener = create_event_listener();
    eventtarget::add_event_listener(btn,"click",listener);
}

See it working here

Pong

https://github.com/richardanaya/pong/

See it working here

Don't like Rust?

web-dom can be used with any language that compiles to web assembly

extern int global_window();
extern void window_alert(char*);

int main(void) {
  window_alert(global_window(),"hello world!");
}
(extern global_get_window [])
(extern window_get_document [window])
(extern document_query_selector [document query])
(extern htmlcanvas_get_context [element context])
(extern drawing_set_fill_style [canvas color])
(extern drawing_fill_rect [canvas x y w h])

(def colors ("black" "grey" "red"))

(pub defn main []
  (let [window (global_get_window)
        document (window_get_document window)
        canvas (document_query_selector document "#screen")
        ctx (htmlcanvas_get_context canvas "2d")]
        (loop [x 0]
               (if (< x 3)
                   (do (drawing_set_fill_style ctx (mem32 (+ colors (* 4 x))))
                       (drawing_fill_rect ctx (* x 10) (* x 10) 50 50 )
                       (recur [x (+ x 1)]))))))

Want to add your own functions?

Do you need a function I haven't provided? You can easily add your own function to your module context by calling WebDOM imperatively.

WebDOM.run("my.wasm",{
    my_function: function(){
    }
}

Dynamic Calls

In some situations your application may need to utilize behavior in external web assembly modules. Imagine for instance a library called calculator.wasm that knows how to do calculations for me. I can dynamically call an exported function on the module like so.

use web_dom::*;

fn add(calc:DOMReference, a:i32,b:i32) -> i32{
  let dyn_call = dynamic::begin(calc);
  dynamic::param_i32(dyn_call,a);
  dynamic::param_i32(dyn_call,b);
  dynamic::call(dyn_call,"add");
  let result = dynamic::result_i32(dyn_call);
  dynamic::unload(calc);
  result
}

#[no_mangle]
pub fn callback(_listener: EventListener, event: Event) -> () {
    // get a handle to the module
    let calc = get_property(event,"module");
    // call add
    let result = add(calc,2,2);
    console::log(&format!("{}",result));
}

#[no_mangle]
pub fn main() -> () {
  // Load web module asynchronously
  let load_listener = create_event_listener();
  dynamic::load("calculator.wasm",load_listener);
}

This approach has quite a lot of ceremony to it, but can enable some very powerful multi-language projects. It's intended to be used for big libraries you wouldn't want to compile in yourself, libraries written in another language, or proprietary libraries.

You can’t perform that action at this time.