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::*; pub fn main() -> () { console::log("hello world")}
[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::*; pub fn main() -> () { window::alert(window(),"hello world!");}
See it working here
Canvas
use web_dom::*; 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::*; pub fn callback(_listener:EventListener,_event:Event) -> () { let input = document::query_selector(document(),"input"); let msg = htmlinput::get_value(input); window::alert(window(),&msg);} 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!");}
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} 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));} 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.