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! - 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§

pub use log;

Modules§

html_entities: Constants of unicode signs labeled with HTML entities names
inspect: Methods for debugging or testing vertigo components by recreating HTML-like string from dom commands
lazy_cache
prelude
router
struct_mut

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§

ApiImport
AutoMap: A structure similar to HashMap but allows to provide a function create for creating a new value if particular key doesn’t exists.
Computed: A reactive value that is read-only and computed by dependency graph.
Context
Css: CSS styles definition for usable 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
DomId
DomText: A Real DOM representative - text kind
Driver: Main connection to vertigo facilities - dependencies and rendering client (the browser).
DriverConstruct
DropFileEvent
DropFileItem
FutureBox
FutureBoxSend
GraphId
Instant: Monotonically non-decreasing clock using a driver, similar to std::time::Instant.
JsJsonContext
JsJsonObjectBuilder
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.
MemoryBlock
RequestBuilder: Builder for typed requests.
RequestResponse: Result from request made using RequestBuilder.
Value: A reactive value. Basic building block of app state.
WebsocketConnection: Represents websocket connection.

Enums§

AttrGroupValue
AttrValue
Callback
Callback1
CssAttrValue
CssGroup: Css chunk, represented either as static or dynamic string.
DomNode: A Real DOM representative
DriverDomCommand
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.
JsValue: Represents a JavaScript value that can be passed to a JS function.
RequestBody
Resource: The state of the resource.
WebsocketMessage: Websocket message type on which a websocket handler operates.

Constants§

VERTIGO_MOUNT_POINT_PLACEHOLDER: Placeholder where to put public mount point at runtime (default /)
VERTIGO_PUBLIC_BUILD_PATH_PLACEHOLDER: Placeholder where to put public build path at runtime (default /build)

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: Getter for Driver singleton.
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.
wasm_callback

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

Derive Macros§

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

Crate vertigoCopy item path