Leptos: fine-grained reactivity
Signals, SSR and hydration, written in Rust.
Leptos (October 2022) takes a different route to the same React-shaped idea: fine-grained reactivity. A signal is a value that remembers who read it. When it changes, only those readers re-run, so there is no virtual DOM to diff. It targets the browser, both client-side (as here, the csr feature) and with server-side rendering plus hydration.
use leptos::prelude::*;
#[component]
fn App() -> impl IntoView {
let (count, set_count) = signal(0);
view! {
<button on:click=move |_| *set_count.write() += 1>
"clicked " {count} " times"
</button>
}
}
fn main() {
leptos::mount::mount_to_body(App);
}Derived values such as the closure doubled and the Memo called label are just functions of signals. They recompute when, and only when, an input signal changes. The view macro then binds those values directly to DOM text nodes.
use leptos::prelude::*;
#[component]
fn App() -> impl IntoView {
let (count, set_count) = signal(1);
// Derived values re-run only when the signals they read change;
// there is no virtual DOM diff.
let doubled = move || count.get() * 2;
let label = Memo::new(move |_| if count.get() % 2 == 0 { "even" } else { "odd" });
view! {
<button on:click=move |_| set_count.update(|n| *n += 1)>"+1"</button>
<p>{count} " doubled is " {doubled} " and is " {label}</p>
}
}
fn main() {
leptos::mount::mount_to_body(App);
}Both snippets compile for wasm32-unknown-unknown. Leptos depends on wasm-bindgen and web-sys and nothing native, so it is the web-only framework in this book: it renders through the browser, and for a desktop app you would put it inside Tauri. The current release is 0.8.21 with 0.9 in beta, and the ecosystem around it (472 dependents) is the largest of the Rust web frameworks here.