Crate vertigo[][src]

Expand description

Vertigo is a library for building reactive web components.

It mainly consists of three parts:

  • 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

Example

use std::cmp::PartialEq;
use vertigo::{Computed, Driver, VDomElement, Value, html, css_fn};

#[derive(PartialEq)]
pub struct State {
    driver: Driver,

    pub message: Value<String>,
}

impl State {
    pub fn new(driver: &Driver) -> Computed<State> {
        let state = State {
            driver: driver.clone(),
            message: driver.new_value("Hello world".to_string()),
        };

        driver.new_computed_from(state)
    }
}

css_fn! { main_div, "
    color: darkblue;
" }

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

    html! {
        <div css={main_div()}>
            "Message to the world: "
            {state.message.get_value()}
        </div>
    }
}

More description soon! For now, to get started you may consider looking at the Tutorial.

Re-exports

pub use log;

Modules

Macros

Allows to create Css styles for virtual DOM.

Coostructs a CSS block that can be manually pushed into existing Css styles instance.

Allows to define a Css styles factory function for virtual DOM.

Allows to define a Css styles factory function for virtual DOM based on existing function but with added new rules.

Allows to create VDomElement using HTML tags.

Structs

A structure similar to HashMap but allows to provide a function create for creating a new value if particular key doesn’t exists.

A reactive value that is read-only and computed by dependency graph.

CSS styles definition for Virtual DOM.

Main connection to vertigo facilities - dependencies and rendering client (the browser).

Monotonically nondecrasing clock using a driver, similar to std::time::Instant.

A structure similar to Value but supports Loading/Error states and automatic refresh after defined amount of time.

A component is a virtual dom element with render function attached to it.

Virtual DOM node that represents a DOM element, a basic building block.

Virtual DOM node that represents a text.

A reactive value. Basic building block of app state.

Enums

Css chunk, represented either as static or dynamic string.

Virtual DOM node, can be an element, text or a component.

Traits

Trait for embedding custom types into html! macro

Functions

Starting point of the app. Given the driver and root component of the app, it creates necessary vertigo facilities and runs a never-ending future of reactivity.

Type Definitions