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§
- Constants of unicode signs labeled with HTML entities names
- Methods for debugging or testing vertigo components by recreating HTML-like string from dom commands
Macros§
- Allows to create an event handler based on provided arguments
- Allows to create an event handler based on provided arguments which is wrapped in Rc
- Allows to create an event handler based on provided arguments which launches an asynchronous action
- Allows to create
Computed<T1, T2, ...>
out ofValue<T1>
,Value<T2>
, … - Constructs a CSS block that can be manually pushed into existing Css styles instance.
- Macro that allows to call methods on JavaScript
document
object - Allows to create DomNode using HTML tags.
- Version of dom! macro that additionally emits compiler warning with generated code.
- Allows to create DomElement using HTML tags.
- Allows to include a static file
- Macro that allows to call methods on JavaScript
window
object
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 usable in DOM.
- A graph of values and clients that can automatically compute what to refresh after one value change.
- A Real DOM representative - comment kind
- A Real DOM representative - element kind
- A Real DOM representative - text kind
- Main connection to vertigo facilities - dependencies and rendering client (the browser).
- Monotonically non-decreasing clock using a driver, similar to std::time::Instant.
- Structure passed as a parameter to callback on on_key_down event.
- A structure similar to Value but supports Loading/Error states and automatic refresh after defined amount of time.
- Builder for typed requests.
- Result from request made using RequestBuilder.
- A reactive value. Basic building block of app state.
- Represents websocket connection.
Enums§
- Css chunk, represented either as static or dynamic string.
- A Real DOM representative
- A struct used by driver to tidy things up on javascript side after a rust object goes out of scope.
- JSON object serialized to travel between JS-WASM boundary.
- Represents a JavaScript value that can be passed to a JS function.
- The state of the resource.
- Websocket message type on which a websocket handler operates.
Traits§
- Can be embedded into dom! macro
- A trait that tells
Something<T>
is behaving like aValue<T>
. - A trait allowing converting the type into computed.
Functions§
- Deserialize from JsJson to T
- Getter for Driver singleton.
- Starting point of the app (used by main macro, which is preferred)
- Serialize T to JsJson
- Do bunch of operations on dependency graph without triggering anything in between.
Type Aliases§
- Result from request made using RequestBuilder.
- Duration in seconds, returned from Instant methods.
Attribute Macros§
- Macro which transforms a provided function into a component that can be used in dom! macro
- Marco that marks an entry point of the app
Derive Macros§
- Macro for creating
JsJson
from structures and structures fromJsJson
.