web-dom

DOM access for web assembly * no magic * no abstractions * no code generation * api generated from webidl * technology agnostic

toml web-dom = "0.0"

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

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

```rust use web_dom::*;

[no_mangle]

pub fn main() -> () { console::log("hello world") } html

toml [package] name = "helloworld" version = "0.0.1" edition = "2018"

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

[dependencies] web-dom = "0.0" console cargo build --target wasm32-unknown-unknown --release ```

See it working here

Alert

```rust use web_dom::*;

[no_mangle]

pub fn main() -> () { window::alert(window(),"hello world!"); } ```

See it working here

Canvas

```rust use web_dom::*;

[no_mangle]

pub fn main() -> () { let doc = window::getdocument(window()); let canvas = document::queryselector(doc,"#screen"); let ctx = htmlcanvas::getcontext(canvas,"2d"); canvas::fillrect(ctx,0.0,0.0,50.0,50.0); } ```

See it working here

Events

```rust use web_dom::*;

[no_mangle]

pub fn callback(listener:EventListener,event:Event) -> () { let input = document::queryselector(document(),"input"); let msg = htmlinput::getvalue(input); window::alert(window(),&msg); }

[no_mangle]

pub fn main() -> () { let btn = document::queryselector(document(),"button"); let listener = createeventlistener(); eventtarget::addevent_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

```C extern int globalwindow(); extern void windowalert(char*);

int main(void) { windowalert(globalwindow(),"hello world!"); } ```

```clojure (extern globalgetwindow []) (extern windowgetdocument [window]) (extern documentqueryselector [document query]) (extern htmlcanvasgetcontext [element context]) (extern drawingsetfillstyle [canvas color]) (extern drawingfill_rect [canvas x y w h])

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

(pub defn main [] (let [window (globalgetwindow) document (windowgetdocument window) canvas (documentqueryselector document "#screen") ctx (htmlcanvasgetcontext canvas "2d")] (loop [x 0] (if (< x 3) (do (drawingsetfillstyle ctx (mem32 (+ colors (* 4 x)))) (drawingfill_rect ctx (* x 10) (* x 10) 50 50 ) (recur [x (+ x 1)])))))) ```