vertigo 0.9.0

Reactive Real-DOM library with SSR for Rust
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

# Vertigo

A reactive Real-DOM library with SSR for Rust

[![crates.io](https://img.shields.io/crates/v/vertigo)](https://crates.io/crates/vertigo)
[![Documentation](https://docs.rs/vertigo/badge.svg)](https://docs.rs/vertigo)
![MIT or Apache 2.0 licensed](https://img.shields.io/crates/l/vertigo.svg)
[![Dependency Status](https://deps.rs/crate/vertigo/0.9.0/status.svg)](https://deps.rs/crate/vertigo/0.9.0)
[![CI](https://github.com/vertigo-web/vertigo/actions/workflows/pipeline.yaml/badge.svg)](https://github.com/vertigo-web/vertigo/actions/workflows/pipeline.yaml)
[![downloads](https://img.shields.io/crates/d/vertigo.svg)](https://crates.io/crates/vertigo)

## Features

* **Reactive dependencies** - A graph of values and clients (micro-subscriptions) that can automatically compute what to refresh after one value change
* **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`

See [Changelog](https://github.com/vertigo-web/vertigo/blob/master/CHANGES.md) for recent features.

Go to **[TUTORIAL](https://github.com/vertigo-web/vertigo/blob/master/tutorial.md)** if you want to try.

For more information go to vertigo home website **[vertigo.znoj.pl](https://vertigo.znoj.pl/)**.

## Examples

Dependencies:

```toml
vertigo = "0.9"
```

Example 1:

```rust
use vertigo::{dom, DomNode, Value, store, main};

#[store]
fn state_count() -> Value<u32> {
    Value::new(0)
}

#[main]
pub fn app() -> DomNode {
    dom! {
        <html>
            <head/>
            <body>
                <p>"Counter: " { state_count().get() }</p>
                <button
                    on_click={|| {
                        let current = state_count();
                        current.set(current.get() - 1);
                    }}
                >
                    "-"
                </button>
                <button
                    on_click={|| {
                        let current = state_count();
                        current.set(current.get() + 1);
                    }}
                >
                    "+"
                </button>
            </body>
        </html>
    }
}
```

Example 2:

```rust
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>
    }
}
```

Take a look at **[More examples here](https://github.com/vertigo-web/vertigo/tree/master/examples)**.

## Installation of `vertigo-cli` tool

To ease process or development use
[vertigo-cli](https://github.com/vertigo-web/vertigo/blob/master/crates/vertigo-cli) tool
that allows to _build_, _serve_ and _watch_ your project.

```sh
cargo install --force vertigo-cli
```

## Demo App

### Prepare

Make sure you're using nightly version of rust:

* `rustup default nightly`

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>