Vertigo - reactive webassembly

Features

• Virtual DOM - Lightweight representation of JavaScript DOM that can be used to optimally update real DOM
• Reactive dependencies - A graph of values and clients that can automatically compute what to refresh after one value change
• HTML/CSS macros - Allows to construct Virtual DOM nodes using HTML and CSS

See Changelog for recent features.

Go to TUTORIAL if you want to try.

Example

Dependencies:

toml vertigo = "0.1.0-beta.2" vertigo-browserdriver = "0.1.0-beta.2"

Code:

```rust use vertigo::{html, Computed, Driver, VDomElement, Value}; use vertigo_browserdriver::prelude::*;

[derive(PartialEq)]

pub struct State { pub count: Value, }

impl State { pub fn new(driver: &Driver) -> Computed { let state = State { count: driver.newvalue(0), }; driver.newcomputed_from(state) } }

pub fn render(appstate: &Computed) -> VDomElement { let state = appstate.get_value();

let increment = {
    let count = state.count.clone();
    move || count.set_value(*count.get_value() + 1)
};

let decrement = {
    let count = state.count.clone();
    move || count.set_value(*count.get_value() - 1)
};

html! {
    <div>
        <p>"Counter: " { *state.count.get_value() }</p>
        <button on_click={decrement}>"-"</button>
        <button on_click={increment}>"+"</button>
    </div>
}

}

[wasmbindgenderive(start)]

pub async fn startapplication() { let driver = DriverBrowser::new(); let state = State::new(&driver); startbrowser_app(driver, state, render).await; } ```

Take a look at More examples here.

Demo App - installation and usage

Make sure you're using nigthly version of rust:

• rustup default nightly

Install cargo-make that takes care of all other dependencies:

• cargo install cargo-make

Build and run project using:

• cargo make demo-start

Eventually terminal will let you know that app is available under http://localhost:3000/

If you want to play around with the code, you can make cargo to watch for your changes:

• cargo make demo-watch

Keep in mind that you still need to refresh page in the browser after project recompiles.

To compile all examples run:

• cargo make examples-build

This will build examples in examples/build directory. Now point your browser to index.html file of a particular example.

A community, soon to grow

• Discord server: https://discord.gg/HAXtTeFrAf