Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
js
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Access DOM from Rust web assembly easily

Resources

Releases

No releases published

Packages

No packages published