Crate vertigo

source ·
Expand description

Vertigo is a library for building reactive web components.

It mainly consists of four parts:

  • Reactive dependencies - A graph of values and clients (micro-subscriptions) that can automatically compute what to refresh after one or more value change(s)
  • Real DOM - No intermediate Virtual DOM mechanism is necessary
  • HTML/CSS macros - Allows to construct Real DOM nodes using HTML and CSS
  • Server-side rendering - Out of the box when using vertigo-cli

§Example 1

use vertigo::{dom, DomNode, Value, bind, main};

#[main]
pub fn app() -> DomNode {
    let count = Value::new(0);

    let increment = bind!(count, || {
        count.change(|value| {
            *value += 1;
        });
    });

    let decrement = bind!(count, || {
        count.change(|value| {
            *value -= 1;
        });
    });

    dom! {
        <html>
            <head/>
            <body>
                <div>
                    <p>"Counter: " { count }</p>
                    <button on_click={decrement}>"-"</button>
                    <button on_click={increment}>"+"</button>
                </div>
            </body>
        </html>
    }
}

§Example 2

use vertigo::{css, component, DomNode, Value, dom, main};

#[component]
pub fn MyMessage(message: Value<String>) {
    dom! {
        <p>
            "Message to the world: "
            { message }
        </p>
    }
}

#[main]
fn app() -> DomNode {
    let message = Value::new("Hello world!".to_string());

    let main_div = css!("
        color: darkblue;
    ");

    dom! {
        <html>
            <head/>
            <body>
                <div css={main_div}>
                    <MyMessage message={message} />
                </div>
            </body>
        </html>
    }
}

To get started you may consider looking at the Tutorial.

Short-links to most commonly used things:

  • dom! - Build DomNode using RSX (HTML-like) syntax
  • css! - Build Css using CSS-like syntax
  • component - Wrap function to be used as component in RSX
  • main - Wrap function to be vertigo entry-point
  • get_driver - Access browser facilities
  • bind! - Auto-clone variables before use
  • Value - Read-write reactive value
  • Computed - Read-only (computed) reactive value
  • router::Router - Hash or history routing

Re-exports§

Modules§

Macros§

  • bind
    Allows to create an event handler based on provided arguments
  • bind_rc
    Allows to create an event handler based on provided arguments which is wrapped in Rc
  • bind_spawn
    Allows to create an event handler based on provided arguments which launches an asynchronous action
  • computed_tuple
    Allows to create Computed<T1, T2, ...> out of Value<T1>, Value<T2>, …
  • css
    Allows to create Css styles for usage in dom! macro.
  • css_block
    Constructs a CSS block that can be manually pushed into existing Css styles instance.
  • document
    Macro that allows to call methods on JavaScript document object
  • dom
    Allows to create DomNode using HTML tags.
  • dom_debug
    Version of dom! macro that additionally emits compiler warning with generated code.
  • dom_element
    Allows to create DomElement using HTML tags.
  • include_static
    Allows to include a static file
  • window
    Macro that allows to call methods on JavaScript window object

Structs§

Enums§

Traits§

Functions§

Type Aliases§

Attribute Macros§

  • component
    Macro which transforms a provided function into a component that can be used in dom! macro
  • main
    Marco that marks an entry point of the app

Derive Macros§

  • AutoJsJson
    Macro for creating JsJson from structures and structures from JsJson.