Crate vertigo

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! - Builds DomNode using RSX/rstml (HTML-like) syntax
css! - Builds Css using CSS-like syntax
component - Wraps function to be used as component in RSX
main - Wraps function to be vertigo entry-point
get_driver - Access to browser facilities
bind! - Auto-clones variables before use
Value - Read-write reactive value
Computed - Read-only (computed) reactive value
router::Router - Hash or history routing
store - Wraps function to be used as a store generator

Re-exports§

pub use log;

Modules§

dev
external_api
html_entities: Constants of unicode signs labeled with HTML entities names
lazy_cache
prelude
router

Macros§

bind: Allows to conveniently clone values into closure.
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.
dom: Allows to create DomNode using RSX/rstml (HTML-like) syntax.
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
js: Macro that allows to evaluate pseudo-JavaScript expressions.
js_inner: Used internally by js! macro.
tw: Allows to trace additional tailwind class names.

Structs§

AutoMap: A structure similar to HashMap but allows to provide a function create for creating a new value if particular key doesn’t exists.
ClickEvent: Structure passed as a parameter to callback on on_key_down event.
Computed: A reactive value that is read-only and computed by dependency graph.
Css: CSS styles definition for use in DOM.
Dependencies: A graph of values and clients that can automatically compute what to refresh after one value change.
DomComment: A Real DOM representative - comment kind
DomElement: A Real DOM representative - element kind
DomElementRef: A reference to DomElement.
DomId
DomText: A Real DOM representative - text kind
Driver: Set of functions to communicate with the browser.
DropFileEvent
DropFileItem
Instant: Monotonically non-decreasing clock using a driver, similar to std::time::Instant.
JsJsonContext
JsJsonNumber
KeyDownEvent: Structure passed as a parameter to callback on on_key_down event.
LazyCache: A structure similar to Value but supports Loading/Error states and automatic refresh after defined amount of time.
RequestBuilder: Builder for typed requests.
RequestResponse: Result from request made using RequestBuilder.
TwClass: This represents a tailwind class. Use tw! macro to create one.
Value: A reactive value. Basic building block of app state.
WebsocketConnection: Represents websocket connection.

Enums§

AttrGroupValue
AttrValue
Callback
Callback1
Context
CssAttrValue
CssGroup: Css chunk, represented either as static or dynamic string.
DomNode: A Real DOM representative.
DropResource: A struct used by driver to tidy things up on javascript side after a rust object goes out of scope.
FetchMethod
JsJson: JSON object serialized to travel between JS-WASM boundary.
RequestBody
Resource: The state of the resource.
WebsocketMessage: Websocket message type on which a websocket handler operates.

Traits§

EmbedDom: Can be embedded into dom! macro
JsJsonDeserialize
JsJsonSerialize
Reactive: A trait that tells Something<T> is behaving like a Value<T>.
ToComputed: A trait allowing converting the type into computed.

Functions§

from_json: Deserialize from JsJson to T
get_driver
start_app: Starting point of the app (used by [main] macro, which is preferred)
to_json: Serialize T to JsJson
transaction: Do bunch of operations on dependency graph without triggering anything in between.

Type Aliases§

AttrGroup: Type interpreted as component’s dynamic attributes groups
FetchResult: Result from request made using RequestBuilder.
InstantType: Duration in seconds, returned from Instant methods.

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
store: Wraps a function generating a resource out of parameters, and creates a store.

Derive Macros§

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

Crate vertigo

Crate vertigo Copy item path

§Example 1

§Example 2

Re-exports§

Modules§

Macros§

Structs§

Enums§

Traits§

Functions§

Type Aliases§

Attribute Macros§

Derive Macros§

Crate vertigo