Crate vertigo

Source

Expand description

§Vertigo

A reactive Real-DOM library with SSR for Rust.

MIT or Apache 2.0 licensed

§Features

Reactive dependencies - A graph of values and clients (micro-subscriptions) that can automatically compute what to refresh after one value changes
Real DOM - No intermediate Virtual DOM mechanism is necessary
HTML/CSS macros - Allows to construct Real DOM nodes using HTML and CSS
Tailwind v4 support out of the box
Isomorphic server-side rendering - The same WASM code is used for both client and server (see: vertigo-cli)
Fullstack - Can be mounted into actix-web (see: vertigo-cli)

See Changelog for recent features.

Go to TUTORIAL if you want to try.

For more information go to vertigo home website vertigo.znoj.pl.

§Examples

Dependencies:

vertigo = "0.11"

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, store, Value, dom, main};

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

#[store]
fn state_message() -> Value<String> {
    Value::new("Hello world!".to_string())
}

#[main]
fn app() -> DomNode {
    let main_div = css! {"
        color: darkblue;
    "};

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

Take a look at More examples here.

§Installation of `vertigo-cli` tool

To ease process or development use vertigo-cli tool that allows to build, serve and watch your project.

cargo install --force vertigo-cli

§Demo App

§Prepare

Install cargo-make and vertigo-cli:

cargo install cargo-make vertigo-cli

§Run

Build and run project using:

cargo make demo

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

If you want to play around with the demo code, run:

cargo make demo-watch

It should automatically recompile upon changes and the browser tab should be informed to refresh. Note that this compiles the code in debug mode so the WASM is not optimized.

To run the examples in watch mode (they will run on localhost:4444): cargo make examples-counter or cargo make examples-router or cargo make examples-trafficlights

§A community, soon to grow

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

§Short-links to most commonly used things

DOM creation
- main - Wraps function to be vertigo entry-point
- dom! - Builds DomNode using RSX/rstml (HTML-like) syntax
- css! - Builds Css using CSS-like syntax
- tw! - Wraps tailwind class names
- component - Wraps function to be used as component in RSX
Data storing
- Value - Read-write reactive value
- Computed - Read-only (computed) reactive value
- LazyCache - Lazy cache for fetched resources
- store - Wraps function to be used as a store (singleton) generator
Others
- bind! - Auto-clones variables before use
- get_driver - Access to browser facilities
- router::Router - Hash or history routing

Re-exports§

pub use render::collection::CollectionKey;
pub use log;

Modules§

dev
external_api
html_entities: Constants of unicode signs labeled with HTML entities names
lazy_cache
prelude
render
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 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
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 vertigo::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

§Vertigo

§Features

§Examples

§Installation of vertigo-cli tool

§Demo App

§Prepare

§Run

§A community, soon to grow

§Short-links to most commonly used things

Re-exports§

Modules§

Macros§

Structs§

Enums§

Traits§

Functions§

Type Aliases§

Attribute Macros§

Derive Macros§

Crate vertigo

§Installation of `vertigo-cli` tool