This book is intended as an introduction to the Leptos Web framework.
+It will walk through the fundamental concepts you need to build applications,
+beginning with a simple application rendered in the browser, and building toward a
+full-stack application with server-side rendering and hydration.
+
The guide doesn’t assume you know anything about fine-grained reactivity or the
+details of modern Web frameworks. It does assume you are familiar with the Rust
+programming language, HTML, CSS, and the DOM and basic Web APIs.
+
Leptos is most similar to frameworks like Solid (JavaScript)
+and Sycamore (Rust). There are some similarities
+to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and
+Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to
+understand Leptos.
+
You can find more detailed docs for each part of the API at Docs.rs.
+
+
The source code for the book is available here. PRs for typos or clarification are always welcome.
So far, we've only been working with local state in components, and we’ve seen how to coordinate state between parent and child components. On occasion, there are times where people look for a more general solution for global state management that can work throughout an application.
+
In general, you do not need this chapter. The typical pattern is to compose your application out of components, each of which manages its own local state, not to store all state in a global structure. However, there are some cases (like theming, saving user settings, or sharing data between components in different parts of your UI) in which you may want to use some kind of global state management.
+
The three best approaches to global state are
+
+
Using the router to drive global state via the URL
+
Passing signals through context
+
Creating a global state struct and creating lenses into it with create_slice
In many ways, the URL is actually the best way to store global state. It can be accessed from any component, anywhere in your tree. There are native HTML elements like <form> and <a> that exist solely to update the URL. And it persists across page reloads and between devices; you can share a URL with a friend or send it from your phone to your laptop and any state stored in it will be replicated.
+
The next few sections of the tutorial will be about the router, and we’ll get much more into these topics.
+
But for now, we'll just look at options #2 and #3.
In the section on parent-child communication, we saw that you can use provide_context to pass signal from a parent component to a child, and use_context to read it in the child. But provide_context works across any distance. If you want to create a global signal that holds some piece of state, you can provide it and access it via context anywhere in the descendants of the component where you provide it.
+
A signal provided via context only causes reactive updates where it is read, not in any of the components in between, so it maintains the power of fine-grained reactive updates, even at a distance.
+
We start by creating a signal in the root of the app and providing it to
+all its children and descendants using provide_context.
+
#[component]
+fn App() -> impl IntoView {
+ // here we create a signal in the root that can be consumed
+ // anywhere in the app.
+ let (count, set_count) = create_signal(0);
+ // we'll pass the setter to specific components,
+ // but provide the count itself to the whole app via context
+ provide_context(count);
+
+ view! {
+ // SetterButton is allowed to modify the count
+ <SetterButton set_count/>
+ // These consumers can only read from it
+ // But we could give them write access by passing `set_count` if we wanted
+ <FancyMath/>
+ <ListItems/>
+ }
+}
+
<SetterButton/> is the kind of counter we’ve written several times now.
+(See the sandbox below if you don’t understand what I mean.)
+
<FancyMath/> and <ListItems/> both consume the signal we’re providing via
+use_context and do something with it.
+
/// A component that does some "fancy" math with the global count
+#[component]
+fn FancyMath() -> impl IntoView {
+ // here we consume the global count signal with `use_context`
+ let count = use_context::<ReadSignal<u32>>()
+ // we know we just provided this in the parent component
+ .expect("there to be a `count` signal provided");
+ let is_even = move || count() & 1 == 0;
+
+ view! {
+ <div class="consumer blue">
+ "The number "
+ <strong>{count}</strong>
+ {move || if is_even() {
+ " is"
+ } else {
+ " is not"
+ }}
+ " even."
+ </div>
+ }
+}
+
Note that this same pattern can be applied to more complex state. If you have multiple fields you want to update independently, you can do that by providing some struct of signals:
You may find it cumbersome to wrap each field of a structure in a separate signal like this. In some cases, it can be useful to create a plain struct with non-reactive fields, and then wrap that in a signal.
But there’s a problem: because our whole state is wrapped in one signal, updating the value of one field will cause reactive updates in parts of the UI that only depend on the other.
+
let state = expect_context::<RwSignal<GlobalState>>();
+view! {
+ <button on:click=move |_| state.update(|n| *n += 1)>"+1"</button>
+ <p>{move || state.with(|state| state.name.clone())}</p>
+}
+
In this example, clicking the button will cause the text inside <p> to be updated, cloning state.name again! Because signals are the atomic unit of reactivity, updating any field of the signal triggers updates to everything that depends on the signal.
+
There’s a better way. You can take fine-grained, reactive slices by using create_memo or create_slice (which uses create_memo but also provides a setter). “Memoizing” a value means creating a new reactive value which will only update when it changes. “Memoizing a slice” means creating a new reactive value which will only update when some field of the state struct updates.
+
Here, instead of reading from the state signal directly, we create “slices” of that state with fine-grained updates via create_slice. Each slice signal only updates when the particular piece of the larger struct it accesses updates. This means you can create a single root signal, and then take independent, fine-grained slices of it in different components, each of which can update without notifying the others of changes.
+
/// A component that updates the count in the global state.
+#[component]
+fn GlobalStateCounter() -> impl IntoView {
+ let state = expect_context::<RwSignal<GlobalState>>();
+
+ // `create_slice` lets us create a "lens" into the data
+ let (count, set_count) = create_slice(
+
+ // we take a slice *from* `state`
+ state,
+ // our getter returns a "slice" of the data
+ |state| state.count,
+ // our setter describes how to mutate that slice, given a new value
+ |state, n| state.count = n,
+ );
+
+ view! {
+ <div class="consumer blue">
+ <button
+ on:click=move |_| {
+ set_count(count() + 1);
+ }
+ >
+ "Increment Global Count"
+ </button>
+ <br/>
+ <span>"Count is: " {count}</span>
+ </div>
+ }
+}
+
Clicking this button only updates state.count, so if we create another slice
+somewhere else that only takes state.name, clicking the button won’t cause
+that other slice to update. This allows you to combine the benefits of a top-down
+data flow and of fine-grained reactive updates.
+
+
Note: There are some significant drawbacks to this approach. Both signals and memos need to own their values, so a memo will need to clone the field’s value on every change. The most natural way to manage state in a framework like Leptos is always to provide signals that are as locally-scoped and fine-grained as they can be, not to hoist everything up into global state. But when you do need some kind of global state, create_slice can be a useful tool.
use leptos::*;
+
+// So far, we've only been working with local state in components
+// We've only seen how to communicate between parent and child components
+// But there are also more general ways to manage global state
+//
+// The three best approaches to global state are
+// 1. Using the router to drive global state via the URL
+// 2. Passing signals through context
+// 3. Creating a global state struct and creating lenses into it with `create_slice`
+//
+// Option #1: URL as Global State
+// The next few sections of the tutorial will be about the router.
+// So for now, we'll just look at options #2 and #3.
+
+// Option #2: Pass Signals through Context
+//
+// In virtual DOM libraries like React, using the Context API to manage global
+// state is a bad idea: because the entire app exists in a tree, changing
+// some value provided high up in the tree can cause the whole app to render.
+//
+// In fine-grained reactive libraries like Leptos, this is simply not the case.
+// You can create a signal in the root of your app and pass it down to other
+// components using provide_context(). Changing it will only cause rerendering
+// in the specific places it is actually used, not the whole app.
+#[component]
+fn Option2() -> impl IntoView {
+ // here we create a signal in the root that can be consumed
+ // anywhere in the app.
+ let (count, set_count) = create_signal(0);
+ // we'll pass the setter to specific components,
+ // but provide the count itself to the whole app via context
+ provide_context(count);
+
+ view! {
+ <h1>"Option 2: Passing Signals"</h1>
+ // SetterButton is allowed to modify the count
+ <SetterButton set_count/>
+ // These consumers can only read from it
+ // But we could give them write access by passing `set_count` if we wanted
+ <div style="display: flex">
+ <FancyMath/>
+ <ListItems/>
+ </div>
+ }
+}
+
+/// A button that increments our global counter.
+#[component]
+fn SetterButton(set_count: WriteSignal<u32>) -> impl IntoView {
+ view! {
+ <div class="provider red">
+ <button on:click=move |_| set_count.update(|count| *count += 1)>
+ "Increment Global Count"
+ </button>
+ </div>
+ }
+}
+
+/// A component that does some "fancy" math with the global count
+#[component]
+fn FancyMath() -> impl IntoView {
+ // here we consume the global count signal with `use_context`
+ let count = use_context::<ReadSignal<u32>>()
+ // we know we just provided this in the parent component
+ .expect("there to be a `count` signal provided");
+ let is_even = move || count() & 1 == 0;
+
+ view! {
+ <div class="consumer blue">
+ "The number "
+ <strong>{count}</strong>
+ {move || if is_even() {
+ " is"
+ } else {
+ " is not"
+ }}
+ " even."
+ </div>
+ }
+}
+
+/// A component that shows a list of items generated from the global count.
+#[component]
+fn ListItems() -> impl IntoView {
+ // again, consume the global count signal with `use_context`
+ let count = use_context::<ReadSignal<u32>>().expect("there to be a `count` signal provided");
+
+ let squares = move || {
+ (0..count())
+ .map(|n| view! { <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
+ .collect::<Vec<_>>()
+ };
+
+ view! {
+ <div class="consumer green">
+ <ul>{squares}</ul>
+ </div>
+ }
+}
+
+// Option #3: Create a Global State Struct
+//
+// You can use this approach to build a single global data structure
+// that holds the state for your whole app, and then access it by
+// taking fine-grained slices using `create_slice` or `create_memo`,
+// so that changing one part of the state doesn't cause parts of your
+// app that depend on other parts of the state to change.
+
+#[derive(Default, Clone, Debug)]
+struct GlobalState {
+ count: u32,
+ name: String,
+}
+
+#[component]
+fn Option3() -> impl IntoView {
+ // we'll provide a single signal that holds the whole state
+ // each component will be responsible for creating its own "lens" into it
+ let state = create_rw_signal(GlobalState::default());
+ provide_context(state);
+
+ view! {
+ <h1>"Option 3: Passing Signals"</h1>
+ <div class="red consumer" style="width: 100%">
+ <h2>"Current Global State"</h2>
+ <pre>
+ {move || {
+ format!("{:#?}", state.get())
+ }}
+ </pre>
+ </div>
+ <div style="display: flex">
+ <GlobalStateCounter/>
+ <GlobalStateInput/>
+ </div>
+ }
+}
+
+/// A component that updates the count in the global state.
+#[component]
+fn GlobalStateCounter() -> impl IntoView {
+ let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
+
+ // `create_slice` lets us create a "lens" into the data
+ let (count, set_count) = create_slice(
+
+ // we take a slice *from* `state`
+ state,
+ // our getter returns a "slice" of the data
+ |state| state.count,
+ // our setter describes how to mutate that slice, given a new value
+ |state, n| state.count = n,
+ );
+
+ view! {
+ <div class="consumer blue">
+ <button
+ on:click=move |_| {
+ set_count(count() + 1);
+ }
+ >
+ "Increment Global Count"
+ </button>
+ <br/>
+ <span>"Count is: " {count}</span>
+ </div>
+ }
+}
+
+/// A component that updates the count in the global state.
+#[component]
+fn GlobalStateInput() -> impl IntoView {
+ let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
+
+ // this slice is completely independent of the `count` slice
+ // that we created in the other component
+ // neither of them will cause the other to rerun
+ let (name, set_name) = create_slice(
+ // we take a slice *from* `state`
+ state,
+ // our getter returns a "slice" of the data
+ |state| state.name.clone(),
+ // our setter describes how to mutate that slice, given a new value
+ |state, n| state.name = n,
+ );
+
+ view! {
+ <div class="consumer green">
+ <input
+ type="text"
+ prop:value=name
+ on:input=move |ev| {
+ set_name(event_target_value(&ev));
+ }
+ />
+ <br/>
+ <span>"Name is: " {name}</span>
+ </div>
+ }
+}
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+ leptos::mount_to_body(|| view! { <Option2/><Option3/> })
+}
You don’t need to know very much about how the reactive system actually works in order to use the library successfully. But it’s always useful to understand what’s going on behind the scenes once you start working with the framework at an advanced level.
+
The reactive primitives you use are divided into three sets:
+
+
Signals (ReadSignal/WriteSignal, RwSignal, Resource, Trigger) Values you can actively change to trigger reactive updates.
+
Computations (Memos) Values that depend on signals (or other computations) and derive a new reactive value through some pure computation.
+
Effects Observers that listen to changes in some signals or computations and run a function, causing some side effect.
+
+
Derived signals are a kind of non-primitve computation: as plain closures, they simply allow you to refactor some repeated signal-based computation into a reusable function that can be called in multiple places, but they are not represented in the reactive system itself.
+
All the other primitives actually exist in the reactive system as nodes in a reactive graph.
+
Most of the work of the reactive system consists of propagating changes from signals to effects, possibly through some intervening memos.
+
The assumption of the reactive system is that effects (like rendering to the DOM or making a network request) are orders of magnitude more expensive than things like updating a Rust data structure inside your app.
+
So the primary goal of the reactive system is to run effects as infrequently as possible.
+
Leptos does this through the construction of a reactive graph.
+
+
Leptos’s current reactive system is based heavily on the Reactively library for JavaScript. You can read Milo’s article “Super-Charging Fine-Grained Reactivity” for an excellent account of its algorithm, as well as fine-grained reactivity in general—including some beautiful diagrams!
Signals, memos, and effects all share three characteristics:
+
+
Value They have a current value: either the signal’s value, or (for memos and effects) the value returned by the previous run, if any.
+
Sources Any other reactive primitives they depend on. (For signals, this is an empty set.)
+
Subscribers Any other reactive primitives that depend on them. (For effects, this is an empty set.)
+
+
In reality then, signals, memos, and effects are just conventional names for one generic concept of a “node” in a reactive graph. Signals are always “root nodes,” with no sources/parents. Effects are always “leaf nodes,” with no subscribers. Memos typically have both sources and subscribers.
// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+create_effect(move |_| {
+ log!("{}", name_upper());
+});
+
+set_name("Bob");
+
You can easily imagine the reactive graph here: name is the only signal/origin node, the create_effect is the only effect/terminal node, and there’s one intervening memo.
// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(move |_| name.len());
+
+// D
+create_effect(move |_| {
+ log!("len = {}", name_len());
+});
+
+// E
+create_effect(move |_| {
+ log!("name = {}", name_upper());
+});
+
This is also pretty straightforward: a signal source signal (name/A) divides into two parallel tracks: name_upper/B and name_len/C, each of which has an effect that depends on it.
+
__A__
+| |
+B C
+| |
+D E
+
+
Now let’s update the signal.
+
set_name("Bob");
+
We immediately log
+
len = 3
+name = BOB
+
+
Let’s do it again.
+
set_name("Tim");
+
The log should shows
+
name = TIM
+
+
len = 3 does not log again.
+
Remember: the goal of the reactive system is to run effects as infrequently as possible. Changing name from "Bob" to "Tim" will cause each of the memos to re-run. But they will only notify their subscribers if their value has actually changed. "BOB" and "TIM" are different, so that effect runs again. But both names have the length 3, so they do not run again.
One more example, of what’s sometimes called the diamond problem.
+
// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(move |_| name.len());
+
+// D
+create_effect(move |_| {
+ log!("{} is {} characters long", name_upper(), name_len());
+});
+
What does the graph look like for this?
+
__A__
+| |
+B C
+| |
+|__D__|
+
+
You can see why it's called the “diamond problem.” If I’d connected the nodes with straight lines instead of bad ASCII art, it would form a diamond: two memos, each of which depend on a signal, which feed into the same effect.
+
A naive, push-based reactive implementation would cause this effect to run twice, which would be bad. (Remember, our goal is to run effects as infrequently as we can.) For example, you could implement a reactive system such that signals and memos immediately propagate their changes all the way down the graph, through each dependency, essentially traversing the graph depth-first. In other words, updating A would notify B, which would notify D; then A would notify C, which would notify D again. This is both inefficient (D runs twice) and glitchy (D actually runs with the incorrect value for the second memo during its first run.)
Any reactive implementation worth its salt is dedicated to solving this issue. There are a number of different approaches (again, see Milo’s article for an excellent overview).
+
Here’s how ours works, in brief.
+
A reactive node is always in one of three states:
+
+
Clean: it is known not to have changed
+
Check: it is possible it has changed
+
Dirty: it has definitely changed
+
+
Updating a signal Dirty marks that signal Dirty, and marks all its descendants Check, recursively. Any of its descendants that are effects are added to a queue to be re-run.
Now those effects are run. (All of the effects will be marked Check at this point.) Before re-running its computation, the effect checks its parents to see if they are dirty. So
+
+
So D goes to B and checks if it is Dirty.
+
But B is also marked Check. So B does the same thing:
+
+
B goes to A, and finds that it is Dirty.
+
This means B needs to re-run, because one of its sources has changed.
+
B re-runs, generating a new value, and marks itself Clean
+
Because B is a memo, it then checks its prior value against the new value.
+
If they are the same, B returns "no change." Otherwise, it returns "yes, I changed."
+
+
+
If B returned “yes, I changed,” D knows that it definitely needs to run and re-runs immediately before checking any other sources.
+
If B returned “no, I didn’t change,” D continues on to check C (see process above for B.)
+
If neither B nor C has changed, the effect does not need to re-run.
+
If either B or C did change, the effect now re-runs.
+
+
Because the effect is only marked Check once and only queued once, it only runs once.
+
If the naive version was a “push-based” reactive system, simply pushing reactive changes all the way down the graph and therefore running the effect twice, this version could be called “push-pull.” It pushes the Check status all the way down the graph, but then “pulls” its way back up. In fact, for large graphs it may end up bouncing back up and down and left and right on the graph as it tries to determine exactly which nodes need to re-run.
+
Note this important trade-off: Push-based reactivity propagates signal changes more quickly, at the expense of over-re-running memos and effects. Remember: the reactive system is designed to minimize how often you re-run effects, on the (accurate) assumption that side effects are orders of magnitude more expensive than this kind of cache-friendly graph traversal happening entirely inside the library’s Rust code. The measurement of a good reactive system is not how quickly it propagates changes, but how quickly it propagates changes without over-notifying.
Note that signals always notify their children; i.e., a signal is always marked Dirty when it updates, even if its new value is the same as the old value. Otherwise, we’d have to require PartialEq on signals, and this is actually quite an expensive check on some types. (For example, add an unnecessary equality check to something like some_vec_signal.update(|n| n.pop()) when it’s clear that it has in fact changed.)
+
Memos, on the other hand, check whether they change before notifying their children. They only run their calculation once, no matter how many times you .get() the result, but they run whenever their signal sources change. This means that if the memo’s computation is very expensive, you may actually want to memoize its inputs as well, so that the memo only re-calculates when it is sure its inputs have changed.
All of this is cool, and memos are pretty great. But most actual applications have reactive graphs that are quite shallow and quite wide: you might have 100 source signals and 500 effects, but no memos or, in rare case, three or four memos between the signal and the effect. Memos are extremely good at what they do: limiting how often they notify their subscribers that they have changed. But as this description of the reactive system should show, they come with overhead in two forms:
+
+
A PartialEq check, which may or may not be expensive.
+
Added memory cost of storing another node in the reactive system.
+
Added computational cost of reactive graph traversal.
+
+
In cases in which the computation itself is cheaper than this reactive work, you should avoid “over-wrapping” with memos and simply use derived signals. Here’s a great example in which you should never use a memo:
+
let (a, set_a) = create_signal(1);
+// none of these make sense as memos
+let b = move || a() + 2;
+let c = move || b() % 2 == 0;
+let d = move || if c() { "even" } else { "odd" };
+
+set_a(2);
+set_a(3);
+set_a(5);
+
Even though memoizing would technically save an extra calculation of d between setting a to 3 and 5, these calculations are themselves cheaper than the reactive algorithm.
+
At the very most, you might consider memoizing the final node before running some expensive side effect:
+
let text = create_memo(move |_| {
+ d()
+});
+create_effect(move |_| {
+ engrave_text_into_bar_of_gold(&text());
+});
A Resource is a reactive data structure that reflects the current state of an asynchronous task, allowing you to integrate asynchronous Futures into the synchronous reactive system. Rather than waiting for its data to load with .await, you transform the Future into a signal that returns Some(T) if it has resolved, and None if it’s still pending.
+
You do this by using the create_resource function. This takes two arguments:
+
+
a source signal, which will generate a new Future whenever it changes
+
a fetcher function, which takes the data from that signal and returns a Future
+
+
Here’s an example
+
// our source signal: some synchronous, local state
+let (count, set_count) = create_signal(0);
+
+// our resource
+let async_data = create_resource(
+ count,
+ // every time `count` changes, this will run
+ |value| async move {
+ logging::log!("loading data from API");
+ load_data(value).await
+ },
+);
+
To create a resource that simply runs once, you can pass a non-reactive, empty source signal:
+
let once = create_resource(|| (), |_| async move { load_data().await });
+
To access the value you can use .get() or .with(|data| /* */). These work just like .get() and .with() on a signal—get clones the value and returns it, with applies a closure to it—but for any Resource<_, T>, they always return Option<T>, not T: because it’s always possible that your resource is still loading.
+
So, you can show the current state of a resource in your view:
Resources also provide a refetch() method that allows you to manually reload the data (for example, in response to a button click) and a loading() method that returns a ReadSignal<bool> indicating whether the resource is currently loading or not.
use gloo_timers::future::TimeoutFuture;
+use leptos::*;
+
+// Here we define an async function
+// This could be anything: a network request, database read, etc.
+// Here, we just multiply a number by 10
+async fn load_data(value: i32) -> i32 {
+ // fake a one-second delay
+ TimeoutFuture::new(1_000).await;
+ value * 10
+}
+
+#[component]
+fn App() -> impl IntoView {
+ // this count is our synchronous, local state
+ let (count, set_count) = create_signal(0);
+
+ // create_resource takes two arguments after its scope
+ let async_data = create_resource(
+ // the first is the "source signal"
+ count,
+ // the second is the loader
+ // it takes the source signal's value as its argument
+ // and does some async work
+ |value| async move { load_data(value).await },
+ );
+ // whenever the source signal changes, the loader reloads
+
+ // you can also create resources that only load once
+ // just return the unit type () from the source signal
+ // that doesn't depend on anything: we just load it once
+ let stable = create_resource(|| (), |_| async move { load_data(1).await });
+
+ // we can access the resource values with .get()
+ // this will reactively return None before the Future has resolved
+ // and update to Some(T) when it has resolved
+ let async_result = move || {
+ async_data
+ .get()
+ .map(|value| format!("Server returned {value:?}"))
+ // This loading state will only show before the first load
+ .unwrap_or_else(|| "Loading...".into())
+ };
+
+ // the resource's loading() method gives us a
+ // signal to indicate whether it's currently loading
+ let loading = async_data.loading();
+ let is_loading = move || if loading() { "Loading..." } else { "Idle." };
+
+ view! {
+ <button
+ on:click=move |_| {
+ set_count.update(|n| *n += 1);
+ }
+ >
+ "Click me"
+ </button>
+ <p>
+ <code>"stable"</code>": " {move || stable.get()}
+ </p>
+ <p>
+ <code>"count"</code>": " {count}
+ </p>
+ <p>
+ <code>"async_value"</code>": "
+ {async_result}
+ <br/>
+ {is_loading}
+ </p>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
That’s not so bad, but it’s kind of annoying. What if we could invert the flow of control?
+
The <Suspense/> component lets us do exactly that. You give it a fallback prop and children, one or more of which usually involves reading from a resource. Reading from a resource “under” a <Suspense/> (i.e., in one of its children) registers that resource with the <Suspense/>. If it’s still waiting for resources to load, it shows the fallback. When they’ve all loaded, it shows the children.
Every time one of the resources is reloading, the "Loading..." fallback will show again.
+
This inversion of the flow of control makes it easier to add or remove individual resources, as you don’t need to handle the matching yourself. It also unlocks some massive performance improvements during server-side rendering, which we’ll talk about during a later chapter.
In you’re simply trying to wait for some Future to resolve before rendering, you may find the <Await/> component helpful in reducing boilerplate. <Await/> essentially combines a resource with the source argument || () with a <Suspense/> with no fallback.
+
In other words:
+
+
It only polls the Future once, and does not respond to any reactive changes.
+
It does not render anything until the Future resolves.
+
After the Future resolves, it binds its data to whatever variable name you choose and then renders its children with that variable in scope.
+
+
async fn fetch_monkeys(monkey: i32) -> i32 {
+ // maybe this didn't need to be async
+ monkey * 2
+}
+view! {
+ <Await
+ // `future` provides the `Future` to be resolved
+ future=|| fetch_monkeys(3)
+ // the data is bound to whatever variable name you provide
+ let:data
+ >
+ // you receive the data by reference and can use it in your view here
+ <p>{*data} " little monkeys, jumping on the bed."</p>
+ </Await>
+}
You’ll notice in the <Suspense/> example that if you keep reloading the data, it keeps flickering back to "Loading...". Sometimes this is fine. For other times, there’s <Transition/>.
+
<Transition/> behaves exactly the same as <Suspense/>, but instead of falling back every time, it only shows the fallback the first time. On all subsequent loads, it continues showing the old data until the new data are ready. This can be really handy to prevent the flickering effect, and to allow users to continue interacting with your application.
+
This example shows how you can create a simple tabbed contact list with <Transition/>. When you select a new tab, it continues showing the current contact until the new data loads. This can be a much better user experience than constantly falling back to a loading message.
We’ve talked about how to load async data with resources. Resources immediately load data and work closely with <Suspense/> and <Transition/> components to show whether data is loading in your app. But what if you just want to call some arbitrary async function and keep track of what it’s doing?
+
Well, you could always use spawn_local. This allows you to just spawn an async task in a synchronous environment by handing the Future off to the browser (or, on the server, Tokio or whatever other runtime you’re using). But how do you know if it’s still pending? Well, you could just set a signal to show whether it’s loading, and another one to show the result...
+
All of this is true. Or you could use the final async primitive: create_action.
+
Actions and resources seem similar, but they represent fundamentally different things. If you’re trying to load data by running an async function, either once or when some other value changes, you probably want to use create_resource. If you’re trying to occasionally run an async function in response to something like a user clicking a button, you probably want to use create_action.
+
Say we have some async function we want to run.
+
async fn add_todo_request(new_title: &str) -> Uuid {
+ /* do some stuff on the server to add a new todo */
+}
+
create_action takes an async function that takes a reference to a single argument, which you could think of as its “input type.”
+
+
The input is always a single type. If you want to pass in multiple arguments, you can do it with a struct or tuple.
+
// if there's a single argument, just use that
+let action1 = create_action(|input: &String| {
+ let input = input.clone();
+ async move { todo!() }
+});
+
+// if there are no arguments, use the unit type `()`
+let action2 = create_action(|input: &()| async { todo!() });
+
+// if there are multiple arguments, use a tuple
+let action3 = create_action(
+ |input: &(usize, String)| async { todo!() }
+);
+
Because the action function takes a reference but the Future needs to have a 'static lifetime, you’ll usually need to clone the value to pass it into the Future. This is admittedly awkward but it unlocks some powerful features like optimistic UI. We’ll see a little more about that in future chapters.
+
+
So in this case, all we need to do to create an action is
+
let add_todo_action = create_action(|input: &String| {
+ let input = input.to_owned();
+ async move { add_todo_request(&input).await }
+});
+
Rather than calling add_todo_action directly, we’ll call it with .dispatch(), as in
You can do this from an event listener, a timeout, or anywhere; because .dispatch() isn’t an async function, it can be called from a synchronous context.
+
Actions provide access to a few signals that synchronize between the asynchronous action you’re calling and the synchronous reactive system:
This makes it easy to track the current state of your request, show a loading indicator, or do “optimistic UI” based on the assumption that the submission will succeed.
+
let input_ref = create_node_ref::<Input>();
+
+view! {
+ <form
+ on:submit=move |ev| {
+ ev.prevent_default(); // don't reload the page...
+ let input = input_ref.get().expect("input to exist");
+ add_todo_action.dispatch(input.value());
+ }
+ >
+ <label>
+ "What do you need to do?"
+ <input type="text"
+ node_ref=input_ref
+ />
+ </label>
+ <button type="submit">"Add Todo"</button>
+ </form>
+ // use our loading state
+ <p>{move || pending().then("Loading...")}</p>
+}
+
Now, there’s a chance this all seems a little over-complicated, or maybe too restricted. I wanted to include actions here, alongside resources, as the missing piece of the puzzle. In a real Leptos app, you’ll actually most often use actions alongside server functions, create_server_action, and the <ActionForm/> component to create really powerful progressively-enhanced forms. So if this primitive seems useless to you... Don’t worry! Maybe it will make sense later. (Or check out our todo_app_sqlite example now.)
use gloo_timers::future::TimeoutFuture;
+use leptos::{html::Input, *};
+use uuid::Uuid;
+
+// Here we define an async function
+// This could be anything: a network request, database read, etc.
+// Think of it as a mutation: some imperative async action you run,
+// whereas a resource would be some async data you load
+async fn add_todo(text: &str) -> Uuid {
+ _ = text;
+ // fake a one-second delay
+ TimeoutFuture::new(1_000).await;
+ // pretend this is a post ID or something
+ Uuid::new_v4()
+}
+
+#[component]
+fn App() -> impl IntoView {
+ // an action takes an async function with single argument
+ // it can be a simple type, a struct, or ()
+ let add_todo = create_action(|input: &String| {
+ // the input is a reference, but we need the Future to own it
+ // this is important: we need to clone and move into the Future
+ // so it has a 'static lifetime
+ let input = input.to_owned();
+ async move { add_todo(&input).await }
+ });
+
+ // actions provide a bunch of synchronous, reactive variables
+ // that tell us different things about the state of the action
+ let submitted = add_todo.input();
+ let pending = add_todo.pending();
+ let todo_id = add_todo.value();
+
+ let input_ref = create_node_ref::<Input>();
+
+ view! {
+ <form
+ on:submit=move |ev| {
+ ev.prevent_default(); // don't reload the page...
+ let input = input_ref.get().expect("input to exist");
+ add_todo.dispatch(input.value());
+ }
+ >
+ <label>
+ "What do you need to do?"
+ <input type="text"
+ node_ref=input_ref
+ />
+ </label>
+ <button type="submit">"Add Todo"</button>
+ </form>
+ <p>{move || pending().then(|| "Loading...")}</p>
+ <p>
+ "Submitted: "
+ <code>{move || format!("{:#?}", submitted())}</code>
+ </p>
+ <p>
+ "Pending: "
+ <code>{move || format!("{:#?}", pending())}</code>
+ </p>
+ <p>
+ "Todo ID: "
+ <code>{move || format!("{:#?}", todo_id())}</code>
+ </p>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
So far we’ve only been working with synchronous users interfaces: You provide some input,
+the app immediately processes it and updates the interface. This is great, but is a tiny
+subset of what web applications do. In particular, most web apps have to deal with some kind of asynchronous data loading, usually loading something from an API.
+
Asynchronous data is notoriously hard to integrate with the synchronous parts of your code. Leptos provides a cross-platform spawn_local function that makes it easy to run a Future, but there’s much more to it than that.
+
In this chapter, we’ll see how Leptos helps smooth out that process for you.
So far, everything we’ve written has been rendered almost entirely in the browser. When we create an app using Trunk, it’s served using a local development server. If you build it for production and deploy it, it’s served by whatever server or CDN you’re using. In either case, what’s served is an HTML page with
+
+
the URL of your Leptos app, which has been compiled to WebAssembly (WASM)
+
the URL of the JavaScript used to initialize this WASM blob
+
an empty <body> element
+
+
When the JS and WASM have loaded, Leptos will render your app into the <body>. This means that nothing appears on the screen until JS/WASM have loaded and run. This has some drawbacks:
+
+
It increases load time, as your user’s screen is blank until additional resources have been downloaded.
+
It’s bad for SEO, as load times are longer and the HTML you serve has no meaningful content.
+
It’s broken for users for whom JS/WASM don’t load for some reason (e.g., they’re on a train and just went into a tunnel before WASM finished loading; they’re using an older device that doesn’t support WASM; they have JavaScript or WASM turned off for some reason; etc.)
+
+
These downsides apply across the web ecosystem, but especially to WASM apps.
+
However, depending the on the requirements of your project, you may be fine with these limitations.
+
If you just want to deploy your Client-Side Rendered website, skip ahead to the chapter on "Deployment" - there, you'll find directions on how best to deploy your Leptos CSR site.
+
But what do you do if you want to return more than just an empty <body> tag in your index.html page? Use “Server-Side Rendering”!
+
Whole books could be (and probably have been) written about this topic, but at its core, it’s really simple: rather than returning an empty <body> tag, with SSR, you'll return an initial HTML page that reflects the actual starting state of your app or site, so that while JS/WASM are loading, and until they load, the user can access the plain HTML version.
+
Part 2 of this book, on Leptos SSR, will cover this topic in some detail!
One of the primary downsides of deploying a Rust/WebAssembly frontend app is that splitting a WASM file into smaller chunks to be dynamically loaded is significantly more difficult than splitting a JavaScript bundle. There have been experiments like wasm-split in the Emscripten ecosystem but at present there’s no way to split and dynamically load a Rust/wasm-bindgen binary. This means that the whole WASM binary needs to be loaded before your app becomes interactive. Because the WASM format is designed for streaming compilation, WASM files are much faster to compile per kilobyte than JavaScript files. (For a deeper look, you can read this great article from the Mozilla team on streaming WASM compilation.)
+
Still, it’s important to ship the smallest WASM binary to users that you can, as it will reduce their network usage and make your app interactive as quickly as possible.
This will hyper-optimize the WASM for your release build for size, while keeping your server build optimized for speed. (For a pure client-rendered app without server considerations, just use the [profile.wasm-release] block as your [profile.release].)
+
+
+
Always serve compressed WASM in production. WASM tends to compress very well, typically shrinking to less than 50% its uncompressed size, and it’s trivial to enable compression for static files being served from Actix or Axum.
+
+
+
If you’re using nightly Rust, you can rebuild the standard library with this same profile rather than the prebuilt standard library that’s distributed with the wasm32-unknown-unknown target.
+
+
+
To do this, create a file in your project at .cargo/config.toml
Note that if you're using this with SSR too, the same Cargo profile will be applied. You'll need to explicitly specify your target:
+
[build]
+target = "x86_64-unknown-linux-gnu" # or whatever
+
+
Also note that in some cases, the cfg feature has_std will not be set, which may cause build errors with some dependencies which check for has_std. You may fix any build errors due to this by adding:
+
[build]
+rustflags = ["--cfg=has_std"]
+
+
And you'll need to add panic = "abort" to [profile.release] in Cargo.toml. Note that this applies the same build-std and panic settings to your server binary, which may not be desirable. Some further exploration is probably needed here.
+
+
One of the sources of binary size in WASM binaries can be serde serialization/deserialization code. Leptos uses serde by default to serialize and deserialize resources created with create_resource. You might try experimenting with the miniserde and serde-lite features, which allow you to use those crates for serialization and deserialization instead; each only implements a subset of serde’s functionality, but typically optimizes for size over speed.
There are certain crates that tend to inflate binary sizes. For example, the regex crate with its default features adds about 500kb to a WASM binary (largely because it has to pull in Unicode table data!). In a size-conscious setting, you might consider avoiding regexes in general, or even dropping down and calling browser APIs to use the built-in regex engine instead. (This is what leptos_router does on the few occasions it needs a regular expression.)
+
In general, Rust’s commitment to runtime performance is sometimes at odds with a commitment to a small binary. For example, Rust monomorphizes generic functions, meaning it creates a distinct copy of the function for each generic type it’s called with. This is significantly faster than dynamic dispatch, but increases binary size. Leptos tries to balance runtime performance with binary size considerations pretty carefully; but you might find that writing code that uses many generics tends to increase binary size. For example, if you have a generic component with a lot of code in its body and call it with four different types, remember that the compiler could include four copies of that same code. Refactoring to use a concrete inner function or helper can often maintain performance and ergonomics while reducing binary size.
Remember that in a server-rendered app, JS bundle size/WASM binary size affects only one thing: time to interactivity on the first load. This is very important to a good user experience: nobody wants to click a button three times and have it do nothing because the interactive code is still loading — but it's not the only important measure.
+
It’s especially worth remembering that streaming in a single WASM binary means all subsequent navigations are nearly instantaneous, depending only on any additional data loading. Precisely because your WASM binary is not bundle split, navigating to a new route does not require loading additional JS/WASM, as it does in nearly every JavaScript framework. Is this copium? Maybe. Or maybe it’s just an honest trade-off between the two approaches!
+
Always take the opportunity to optimize the low-hanging fruit in your application. And always test your app under real circumstances with real user network speeds and devices before making any heroic efforts.
There are as many ways to deploy a web application as there are developers, let alone applications. But there are a couple useful tips to keep in mind when deploying an app.
Remember: Always deploy Rust apps built in --release mode, not debug mode. This has a huge effect on both performance and binary size.
+
Test locally in release mode as well. The framework applies certain optimizations in release mode that it does not apply in debug mode, so it’s possible for bugs to surface at this point. (If your app behaves differently or you do encounter a bug, it’s likely a framework-level bug and you should open a GitHub issue with a reproduction.)
+
See the chapter on "Optimizing WASM Binary Size" for additional tips and tricks to further improve the time-to-interactive metric for your WASM app on first load.
+
+
+
We asked users to submit their deployment setups to help with this chapter. I’ll quote from them below, but you can read the full thread here.
If you’ve been building an app that only uses client-side rendering, working with Trunk as a dev server and build tool, the process is quite easy.
+
trunk build --release
+
+
trunk build will create a number of build artifacts in a dist/ directory. Publishing dist somewhere online should be all you need to deploy your app. This should work very similarly to deploying any JavaScript application.
The most popular way for people to deploy full-stack apps built with cargo-leptos is to use a cloud hosting service that supports deployment via a Docker build. Here’s a sample Dockerfile, which is based on the one we use to deploy the Leptos website.
+
# Get started with a build env with Rust nightly
+FROM rustlang/rust:nightly-bullseye as builder
+
+# If you’re using stable, use this instead
+# FROM rust:1.70-bullseye as builder
+
+# Install cargo-binstall, which makes it easier to install other
+# cargo extensions like cargo-leptos
+RUN wget https://github.com/cargo-bins/cargo-binstall/releases/latest/download/cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN tar -xvf cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN cp cargo-binstall /usr/local/cargo/bin
+
+# Install cargo-leptos
+RUN cargo binstall cargo-leptos -y
+
+# Add the WASM target
+RUN rustup target add wasm32-unknown-unknown
+
+# Make an /app dir, which everything will eventually live in
+RUN mkdir -p /app
+WORKDIR /app
+COPY . .
+
+# Build the app
+RUN cargo leptos build --release -vv
+
+FROM rustlang/rust:nightly-bullseye as runner
+# Copy the server binary to the /app directory
+COPY --from=builder /app/target/release/leptos-start /app/
+# /target/site contains our JS/WASM/CSS, etc.
+COPY --from=builder /app/target/site /app/site
+# Copy Cargo.toml if it’s needed at runtime
+COPY --from=builder /app/Cargo.toml /app/
+WORKDIR /app
+
+# Set any required env variables and
+ENV RUST_LOG="info"
+ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
+ENV LEPTOS_SITE_ROOT="site"
+EXPOSE 8080
+# Run the server
+CMD ["/app/leptos_start"]
+
+
+
diff --git a/elasticlunr.min.js b/elasticlunr.min.js
new file mode 100644
index 0000000..94b20dd
--- /dev/null
+++ b/elasticlunr.min.js
@@ -0,0 +1,10 @@
+/**
+ * elasticlunr - http://weixsong.github.io
+ * Lightweight full-text search engine in Javascript for browser search and offline search. - 0.9.5
+ *
+ * Copyright (C) 2017 Oliver Nightingale
+ * Copyright (C) 2017 Wei Song
+ * MIT Licensed
+ * @license
+ */
+!function(){function e(e){if(null===e||"object"!=typeof e)return e;var t=e.constructor();for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="0.9.5",lunr=t,t.utils={},t.utils.warn=function(e){return function(t){e.console&&console.warn&&console.warn(t)}}(this),t.utils.toString=function(e){return void 0===e||null===e?"":e.toString()},t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var e=Array.prototype.slice.call(arguments),t=e.pop(),n=e;if("function"!=typeof t)throw new TypeError("last argument must be a function");n.forEach(function(e){this.hasHandler(e)||(this.events[e]=[]),this.events[e].push(t)},this)},t.EventEmitter.prototype.removeListener=function(e,t){if(this.hasHandler(e)){var n=this.events[e].indexOf(t);-1!==n&&(this.events[e].splice(n,1),0==this.events[e].length&&delete this.events[e])}},t.EventEmitter.prototype.emit=function(e){if(this.hasHandler(e)){var t=Array.prototype.slice.call(arguments,1);this.events[e].forEach(function(e){e.apply(void 0,t)},this)}},t.EventEmitter.prototype.hasHandler=function(e){return e in this.events},t.tokenizer=function(e){if(!arguments.length||null===e||void 0===e)return[];if(Array.isArray(e)){var n=e.filter(function(e){return null===e||void 0===e?!1:!0});n=n.map(function(e){return t.utils.toString(e).toLowerCase()});var i=[];return n.forEach(function(e){var n=e.split(t.tokenizer.seperator);i=i.concat(n)},this),i}return e.toString().trim().toLowerCase().split(t.tokenizer.seperator)},t.tokenizer.defaultSeperator=/[\s\-]+/,t.tokenizer.seperator=t.tokenizer.defaultSeperator,t.tokenizer.setSeperator=function(e){null!==e&&void 0!==e&&"object"==typeof e&&(t.tokenizer.seperator=e)},t.tokenizer.resetSeperator=function(){t.tokenizer.seperator=t.tokenizer.defaultSeperator},t.tokenizer.getSeperator=function(){return t.tokenizer.seperator},t.Pipeline=function(){this._queue=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in t.Pipeline.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[n]=e},t.Pipeline.getRegisteredFunction=function(e){return e in t.Pipeline.registeredFunctions!=!0?null:t.Pipeline.registeredFunctions[e]},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.getRegisteredFunction(e);if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._queue.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._queue.indexOf(e);if(-1===i)throw new Error("Cannot find existingFn");this._queue.splice(i+1,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._queue.indexOf(e);if(-1===i)throw new Error("Cannot find existingFn");this._queue.splice(i,0,n)},t.Pipeline.prototype.remove=function(e){var t=this._queue.indexOf(e);-1!==t&&this._queue.splice(t,1)},t.Pipeline.prototype.run=function(e){for(var t=[],n=e.length,i=this._queue.length,o=0;n>o;o++){for(var r=e[o],s=0;i>s&&(r=this._queue[s](r,o,e),void 0!==r&&null!==r);s++);void 0!==r&&null!==r&&t.push(r)}return t},t.Pipeline.prototype.reset=function(){this._queue=[]},t.Pipeline.prototype.get=function(){return this._queue},t.Pipeline.prototype.toJSON=function(){return this._queue.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Index=function(){this._fields=[],this._ref="id",this.pipeline=new t.Pipeline,this.documentStore=new t.DocumentStore,this.index={},this.eventEmitter=new t.EventEmitter,this._idfCache={},this.on("add","remove","update",function(){this._idfCache={}}.bind(this))},t.Index.prototype.on=function(){var e=Array.prototype.slice.call(arguments);return this.eventEmitter.addListener.apply(this.eventEmitter,e)},t.Index.prototype.off=function(e,t){return this.eventEmitter.removeListener(e,t)},t.Index.load=function(e){e.version!==t.version&&t.utils.warn("version mismatch: current "+t.version+" importing "+e.version);var n=new this;n._fields=e.fields,n._ref=e.ref,n.documentStore=t.DocumentStore.load(e.documentStore),n.pipeline=t.Pipeline.load(e.pipeline),n.index={};for(var i in e.index)n.index[i]=t.InvertedIndex.load(e.index[i]);return n},t.Index.prototype.addField=function(e){return this._fields.push(e),this.index[e]=new t.InvertedIndex,this},t.Index.prototype.setRef=function(e){return this._ref=e,this},t.Index.prototype.saveDocument=function(e){return this.documentStore=new t.DocumentStore(e),this},t.Index.prototype.addDoc=function(e,n){if(e){var n=void 0===n?!0:n,i=e[this._ref];this.documentStore.addDoc(i,e),this._fields.forEach(function(n){var o=this.pipeline.run(t.tokenizer(e[n]));this.documentStore.addFieldLength(i,n,o.length);var r={};o.forEach(function(e){e in r?r[e]+=1:r[e]=1},this);for(var s in r){var u=r[s];u=Math.sqrt(u),this.index[n].addToken(s,{ref:i,tf:u})}},this),n&&this.eventEmitter.emit("add",e,this)}},t.Index.prototype.removeDocByRef=function(e){if(e&&this.documentStore.isDocStored()!==!1&&this.documentStore.hasDoc(e)){var t=this.documentStore.getDoc(e);this.removeDoc(t,!1)}},t.Index.prototype.removeDoc=function(e,n){if(e){var n=void 0===n?!0:n,i=e[this._ref];this.documentStore.hasDoc(i)&&(this.documentStore.removeDoc(i),this._fields.forEach(function(n){var o=this.pipeline.run(t.tokenizer(e[n]));o.forEach(function(e){this.index[n].removeToken(e,i)},this)},this),n&&this.eventEmitter.emit("remove",e,this))}},t.Index.prototype.updateDoc=function(e,t){var t=void 0===t?!0:t;this.removeDocByRef(e[this._ref],!1),this.addDoc(e,!1),t&&this.eventEmitter.emit("update",e,this)},t.Index.prototype.idf=function(e,t){var n="@"+t+"/"+e;if(Object.prototype.hasOwnProperty.call(this._idfCache,n))return this._idfCache[n];var i=this.index[t].getDocFreq(e),o=1+Math.log(this.documentStore.length/(i+1));return this._idfCache[n]=o,o},t.Index.prototype.getFields=function(){return this._fields.slice()},t.Index.prototype.search=function(e,n){if(!e)return[];e="string"==typeof e?{any:e}:JSON.parse(JSON.stringify(e));var i=null;null!=n&&(i=JSON.stringify(n));for(var o=new t.Configuration(i,this.getFields()).get(),r={},s=Object.keys(e),u=0;u0&&t.push(e);for(var i in n)"docs"!==i&&"df"!==i&&this.expandToken(e+i,t,n[i]);return t},t.InvertedIndex.prototype.toJSON=function(){return{root:this.root}},t.Configuration=function(e,n){var e=e||"";if(void 0==n||null==n)throw new Error("fields should not be null");this.config={};var i;try{i=JSON.parse(e),this.buildUserConfig(i,n)}catch(o){t.utils.warn("user configuration parse failed, will use default configuration"),this.buildDefaultConfig(n)}},t.Configuration.prototype.buildDefaultConfig=function(e){this.reset(),e.forEach(function(e){this.config[e]={boost:1,bool:"OR",expand:!1}},this)},t.Configuration.prototype.buildUserConfig=function(e,n){var i="OR",o=!1;if(this.reset(),"bool"in e&&(i=e.bool||i),"expand"in e&&(o=e.expand||o),"fields"in e)for(var r in e.fields)if(n.indexOf(r)>-1){var s=e.fields[r],u=o;void 0!=s.expand&&(u=s.expand),this.config[r]={boost:s.boost||0===s.boost?s.boost:1,bool:s.bool||i,expand:u}}else t.utils.warn("field name in user configuration not found in index instance fields");else this.addAllFields2UserConfig(i,o,n)},t.Configuration.prototype.addAllFields2UserConfig=function(e,t,n){n.forEach(function(n){this.config[n]={boost:1,bool:e,expand:t}},this)},t.Configuration.prototype.get=function(){return this.config},t.Configuration.prototype.reset=function(){this.config={}},lunr.SortedSet=function(){this.length=0,this.elements=[]},lunr.SortedSet.load=function(e){var t=new this;return t.elements=e,t.length=e.length,t},lunr.SortedSet.prototype.add=function(){var e,t;for(e=0;e1;){if(r===e)return o;e>r&&(t=o),r>e&&(n=o),i=n-t,o=t+Math.floor(i/2),r=this.elements[o]}return r===e?o:-1},lunr.SortedSet.prototype.locationFor=function(e){for(var t=0,n=this.elements.length,i=n-t,o=t+Math.floor(i/2),r=this.elements[o];i>1;)e>r&&(t=o),r>e&&(n=o),i=n-t,o=t+Math.floor(i/2),r=this.elements[o];return r>e?o:e>r?o+1:void 0},lunr.SortedSet.prototype.intersect=function(e){for(var t=new lunr.SortedSet,n=0,i=0,o=this.length,r=e.length,s=this.elements,u=e.elements;;){if(n>o-1||i>r-1)break;s[n]!==u[i]?s[n]u[i]&&i++:(t.add(s[n]),n++,i++)}return t},lunr.SortedSet.prototype.clone=function(){var e=new lunr.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},lunr.SortedSet.prototype.union=function(e){var t,n,i;this.length>=e.length?(t=this,n=e):(t=e,n=this),i=t.clone();for(var o=0,r=n.toArray();o
+
+
+
+
diff --git a/fonts/OPEN-SANS-LICENSE.txt b/fonts/OPEN-SANS-LICENSE.txt
new file mode 100644
index 0000000..d645695
--- /dev/null
+++ b/fonts/OPEN-SANS-LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
diff --git a/fonts/SOURCE-CODE-PRO-LICENSE.txt b/fonts/SOURCE-CODE-PRO-LICENSE.txt
new file mode 100644
index 0000000..366206f
--- /dev/null
+++ b/fonts/SOURCE-CODE-PRO-LICENSE.txt
@@ -0,0 +1,93 @@
+Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/fonts/fonts.css b/fonts/fonts.css
new file mode 100644
index 0000000..858efa5
--- /dev/null
+++ b/fonts/fonts.css
@@ -0,0 +1,100 @@
+/* Open Sans is licensed under the Apache License, Version 2.0. See http://www.apache.org/licenses/LICENSE-2.0 */
+/* Source Code Pro is under the Open Font License. See https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL */
+
+/* open-sans-300 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Open Sans Light'), local('OpenSans-Light'),
+ url('open-sans-v17-all-charsets-300.woff2') format('woff2');
+}
+
+/* open-sans-300italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 300;
+ src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
+ url('open-sans-v17-all-charsets-300italic.woff2') format('woff2');
+}
+
+/* open-sans-regular - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Open Sans Regular'), local('OpenSans-Regular'),
+ url('open-sans-v17-all-charsets-regular.woff2') format('woff2');
+}
+
+/* open-sans-italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 400;
+ src: local('Open Sans Italic'), local('OpenSans-Italic'),
+ url('open-sans-v17-all-charsets-italic.woff2') format('woff2');
+}
+
+/* open-sans-600 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+ url('open-sans-v17-all-charsets-600.woff2') format('woff2');
+}
+
+/* open-sans-600italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 600;
+ src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
+ url('open-sans-v17-all-charsets-600italic.woff2') format('woff2');
+}
+
+/* open-sans-700 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Open Sans Bold'), local('OpenSans-Bold'),
+ url('open-sans-v17-all-charsets-700.woff2') format('woff2');
+}
+
+/* open-sans-700italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 700;
+ src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+ url('open-sans-v17-all-charsets-700italic.woff2') format('woff2');
+}
+
+/* open-sans-800 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 800;
+ src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
+ url('open-sans-v17-all-charsets-800.woff2') format('woff2');
+}
+
+/* open-sans-800italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: italic;
+ font-weight: 800;
+ src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
+ url('open-sans-v17-all-charsets-800italic.woff2') format('woff2');
+}
+
+/* source-code-pro-500 - latin_vietnamese_latin-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+ font-family: 'Source Code Pro';
+ font-style: normal;
+ font-weight: 500;
+ src: url('source-code-pro-v11-all-charsets-500.woff2') format('woff2');
+}
diff --git a/fonts/open-sans-v17-all-charsets-300.woff2 b/fonts/open-sans-v17-all-charsets-300.woff2
new file mode 100644
index 0000000..9f51be3
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-300.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-300italic.woff2 b/fonts/open-sans-v17-all-charsets-300italic.woff2
new file mode 100644
index 0000000..2f54544
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-300italic.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-600.woff2 b/fonts/open-sans-v17-all-charsets-600.woff2
new file mode 100644
index 0000000..f503d55
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-600.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-600italic.woff2 b/fonts/open-sans-v17-all-charsets-600italic.woff2
new file mode 100644
index 0000000..c99aabe
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-600italic.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-700.woff2 b/fonts/open-sans-v17-all-charsets-700.woff2
new file mode 100644
index 0000000..421a1ab
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-700.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-700italic.woff2 b/fonts/open-sans-v17-all-charsets-700italic.woff2
new file mode 100644
index 0000000..12ce3d2
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-700italic.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-800.woff2 b/fonts/open-sans-v17-all-charsets-800.woff2
new file mode 100644
index 0000000..c94a223
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-800.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-800italic.woff2 b/fonts/open-sans-v17-all-charsets-800italic.woff2
new file mode 100644
index 0000000..eed7d3c
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-800italic.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-italic.woff2 b/fonts/open-sans-v17-all-charsets-italic.woff2
new file mode 100644
index 0000000..398b68a
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-italic.woff2 differ
diff --git a/fonts/open-sans-v17-all-charsets-regular.woff2 b/fonts/open-sans-v17-all-charsets-regular.woff2
new file mode 100644
index 0000000..8383e94
Binary files /dev/null and b/fonts/open-sans-v17-all-charsets-regular.woff2 differ
diff --git a/fonts/source-code-pro-v11-all-charsets-500.woff2 b/fonts/source-code-pro-v11-all-charsets-500.woff2
new file mode 100644
index 0000000..7222456
Binary files /dev/null and b/fonts/source-code-pro-v11-all-charsets-500.woff2 differ
diff --git a/getting_started/community_crates.html b/getting_started/community_crates.html
new file mode 100644
index 0000000..5f24b86
--- /dev/null
+++ b/getting_started/community_crates.html
@@ -0,0 +1,244 @@
+
+
+
+
+
+ The Leptos Community and leptos-* Crates
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
One final note before we get to building with Leptos: if you haven't already, feel free to join the growing community on the Leptos Discord and on Github. Our Discord channel in particular is very active and friendly - we'd love to have you there!
+
+
+
Note
+
+
+
+
If you find a chapter or an explanation that isn't clear while you're working your way through the Leptos book, just mention it in the "docs-and-education" channel or ask a question in "help" so we can clear things up and update the book for others.
+
+
+
As you get further along in your Leptos journey and find that you have questions about "how to do 'x' with Leptos", then search the Discord "help" channel to see if a similar question has been asked before, or feel free to post your own question - the community is quite helpful and very responsive.
+
The "Discussions" on Github are also a great place for asking questions and keeping up with Leptos announcements.
+
And of course, if you run into any bugs while developing with Leptos or would like to make a feature request (or contribute a bug fix / new feature), open up an issue on the Github issue tracker.
The community has built a growing number of Leptos-related crates that will help you get productive with Leptos projects more quickly - check out the list of crates built on top of Leptos and contributed by the community on the Awesome Leptos repo on Github.
+
If you want to find the newest, up-and-coming Leptos-related crates, check out the "Tools and Libraries" section of the Leptos Discord. In that section, there are channels for the Leptos view! macro formatter (in the "leptosfmt" channel); there's a channel for the utility library "leptos-use"; another channel for the UI component libary "leptonic"; and a "libraries" channel where new leptos-* crates are discussed before making their way into the growing list of crates and resources available on Awesome Leptos.
There are two basic paths to getting started with Leptos:
+
+
+
Client-side rendering (CSR) with Trunk - a great option if you just want to make a snappy website with Leptos, or work with a pre-existing server or API.
+In CSR mode, Trunk compiles your Leptos app to WebAssembly (WASM) and runs it in the browser like a typical Javascript single-page app (SPA). The advantages of Leptos CSR include faster build times and a quicker iterative development cycle, as well as a simpler mental model and more options for deploying your app. CSR apps do come with some disadvantages: initial load times for your end users are slower compared to a server-side rendering approach, and the usual SEO challenges that come along with using a JS single-page app model apply to Leptos CSR apps as well. Also note that, under the hood, an auto-generated snippet of JS is used to load the Leptos WASM bundle, so JS must be enabled on the client device for your CSR app to display properly. As with all software engineering, there are trade-offs here you'll need to consider.
+
+
+
Full-stack, server-side rendering (SSR) with cargo-leptos - SSR is a great option for building CRUD-style websites and custom web apps if you want Rust powering both your frontend and backend.
+With the Leptos SSR option, your app is rendered to HTML on the server and sent down to the browser; then, WebAssembly is used to instrument the HTML so your app becomes interactive - this process is called 'hydration'. On the server side, Leptos SSR apps integrate closely with your choice of either Actix-web or Axum server libraries, so you can leverage those communities' crates to help build out your Leptos server.
+The advantages of taking the SSR route with Leptos include helping you get the best initial load times and optimal SEO scores for your web app. SSR apps can also dramatically simplify working across the server/client boundary via a Leptos feature called "server functions", which lets you transparently call functions on the server from your client code (more on this feature later). Full-stack SSR isn't all rainbows and butterflies, though - disadvantages include a slower developer iteration loop (because you need to recompile both the server and client when making Rust code changes), as well as some added complexity that comes along with hydration.
+
+
+
By the end of the book, you should have a good idea of which trade-offs to make and which route to take - CSR or SSR - depending on your project's requirements.
+
In Part 1 of this book, we'll start with client-side rendering Leptos sites and building reactive UI's using Trunk to serve our JS and WASM bundle to the browser.
+
We’ll introduce cargo-leptos in Part 2 of this book, which is all about working with the full power of Leptos in its full-stack, SSR mode.
+
+
+
Note
+
+
+
+
If you're coming from the Javascript world and terms like client-side rendering (CSR) and server-side rendering (SSR) are unfamiliar to you, the easiest way to understand the difference is by analogy:
+
Leptos' CSR mode is similar to working with React (or a 'signals'-based framework like SolidJS), and focuses on producing a client-side UI which you can use with any tech stack on the server.
+
Using Leptos' SSR mode is similar to working with a full-stack framework like Next.js in the React world (or Solid's "SolidStart" framework) - SSR helps you build sites and apps that are rendered on the server then sent down to the client. SSR can help to improve your site's loading performance and accessibility as well as make it easier for one person to work on both client- and server-side without needing to context-switch between different languages for frontend and backend.
+
The Leptos framework can be used either in CSR mode to just make a UI (like React), or you can use Leptos in full-stack SSR mode (like Next.js) so that you can build both your UI and your server with one language: Rust.
If you don’t have it installed already, you can install the "Trunk" tool for running Leptos CSR sites by running the following on the command-line:
+
cargo install trunk
+
+
And then create a basic Rust project
+
cargo init leptos-tutorial
+
+
cd into your new leptos-tutorial project and add leptos as a dependency
+
cargo add leptos --features=csr,nightly
+
+
Or you can leave off nightly if you're using stable Rust
+
cargo add leptos --features=csr
+
+
+
Using nightly Rust, and the nightly feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.
+
To use nightly Rust, you can either opt into nightly for all your Rust projects by running
If you’d rather use stable Rust with Leptos, you can do that too. In the guide and examples, you’ll just use the ReadSignal::get() and WriteSignal::set() methods instead of calling signal getters and setters as functions.
+
+
Make sure you've added the wasm32-unknown-unknown target so that Rust can compile your code to WebAssembly to run in the browser.
+
rustup target add wasm32-unknown-unknown
+
+
Create a simple index.html in the root of the leptos-tutorial directory
Now run trunk serve --open from the root of the leptos-tutorial directory.
+Trunk should automatically compile your app and open it in your default browser.
+If you make edits to main.rs, Trunk will recompile your source code and
+live-reload the page.
+
Welcome to the world of UI development with Rust and WebAssembly (WASM), powered by Leptos and Trunk!
+
+
Now before we get started building your first real UI's with Leptos, there are a couple of things you might want to know to help make your experience with Leptos just a little bit easier.
There are a couple of things you can do to improve your experience of developing websites and apps with Leptos. You may want to take a few minutes and set up your environment to optimize your development experience, especially if you want to code along with the examples in this book.
Because of the nature of macros (they can expand from anything to anything, but only if the input is exactly correct at that instant) it can be hard for rust-analyzer to do proper autocompletion and other support.
+
If you run into issues using these macros in your editor, you can explicitly tell rust-analyzer to ignore certain proc macros. For the #[server] macro especially, which annotates function bodies but doesn't actually transform anything inside the body of your function, this can be really helpful.
+
Starting in Leptos version 0.5.3, rust-analyzer support was added for the #[component] macro, but if you run into issues, you may want to add #[component] to the macro ignore list as well (see below).
+Note that this means that rust-analyzer doesn't know about your component props, which may generate its own set of errors or warnings in the IDE.
The Jetbrains intellij-rust plugin (RustRover as well) currently does not support dynamic config for macro exclusion.
+However, the project currently maintains a hardcoded list of excluded macros.
+As soon as this open PR is merged, the component and
+server macro will be excluded automatically without additional configuration needed.
+
Update (2023/10/02):
+The intellij-rust plugin got deprecated in favor of RustRover at the same time the PR was opened, but an official
+support request was made to integrate the contents of this PR.
"leptosfmt" is a formatter for the Leptos view! macro (inside of which you'll typically write your UI code). Because the view! macro enables an 'RSX' (like JSX) style of writing your UI's, cargo-fmt has a harder time auto-formatting your code that's inside the view! macro. leptosfmt is a crate that solves your formattting issues and keeps your RSX-style UI code looking nice and tidy!
+
leptosfmt can be installed and used via the commandline or from within your code editor:
+
First, install the tool with cargo install leptosfmt.
+
If you just want to use the default options from the command line, just run leptosfmt ./**/*.rs from the root of your project to format all the rust files using leptosfmt.
+
If you wish to set up your editor to work with leptosfmt, or if you wish to customize your leptosfmt experience, please see the instructions available on the leptosfmt github repo's README.md page.
+
Just note that it's recommended to set up your editor with leptosfmt on a per-workspace basis for best results.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/highlight.css b/highlight.css
new file mode 100644
index 0000000..ba57b82
--- /dev/null
+++ b/highlight.css
@@ -0,0 +1,82 @@
+/*
+ * An increased contrast highlighting scheme loosely based on the
+ * "Base16 Atelier Dune Light" theme by Bram de Haan
+ * (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)
+ * Original Base16 color scheme by Chris Kempson
+ * (https://github.com/chriskempson/base16)
+ */
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+ color: #575757;
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+ color: #d70025;
+}
+
+/* Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+ color: #b21e00;
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+ color: #008200;
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+ color: #0030f2;
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+ color: #9d00ec;
+}
+
+.hljs {
+ display: block;
+ overflow-x: auto;
+ background: #f6f7f6;
+ color: #000;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}
+
+.hljs-addition {
+ color: #22863a;
+ background-color: #f0fff4;
+}
+
+.hljs-deletion {
+ color: #b31d28;
+ background-color: #ffeef0;
+}
diff --git a/highlight.js b/highlight.js
new file mode 100644
index 0000000..180385b
--- /dev/null
+++ b/highlight.js
@@ -0,0 +1,6 @@
+/*
+ Highlight.js 10.1.1 (93fd0d73)
+ License: BSD-3-Clause
+ Copyright (c) 2006-2020, Ivan Sagalaev
+*/
+var hljs=function(){"use strict";function e(n){Object.freeze(n);var t="function"==typeof n;return Object.getOwnPropertyNames(n).forEach((function(r){!Object.hasOwnProperty.call(n,r)||null===n[r]||"object"!=typeof n[r]&&"function"!=typeof n[r]||t&&("caller"===r||"callee"===r||"arguments"===r)||Object.isFrozen(n[r])||e(n[r])})),n}class n{constructor(e){void 0===e.data&&(e.data={}),this.data=e.data}ignoreMatch(){this.ignore=!0}}function t(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}function r(e,...n){var t={};for(const n in e)t[n]=e[n];return n.forEach((function(e){for(const n in e)t[n]=e[n]})),t}function a(e){return e.nodeName.toLowerCase()}var i=Object.freeze({__proto__:null,escapeHTML:t,inherit:r,nodeStream:function(e){var n=[];return function e(t,r){for(var i=t.firstChild;i;i=i.nextSibling)3===i.nodeType?r+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:r,node:i}),r=e(i,r),a(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:r,node:i}));return r}(e,0),n},mergeStreams:function(e,n,r){var i=0,s="",o=[];function l(){return e.length&&n.length?e[0].offset!==n[0].offset?e[0].offset"}function u(e){s+=""}function d(e){("start"===e.event?c:u)(e.node)}for(;e.length||n.length;){var g=l();if(s+=t(r.substring(i,g[0].offset)),i=g[0].offset,g===e){o.reverse().forEach(u);do{d(g.splice(0,1)[0]),g=l()}while(g===e&&g.length&&g[0].offset===i);o.reverse().forEach(c)}else"start"===g[0].event?o.push(g[0].node):o.pop(),d(g.splice(0,1)[0])}return s+t(r.substr(i))}});const s="",o=e=>!!e.kind;class l{constructor(e,n){this.buffer="",this.classPrefix=n.classPrefix,e.walk(this)}addText(e){this.buffer+=t(e)}openNode(e){if(!o(e))return;let n=e.kind;e.sublanguage||(n=`${this.classPrefix}${n}`),this.span(n)}closeNode(e){o(e)&&(this.buffer+=s)}value(){return this.buffer}span(e){this.buffer+=``}}class c{constructor(){this.rootNode={children:[]},this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){this.top.children.push(e)}openNode(e){const n={kind:e,children:[]};this.add(n),this.stack.push(n)}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,n){return"string"==typeof n?e.addText(n):n.children&&(e.openNode(n),n.children.forEach(n=>this._walk(e,n)),e.closeNode(n)),e}static _collapse(e){"string"!=typeof e&&e.children&&(e.children.every(e=>"string"==typeof e)?e.children=[e.children.join("")]:e.children.forEach(e=>{c._collapse(e)}))}}class u extends c{constructor(e){super(),this.options=e}addKeyword(e,n){""!==e&&(this.openNode(n),this.addText(e),this.closeNode())}addText(e){""!==e&&this.add(e)}addSublanguage(e,n){const t=e.root;t.kind=n,t.sublanguage=!0,this.add(t)}toHTML(){return new l(this,this.options).value()}finalize(){return!0}}function d(e){return e?"string"==typeof e?e:e.source:null}const g="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",h={begin:"\\\\[\\s\\S]",relevance:0},f={className:"string",begin:"'",end:"'",illegal:"\\n",contains:[h]},p={className:"string",begin:'"',end:'"',illegal:"\\n",contains:[h]},b={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},m=function(e,n,t={}){var a=r({className:"comment",begin:e,end:n,contains:[]},t);return a.contains.push(b),a.contains.push({className:"doctag",begin:"(?:TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):",relevance:0}),a},v=m("//","$"),x=m("/\\*","\\*/"),E=m("#","$");var _=Object.freeze({__proto__:null,IDENT_RE:"[a-zA-Z]\\w*",UNDERSCORE_IDENT_RE:"[a-zA-Z_]\\w*",NUMBER_RE:"\\b\\d+(\\.\\d+)?",C_NUMBER_RE:g,BINARY_NUMBER_RE:"\\b(0b[01]+)",RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",SHEBANG:(e={})=>{const n=/^#![ ]*\//;return e.binary&&(e.begin=function(...e){return e.map(e=>d(e)).join("")}(n,/.*\b/,e.binary,/\b.*/)),r({className:"meta",begin:n,end:/$/,relevance:0,"on:begin":(e,n)=>{0!==e.index&&n.ignoreMatch()}},e)},BACKSLASH_ESCAPE:h,APOS_STRING_MODE:f,QUOTE_STRING_MODE:p,PHRASAL_WORDS_MODE:b,COMMENT:m,C_LINE_COMMENT_MODE:v,C_BLOCK_COMMENT_MODE:x,HASH_COMMENT_MODE:E,NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?",relevance:0},C_NUMBER_MODE:{className:"number",begin:g,relevance:0},BINARY_NUMBER_MODE:{className:"number",begin:"\\b(0b[01]+)",relevance:0},CSS_NUMBER_MODE:{className:"number",begin:"\\b\\d+(\\.\\d+)?(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",relevance:0},REGEXP_MODE:{begin:/(?=\/[^/\n]*\/)/,contains:[{className:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[h,{begin:/\[/,end:/\]/,relevance:0,contains:[h]}]}]},TITLE_MODE:{className:"title",begin:"[a-zA-Z]\\w*",relevance:0},UNDERSCORE_TITLE_MODE:{className:"title",begin:"[a-zA-Z_]\\w*",relevance:0},METHOD_GUARD:{begin:"\\.\\s*[a-zA-Z_]\\w*",relevance:0},END_SAME_AS_BEGIN:function(e){return Object.assign(e,{"on:begin":(e,n)=>{n.data._beginMatch=e[1]},"on:end":(e,n)=>{n.data._beginMatch!==e[1]&&n.ignoreMatch()}})}}),N="of and for in not or if then".split(" ");function w(e,n){return n?+n:function(e){return N.includes(e.toLowerCase())}(e)?0:1}const R=t,y=r,{nodeStream:k,mergeStreams:O}=i,M=Symbol("nomatch");return function(t){var a=[],i={},s={},o=[],l=!0,c=/(^(<[^>]+>|\t|)+|\n)/gm,g="Could not find the language '{}', did you forget to load/include a language module?";const h={disableAutodetect:!0,name:"Plain text",contains:[]};var f={noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:null,__emitter:u};function p(e){return f.noHighlightRe.test(e)}function b(e,n,t,r){var a={code:n,language:e};S("before:highlight",a);var i=a.result?a.result:m(a.language,a.code,t,r);return i.code=a.code,S("after:highlight",i),i}function m(e,t,a,s){var o=t;function c(e,n){var t=E.case_insensitive?n[0].toLowerCase():n[0];return Object.prototype.hasOwnProperty.call(e.keywords,t)&&e.keywords[t]}function u(){null!=y.subLanguage?function(){if(""!==A){var e=null;if("string"==typeof y.subLanguage){if(!i[y.subLanguage])return void O.addText(A);e=m(y.subLanguage,A,!0,k[y.subLanguage]),k[y.subLanguage]=e.top}else e=v(A,y.subLanguage.length?y.subLanguage:null);y.relevance>0&&(I+=e.relevance),O.addSublanguage(e.emitter,e.language)}}():function(){if(!y.keywords)return void O.addText(A);let e=0;y.keywordPatternRe.lastIndex=0;let n=y.keywordPatternRe.exec(A),t="";for(;n;){t+=A.substring(e,n.index);const r=c(y,n);if(r){const[e,a]=r;O.addText(t),t="",I+=a,O.addKeyword(n[0],e)}else t+=n[0];e=y.keywordPatternRe.lastIndex,n=y.keywordPatternRe.exec(A)}t+=A.substr(e),O.addText(t)}(),A=""}function h(e){return e.className&&O.openNode(e.className),y=Object.create(e,{parent:{value:y}})}function p(e){return 0===y.matcher.regexIndex?(A+=e[0],1):(L=!0,0)}var b={};function x(t,r){var i=r&&r[0];if(A+=t,null==i)return u(),0;if("begin"===b.type&&"end"===r.type&&b.index===r.index&&""===i){if(A+=o.slice(r.index,r.index+1),!l){const n=Error("0 width match regex");throw n.languageName=e,n.badRule=b.rule,n}return 1}if(b=r,"begin"===r.type)return function(e){var t=e[0],r=e.rule;const a=new n(r),i=[r.__beforeBegin,r["on:begin"]];for(const n of i)if(n&&(n(e,a),a.ignore))return p(t);return r&&r.endSameAsBegin&&(r.endRe=RegExp(t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")),r.skip?A+=t:(r.excludeBegin&&(A+=t),u(),r.returnBegin||r.excludeBegin||(A=t)),h(r),r.returnBegin?0:t.length}(r);if("illegal"===r.type&&!a){const e=Error('Illegal lexeme "'+i+'" for mode "'+(y.className||"")+'"');throw e.mode=y,e}if("end"===r.type){var s=function(e){var t=e[0],r=o.substr(e.index),a=function e(t,r,a){let i=function(e,n){var t=e&&e.exec(n);return t&&0===t.index}(t.endRe,a);if(i){if(t["on:end"]){const e=new n(t);t["on:end"](r,e),e.ignore&&(i=!1)}if(i){for(;t.endsParent&&t.parent;)t=t.parent;return t}}if(t.endsWithParent)return e(t.parent,r,a)}(y,e,r);if(!a)return M;var i=y;i.skip?A+=t:(i.returnEnd||i.excludeEnd||(A+=t),u(),i.excludeEnd&&(A=t));do{y.className&&O.closeNode(),y.skip||y.subLanguage||(I+=y.relevance),y=y.parent}while(y!==a.parent);return a.starts&&(a.endSameAsBegin&&(a.starts.endRe=a.endRe),h(a.starts)),i.returnEnd?0:t.length}(r);if(s!==M)return s}if("illegal"===r.type&&""===i)return 1;if(B>1e5&&B>3*r.index)throw Error("potential infinite loop, way more iterations than matches");return A+=i,i.length}var E=T(e);if(!E)throw console.error(g.replace("{}",e)),Error('Unknown language: "'+e+'"');var _=function(e){function n(n,t){return RegExp(d(n),"m"+(e.case_insensitive?"i":"")+(t?"g":""))}class t{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(e,n){n.position=this.position++,this.matchIndexes[this.matchAt]=n,this.regexes.push([n,e]),this.matchAt+=function(e){return RegExp(e.toString()+"|").exec("").length-1}(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null);const e=this.regexes.map(e=>e[1]);this.matcherRe=n(function(e,n="|"){for(var t=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./,r=0,a="",i=0;i0&&(a+=n),a+="(";o.length>0;){var l=t.exec(o);if(null==l){a+=o;break}a+=o.substring(0,l.index),o=o.substring(l.index+l[0].length),"\\"===l[0][0]&&l[1]?a+="\\"+(+l[1]+s):(a+=l[0],"("===l[0]&&r++)}a+=")"}return a}(e),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex;const n=this.matcherRe.exec(e);if(!n)return null;const t=n.findIndex((e,n)=>n>0&&void 0!==e),r=this.matchIndexes[t];return n.splice(0,t),Object.assign(n,r)}}class a{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){if(this.multiRegexes[e])return this.multiRegexes[e];const n=new t;return this.rules.slice(e).forEach(([e,t])=>n.addRule(e,t)),n.compile(),this.multiRegexes[e]=n,n}considerAll(){this.regexIndex=0}addRule(e,n){this.rules.push([e,n]),"begin"===n.type&&this.count++}exec(e){const n=this.getMatcher(this.regexIndex);n.lastIndex=this.lastIndex;const t=n.exec(e);return t&&(this.regexIndex+=t.position+1,this.regexIndex===this.count&&(this.regexIndex=0)),t}}function i(e,n){const t=e.input[e.index-1],r=e.input[e.index+e[0].length];"."!==t&&"."!==r||n.ignoreMatch()}if(e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language. See documentation.");return function t(s,o){const l=s;if(s.compiled)return l;s.compiled=!0,s.__beforeBegin=null,s.keywords=s.keywords||s.beginKeywords;let c=null;if("object"==typeof s.keywords&&(c=s.keywords.$pattern,delete s.keywords.$pattern),s.keywords&&(s.keywords=function(e,n){var t={};return"string"==typeof e?r("keyword",e):Object.keys(e).forEach((function(n){r(n,e[n])})),t;function r(e,r){n&&(r=r.toLowerCase()),r.split(" ").forEach((function(n){var r=n.split("|");t[r[0]]=[e,w(r[0],r[1])]}))}}(s.keywords,e.case_insensitive)),s.lexemes&&c)throw Error("ERR: Prefer `keywords.$pattern` to `mode.lexemes`, BOTH are not allowed. (see mode reference) ");return l.keywordPatternRe=n(s.lexemes||c||/\w+/,!0),o&&(s.beginKeywords&&(s.begin="\\b("+s.beginKeywords.split(" ").join("|")+")(?=\\b|\\s)",s.__beforeBegin=i),s.begin||(s.begin=/\B|\b/),l.beginRe=n(s.begin),s.endSameAsBegin&&(s.end=s.begin),s.end||s.endsWithParent||(s.end=/\B|\b/),s.end&&(l.endRe=n(s.end)),l.terminator_end=d(s.end)||"",s.endsWithParent&&o.terminator_end&&(l.terminator_end+=(s.end?"|":"")+o.terminator_end)),s.illegal&&(l.illegalRe=n(s.illegal)),void 0===s.relevance&&(s.relevance=1),s.contains||(s.contains=[]),s.contains=[].concat(...s.contains.map((function(e){return function(e){return e.variants&&!e.cached_variants&&(e.cached_variants=e.variants.map((function(n){return r(e,{variants:null},n)}))),e.cached_variants?e.cached_variants:function e(n){return!!n&&(n.endsWithParent||e(n.starts))}(e)?r(e,{starts:e.starts?r(e.starts):null}):Object.isFrozen(e)?r(e):e}("self"===e?s:e)}))),s.contains.forEach((function(e){t(e,l)})),s.starts&&t(s.starts,o),l.matcher=function(e){const n=new a;return e.contains.forEach(e=>n.addRule(e.begin,{rule:e,type:"begin"})),e.terminator_end&&n.addRule(e.terminator_end,{type:"end"}),e.illegal&&n.addRule(e.illegal,{type:"illegal"}),n}(l),l}(e)}(E),N="",y=s||_,k={},O=new f.__emitter(f);!function(){for(var e=[],n=y;n!==E;n=n.parent)n.className&&e.unshift(n.className);e.forEach(e=>O.openNode(e))}();var A="",I=0,S=0,B=0,L=!1;try{for(y.matcher.considerAll();;){B++,L?L=!1:(y.matcher.lastIndex=S,y.matcher.considerAll());const e=y.matcher.exec(o);if(!e)break;const n=x(o.substring(S,e.index),e);S=e.index+n}return x(o.substr(S)),O.closeAllNodes(),O.finalize(),N=O.toHTML(),{relevance:I,value:N,language:e,illegal:!1,emitter:O,top:y}}catch(n){if(n.message&&n.message.includes("Illegal"))return{illegal:!0,illegalBy:{msg:n.message,context:o.slice(S-100,S+100),mode:n.mode},sofar:N,relevance:0,value:R(o),emitter:O};if(l)return{illegal:!1,relevance:0,value:R(o),emitter:O,language:e,top:y,errorRaised:n};throw n}}function v(e,n){n=n||f.languages||Object.keys(i);var t=function(e){const n={relevance:0,emitter:new f.__emitter(f),value:R(e),illegal:!1,top:h};return n.emitter.addText(e),n}(e),r=t;return n.filter(T).filter(I).forEach((function(n){var a=m(n,e,!1);a.language=n,a.relevance>r.relevance&&(r=a),a.relevance>t.relevance&&(r=t,t=a)})),r.language&&(t.second_best=r),t}function x(e){return f.tabReplace||f.useBR?e.replace(c,e=>"\n"===e?f.useBR?" ":e:f.tabReplace?e.replace(/\t/g,f.tabReplace):e):e}function E(e){let n=null;const t=function(e){var n=e.className+" ";n+=e.parentNode?e.parentNode.className:"";const t=f.languageDetectRe.exec(n);if(t){var r=T(t[1]);return r||(console.warn(g.replace("{}",t[1])),console.warn("Falling back to no-highlight mode for this block.",e)),r?t[1]:"no-highlight"}return n.split(/\s+/).find(e=>p(e)||T(e))}(e);if(p(t))return;S("before:highlightBlock",{block:e,language:t}),f.useBR?(n=document.createElement("div")).innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n"):n=e;const r=n.textContent,a=t?b(t,r,!0):v(r),i=k(n);if(i.length){const e=document.createElement("div");e.innerHTML=a.value,a.value=O(i,k(e),r)}a.value=x(a.value),S("after:highlightBlock",{block:e,result:a}),e.innerHTML=a.value,e.className=function(e,n,t){var r=n?s[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),e.includes(r)||a.push(r),a.join(" ").trim()}(e.className,t,a.language),e.result={language:a.language,re:a.relevance,relavance:a.relevance},a.second_best&&(e.second_best={language:a.second_best.language,re:a.second_best.relevance,relavance:a.second_best.relevance})}const N=()=>{if(!N.called){N.called=!0;var e=document.querySelectorAll("pre code");a.forEach.call(e,E)}};function T(e){return e=(e||"").toLowerCase(),i[e]||i[s[e]]}function A(e,{languageName:n}){"string"==typeof e&&(e=[e]),e.forEach(e=>{s[e]=n})}function I(e){var n=T(e);return n&&!n.disableAutodetect}function S(e,n){var t=e;o.forEach((function(e){e[t]&&e[t](n)}))}Object.assign(t,{highlight:b,highlightAuto:v,fixMarkup:x,highlightBlock:E,configure:function(e){f=y(f,e)},initHighlighting:N,initHighlightingOnLoad:function(){window.addEventListener("DOMContentLoaded",N,!1)},registerLanguage:function(e,n){var r=null;try{r=n(t)}catch(n){if(console.error("Language definition for '{}' could not be registered.".replace("{}",e)),!l)throw n;console.error(n),r=h}r.name||(r.name=e),i[e]=r,r.rawDefinition=n.bind(null,t),r.aliases&&A(r.aliases,{languageName:e})},listLanguages:function(){return Object.keys(i)},getLanguage:T,registerAliases:A,requireLanguage:function(e){var n=T(e);if(n)return n;throw Error("The '{}' language is required, but not loaded.".replace("{}",e))},autoDetection:I,inherit:y,addPlugin:function(e){o.push(e)}}),t.debugMode=function(){l=!1},t.safeMode=function(){l=!0},t.versionString="10.1.1";for(const n in _)"object"==typeof _[n]&&e(_[n]);return Object.assign(t,_),t}({})}();"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);hljs.registerLanguage("php",function(){"use strict";return function(e){var r={begin:"\\$+[a-zA-Z_-ÿ][a-zA-Z0-9_-ÿ]*"},t={className:"meta",variants:[{begin:/<\?php/,relevance:10},{begin:/<\?[=]?/},{begin:/\?>/}]},a={className:"string",contains:[e.BACKSLASH_ESCAPE,t],variants:[{begin:'b"',end:'"'},{begin:"b'",end:"'"},e.inherit(e.APOS_STRING_MODE,{illegal:null}),e.inherit(e.QUOTE_STRING_MODE,{illegal:null})]},n={variants:[e.BINARY_NUMBER_MODE,e.C_NUMBER_MODE]},i={keyword:"__CLASS__ __DIR__ __FILE__ __FUNCTION__ __LINE__ __METHOD__ __NAMESPACE__ __TRAIT__ die echo exit include include_once print require require_once array abstract and as binary bool boolean break callable case catch class clone const continue declare default do double else elseif empty enddeclare endfor endforeach endif endswitch endwhile eval extends final finally float for foreach from global goto if implements instanceof insteadof int integer interface isset iterable list new object or private protected public real return string switch throw trait try unset use var void while xor yield",literal:"false null true",built_in:"Error|0 AppendIterator ArgumentCountError ArithmeticError ArrayIterator ArrayObject AssertionError BadFunctionCallException BadMethodCallException CachingIterator CallbackFilterIterator CompileError Countable DirectoryIterator DivisionByZeroError DomainException EmptyIterator ErrorException Exception FilesystemIterator FilterIterator GlobIterator InfiniteIterator InvalidArgumentException IteratorIterator LengthException LimitIterator LogicException MultipleIterator NoRewindIterator OutOfBoundsException OutOfRangeException OuterIterator OverflowException ParentIterator ParseError RangeException RecursiveArrayIterator RecursiveCachingIterator RecursiveCallbackFilterIterator RecursiveDirectoryIterator RecursiveFilterIterator RecursiveIterator RecursiveIteratorIterator RecursiveRegexIterator RecursiveTreeIterator RegexIterator RuntimeException SeekableIterator SplDoublyLinkedList SplFileInfo SplFileObject SplFixedArray SplHeap SplMaxHeap SplMinHeap SplObjectStorage SplObserver SplObserver SplPriorityQueue SplQueue SplStack SplSubject SplSubject SplTempFileObject TypeError UnderflowException UnexpectedValueException ArrayAccess Closure Generator Iterator IteratorAggregate Serializable Throwable Traversable WeakReference Directory __PHP_Incomplete_Class parent php_user_filter self static stdClass"};return{aliases:["php","php3","php4","php5","php6","php7"],case_insensitive:!0,keywords:i,contains:[e.HASH_COMMENT_MODE,e.COMMENT("//","$",{contains:[t]}),e.COMMENT("/\\*","\\*/",{contains:[{className:"doctag",begin:"@[A-Za-z]+"}]}),e.COMMENT("__halt_compiler.+?;",!1,{endsWithParent:!0,keywords:"__halt_compiler"}),{className:"string",begin:/<<<['"]?\w+['"]?$/,end:/^\w+;?$/,contains:[e.BACKSLASH_ESCAPE,{className:"subst",variants:[{begin:/\$\w+/},{begin:/\{\$/,end:/\}/}]}]},t,{className:"keyword",begin:/\$this\b/},r,{begin:/(::|->)+[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/},{className:"function",beginKeywords:"fn function",end:/[;{]/,excludeEnd:!0,illegal:"[$%\\[]",contains:[e.UNDERSCORE_TITLE_MODE,{className:"params",begin:"\\(",end:"\\)",excludeBegin:!0,excludeEnd:!0,keywords:i,contains:["self",r,e.C_BLOCK_COMMENT_MODE,a,n]}]},{className:"class",beginKeywords:"class interface",end:"{",excludeEnd:!0,illegal:/[:\(\$"]/,contains:[{beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]},{beginKeywords:"namespace",end:";",illegal:/[\.']/,contains:[e.UNDERSCORE_TITLE_MODE]},{beginKeywords:"use",end:";",contains:[e.UNDERSCORE_TITLE_MODE]},{begin:"=>"},a,n]}}}());hljs.registerLanguage("nginx",function(){"use strict";return function(e){var n={className:"variable",variants:[{begin:/\$\d+/},{begin:/\$\{/,end:/}/},{begin:"[\\$\\@]"+e.UNDERSCORE_IDENT_RE}]},a={endsWithParent:!0,keywords:{$pattern:"[a-z/_]+",literal:"on off yes no true false none blocked debug info notice warn error crit select break last permanent redirect kqueue rtsig epoll poll /dev/poll"},relevance:0,illegal:"=>",contains:[e.HASH_COMMENT_MODE,{className:"string",contains:[e.BACKSLASH_ESCAPE,n],variants:[{begin:/"/,end:/"/},{begin:/'/,end:/'/}]},{begin:"([a-z]+):/",end:"\\s",endsWithParent:!0,excludeEnd:!0,contains:[n]},{className:"regexp",contains:[e.BACKSLASH_ESCAPE,n],variants:[{begin:"\\s\\^",end:"\\s|{|;",returnEnd:!0},{begin:"~\\*?\\s+",end:"\\s|{|;",returnEnd:!0},{begin:"\\*(\\.[a-z\\-]+)+"},{begin:"([a-z\\-]+\\.)+\\*"}]},{className:"number",begin:"\\b\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}(:\\d{1,5})?\\b"},{className:"number",begin:"\\b\\d+[kKmMgGdshdwy]*\\b",relevance:0},n]};return{name:"Nginx config",aliases:["nginxconf"],contains:[e.HASH_COMMENT_MODE,{begin:e.UNDERSCORE_IDENT_RE+"\\s+{",returnBegin:!0,end:"{",contains:[{className:"section",begin:e.UNDERSCORE_IDENT_RE}],relevance:0},{begin:e.UNDERSCORE_IDENT_RE+"\\s",end:";|{",returnBegin:!0,contains:[{className:"attribute",begin:e.UNDERSCORE_IDENT_RE,starts:a}],relevance:0}],illegal:"[^\\s\\}]"}}}());hljs.registerLanguage("csharp",function(){"use strict";return function(e){var n={keyword:"abstract as base bool break byte case catch char checked const continue decimal default delegate do double enum event explicit extern finally fixed float for foreach goto if implicit in int interface internal is lock long object operator out override params private protected public readonly ref sbyte sealed short sizeof stackalloc static string struct switch this try typeof uint ulong unchecked unsafe ushort using virtual void volatile while add alias ascending async await by descending dynamic equals from get global group into join let nameof on orderby partial remove select set value var when where yield",literal:"null false true"},i=e.inherit(e.TITLE_MODE,{begin:"[a-zA-Z](\\.?\\w)*"}),a={className:"number",variants:[{begin:"\\b(0b[01']+)"},{begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)(u|U|l|L|ul|UL|f|F|b|B)"},{begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"}],relevance:0},s={className:"string",begin:'@"',end:'"',contains:[{begin:'""'}]},t=e.inherit(s,{illegal:/\n/}),l={className:"subst",begin:"{",end:"}",keywords:n},r=e.inherit(l,{illegal:/\n/}),c={className:"string",begin:/\$"/,end:'"',illegal:/\n/,contains:[{begin:"{{"},{begin:"}}"},e.BACKSLASH_ESCAPE,r]},o={className:"string",begin:/\$@"/,end:'"',contains:[{begin:"{{"},{begin:"}}"},{begin:'""'},l]},g=e.inherit(o,{illegal:/\n/,contains:[{begin:"{{"},{begin:"}}"},{begin:'""'},r]});l.contains=[o,c,s,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,a,e.C_BLOCK_COMMENT_MODE],r.contains=[g,c,t,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,a,e.inherit(e.C_BLOCK_COMMENT_MODE,{illegal:/\n/})];var d={variants:[o,c,s,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},E={begin:"<",end:">",contains:[{beginKeywords:"in out"},i]},_=e.IDENT_RE+"(<"+e.IDENT_RE+"(\\s*,\\s*"+e.IDENT_RE+")*>)?(\\[\\])?",b={begin:"@"+e.IDENT_RE,relevance:0};return{name:"C#",aliases:["cs","c#"],keywords:n,illegal:/::/,contains:[e.COMMENT("///","$",{returnBegin:!0,contains:[{className:"doctag",variants:[{begin:"///",relevance:0},{begin:"\x3c!--|--\x3e"},{begin:""}]}]}),e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"meta",begin:"#",end:"$",keywords:{"meta-keyword":"if else elif endif define undef warning error line region endregion pragma checksum"}},d,a,{beginKeywords:"class interface",end:/[{;=]/,illegal:/[^\s:,]/,contains:[{beginKeywords:"where class"},i,E,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{beginKeywords:"namespace",end:/[{;=]/,illegal:/[^\s:]/,contains:[i,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"meta",begin:"^\\s*\\[",excludeBegin:!0,end:"\\]",excludeEnd:!0,contains:[{className:"meta-string",begin:/"/,end:/"/}]},{beginKeywords:"new return throw await else",relevance:0},{className:"function",begin:"("+_+"\\s+)+"+e.IDENT_RE+"\\s*(\\<.+\\>)?\\s*\\(",returnBegin:!0,end:/\s*[{;=]/,excludeEnd:!0,keywords:n,contains:[{begin:e.IDENT_RE+"\\s*(\\<.+\\>)?\\s*\\(",returnBegin:!0,contains:[e.TITLE_MODE,E],relevance:0},{className:"params",begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:n,relevance:0,contains:[d,a,e.C_BLOCK_COMMENT_MODE]},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},b]}}}());hljs.registerLanguage("perl",function(){"use strict";return function(e){var n={$pattern:/[\w.]+/,keyword:"getpwent getservent quotemeta msgrcv scalar kill dbmclose undef lc ma syswrite tr send umask sysopen shmwrite vec qx utime local oct semctl localtime readpipe do return format read sprintf dbmopen pop getpgrp not getpwnam rewinddir qq fileno qw endprotoent wait sethostent bless s|0 opendir continue each sleep endgrent shutdown dump chomp connect getsockname die socketpair close flock exists index shmget sub for endpwent redo lstat msgctl setpgrp abs exit select print ref gethostbyaddr unshift fcntl syscall goto getnetbyaddr join gmtime symlink semget splice x|0 getpeername recv log setsockopt cos last reverse gethostbyname getgrnam study formline endhostent times chop length gethostent getnetent pack getprotoent getservbyname rand mkdir pos chmod y|0 substr endnetent printf next open msgsnd readdir use unlink getsockopt getpriority rindex wantarray hex system getservbyport endservent int chr untie rmdir prototype tell listen fork shmread ucfirst setprotoent else sysseek link getgrgid shmctl waitpid unpack getnetbyname reset chdir grep split require caller lcfirst until warn while values shift telldir getpwuid my getprotobynumber delete and sort uc defined srand accept package seekdir getprotobyname semop our rename seek if q|0 chroot sysread setpwent no crypt getc chown sqrt write setnetent setpriority foreach tie sin msgget map stat getlogin unless elsif truncate exec keys glob tied closedir ioctl socket readlink eval xor readline binmode setservent eof ord bind alarm pipe atan2 getgrent exp time push setgrent gt lt or ne m|0 break given say state when"},t={className:"subst",begin:"[$@]\\{",end:"\\}",keywords:n},s={begin:"->{",end:"}"},r={variants:[{begin:/\$\d/},{begin:/[\$%@](\^\w\b|#\w+(::\w+)*|{\w+}|\w+(::\w*)*)/},{begin:/[\$%@][^\s\w{]/,relevance:0}]},i=[e.BACKSLASH_ESCAPE,t,r],a=[r,e.HASH_COMMENT_MODE,e.COMMENT("^\\=\\w","\\=cut",{endsWithParent:!0}),s,{className:"string",contains:i,variants:[{begin:"q[qwxr]?\\s*\\(",end:"\\)",relevance:5},{begin:"q[qwxr]?\\s*\\[",end:"\\]",relevance:5},{begin:"q[qwxr]?\\s*\\{",end:"\\}",relevance:5},{begin:"q[qwxr]?\\s*\\|",end:"\\|",relevance:5},{begin:"q[qwxr]?\\s*\\<",end:"\\>",relevance:5},{begin:"qw\\s+q",end:"q",relevance:5},{begin:"'",end:"'",contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"'},{begin:"`",end:"`",contains:[e.BACKSLASH_ESCAPE]},{begin:"{\\w+}",contains:[],relevance:0},{begin:"-?\\w+\\s*\\=\\>",contains:[],relevance:0}]},{className:"number",begin:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",relevance:0},{begin:"(\\/\\/|"+e.RE_STARTERS_RE+"|\\b(split|return|print|reverse|grep)\\b)\\s*",keywords:"split return print reverse grep",relevance:0,contains:[e.HASH_COMMENT_MODE,{className:"regexp",begin:"(s|tr|y)/(\\\\.|[^/])*/(\\\\.|[^/])*/[a-z]*",relevance:10},{className:"regexp",begin:"(m|qr)?/",end:"/[a-z]*",contains:[e.BACKSLASH_ESCAPE],relevance:0}]},{className:"function",beginKeywords:"sub",end:"(\\s*\\(.*?\\))?[;{]",excludeEnd:!0,relevance:5,contains:[e.TITLE_MODE]},{begin:"-\\w\\b",relevance:0},{begin:"^__DATA__$",end:"^__END__$",subLanguage:"mojolicious",contains:[{begin:"^@@.*",end:"$",className:"comment"}]}];return t.contains=a,s.contains=a,{name:"Perl",aliases:["pl","pm"],keywords:n,contains:a}}}());hljs.registerLanguage("swift",function(){"use strict";return function(e){var i={keyword:"#available #colorLiteral #column #else #elseif #endif #file #fileLiteral #function #if #imageLiteral #line #selector #sourceLocation _ __COLUMN__ __FILE__ __FUNCTION__ __LINE__ Any as as! as? associatedtype associativity break case catch class continue convenience default defer deinit didSet do dynamic dynamicType else enum extension fallthrough false fileprivate final for func get guard if import in indirect infix init inout internal is lazy left let mutating nil none nonmutating open operator optional override postfix precedence prefix private protocol Protocol public repeat required rethrows return right self Self set static struct subscript super switch throw throws true try try! try? Type typealias unowned var weak where while willSet",literal:"true false nil",built_in:"abs advance alignof alignofValue anyGenerator assert assertionFailure bridgeFromObjectiveC bridgeFromObjectiveCUnconditional bridgeToObjectiveC bridgeToObjectiveCUnconditional c compactMap contains count countElements countLeadingZeros debugPrint debugPrintln distance dropFirst dropLast dump encodeBitsAsWords enumerate equal fatalError filter find getBridgedObjectiveCType getVaList indices insertionSort isBridgedToObjectiveC isBridgedVerbatimToObjectiveC isUniquelyReferenced isUniquelyReferencedNonObjC join lazy lexicographicalCompare map max maxElement min minElement numericCast overlaps partition posix precondition preconditionFailure print println quickSort readLine reduce reflect reinterpretCast reverse roundUpToAlignment sizeof sizeofValue sort split startsWith stride strideof strideofValue swap toString transcode underestimateCount unsafeAddressOf unsafeBitCast unsafeDowncast unsafeUnwrap unsafeReflect withExtendedLifetime withObjectAtPlusZero withUnsafePointer withUnsafePointerToObject withUnsafeMutablePointer withUnsafeMutablePointers withUnsafePointer withUnsafePointers withVaList zip"},n=e.COMMENT("/\\*","\\*/",{contains:["self"]}),t={className:"subst",begin:/\\\(/,end:"\\)",keywords:i,contains:[]},a={className:"string",contains:[e.BACKSLASH_ESCAPE,t],variants:[{begin:/"""/,end:/"""/},{begin:/"/,end:/"/}]},r={className:"number",begin:"\\b([\\d_]+(\\.[\\deE_]+)?|0x[a-fA-F0-9_]+(\\.[a-fA-F0-9p_]+)?|0b[01_]+|0o[0-7_]+)\\b",relevance:0};return t.contains=[r],{name:"Swift",keywords:i,contains:[a,e.C_LINE_COMMENT_MODE,n,{className:"type",begin:"\\b[A-Z][\\wÀ-ʸ']*[!?]"},{className:"type",begin:"\\b[A-Z][\\wÀ-ʸ']*",relevance:0},r,{className:"function",beginKeywords:"func",end:"{",excludeEnd:!0,contains:[e.inherit(e.TITLE_MODE,{begin:/[A-Za-z$_][0-9A-Za-z$_]*/}),{begin://},{className:"params",begin:/\(/,end:/\)/,endsParent:!0,keywords:i,contains:["self",r,a,e.C_BLOCK_COMMENT_MODE,{begin:":"}],illegal:/["']/}],illegal:/\[|%/},{className:"class",beginKeywords:"struct protocol class extension enum",keywords:i,end:"\\{",excludeEnd:!0,contains:[e.inherit(e.TITLE_MODE,{begin:/[A-Za-z$_][\u00C0-\u02B80-9A-Za-z$_]*/})]},{className:"meta",begin:"(@discardableResult|@warn_unused_result|@exported|@lazy|@noescape|@NSCopying|@NSManaged|@objc|@objcMembers|@convention|@required|@noreturn|@IBAction|@IBDesignable|@IBInspectable|@IBOutlet|@infix|@prefix|@postfix|@autoclosure|@testable|@available|@nonobjc|@NSApplicationMain|@UIApplicationMain|@dynamicMemberLookup|@propertyWrapper)\\b"},{beginKeywords:"import",end:/$/,contains:[e.C_LINE_COMMENT_MODE,n]}]}}}());hljs.registerLanguage("makefile",function(){"use strict";return function(e){var i={className:"variable",variants:[{begin:"\\$\\("+e.UNDERSCORE_IDENT_RE+"\\)",contains:[e.BACKSLASH_ESCAPE]},{begin:/\$[@%`]+/}]}]}]};return{name:"HTML, XML",aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],case_insensitive:!0,contains:[{className:"meta",begin:"",relevance:10,contains:[a,i,t,s,{begin:"\\[",end:"\\]",contains:[{className:"meta",begin:"",contains:[a,s,i,t]}]}]},e.COMMENT("\x3c!--","--\x3e",{relevance:10}),{begin:"<\\!\\[CDATA\\[",end:"\\]\\]>",relevance:10},n,{className:"meta",begin:/<\?xml/,end:/\?>/,relevance:10},{className:"tag",begin:")",end:">",keywords:{name:"style"},contains:[c],starts:{end:"",returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",begin:")",end:">",keywords:{name:"script"},contains:[c],starts:{end:"<\/script>",returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{className:"tag",begin:"",contains:[{className:"name",begin:/[^\/><\s]+/,relevance:0},c]}]}}}());hljs.registerLanguage("bash",function(){"use strict";return function(e){const s={};Object.assign(s,{className:"variable",variants:[{begin:/\$[\w\d#@][\w\d_]*/},{begin:/\$\{/,end:/\}/,contains:[{begin:/:-/,contains:[s]}]}]});const t={className:"subst",begin:/\$\(/,end:/\)/,contains:[e.BACKSLASH_ESCAPE]},n={className:"string",begin:/"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,s,t]};t.contains.push(n);const a={begin:/\$\(\(/,end:/\)\)/,contains:[{begin:/\d+#[0-9a-f]+/,className:"number"},e.NUMBER_MODE,s]},i=e.SHEBANG({binary:"(fish|bash|zsh|sh|csh|ksh|tcsh|dash|scsh)",relevance:10}),c={className:"function",begin:/\w[\w\d_]*\s*\(\s*\)\s*\{/,returnBegin:!0,contains:[e.inherit(e.TITLE_MODE,{begin:/\w[\w\d_]*/})],relevance:0};return{name:"Bash",aliases:["sh","zsh"],keywords:{$pattern:/\b-?[a-z\._]+\b/,keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",_:"-ne -eq -lt -gt -f -d -e -s -l -a"},contains:[i,e.SHEBANG(),c,a,e.HASH_COMMENT_MODE,n,{className:"",begin:/\\"/},{className:"string",begin:/'/,end:/'/},s]}}}());hljs.registerLanguage("c-like",function(){"use strict";return function(e){function t(e){return"(?:"+e+")?"}var n="(decltype\\(auto\\)|"+t("[a-zA-Z_]\\w*::")+"[a-zA-Z_]\\w*"+t("<.*?>")+")",r={className:"keyword",begin:"\\b[a-z\\d_]*_t\\b"},a={className:"string",variants:[{begin:'(u8?|U|L)?"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{begin:"(u8?|U|L)?'(\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4,8}|[0-7]{3}|\\S)|.)",end:"'",illegal:"."},e.END_SAME_AS_BEGIN({begin:/(?:u8?|U|L)?R"([^()\\ ]{0,16})\(/,end:/\)([^()\\ ]{0,16})"/})]},i={className:"number",variants:[{begin:"\\b(0b[01']+)"},{begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)(u|U|l|L|ul|UL|f|F|b|B)"},{begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"}],relevance:0},s={className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,keywords:{"meta-keyword":"if else elif endif define undef warning error line pragma _Pragma ifdef ifndef include"},contains:[{begin:/\\\n/,relevance:0},e.inherit(a,{className:"meta-string"}),{className:"meta-string",begin:/<.*?>/,end:/$/,illegal:"\\n"},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},o={className:"title",begin:t("[a-zA-Z_]\\w*::")+e.IDENT_RE,relevance:0},c=t("[a-zA-Z_]\\w*::")+e.IDENT_RE+"\\s*\\(",l={keyword:"int float while private char char8_t char16_t char32_t catch import module export virtual operator sizeof dynamic_cast|10 typedef const_cast|10 const for static_cast|10 union namespace unsigned long volatile static protected bool template mutable if public friend do goto auto void enum else break extern using asm case typeid wchar_t short reinterpret_cast|10 default double register explicit signed typename try this switch continue inline delete alignas alignof constexpr consteval constinit decltype concept co_await co_return co_yield requires noexcept static_assert thread_local restrict final override atomic_bool atomic_char atomic_schar atomic_uchar atomic_short atomic_ushort atomic_int atomic_uint atomic_long atomic_ulong atomic_llong atomic_ullong new throw return and and_eq bitand bitor compl not not_eq or or_eq xor xor_eq",built_in:"std string wstring cin cout cerr clog stdin stdout stderr stringstream istringstream ostringstream auto_ptr deque list queue stack vector map set pair bitset multiset multimap unordered_set unordered_map unordered_multiset unordered_multimap priority_queue make_pair array shared_ptr abort terminate abs acos asin atan2 atan calloc ceil cosh cos exit exp fabs floor fmod fprintf fputs free frexp fscanf future isalnum isalpha iscntrl isdigit isgraph islower isprint ispunct isspace isupper isxdigit tolower toupper labs ldexp log10 log malloc realloc memchr memcmp memcpy memset modf pow printf putchar puts scanf sinh sin snprintf sprintf sqrt sscanf strcat strchr strcmp strcpy strcspn strlen strncat strncmp strncpy strpbrk strrchr strspn strstr tanh tan vfprintf vprintf vsprintf endl initializer_list unique_ptr _Bool complex _Complex imaginary _Imaginary",literal:"true false nullptr NULL"},d=[r,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,i,a],_={variants:[{begin:/=/,end:/;/},{begin:/\(/,end:/\)/},{beginKeywords:"new throw return else",end:/;/}],keywords:l,contains:d.concat([{begin:/\(/,end:/\)/,keywords:l,contains:d.concat(["self"]),relevance:0}]),relevance:0},u={className:"function",begin:"("+n+"[\\*&\\s]+)+"+c,returnBegin:!0,end:/[{;=]/,excludeEnd:!0,keywords:l,illegal:/[^\w\s\*&:<>]/,contains:[{begin:"decltype\\(auto\\)",keywords:l,relevance:0},{begin:c,returnBegin:!0,contains:[o],relevance:0},{className:"params",begin:/\(/,end:/\)/,keywords:l,relevance:0,contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,a,i,r,{begin:/\(/,end:/\)/,keywords:l,relevance:0,contains:["self",e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,a,i,r]}]},r,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,s]};return{aliases:["c","cc","h","c++","h++","hpp","hh","hxx","cxx"],keywords:l,disableAutodetect:!0,illegal:"",keywords:l,contains:["self",r]},{begin:e.IDENT_RE+"::",keywords:l},{className:"class",beginKeywords:"class struct",end:/[{;:]/,contains:[{begin://,contains:["self"]},e.TITLE_MODE]}]),exports:{preprocessor:s,strings:a,keywords:l}}}}());hljs.registerLanguage("coffeescript",function(){"use strict";const e=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],n=["true","false","null","undefined","NaN","Infinity"],a=[].concat(["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],["arguments","this","super","console","window","document","localStorage","module","global"],["Intl","DataView","Number","Math","Date","String","RegExp","Object","Function","Boolean","Error","Symbol","Set","Map","WeakSet","WeakMap","Proxy","Reflect","JSON","Promise","Float64Array","Int16Array","Int32Array","Int8Array","Uint16Array","Uint32Array","Float32Array","Array","Uint8Array","Uint8ClampedArray","ArrayBuffer"],["EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"]);return function(r){var t={keyword:e.concat(["then","unless","until","loop","by","when","and","or","is","isnt","not"]).filter((e=>n=>!e.includes(n))(["var","const","let","function","static"])).join(" "),literal:n.concat(["yes","no","on","off"]).join(" "),built_in:a.concat(["npm","print"]).join(" ")},i="[A-Za-z$_][0-9A-Za-z$_]*",s={className:"subst",begin:/#\{/,end:/}/,keywords:t},o=[r.BINARY_NUMBER_MODE,r.inherit(r.C_NUMBER_MODE,{starts:{end:"(\\s*/)?",relevance:0}}),{className:"string",variants:[{begin:/'''/,end:/'''/,contains:[r.BACKSLASH_ESCAPE]},{begin:/'/,end:/'/,contains:[r.BACKSLASH_ESCAPE]},{begin:/"""/,end:/"""/,contains:[r.BACKSLASH_ESCAPE,s]},{begin:/"/,end:/"/,contains:[r.BACKSLASH_ESCAPE,s]}]},{className:"regexp",variants:[{begin:"///",end:"///",contains:[s,r.HASH_COMMENT_MODE]},{begin:"//[gim]{0,3}(?=\\W)",relevance:0},{begin:/\/(?![ *]).*?(?![\\]).\/[gim]{0,3}(?=\W)/}]},{begin:"@"+i},{subLanguage:"javascript",excludeBegin:!0,excludeEnd:!0,variants:[{begin:"```",end:"```"},{begin:"`",end:"`"}]}];s.contains=o;var c=r.inherit(r.TITLE_MODE,{begin:i}),l={className:"params",begin:"\\([^\\(]",returnBegin:!0,contains:[{begin:/\(/,end:/\)/,keywords:t,contains:["self"].concat(o)}]};return{name:"CoffeeScript",aliases:["coffee","cson","iced"],keywords:t,illegal:/\/\*/,contains:o.concat([r.COMMENT("###","###"),r.HASH_COMMENT_MODE,{className:"function",begin:"^\\s*"+i+"\\s*=\\s*(\\(.*\\))?\\s*\\B[-=]>",end:"[-=]>",returnBegin:!0,contains:[c,l]},{begin:/[:\(,=]\s*/,relevance:0,contains:[{className:"function",begin:"(\\(.*\\))?\\s*\\B[-=]>",end:"[-=]>",returnBegin:!0,contains:[l]}]},{className:"class",beginKeywords:"class",end:"$",illegal:/[:="\[\]]/,contains:[{beginKeywords:"extends",endsWithParent:!0,illegal:/[:="\[\]]/,contains:[c]},c]},{begin:i+":",end:":",returnBegin:!0,returnEnd:!0,relevance:0}])}}}());hljs.registerLanguage("ruby",function(){"use strict";return function(e){var n="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?",a={keyword:"and then defined module in return redo if BEGIN retry end for self when next until do begin unless END rescue else break undef not super class case require yield alias while ensure elsif or include attr_reader attr_writer attr_accessor",literal:"true false nil"},s={className:"doctag",begin:"@[A-Za-z]+"},i={begin:"#<",end:">"},r=[e.COMMENT("#","$",{contains:[s]}),e.COMMENT("^\\=begin","^\\=end",{contains:[s],relevance:10}),e.COMMENT("^__END__","\\n$")],c={className:"subst",begin:"#\\{",end:"}",keywords:a},t={className:"string",contains:[e.BACKSLASH_ESCAPE,c],variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/`/,end:/`/},{begin:"%[qQwWx]?\\(",end:"\\)"},{begin:"%[qQwWx]?\\[",end:"\\]"},{begin:"%[qQwWx]?{",end:"}"},{begin:"%[qQwWx]?<",end:">"},{begin:"%[qQwWx]?/",end:"/"},{begin:"%[qQwWx]?%",end:"%"},{begin:"%[qQwWx]?-",end:"-"},{begin:"%[qQwWx]?\\|",end:"\\|"},{begin:/\B\?(\\\d{1,3}|\\x[A-Fa-f0-9]{1,2}|\\u[A-Fa-f0-9]{4}|\\?\S)\b/},{begin:/<<[-~]?'?(\w+)(?:.|\n)*?\n\s*\1\b/,returnBegin:!0,contains:[{begin:/<<[-~]?'?/},e.END_SAME_AS_BEGIN({begin:/(\w+)/,end:/(\w+)/,contains:[e.BACKSLASH_ESCAPE,c]})]}]},b={className:"params",begin:"\\(",end:"\\)",endsParent:!0,keywords:a},d=[t,i,{className:"class",beginKeywords:"class module",end:"$|;",illegal:/=/,contains:[e.inherit(e.TITLE_MODE,{begin:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?"}),{begin:"<\\s*",contains:[{begin:"("+e.IDENT_RE+"::)?"+e.IDENT_RE}]}].concat(r)},{className:"function",beginKeywords:"def",end:"$|;",contains:[e.inherit(e.TITLE_MODE,{begin:n}),b].concat(r)},{begin:e.IDENT_RE+"::"},{className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"(\\!|\\?)?:",relevance:0},{className:"symbol",begin:":(?!\\s)",contains:[t,{begin:n}],relevance:0},{className:"number",begin:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",relevance:0},{begin:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{className:"params",begin:/\|/,end:/\|/,keywords:a},{begin:"("+e.RE_STARTERS_RE+"|unless)\\s*",keywords:"unless",contains:[i,{className:"regexp",contains:[e.BACKSLASH_ESCAPE,c],illegal:/\n/,variants:[{begin:"/",end:"/[a-z]*"},{begin:"%r{",end:"}[a-z]*"},{begin:"%r\\(",end:"\\)[a-z]*"},{begin:"%r!",end:"![a-z]*"},{begin:"%r\\[",end:"\\][a-z]*"}]}].concat(r),relevance:0}].concat(r);c.contains=d,b.contains=d;var g=[{begin:/^\s*=>/,starts:{end:"$",contains:d}},{className:"meta",begin:"^([>?]>|[\\w#]+\\(\\w+\\):\\d+:\\d+>|(\\w+-)?\\d+\\.\\d+\\.\\d(p\\d+)?[^>]+>)",starts:{end:"$",contains:d}}];return{name:"Ruby",aliases:["rb","gemspec","podspec","thor","irb"],keywords:a,illegal:/\/\*/,contains:r.concat(g).concat(d)}}}());hljs.registerLanguage("yaml",function(){"use strict";return function(e){var n="true false yes no null",a="[\\w#;/?:@&=+$,.~*\\'()[\\]]+",s={className:"string",relevance:0,variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/\S+/}],contains:[e.BACKSLASH_ESCAPE,{className:"template-variable",variants:[{begin:"{{",end:"}}"},{begin:"%{",end:"}"}]}]},i=e.inherit(s,{variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/[^\s,{}[\]]+/}]}),l={end:",",endsWithParent:!0,excludeEnd:!0,contains:[],keywords:n,relevance:0},t={begin:"{",end:"}",contains:[l],illegal:"\\n",relevance:0},g={begin:"\\[",end:"\\]",contains:[l],illegal:"\\n",relevance:0},b=[{className:"attr",variants:[{begin:"\\w[\\w :\\/.-]*:(?=[ \t]|$)"},{begin:'"\\w[\\w :\\/.-]*":(?=[ \t]|$)'},{begin:"'\\w[\\w :\\/.-]*':(?=[ \t]|$)"}]},{className:"meta",begin:"^---s*$",relevance:10},{className:"string",begin:"[\\|>]([0-9]?[+-])?[ ]*\\n( *)[\\S ]+\\n(\\2[\\S ]+\\n?)*"},{begin:"<%[%=-]?",end:"[%-]?%>",subLanguage:"ruby",excludeBegin:!0,excludeEnd:!0,relevance:0},{className:"type",begin:"!\\w+!"+a},{className:"type",begin:"!<"+a+">"},{className:"type",begin:"!"+a},{className:"type",begin:"!!"+a},{className:"meta",begin:"&"+e.UNDERSCORE_IDENT_RE+"$"},{className:"meta",begin:"\\*"+e.UNDERSCORE_IDENT_RE+"$"},{className:"bullet",begin:"\\-(?=[ ]|$)",relevance:0},e.HASH_COMMENT_MODE,{beginKeywords:n,keywords:{literal:n}},{className:"number",begin:"\\b[0-9]{4}(-[0-9][0-9]){0,2}([Tt \\t][0-9][0-9]?(:[0-9][0-9]){2})?(\\.[0-9]*)?([ \\t])*(Z|[-+][0-9][0-9]?(:[0-9][0-9])?)?\\b"},{className:"number",begin:e.C_NUMBER_RE+"\\b"},t,g,s],c=[...b];return c.pop(),c.push(i),l.contains=c,{name:"YAML",case_insensitive:!0,aliases:["yml","YAML"],contains:b}}}());hljs.registerLanguage("d",function(){"use strict";return function(e){var a={$pattern:e.UNDERSCORE_IDENT_RE,keyword:"abstract alias align asm assert auto body break byte case cast catch class const continue debug default delete deprecated do else enum export extern final finally for foreach foreach_reverse|10 goto if immutable import in inout int interface invariant is lazy macro mixin module new nothrow out override package pragma private protected public pure ref return scope shared static struct super switch synchronized template this throw try typedef typeid typeof union unittest version void volatile while with __FILE__ __LINE__ __gshared|10 __thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ __VERSION__",built_in:"bool cdouble cent cfloat char creal dchar delegate double dstring float function idouble ifloat ireal long real short string ubyte ucent uint ulong ushort wchar wstring",literal:"false null true"},d="((0|[1-9][\\d_]*)|0[bB][01_]+|0[xX]([\\da-fA-F][\\da-fA-F_]*|_[\\da-fA-F][\\da-fA-F_]*))",n="\\\\(['\"\\?\\\\abfnrtv]|u[\\dA-Fa-f]{4}|[0-7]{1,3}|x[\\dA-Fa-f]{2}|U[\\dA-Fa-f]{8})|&[a-zA-Z\\d]{2,};",t={className:"number",begin:"\\b"+d+"(L|u|U|Lu|LU|uL|UL)?",relevance:0},_={className:"number",begin:"\\b(((0[xX](([\\da-fA-F][\\da-fA-F_]*|_[\\da-fA-F][\\da-fA-F_]*)\\.([\\da-fA-F][\\da-fA-F_]*|_[\\da-fA-F][\\da-fA-F_]*)|\\.?([\\da-fA-F][\\da-fA-F_]*|_[\\da-fA-F][\\da-fA-F_]*))[pP][+-]?(0|[1-9][\\d_]*|\\d[\\d_]*|[\\d_]+?\\d))|((0|[1-9][\\d_]*|\\d[\\d_]*|[\\d_]+?\\d)(\\.\\d*|([eE][+-]?(0|[1-9][\\d_]*|\\d[\\d_]*|[\\d_]+?\\d)))|\\d+\\.(0|[1-9][\\d_]*|\\d[\\d_]*|[\\d_]+?\\d)(0|[1-9][\\d_]*|\\d[\\d_]*|[\\d_]+?\\d)|\\.(0|[1-9][\\d_]*)([eE][+-]?(0|[1-9][\\d_]*|\\d[\\d_]*|[\\d_]+?\\d))?))([fF]|L|i|[fF]i|Li)?|"+d+"(i|[fF]i|Li))",relevance:0},r={className:"string",begin:"'("+n+"|.)",end:"'",illegal:"."},i={className:"string",begin:'"',contains:[{begin:n,relevance:0}],end:'"[cwd]?'},s=e.COMMENT("\\/\\+","\\+\\/",{contains:["self"],relevance:10});return{name:"D",keywords:a,contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,s,{className:"string",begin:'x"[\\da-fA-F\\s\\n\\r]*"[cwd]?',relevance:10},i,{className:"string",begin:'[rq]"',end:'"[cwd]?',relevance:5},{className:"string",begin:"`",end:"`[cwd]?"},{className:"string",begin:'q"\\{',end:'\\}"'},_,t,r,{className:"meta",begin:"^#!",end:"$",relevance:5},{className:"meta",begin:"#(line)",end:"$",relevance:5},{className:"keyword",begin:"@[a-zA-Z_][a-zA-Z_\\d]*"}]}}}());hljs.registerLanguage("properties",function(){"use strict";return function(e){var n="[ \\t\\f]*",t="("+n+"[:=]"+n+"|[ \\t\\f]+)",a="([^\\\\:= \\t\\f\\n]|\\\\.)+",s={end:t,relevance:0,starts:{className:"string",end:/$/,relevance:0,contains:[{begin:"\\\\\\n"}]}};return{name:".properties",case_insensitive:!0,illegal:/\S/,contains:[e.COMMENT("^\\s*[!#]","$"),{begin:"([^\\\\\\W:= \\t\\f\\n]|\\\\.)+"+t,returnBegin:!0,contains:[{className:"attr",begin:"([^\\\\\\W:= \\t\\f\\n]|\\\\.)+",endsParent:!0,relevance:0}],starts:s},{begin:a+t,returnBegin:!0,relevance:0,contains:[{className:"meta",begin:a,endsParent:!0,relevance:0}],starts:s},{className:"attr",relevance:0,begin:a+n+"$"}]}}}());hljs.registerLanguage("http",function(){"use strict";return function(e){var n="HTTP/[0-9\\.]+";return{name:"HTTP",aliases:["https"],illegal:"\\S",contains:[{begin:"^"+n,end:"$",contains:[{className:"number",begin:"\\b\\d{3}\\b"}]},{begin:"^[A-Z]+ (.*?) "+n+"$",returnBegin:!0,end:"$",contains:[{className:"string",begin:" ",end:" ",excludeBegin:!0,excludeEnd:!0},{begin:n},{className:"keyword",begin:"[A-Z]+"}]},{className:"attribute",begin:"^\\w",end:": ",excludeEnd:!0,illegal:"\\n|\\s|=",starts:{end:"$",relevance:0}},{begin:"\\n\\n",starts:{subLanguage:[],endsWithParent:!0}}]}}}());hljs.registerLanguage("haskell",function(){"use strict";return function(e){var n={variants:[e.COMMENT("--","$"),e.COMMENT("{-","-}",{contains:["self"]})]},i={className:"meta",begin:"{-#",end:"#-}"},a={className:"meta",begin:"^#",end:"$"},s={className:"type",begin:"\\b[A-Z][\\w']*",relevance:0},l={begin:"\\(",end:"\\)",illegal:'"',contains:[i,a,{className:"type",begin:"\\b[A-Z][\\w]*(\\((\\.\\.|,|\\w+)\\))?"},e.inherit(e.TITLE_MODE,{begin:"[_a-z][\\w']*"}),n]};return{name:"Haskell",aliases:["hs"],keywords:"let in if then else case of where do module import hiding qualified type data newtype deriving class instance as default infix infixl infixr foreign export ccall stdcall cplusplus jvm dotnet safe unsafe family forall mdo proc rec",contains:[{beginKeywords:"module",end:"where",keywords:"module where",contains:[l,n],illegal:"\\W\\.|;"},{begin:"\\bimport\\b",end:"$",keywords:"import qualified as hiding",contains:[l,n],illegal:"\\W\\.|;"},{className:"class",begin:"^(\\s*)?(class|instance)\\b",end:"where",keywords:"class family instance where",contains:[s,l,n]},{className:"class",begin:"\\b(data|(new)?type)\\b",end:"$",keywords:"data family type newtype deriving",contains:[i,s,l,{begin:"{",end:"}",contains:l.contains},n]},{beginKeywords:"default",end:"$",contains:[s,l,n]},{beginKeywords:"infix infixl infixr",end:"$",contains:[e.C_NUMBER_MODE,n]},{begin:"\\bforeign\\b",end:"$",keywords:"foreign import export ccall stdcall cplusplus jvm dotnet safe unsafe",contains:[s,e.QUOTE_STRING_MODE,n]},{className:"meta",begin:"#!\\/usr\\/bin\\/env runhaskell",end:"$"},i,a,e.QUOTE_STRING_MODE,e.C_NUMBER_MODE,s,e.inherit(e.TITLE_MODE,{begin:"^[_a-z][\\w']*"}),n,{begin:"->|<-"}]}}}());hljs.registerLanguage("handlebars",function(){"use strict";function e(...e){return e.map(e=>(function(e){return e?"string"==typeof e?e:e.source:null})(e)).join("")}return function(n){const a={"builtin-name":"action bindattr collection component concat debugger each each-in get hash if in input link-to loc log lookup mut outlet partial query-params render template textarea unbound unless view with yield"},t=/\[.*?\]/,s=/[^\s!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~]+/,i=e("(",/'.*?'/,"|",/".*?"/,"|",t,"|",s,"|",/\.|\//,")+"),r=e("(",t,"|",s,")(?==)"),l={begin:i,lexemes:/[\w.\/]+/},c=n.inherit(l,{keywords:{literal:"true false undefined null"}}),o={begin:/\(/,end:/\)/},m={className:"attr",begin:r,relevance:0,starts:{begin:/=/,end:/=/,starts:{contains:[n.NUMBER_MODE,n.QUOTE_STRING_MODE,n.APOS_STRING_MODE,c,o]}}},d={contains:[n.NUMBER_MODE,n.QUOTE_STRING_MODE,n.APOS_STRING_MODE,{begin:/as\s+\|/,keywords:{keyword:"as"},end:/\|/,contains:[{begin:/\w+/}]},m,c,o],returnEnd:!0},g=n.inherit(l,{className:"name",keywords:a,starts:n.inherit(d,{end:/\)/})});o.contains=[g];const u=n.inherit(l,{keywords:a,className:"name",starts:n.inherit(d,{end:/}}/})}),b=n.inherit(l,{keywords:a,className:"name"}),h=n.inherit(l,{className:"name",keywords:a,starts:n.inherit(d,{end:/}}/})});return{name:"Handlebars",aliases:["hbs","html.hbs","html.handlebars","htmlbars"],case_insensitive:!0,subLanguage:"xml",contains:[{begin:/\\\{\{/,skip:!0},{begin:/\\\\(?=\{\{)/,skip:!0},n.COMMENT(/\{\{!--/,/--\}\}/),n.COMMENT(/\{\{!/,/\}\}/),{className:"template-tag",begin:/\{\{\{\{(?!\/)/,end:/\}\}\}\}/,contains:[u],starts:{end:/\{\{\{\{\//,returnEnd:!0,subLanguage:"xml"}},{className:"template-tag",begin:/\{\{\{\{\//,end:/\}\}\}\}/,contains:[b]},{className:"template-tag",begin:/\{\{#/,end:/\}\}/,contains:[u]},{className:"template-tag",begin:/\{\{(?=else\}\})/,end:/\}\}/,keywords:"else"},{className:"template-tag",begin:/\{\{\//,end:/\}\}/,contains:[b]},{className:"template-variable",begin:/\{\{\{/,end:/\}\}\}/,contains:[h]},{className:"template-variable",begin:/\{\{/,end:/\}\}/,contains:[h]}]}}}());hljs.registerLanguage("rust",function(){"use strict";return function(e){var n="([ui](8|16|32|64|128|size)|f(32|64))?",t="drop i8 i16 i32 i64 i128 isize u8 u16 u32 u64 u128 usize f32 f64 str char bool Box Option Result String Vec Copy Send Sized Sync Drop Fn FnMut FnOnce ToOwned Clone Debug PartialEq PartialOrd Eq Ord AsRef AsMut Into From Default Iterator Extend IntoIterator DoubleEndedIterator ExactSizeIterator SliceConcatExt ToString assert! assert_eq! bitflags! bytes! cfg! col! concat! concat_idents! debug_assert! debug_assert_eq! env! panic! file! format! format_args! include_bin! include_str! line! local_data_key! module_path! option_env! print! println! select! stringify! try! unimplemented! unreachable! vec! write! writeln! macro_rules! assert_ne! debug_assert_ne!";return{name:"Rust",aliases:["rs"],keywords:{$pattern:e.IDENT_RE+"!?",keyword:"abstract as async await become box break const continue crate do dyn else enum extern false final fn for if impl in let loop macro match mod move mut override priv pub ref return self Self static struct super trait true try type typeof unsafe unsized use virtual where while yield",literal:"true false Some None Ok Err",built_in:t},illegal:""}]}}}());hljs.registerLanguage("cpp",function(){"use strict";return function(e){var t=e.getLanguage("c-like").rawDefinition();return t.disableAutodetect=!1,t.name="C++",t.aliases=["cc","c++","h++","hpp","hh","hxx","cxx"],t}}());hljs.registerLanguage("ini",function(){"use strict";function e(e){return e?"string"==typeof e?e:e.source:null}function n(...n){return n.map(n=>e(n)).join("")}return function(a){var s={className:"number",relevance:0,variants:[{begin:/([\+\-]+)?[\d]+_[\d_]+/},{begin:a.NUMBER_RE}]},i=a.COMMENT();i.variants=[{begin:/;/,end:/$/},{begin:/#/,end:/$/}];var t={className:"variable",variants:[{begin:/\$[\w\d"][\w\d_]*/},{begin:/\$\{(.*?)}/}]},r={className:"literal",begin:/\bon|off|true|false|yes|no\b/},l={className:"string",contains:[a.BACKSLASH_ESCAPE],variants:[{begin:"'''",end:"'''",relevance:10},{begin:'"""',end:'"""',relevance:10},{begin:'"',end:'"'},{begin:"'",end:"'"}]},c={begin:/\[/,end:/\]/,contains:[i,r,t,l,s,"self"],relevance:0},g="("+[/[A-Za-z0-9_-]+/,/"(\\"|[^"])*"/,/'[^']*'/].map(n=>e(n)).join("|")+")";return{name:"TOML, also INI",aliases:["toml"],case_insensitive:!0,illegal:/\S/,contains:[i,{className:"section",begin:/\[+/,end:/\]+/},{begin:n(g,"(\\s*\\.\\s*",g,")*",n("(?=",/\s*=\s*[^#\s]/,")")),className:"attr",starts:{end:/$/,contains:[i,c,r,t,l,s]}}]}}}());hljs.registerLanguage("objectivec",function(){"use strict";return function(e){var n=/[a-zA-Z@][a-zA-Z0-9_]*/,_={$pattern:n,keyword:"@interface @class @protocol @implementation"};return{name:"Objective-C",aliases:["mm","objc","obj-c"],keywords:{$pattern:n,keyword:"int float while char export sizeof typedef const struct for union unsigned long volatile static bool mutable if do return goto void enum else break extern asm case short default double register explicit signed typename this switch continue wchar_t inline readonly assign readwrite self @synchronized id typeof nonatomic super unichar IBOutlet IBAction strong weak copy in out inout bycopy byref oneway __strong __weak __block __autoreleasing @private @protected @public @try @property @end @throw @catch @finally @autoreleasepool @synthesize @dynamic @selector @optional @required @encode @package @import @defs @compatibility_alias __bridge __bridge_transfer __bridge_retained __bridge_retain __covariant __contravariant __kindof _Nonnull _Nullable _Null_unspecified __FUNCTION__ __PRETTY_FUNCTION__ __attribute__ getter setter retain unsafe_unretained nonnull nullable null_unspecified null_resettable class instancetype NS_DESIGNATED_INITIALIZER NS_UNAVAILABLE NS_REQUIRES_SUPER NS_RETURNS_INNER_POINTER NS_INLINE NS_AVAILABLE NS_DEPRECATED NS_ENUM NS_OPTIONS NS_SWIFT_UNAVAILABLE NS_ASSUME_NONNULL_BEGIN NS_ASSUME_NONNULL_END NS_REFINED_FOR_SWIFT NS_SWIFT_NAME NS_SWIFT_NOTHROW NS_DURING NS_HANDLER NS_ENDHANDLER NS_VALUERETURN NS_VOIDRETURN",literal:"false true FALSE TRUE nil YES NO NULL",built_in:"BOOL dispatch_once_t dispatch_queue_t dispatch_sync dispatch_async dispatch_once"},illegal:"/,end:/$/,illegal:"\\n"},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"class",begin:"("+_.keyword.split(" ").join("|")+")\\b",end:"({|$)",excludeEnd:!0,keywords:_,contains:[e.UNDERSCORE_TITLE_MODE]},{begin:"\\."+e.UNDERSCORE_IDENT_RE,relevance:0}]}}}());hljs.registerLanguage("apache",function(){"use strict";return function(e){var n={className:"number",begin:"\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}(:\\d{1,5})?"};return{name:"Apache config",aliases:["apacheconf"],case_insensitive:!0,contains:[e.HASH_COMMENT_MODE,{className:"section",begin:"",contains:[n,{className:"number",begin:":\\d{1,5}"},e.inherit(e.QUOTE_STRING_MODE,{relevance:0})]},{className:"attribute",begin:/\w+/,relevance:0,keywords:{nomarkup:"order deny allow setenv rewriterule rewriteengine rewritecond documentroot sethandler errordocument loadmodule options header listen serverroot servername"},starts:{end:/$/,relevance:0,keywords:{literal:"on off all deny allow"},contains:[{className:"meta",begin:"\\s\\[",end:"\\]$"},{className:"variable",begin:"[\\$%]\\{",end:"\\}",contains:["self",{className:"number",begin:"[\\$%]\\d+"}]},n,{className:"number",begin:"\\d+"},e.QUOTE_STRING_MODE]}}],illegal:/\S/}}}());hljs.registerLanguage("java",function(){"use strict";function e(e){return e?"string"==typeof e?e:e.source:null}function n(e){return a("(",e,")?")}function a(...n){return n.map(n=>e(n)).join("")}function s(...n){return"("+n.map(n=>e(n)).join("|")+")"}return function(e){var t="false synchronized int abstract float private char boolean var static null if const for true while long strictfp finally protected import native final void enum else break transient catch instanceof byte super volatile case assert short package default double public try this switch continue throws protected public private module requires exports do",i={className:"meta",begin:"@[À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*",contains:[{begin:/\(/,end:/\)/,contains:["self"]}]},r=e=>a("[",e,"]+([",e,"_]*[",e,"]+)?"),c={className:"number",variants:[{begin:`\\b(0[bB]${r("01")})[lL]?`},{begin:`\\b(0${r("0-7")})[dDfFlL]?`},{begin:a(/\b0[xX]/,s(a(r("a-fA-F0-9"),/\./,r("a-fA-F0-9")),a(r("a-fA-F0-9"),/\.?/),a(/\./,r("a-fA-F0-9"))),/([pP][+-]?(\d+))?/,/[fFdDlL]?/)},{begin:a(/\b/,s(a(/\d*\./,r("\\d")),r("\\d")),/[eE][+-]?[\d]+[dDfF]?/)},{begin:a(/\b/,r(/\d/),n(/\.?/),n(r(/\d/)),/[dDfFlL]?/)}],relevance:0};return{name:"Java",aliases:["jsp"],keywords:t,illegal:/<\/|#/,contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{begin:/\w+@/,relevance:0},{className:"doctag",begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{className:"class",beginKeywords:"class interface",end:/[{;=]/,excludeEnd:!0,keywords:"class interface",illegal:/[:"\[\]]/,contains:[{beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]},{beginKeywords:"new throw return else",relevance:0},{className:"function",begin:"([À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*(<[À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*(\\s*,\\s*[À-ʸa-zA-Z_$][À-ʸa-zA-Z_$0-9]*)*>)?\\s+)+"+e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,end:/[{;=]/,excludeEnd:!0,keywords:t,contains:[{begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,contains:[e.UNDERSCORE_TITLE_MODE]},{className:"params",begin:/\(/,end:/\)/,keywords:t,relevance:0,contains:[i,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,e.C_NUMBER_MODE,e.C_BLOCK_COMMENT_MODE]},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},c,i]}}}());hljs.registerLanguage("x86asm",function(){"use strict";return function(s){return{name:"Intel x86 Assembly",case_insensitive:!0,keywords:{$pattern:"[.%]?"+s.IDENT_RE,keyword:"lock rep repe repz repne repnz xaquire xrelease bnd nobnd aaa aad aam aas adc add and arpl bb0_reset bb1_reset bound bsf bsr bswap bt btc btr bts call cbw cdq cdqe clc cld cli clts cmc cmp cmpsb cmpsd cmpsq cmpsw cmpxchg cmpxchg486 cmpxchg8b cmpxchg16b cpuid cpu_read cpu_write cqo cwd cwde daa das dec div dmint emms enter equ f2xm1 fabs fadd faddp fbld fbstp fchs fclex fcmovb fcmovbe fcmove fcmovnb fcmovnbe fcmovne fcmovnu fcmovu fcom fcomi fcomip fcomp fcompp fcos fdecstp fdisi fdiv fdivp fdivr fdivrp femms feni ffree ffreep fiadd ficom ficomp fidiv fidivr fild fimul fincstp finit fist fistp fisttp fisub fisubr fld fld1 fldcw fldenv fldl2e fldl2t fldlg2 fldln2 fldpi fldz fmul fmulp fnclex fndisi fneni fninit fnop fnsave fnstcw fnstenv fnstsw fpatan fprem fprem1 fptan frndint frstor fsave fscale fsetpm fsin fsincos fsqrt fst fstcw fstenv fstp fstsw fsub fsubp fsubr fsubrp ftst fucom fucomi fucomip fucomp fucompp fxam fxch fxtract fyl2x fyl2xp1 hlt ibts icebp idiv imul in inc incbin insb insd insw int int01 int1 int03 int3 into invd invpcid invlpg invlpga iret iretd iretq iretw jcxz jecxz jrcxz jmp jmpe lahf lar lds lea leave les lfence lfs lgdt lgs lidt lldt lmsw loadall loadall286 lodsb lodsd lodsq lodsw loop loope loopne loopnz loopz lsl lss ltr mfence monitor mov movd movq movsb movsd movsq movsw movsx movsxd movzx mul mwait neg nop not or out outsb outsd outsw packssdw packsswb packuswb paddb paddd paddsb paddsiw paddsw paddusb paddusw paddw pand pandn pause paveb pavgusb pcmpeqb pcmpeqd pcmpeqw pcmpgtb pcmpgtd pcmpgtw pdistib pf2id pfacc pfadd pfcmpeq pfcmpge pfcmpgt pfmax pfmin pfmul pfrcp pfrcpit1 pfrcpit2 pfrsqit1 pfrsqrt pfsub pfsubr pi2fd pmachriw pmaddwd pmagw pmulhriw pmulhrwa pmulhrwc pmulhw pmullw pmvgezb pmvlzb pmvnzb pmvzb pop popa popad popaw popf popfd popfq popfw por prefetch prefetchw pslld psllq psllw psrad psraw psrld psrlq psrlw psubb psubd psubsb psubsiw psubsw psubusb psubusw psubw punpckhbw punpckhdq punpckhwd punpcklbw punpckldq punpcklwd push pusha pushad pushaw pushf pushfd pushfq pushfw pxor rcl rcr rdshr rdmsr rdpmc rdtsc rdtscp ret retf retn rol ror rdm rsdc rsldt rsm rsts sahf sal salc sar sbb scasb scasd scasq scasw sfence sgdt shl shld shr shrd sidt sldt skinit smi smint smintold smsw stc std sti stosb stosd stosq stosw str sub svdc svldt svts swapgs syscall sysenter sysexit sysret test ud0 ud1 ud2b ud2 ud2a umov verr verw fwait wbinvd wrshr wrmsr xadd xbts xchg xlatb xlat xor cmove cmovz cmovne cmovnz cmova cmovnbe cmovae cmovnb cmovb cmovnae cmovbe cmovna cmovg cmovnle cmovge cmovnl cmovl cmovnge cmovle cmovng cmovc cmovnc cmovo cmovno cmovs cmovns cmovp cmovpe cmovnp cmovpo je jz jne jnz ja jnbe jae jnb jb jnae jbe jna jg jnle jge jnl jl jnge jle jng jc jnc jo jno js jns jpo jnp jpe jp sete setz setne setnz seta setnbe setae setnb setnc setb setnae setcset setbe setna setg setnle setge setnl setl setnge setle setng sets setns seto setno setpe setp setpo setnp addps addss andnps andps cmpeqps cmpeqss cmpleps cmpless cmpltps cmpltss cmpneqps cmpneqss cmpnleps cmpnless cmpnltps cmpnltss cmpordps cmpordss cmpunordps cmpunordss cmpps cmpss comiss cvtpi2ps cvtps2pi cvtsi2ss cvtss2si cvttps2pi cvttss2si divps divss ldmxcsr maxps maxss minps minss movaps movhps movlhps movlps movhlps movmskps movntps movss movups mulps mulss orps rcpps rcpss rsqrtps rsqrtss shufps sqrtps sqrtss stmxcsr subps subss ucomiss unpckhps unpcklps xorps fxrstor fxrstor64 fxsave fxsave64 xgetbv xsetbv xsave xsave64 xsaveopt xsaveopt64 xrstor xrstor64 prefetchnta prefetcht0 prefetcht1 prefetcht2 maskmovq movntq pavgb pavgw pextrw pinsrw pmaxsw pmaxub pminsw pminub pmovmskb pmulhuw psadbw pshufw pf2iw pfnacc pfpnacc pi2fw pswapd maskmovdqu clflush movntdq movnti movntpd movdqa movdqu movdq2q movq2dq paddq pmuludq pshufd pshufhw pshuflw pslldq psrldq psubq punpckhqdq punpcklqdq addpd addsd andnpd andpd cmpeqpd cmpeqsd cmplepd cmplesd cmpltpd cmpltsd cmpneqpd cmpneqsd cmpnlepd cmpnlesd cmpnltpd cmpnltsd cmpordpd cmpordsd cmpunordpd cmpunordsd cmppd comisd cvtdq2pd cvtdq2ps cvtpd2dq cvtpd2pi cvtpd2ps cvtpi2pd cvtps2dq cvtps2pd cvtsd2si cvtsd2ss cvtsi2sd cvtss2sd cvttpd2pi cvttpd2dq cvttps2dq cvttsd2si divpd divsd maxpd maxsd minpd minsd movapd movhpd movlpd movmskpd movupd mulpd mulsd orpd shufpd sqrtpd sqrtsd subpd subsd ucomisd unpckhpd unpcklpd xorpd addsubpd addsubps haddpd haddps hsubpd hsubps lddqu movddup movshdup movsldup clgi stgi vmcall vmclear vmfunc vmlaunch vmload vmmcall vmptrld vmptrst vmread vmresume vmrun vmsave vmwrite vmxoff vmxon invept invvpid pabsb pabsw pabsd palignr phaddw phaddd phaddsw phsubw phsubd phsubsw pmaddubsw pmulhrsw pshufb psignb psignw psignd extrq insertq movntsd movntss lzcnt blendpd blendps blendvpd blendvps dppd dpps extractps insertps movntdqa mpsadbw packusdw pblendvb pblendw pcmpeqq pextrb pextrd pextrq phminposuw pinsrb pinsrd pinsrq pmaxsb pmaxsd pmaxud pmaxuw pminsb pminsd pminud pminuw pmovsxbw pmovsxbd pmovsxbq pmovsxwd pmovsxwq pmovsxdq pmovzxbw pmovzxbd pmovzxbq pmovzxwd pmovzxwq pmovzxdq pmuldq pmulld ptest roundpd roundps roundsd roundss crc32 pcmpestri pcmpestrm pcmpistri pcmpistrm pcmpgtq popcnt getsec pfrcpv pfrsqrtv movbe aesenc aesenclast aesdec aesdeclast aesimc aeskeygenassist vaesenc vaesenclast vaesdec vaesdeclast vaesimc vaeskeygenassist vaddpd vaddps vaddsd vaddss vaddsubpd vaddsubps vandpd vandps vandnpd vandnps vblendpd vblendps vblendvpd vblendvps vbroadcastss vbroadcastsd vbroadcastf128 vcmpeq_ospd vcmpeqpd vcmplt_ospd vcmpltpd vcmple_ospd vcmplepd vcmpunord_qpd vcmpunordpd vcmpneq_uqpd vcmpneqpd vcmpnlt_uspd vcmpnltpd vcmpnle_uspd vcmpnlepd vcmpord_qpd vcmpordpd vcmpeq_uqpd vcmpnge_uspd vcmpngepd vcmpngt_uspd vcmpngtpd vcmpfalse_oqpd vcmpfalsepd vcmpneq_oqpd vcmpge_ospd vcmpgepd vcmpgt_ospd vcmpgtpd vcmptrue_uqpd vcmptruepd vcmplt_oqpd vcmple_oqpd vcmpunord_spd vcmpneq_uspd vcmpnlt_uqpd vcmpnle_uqpd vcmpord_spd vcmpeq_uspd vcmpnge_uqpd vcmpngt_uqpd vcmpfalse_ospd vcmpneq_ospd vcmpge_oqpd vcmpgt_oqpd vcmptrue_uspd vcmppd vcmpeq_osps vcmpeqps vcmplt_osps vcmpltps vcmple_osps vcmpleps vcmpunord_qps vcmpunordps vcmpneq_uqps vcmpneqps vcmpnlt_usps vcmpnltps vcmpnle_usps vcmpnleps vcmpord_qps vcmpordps vcmpeq_uqps vcmpnge_usps vcmpngeps vcmpngt_usps vcmpngtps vcmpfalse_oqps vcmpfalseps vcmpneq_oqps vcmpge_osps vcmpgeps vcmpgt_osps vcmpgtps vcmptrue_uqps vcmptrueps vcmplt_oqps vcmple_oqps vcmpunord_sps vcmpneq_usps vcmpnlt_uqps vcmpnle_uqps vcmpord_sps vcmpeq_usps vcmpnge_uqps vcmpngt_uqps vcmpfalse_osps vcmpneq_osps vcmpge_oqps vcmpgt_oqps vcmptrue_usps vcmpps vcmpeq_ossd vcmpeqsd vcmplt_ossd vcmpltsd vcmple_ossd vcmplesd vcmpunord_qsd vcmpunordsd vcmpneq_uqsd vcmpneqsd vcmpnlt_ussd vcmpnltsd vcmpnle_ussd vcmpnlesd vcmpord_qsd vcmpordsd vcmpeq_uqsd vcmpnge_ussd vcmpngesd vcmpngt_ussd vcmpngtsd vcmpfalse_oqsd vcmpfalsesd vcmpneq_oqsd vcmpge_ossd vcmpgesd vcmpgt_ossd vcmpgtsd vcmptrue_uqsd vcmptruesd vcmplt_oqsd vcmple_oqsd vcmpunord_ssd vcmpneq_ussd vcmpnlt_uqsd vcmpnle_uqsd vcmpord_ssd vcmpeq_ussd vcmpnge_uqsd vcmpngt_uqsd vcmpfalse_ossd vcmpneq_ossd vcmpge_oqsd vcmpgt_oqsd vcmptrue_ussd vcmpsd vcmpeq_osss vcmpeqss vcmplt_osss vcmpltss vcmple_osss vcmpless vcmpunord_qss vcmpunordss vcmpneq_uqss vcmpneqss vcmpnlt_usss vcmpnltss vcmpnle_usss vcmpnless vcmpord_qss vcmpordss vcmpeq_uqss vcmpnge_usss vcmpngess vcmpngt_usss vcmpngtss vcmpfalse_oqss vcmpfalsess vcmpneq_oqss vcmpge_osss vcmpgess vcmpgt_osss vcmpgtss vcmptrue_uqss vcmptruess vcmplt_oqss vcmple_oqss vcmpunord_sss vcmpneq_usss vcmpnlt_uqss vcmpnle_uqss vcmpord_sss vcmpeq_usss vcmpnge_uqss vcmpngt_uqss vcmpfalse_osss vcmpneq_osss vcmpge_oqss vcmpgt_oqss vcmptrue_usss vcmpss vcomisd vcomiss vcvtdq2pd vcvtdq2ps vcvtpd2dq vcvtpd2ps vcvtps2dq vcvtps2pd vcvtsd2si vcvtsd2ss vcvtsi2sd vcvtsi2ss vcvtss2sd vcvtss2si vcvttpd2dq vcvttps2dq vcvttsd2si vcvttss2si vdivpd vdivps vdivsd vdivss vdppd vdpps vextractf128 vextractps vhaddpd vhaddps vhsubpd vhsubps vinsertf128 vinsertps vlddqu vldqqu vldmxcsr vmaskmovdqu vmaskmovps vmaskmovpd vmaxpd vmaxps vmaxsd vmaxss vminpd vminps vminsd vminss vmovapd vmovaps vmovd vmovq vmovddup vmovdqa vmovqqa vmovdqu vmovqqu vmovhlps vmovhpd vmovhps vmovlhps vmovlpd vmovlps vmovmskpd vmovmskps vmovntdq vmovntqq vmovntdqa vmovntpd vmovntps vmovsd vmovshdup vmovsldup vmovss vmovupd vmovups vmpsadbw vmulpd vmulps vmulsd vmulss vorpd vorps vpabsb vpabsw vpabsd vpacksswb vpackssdw vpackuswb vpackusdw vpaddb vpaddw vpaddd vpaddq vpaddsb vpaddsw vpaddusb vpaddusw vpalignr vpand vpandn vpavgb vpavgw vpblendvb vpblendw vpcmpestri vpcmpestrm vpcmpistri vpcmpistrm vpcmpeqb vpcmpeqw vpcmpeqd vpcmpeqq vpcmpgtb vpcmpgtw vpcmpgtd vpcmpgtq vpermilpd vpermilps vperm2f128 vpextrb vpextrw vpextrd vpextrq vphaddw vphaddd vphaddsw vphminposuw vphsubw vphsubd vphsubsw vpinsrb vpinsrw vpinsrd vpinsrq vpmaddwd vpmaddubsw vpmaxsb vpmaxsw vpmaxsd vpmaxub vpmaxuw vpmaxud vpminsb vpminsw vpminsd vpminub vpminuw vpminud vpmovmskb vpmovsxbw vpmovsxbd vpmovsxbq vpmovsxwd vpmovsxwq vpmovsxdq vpmovzxbw vpmovzxbd vpmovzxbq vpmovzxwd vpmovzxwq vpmovzxdq vpmulhuw vpmulhrsw vpmulhw vpmullw vpmulld vpmuludq vpmuldq vpor vpsadbw vpshufb vpshufd vpshufhw vpshuflw vpsignb vpsignw vpsignd vpslldq vpsrldq vpsllw vpslld vpsllq vpsraw vpsrad vpsrlw vpsrld vpsrlq vptest vpsubb vpsubw vpsubd vpsubq vpsubsb vpsubsw vpsubusb vpsubusw vpunpckhbw vpunpckhwd vpunpckhdq vpunpckhqdq vpunpcklbw vpunpcklwd vpunpckldq vpunpcklqdq vpxor vrcpps vrcpss vrsqrtps vrsqrtss vroundpd vroundps vroundsd vroundss vshufpd vshufps vsqrtpd vsqrtps vsqrtsd vsqrtss vstmxcsr vsubpd vsubps vsubsd vsubss vtestps vtestpd vucomisd vucomiss vunpckhpd vunpckhps vunpcklpd vunpcklps vxorpd vxorps vzeroall vzeroupper pclmullqlqdq pclmulhqlqdq pclmullqhqdq pclmulhqhqdq pclmulqdq vpclmullqlqdq vpclmulhqlqdq vpclmullqhqdq vpclmulhqhqdq vpclmulqdq vfmadd132ps vfmadd132pd vfmadd312ps vfmadd312pd vfmadd213ps vfmadd213pd vfmadd123ps vfmadd123pd vfmadd231ps vfmadd231pd vfmadd321ps vfmadd321pd vfmaddsub132ps vfmaddsub132pd vfmaddsub312ps vfmaddsub312pd vfmaddsub213ps vfmaddsub213pd vfmaddsub123ps vfmaddsub123pd vfmaddsub231ps vfmaddsub231pd vfmaddsub321ps vfmaddsub321pd vfmsub132ps vfmsub132pd vfmsub312ps vfmsub312pd vfmsub213ps vfmsub213pd vfmsub123ps vfmsub123pd vfmsub231ps vfmsub231pd vfmsub321ps vfmsub321pd vfmsubadd132ps vfmsubadd132pd vfmsubadd312ps vfmsubadd312pd vfmsubadd213ps vfmsubadd213pd vfmsubadd123ps vfmsubadd123pd vfmsubadd231ps vfmsubadd231pd vfmsubadd321ps vfmsubadd321pd vfnmadd132ps vfnmadd132pd vfnmadd312ps vfnmadd312pd vfnmadd213ps vfnmadd213pd vfnmadd123ps vfnmadd123pd vfnmadd231ps vfnmadd231pd vfnmadd321ps vfnmadd321pd vfnmsub132ps vfnmsub132pd vfnmsub312ps vfnmsub312pd vfnmsub213ps vfnmsub213pd vfnmsub123ps vfnmsub123pd vfnmsub231ps vfnmsub231pd vfnmsub321ps vfnmsub321pd vfmadd132ss vfmadd132sd vfmadd312ss vfmadd312sd vfmadd213ss vfmadd213sd vfmadd123ss vfmadd123sd vfmadd231ss vfmadd231sd vfmadd321ss vfmadd321sd vfmsub132ss vfmsub132sd vfmsub312ss vfmsub312sd vfmsub213ss vfmsub213sd vfmsub123ss vfmsub123sd vfmsub231ss vfmsub231sd vfmsub321ss vfmsub321sd vfnmadd132ss vfnmadd132sd vfnmadd312ss vfnmadd312sd vfnmadd213ss vfnmadd213sd vfnmadd123ss vfnmadd123sd vfnmadd231ss vfnmadd231sd vfnmadd321ss vfnmadd321sd vfnmsub132ss vfnmsub132sd vfnmsub312ss vfnmsub312sd vfnmsub213ss vfnmsub213sd vfnmsub123ss vfnmsub123sd vfnmsub231ss vfnmsub231sd vfnmsub321ss vfnmsub321sd rdfsbase rdgsbase rdrand wrfsbase wrgsbase vcvtph2ps vcvtps2ph adcx adox rdseed clac stac xstore xcryptecb xcryptcbc xcryptctr xcryptcfb xcryptofb montmul xsha1 xsha256 llwpcb slwpcb lwpval lwpins vfmaddpd vfmaddps vfmaddsd vfmaddss vfmaddsubpd vfmaddsubps vfmsubaddpd vfmsubaddps vfmsubpd vfmsubps vfmsubsd vfmsubss vfnmaddpd vfnmaddps vfnmaddsd vfnmaddss vfnmsubpd vfnmsubps vfnmsubsd vfnmsubss vfrczpd vfrczps vfrczsd vfrczss vpcmov vpcomb vpcomd vpcomq vpcomub vpcomud vpcomuq vpcomuw vpcomw vphaddbd vphaddbq vphaddbw vphadddq vphaddubd vphaddubq vphaddubw vphaddudq vphadduwd vphadduwq vphaddwd vphaddwq vphsubbw vphsubdq vphsubwd vpmacsdd vpmacsdqh vpmacsdql vpmacssdd vpmacssdqh vpmacssdql vpmacsswd vpmacssww vpmacswd vpmacsww vpmadcsswd vpmadcswd vpperm vprotb vprotd vprotq vprotw vpshab vpshad vpshaq vpshaw vpshlb vpshld vpshlq vpshlw vbroadcasti128 vpblendd vpbroadcastb vpbroadcastw vpbroadcastd vpbroadcastq vpermd vpermpd vpermps vpermq vperm2i128 vextracti128 vinserti128 vpmaskmovd vpmaskmovq vpsllvd vpsllvq vpsravd vpsrlvd vpsrlvq vgatherdpd vgatherqpd vgatherdps vgatherqps vpgatherdd vpgatherqd vpgatherdq vpgatherqq xabort xbegin xend xtest andn bextr blci blcic blsi blsic blcfill blsfill blcmsk blsmsk blsr blcs bzhi mulx pdep pext rorx sarx shlx shrx tzcnt tzmsk t1mskc valignd valignq vblendmpd vblendmps vbroadcastf32x4 vbroadcastf64x4 vbroadcasti32x4 vbroadcasti64x4 vcompresspd vcompressps vcvtpd2udq vcvtps2udq vcvtsd2usi vcvtss2usi vcvttpd2udq vcvttps2udq vcvttsd2usi vcvttss2usi vcvtudq2pd vcvtudq2ps vcvtusi2sd vcvtusi2ss vexpandpd vexpandps vextractf32x4 vextractf64x4 vextracti32x4 vextracti64x4 vfixupimmpd vfixupimmps vfixupimmsd vfixupimmss vgetexppd vgetexpps vgetexpsd vgetexpss vgetmantpd vgetmantps vgetmantsd vgetmantss vinsertf32x4 vinsertf64x4 vinserti32x4 vinserti64x4 vmovdqa32 vmovdqa64 vmovdqu32 vmovdqu64 vpabsq vpandd vpandnd vpandnq vpandq vpblendmd vpblendmq vpcmpltd vpcmpled vpcmpneqd vpcmpnltd vpcmpnled vpcmpd vpcmpltq vpcmpleq vpcmpneqq vpcmpnltq vpcmpnleq vpcmpq vpcmpequd vpcmpltud vpcmpleud vpcmpnequd vpcmpnltud vpcmpnleud vpcmpud vpcmpequq vpcmpltuq vpcmpleuq vpcmpnequq vpcmpnltuq vpcmpnleuq vpcmpuq vpcompressd vpcompressq vpermi2d vpermi2pd vpermi2ps vpermi2q vpermt2d vpermt2pd vpermt2ps vpermt2q vpexpandd vpexpandq vpmaxsq vpmaxuq vpminsq vpminuq vpmovdb vpmovdw vpmovqb vpmovqd vpmovqw vpmovsdb vpmovsdw vpmovsqb vpmovsqd vpmovsqw vpmovusdb vpmovusdw vpmovusqb vpmovusqd vpmovusqw vpord vporq vprold vprolq vprolvd vprolvq vprord vprorq vprorvd vprorvq vpscatterdd vpscatterdq vpscatterqd vpscatterqq vpsraq vpsravq vpternlogd vpternlogq vptestmd vptestmq vptestnmd vptestnmq vpxord vpxorq vrcp14pd vrcp14ps vrcp14sd vrcp14ss vrndscalepd vrndscaleps vrndscalesd vrndscaless vrsqrt14pd vrsqrt14ps vrsqrt14sd vrsqrt14ss vscalefpd vscalefps vscalefsd vscalefss vscatterdpd vscatterdps vscatterqpd vscatterqps vshuff32x4 vshuff64x2 vshufi32x4 vshufi64x2 kandnw kandw kmovw knotw kortestw korw kshiftlw kshiftrw kunpckbw kxnorw kxorw vpbroadcastmb2q vpbroadcastmw2d vpconflictd vpconflictq vplzcntd vplzcntq vexp2pd vexp2ps vrcp28pd vrcp28ps vrcp28sd vrcp28ss vrsqrt28pd vrsqrt28ps vrsqrt28sd vrsqrt28ss vgatherpf0dpd vgatherpf0dps vgatherpf0qpd vgatherpf0qps vgatherpf1dpd vgatherpf1dps vgatherpf1qpd vgatherpf1qps vscatterpf0dpd vscatterpf0dps vscatterpf0qpd vscatterpf0qps vscatterpf1dpd vscatterpf1dps vscatterpf1qpd vscatterpf1qps prefetchwt1 bndmk bndcl bndcu bndcn bndmov bndldx bndstx sha1rnds4 sha1nexte sha1msg1 sha1msg2 sha256rnds2 sha256msg1 sha256msg2 hint_nop0 hint_nop1 hint_nop2 hint_nop3 hint_nop4 hint_nop5 hint_nop6 hint_nop7 hint_nop8 hint_nop9 hint_nop10 hint_nop11 hint_nop12 hint_nop13 hint_nop14 hint_nop15 hint_nop16 hint_nop17 hint_nop18 hint_nop19 hint_nop20 hint_nop21 hint_nop22 hint_nop23 hint_nop24 hint_nop25 hint_nop26 hint_nop27 hint_nop28 hint_nop29 hint_nop30 hint_nop31 hint_nop32 hint_nop33 hint_nop34 hint_nop35 hint_nop36 hint_nop37 hint_nop38 hint_nop39 hint_nop40 hint_nop41 hint_nop42 hint_nop43 hint_nop44 hint_nop45 hint_nop46 hint_nop47 hint_nop48 hint_nop49 hint_nop50 hint_nop51 hint_nop52 hint_nop53 hint_nop54 hint_nop55 hint_nop56 hint_nop57 hint_nop58 hint_nop59 hint_nop60 hint_nop61 hint_nop62 hint_nop63",built_in:"ip eip rip al ah bl bh cl ch dl dh sil dil bpl spl r8b r9b r10b r11b r12b r13b r14b r15b ax bx cx dx si di bp sp r8w r9w r10w r11w r12w r13w r14w r15w eax ebx ecx edx esi edi ebp esp eip r8d r9d r10d r11d r12d r13d r14d r15d rax rbx rcx rdx rsi rdi rbp rsp r8 r9 r10 r11 r12 r13 r14 r15 cs ds es fs gs ss st st0 st1 st2 st3 st4 st5 st6 st7 mm0 mm1 mm2 mm3 mm4 mm5 mm6 mm7 xmm0 xmm1 xmm2 xmm3 xmm4 xmm5 xmm6 xmm7 xmm8 xmm9 xmm10 xmm11 xmm12 xmm13 xmm14 xmm15 xmm16 xmm17 xmm18 xmm19 xmm20 xmm21 xmm22 xmm23 xmm24 xmm25 xmm26 xmm27 xmm28 xmm29 xmm30 xmm31 ymm0 ymm1 ymm2 ymm3 ymm4 ymm5 ymm6 ymm7 ymm8 ymm9 ymm10 ymm11 ymm12 ymm13 ymm14 ymm15 ymm16 ymm17 ymm18 ymm19 ymm20 ymm21 ymm22 ymm23 ymm24 ymm25 ymm26 ymm27 ymm28 ymm29 ymm30 ymm31 zmm0 zmm1 zmm2 zmm3 zmm4 zmm5 zmm6 zmm7 zmm8 zmm9 zmm10 zmm11 zmm12 zmm13 zmm14 zmm15 zmm16 zmm17 zmm18 zmm19 zmm20 zmm21 zmm22 zmm23 zmm24 zmm25 zmm26 zmm27 zmm28 zmm29 zmm30 zmm31 k0 k1 k2 k3 k4 k5 k6 k7 bnd0 bnd1 bnd2 bnd3 cr0 cr1 cr2 cr3 cr4 cr8 dr0 dr1 dr2 dr3 dr8 tr3 tr4 tr5 tr6 tr7 r0 r1 r2 r3 r4 r5 r6 r7 r0b r1b r2b r3b r4b r5b r6b r7b r0w r1w r2w r3w r4w r5w r6w r7w r0d r1d r2d r3d r4d r5d r6d r7d r0h r1h r2h r3h r0l r1l r2l r3l r4l r5l r6l r7l r8l r9l r10l r11l r12l r13l r14l r15l db dw dd dq dt ddq do dy dz resb resw resd resq rest resdq reso resy resz incbin equ times byte word dword qword nosplit rel abs seg wrt strict near far a32 ptr",meta:"%define %xdefine %+ %undef %defstr %deftok %assign %strcat %strlen %substr %rotate %elif %else %endif %if %ifmacro %ifctx %ifidn %ifidni %ifid %ifnum %ifstr %iftoken %ifempty %ifenv %error %warning %fatal %rep %endrep %include %push %pop %repl %pathsearch %depend %use %arg %stacksize %local %line %comment %endcomment .nolist __FILE__ __LINE__ __SECT__ __BITS__ __OUTPUT_FORMAT__ __DATE__ __TIME__ __DATE_NUM__ __TIME_NUM__ __UTC_DATE__ __UTC_TIME__ __UTC_DATE_NUM__ __UTC_TIME_NUM__ __PASS__ struc endstruc istruc at iend align alignb sectalign daz nodaz up down zero default option assume public bits use16 use32 use64 default section segment absolute extern global common cpu float __utf16__ __utf16le__ __utf16be__ __utf32__ __utf32le__ __utf32be__ __float8__ __float16__ __float32__ __float64__ __float80m__ __float80e__ __float128l__ __float128h__ __Infinity__ __QNaN__ __SNaN__ Inf NaN QNaN SNaN float8 float16 float32 float64 float80m float80e float128l float128h __FLOAT_DAZ__ __FLOAT_ROUND__ __FLOAT__"},contains:[s.COMMENT(";","$",{relevance:0}),{className:"number",variants:[{begin:"\\b(?:([0-9][0-9_]*)?\\.[0-9_]*(?:[eE][+-]?[0-9_]+)?|(0[Xx])?[0-9][0-9_]*\\.?[0-9_]*(?:[pP](?:[+-]?[0-9_]+)?)?)\\b",relevance:0},{begin:"\\$[0-9][0-9A-Fa-f]*",relevance:0},{begin:"\\b(?:[0-9A-Fa-f][0-9A-Fa-f_]*[Hh]|[0-9][0-9_]*[DdTt]?|[0-7][0-7_]*[QqOo]|[0-1][0-1_]*[BbYy])\\b"},{begin:"\\b(?:0[Xx][0-9A-Fa-f_]+|0[DdTt][0-9_]+|0[QqOo][0-7_]+|0[BbYy][0-1_]+)\\b"}]},s.QUOTE_STRING_MODE,{className:"string",variants:[{begin:"'",end:"[^\\\\]'"},{begin:"`",end:"[^\\\\]`"}],relevance:0},{className:"symbol",variants:[{begin:"^\\s*[A-Za-z._?][A-Za-z0-9_$#@~.?]*(:|\\s+label)"},{begin:"^\\s*%%[A-Za-z0-9_$#@~.?]*:"}],relevance:0},{className:"subst",begin:"%[0-9]+",relevance:0},{className:"subst",begin:"%!S+",relevance:0},{className:"meta",begin:/^\s*\.[\w_-]+/}]}}}());hljs.registerLanguage("kotlin",function(){"use strict";return function(e){var n={keyword:"abstract as val var vararg get set class object open private protected public noinline crossinline dynamic final enum if else do while for when throw try catch finally import package is in fun override companion reified inline lateinit init interface annotation data sealed internal infix operator out by constructor super tailrec where const inner suspend typealias external expect actual trait volatile transient native default",built_in:"Byte Short Char Int Long Boolean Float Double Void Unit Nothing",literal:"true false null"},a={className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"@"},i={className:"subst",begin:"\\${",end:"}",contains:[e.C_NUMBER_MODE]},s={className:"variable",begin:"\\$"+e.UNDERSCORE_IDENT_RE},t={className:"string",variants:[{begin:'"""',end:'"""(?=[^"])',contains:[s,i]},{begin:"'",end:"'",illegal:/\n/,contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"',illegal:/\n/,contains:[e.BACKSLASH_ESCAPE,s,i]}]};i.contains.push(t);var r={className:"meta",begin:"@(?:file|property|field|get|set|receiver|param|setparam|delegate)\\s*:(?:\\s*"+e.UNDERSCORE_IDENT_RE+")?"},l={className:"meta",begin:"@"+e.UNDERSCORE_IDENT_RE,contains:[{begin:/\(/,end:/\)/,contains:[e.inherit(t,{className:"meta-string"})]}]},c=e.COMMENT("/\\*","\\*/",{contains:[e.C_BLOCK_COMMENT_MODE]}),o={variants:[{className:"type",begin:e.UNDERSCORE_IDENT_RE},{begin:/\(/,end:/\)/,contains:[]}]},d=o;return d.variants[1].contains=[o],o.variants[1].contains=[d],{name:"Kotlin",aliases:["kt"],keywords:n,contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,c,{className:"keyword",begin:/\b(break|continue|return|this)\b/,starts:{contains:[{className:"symbol",begin:/@\w+/}]}},a,r,l,{className:"function",beginKeywords:"fun",end:"[(]|$",returnBegin:!0,excludeEnd:!0,keywords:n,illegal:/fun\s+(<.*>)?[^\s\(]+(\s+[^\s\(]+)\s*=/,relevance:5,contains:[{begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,contains:[e.UNDERSCORE_TITLE_MODE]},{className:"type",begin://,keywords:"reified",relevance:0},{className:"params",begin:/\(/,end:/\)/,endsParent:!0,keywords:n,relevance:0,contains:[{begin:/:/,end:/[=,\/]/,endsWithParent:!0,contains:[o,e.C_LINE_COMMENT_MODE,c],relevance:0},e.C_LINE_COMMENT_MODE,c,r,l,t,e.C_NUMBER_MODE]},c]},{className:"class",beginKeywords:"class interface trait",end:/[:\{(]|$/,excludeEnd:!0,illegal:"extends implements",contains:[{beginKeywords:"public protected internal private constructor"},e.UNDERSCORE_TITLE_MODE,{className:"type",begin://,excludeBegin:!0,excludeEnd:!0,relevance:0},{className:"type",begin:/[,:]\s*/,end:/[<\(,]|$/,excludeBegin:!0,returnEnd:!0},r,l]},t,{className:"meta",begin:"^#!/usr/bin/env",end:"$",illegal:"\n"},{className:"number",begin:"\\b(0[bB]([01]+[01_]+[01]+|[01]+)|0[xX]([a-fA-F0-9]+[a-fA-F0-9_]+[a-fA-F0-9]+|[a-fA-F0-9]+)|(([\\d]+[\\d_]+[\\d]+|[\\d]+)(\\.([\\d]+[\\d_]+[\\d]+|[\\d]+))?|\\.([\\d]+[\\d_]+[\\d]+|[\\d]+))([eE][-+]?\\d+)?)[lLfF]?",relevance:0}]}}}());hljs.registerLanguage("armasm",function(){"use strict";return function(s){const e={variants:[s.COMMENT("^[ \\t]*(?=#)","$",{relevance:0,excludeBegin:!0}),s.COMMENT("[;@]","$",{relevance:0}),s.C_LINE_COMMENT_MODE,s.C_BLOCK_COMMENT_MODE]};return{name:"ARM Assembly",case_insensitive:!0,aliases:["arm"],keywords:{$pattern:"\\.?"+s.IDENT_RE,meta:".2byte .4byte .align .ascii .asciz .balign .byte .code .data .else .end .endif .endm .endr .equ .err .exitm .extern .global .hword .if .ifdef .ifndef .include .irp .long .macro .rept .req .section .set .skip .space .text .word .arm .thumb .code16 .code32 .force_thumb .thumb_func .ltorg ALIAS ALIGN ARM AREA ASSERT ATTR CN CODE CODE16 CODE32 COMMON CP DATA DCB DCD DCDU DCDO DCFD DCFDU DCI DCQ DCQU DCW DCWU DN ELIF ELSE END ENDFUNC ENDIF ENDP ENTRY EQU EXPORT EXPORTAS EXTERN FIELD FILL FUNCTION GBLA GBLL GBLS GET GLOBAL IF IMPORT INCBIN INCLUDE INFO KEEP LCLA LCLL LCLS LTORG MACRO MAP MEND MEXIT NOFP OPT PRESERVE8 PROC QN READONLY RELOC REQUIRE REQUIRE8 RLIST FN ROUT SETA SETL SETS SN SPACE SUBT THUMB THUMBX TTL WHILE WEND ",built_in:"r0 r1 r2 r3 r4 r5 r6 r7 r8 r9 r10 r11 r12 r13 r14 r15 pc lr sp ip sl sb fp a1 a2 a3 a4 v1 v2 v3 v4 v5 v6 v7 v8 f0 f1 f2 f3 f4 f5 f6 f7 p0 p1 p2 p3 p4 p5 p6 p7 p8 p9 p10 p11 p12 p13 p14 p15 c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12 c13 c14 c15 q0 q1 q2 q3 q4 q5 q6 q7 q8 q9 q10 q11 q12 q13 q14 q15 cpsr_c cpsr_x cpsr_s cpsr_f cpsr_cx cpsr_cxs cpsr_xs cpsr_xsf cpsr_sf cpsr_cxsf spsr_c spsr_x spsr_s spsr_f spsr_cx spsr_cxs spsr_xs spsr_xsf spsr_sf spsr_cxsf s0 s1 s2 s3 s4 s5 s6 s7 s8 s9 s10 s11 s12 s13 s14 s15 s16 s17 s18 s19 s20 s21 s22 s23 s24 s25 s26 s27 s28 s29 s30 s31 d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 d10 d11 d12 d13 d14 d15 d16 d17 d18 d19 d20 d21 d22 d23 d24 d25 d26 d27 d28 d29 d30 d31 {PC} {VAR} {TRUE} {FALSE} {OPT} {CONFIG} {ENDIAN} {CODESIZE} {CPU} {FPU} {ARCHITECTURE} {PCSTOREOFFSET} {ARMASM_VERSION} {INTER} {ROPI} {RWPI} {SWST} {NOSWST} . @"},contains:[{className:"keyword",begin:"\\b(adc|(qd?|sh?|u[qh]?)?add(8|16)?|usada?8|(q|sh?|u[qh]?)?(as|sa)x|and|adrl?|sbc|rs[bc]|asr|b[lx]?|blx|bxj|cbn?z|tb[bh]|bic|bfc|bfi|[su]bfx|bkpt|cdp2?|clz|clrex|cmp|cmn|cpsi[ed]|cps|setend|dbg|dmb|dsb|eor|isb|it[te]{0,3}|lsl|lsr|ror|rrx|ldm(([id][ab])|f[ds])?|ldr((s|ex)?[bhd])?|movt?|mvn|mra|mar|mul|[us]mull|smul[bwt][bt]|smu[as]d|smmul|smmla|mla|umlaal|smlal?([wbt][bt]|d)|mls|smlsl?[ds]|smc|svc|sev|mia([bt]{2}|ph)?|mrr?c2?|mcrr2?|mrs|msr|orr|orn|pkh(tb|bt)|rbit|rev(16|sh)?|sel|[su]sat(16)?|nop|pop|push|rfe([id][ab])?|stm([id][ab])?|str(ex)?[bhd]?|(qd?)?sub|(sh?|q|u[qh]?)?sub(8|16)|[su]xt(a?h|a?b(16)?)|srs([id][ab])?|swpb?|swi|smi|tst|teq|wfe|wfi|yield)(eq|ne|cs|cc|mi|pl|vs|vc|hi|ls|ge|lt|gt|le|al|hs|lo)?[sptrx]?(?=\\s)"},e,s.QUOTE_STRING_MODE,{className:"string",begin:"'",end:"[^\\\\]'",relevance:0},{className:"title",begin:"\\|",end:"\\|",illegal:"\\n",relevance:0},{className:"number",variants:[{begin:"[#$=]?0x[0-9a-f]+"},{begin:"[#$=]?0b[01]+"},{begin:"[#$=]\\d+"},{begin:"\\b\\d+"}],relevance:0},{className:"symbol",variants:[{begin:"^[ \\t]*[a-z_\\.\\$][a-z0-9_\\.\\$]+:"},{begin:"^[a-z_\\.\\$][a-z0-9_\\.\\$]+"},{begin:"[=#]\\w+"}],relevance:0}]}}}());hljs.registerLanguage("go",function(){"use strict";return function(e){var n={keyword:"break default func interface select case map struct chan else goto package switch const fallthrough if range type continue for import return var go defer bool byte complex64 complex128 float32 float64 int8 int16 int32 int64 string uint8 uint16 uint32 uint64 int uint uintptr rune",literal:"true false iota nil",built_in:"append cap close complex copy imag len make new panic print println real recover delete"};return{name:"Go",aliases:["golang"],keywords:n,illegal:">>|\.\.\.) /},i={className:"subst",begin:/\{/,end:/\}/,keywords:n,illegal:/#/},s={begin:/\{\{/,relevance:0},r={className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{begin:/(u|b)?r?'''/,end:/'''/,contains:[e.BACKSLASH_ESCAPE,a],relevance:10},{begin:/(u|b)?r?"""/,end:/"""/,contains:[e.BACKSLASH_ESCAPE,a],relevance:10},{begin:/(fr|rf|f)'''/,end:/'''/,contains:[e.BACKSLASH_ESCAPE,a,s,i]},{begin:/(fr|rf|f)"""/,end:/"""/,contains:[e.BACKSLASH_ESCAPE,a,s,i]},{begin:/(u|r|ur)'/,end:/'/,relevance:10},{begin:/(u|r|ur)"/,end:/"/,relevance:10},{begin:/(b|br)'/,end:/'/},{begin:/(b|br)"/,end:/"/},{begin:/(fr|rf|f)'/,end:/'/,contains:[e.BACKSLASH_ESCAPE,s,i]},{begin:/(fr|rf|f)"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,s,i]},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},l={className:"number",relevance:0,variants:[{begin:e.BINARY_NUMBER_RE+"[lLjJ]?"},{begin:"\\b(0o[0-7]+)[lLjJ]?"},{begin:e.C_NUMBER_RE+"[lLjJ]?"}]},t={className:"params",variants:[{begin:/\(\s*\)/,skip:!0,className:null},{begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,contains:["self",a,l,r,e.HASH_COMMENT_MODE]}]};return i.contains=[r,l,a],{name:"Python",aliases:["py","gyp","ipython"],keywords:n,illegal:/(<\/|->|\?)|=>/,contains:[a,l,{beginKeywords:"if",relevance:0},r,e.HASH_COMMENT_MODE,{variants:[{className:"function",beginKeywords:"def"},{className:"class",beginKeywords:"class"}],end:/:/,illegal:/[${=;\n,]/,contains:[e.UNDERSCORE_TITLE_MODE,t,{begin:/->/,endsWithParent:!0,keywords:"None"}]},{className:"meta",begin:/^[\t ]*@/,end:/$/},{begin:/\b(print|exec)\(/}]}}}());hljs.registerLanguage("shell",function(){"use strict";return function(s){return{name:"Shell Session",aliases:["console"],contains:[{className:"meta",begin:"^\\s{0,3}[/\\w\\d\\[\\]()@-]*[>%$#]",starts:{end:"$",subLanguage:"bash"}}]}}}());hljs.registerLanguage("scala",function(){"use strict";return function(e){var n={className:"subst",variants:[{begin:"\\$[A-Za-z0-9_]+"},{begin:"\\${",end:"}"}]},a={className:"string",variants:[{begin:'"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{begin:'"""',end:'"""',relevance:10},{begin:'[a-z]+"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE,n]},{className:"string",begin:'[a-z]+"""',end:'"""',contains:[n],relevance:10}]},s={className:"type",begin:"\\b[A-Z][A-Za-z0-9_]*",relevance:0},t={className:"title",begin:/[^0-9\n\t "'(),.`{}\[\]:;][^\n\t "'(),.`{}\[\]:;]+|[^0-9\n\t "'(),.`{}\[\]:;=]/,relevance:0},i={className:"class",beginKeywords:"class object trait type",end:/[:={\[\n;]/,excludeEnd:!0,contains:[{beginKeywords:"extends with",relevance:10},{begin:/\[/,end:/\]/,excludeBegin:!0,excludeEnd:!0,relevance:0,contains:[s]},{className:"params",begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,relevance:0,contains:[s]},t]},l={className:"function",beginKeywords:"def",end:/[:={\[(\n;]/,excludeEnd:!0,contains:[t]};return{name:"Scala",keywords:{literal:"true false null",keyword:"type yield lazy override def with val var sealed abstract private trait object if forSome for while throw finally protected extends import final return else break new catch super class case package default try this match continue throws implicit"},contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,a,{className:"symbol",begin:"'\\w[\\w\\d_]*(?!')"},s,l,i,e.C_NUMBER_MODE,{className:"meta",begin:"@[A-Za-z]+"}]}}}());hljs.registerLanguage("julia",function(){"use strict";return function(e){var r="[A-Za-z_\\u00A1-\\uFFFF][A-Za-z_0-9\\u00A1-\\uFFFF]*",t={$pattern:r,keyword:"in isa where baremodule begin break catch ccall const continue do else elseif end export false finally for function global if import importall let local macro module quote return true try using while type immutable abstract bitstype typealias ",literal:"true false ARGS C_NULL DevNull ENDIAN_BOM ENV I Inf Inf16 Inf32 Inf64 InsertionSort JULIA_HOME LOAD_PATH MergeSort NaN NaN16 NaN32 NaN64 PROGRAM_FILE QuickSort RoundDown RoundFromZero RoundNearest RoundNearestTiesAway RoundNearestTiesUp RoundToZero RoundUp STDERR STDIN STDOUT VERSION catalan e|0 eu|0 eulergamma golden im nothing pi γ π φ ",built_in:"ANY AbstractArray AbstractChannel AbstractFloat AbstractMatrix AbstractRNG AbstractSerializer AbstractSet AbstractSparseArray AbstractSparseMatrix AbstractSparseVector AbstractString AbstractUnitRange AbstractVecOrMat AbstractVector Any ArgumentError Array AssertionError Associative Base64DecodePipe Base64EncodePipe Bidiagonal BigFloat BigInt BitArray BitMatrix BitVector Bool BoundsError BufferStream CachingPool CapturedException CartesianIndex CartesianRange Cchar Cdouble Cfloat Channel Char Cint Cintmax_t Clong Clonglong ClusterManager Cmd CodeInfo Colon Complex Complex128 Complex32 Complex64 CompositeException Condition ConjArray ConjMatrix ConjVector Cptrdiff_t Cshort Csize_t Cssize_t Cstring Cuchar Cuint Cuintmax_t Culong Culonglong Cushort Cwchar_t Cwstring DataType Date DateFormat DateTime DenseArray DenseMatrix DenseVecOrMat DenseVector Diagonal Dict DimensionMismatch Dims DirectIndexString Display DivideError DomainError EOFError EachLine Enum Enumerate ErrorException Exception ExponentialBackOff Expr Factorization FileMonitor Float16 Float32 Float64 Function Future GlobalRef GotoNode HTML Hermitian IO IOBuffer IOContext IOStream IPAddr IPv4 IPv6 IndexCartesian IndexLinear IndexStyle InexactError InitError Int Int128 Int16 Int32 Int64 Int8 IntSet Integer InterruptException InvalidStateException Irrational KeyError LabelNode LinSpace LineNumberNode LoadError LowerTriangular MIME Matrix MersenneTwister Method MethodError MethodTable Module NTuple NewvarNode NullException Nullable Number ObjectIdDict OrdinalRange OutOfMemoryError OverflowError Pair ParseError PartialQuickSort PermutedDimsArray Pipe PollingFileWatcher ProcessExitedException Ptr QuoteNode RandomDevice Range RangeIndex Rational RawFD ReadOnlyMemoryError Real ReentrantLock Ref Regex RegexMatch RemoteChannel RemoteException RevString RoundingMode RowVector SSAValue SegmentationFault SerializationState Set SharedArray SharedMatrix SharedVector Signed SimpleVector Slot SlotNumber SparseMatrixCSC SparseVector StackFrame StackOverflowError StackTrace StepRange StepRangeLen StridedArray StridedMatrix StridedVecOrMat StridedVector String SubArray SubString SymTridiagonal Symbol Symmetric SystemError TCPSocket Task Text TextDisplay Timer Tridiagonal Tuple Type TypeError TypeMapEntry TypeMapLevel TypeName TypeVar TypedSlot UDPSocket UInt UInt128 UInt16 UInt32 UInt64 UInt8 UndefRefError UndefVarError UnicodeError UniformScaling Union UnionAll UnitRange Unsigned UpperTriangular Val Vararg VecElement VecOrMat Vector VersionNumber Void WeakKeyDict WeakRef WorkerConfig WorkerPool "},a={keywords:t,illegal:/<\//},n={className:"subst",begin:/\$\(/,end:/\)/,keywords:t},o={className:"variable",begin:"\\$"+r},i={className:"string",contains:[e.BACKSLASH_ESCAPE,n,o],variants:[{begin:/\w*"""/,end:/"""\w*/,relevance:10},{begin:/\w*"/,end:/"\w*/}]},l={className:"string",contains:[e.BACKSLASH_ESCAPE,n,o],begin:"`",end:"`"},s={className:"meta",begin:"@"+r};return a.name="Julia",a.contains=[{className:"number",begin:/(\b0x[\d_]*(\.[\d_]*)?|0x\.\d[\d_]*)p[-+]?\d+|\b0[box][a-fA-F0-9][a-fA-F0-9_]*|(\b\d[\d_]*(\.[\d_]*)?|\.\d[\d_]*)([eEfF][-+]?\d+)?/,relevance:0},{className:"string",begin:/'(.|\\[xXuU][a-zA-Z0-9]+)'/},i,l,s,{className:"comment",variants:[{begin:"#=",end:"=#",relevance:10},{begin:"#",end:"$"}]},e.HASH_COMMENT_MODE,{className:"keyword",begin:"\\b(((abstract|primitive)\\s+)type|(mutable\\s+)?struct)\\b"},{begin:/<:/}],n.contains=a.contains,a}}());hljs.registerLanguage("php-template",function(){"use strict";return function(n){return{name:"PHP template",subLanguage:"xml",contains:[{begin:/<\?(php|=)?/,end:/\?>/,subLanguage:"php",contains:[{begin:"/\\*",end:"\\*/",skip:!0},{begin:'b"',end:'"',skip:!0},{begin:"b'",end:"'",skip:!0},n.inherit(n.APOS_STRING_MODE,{illegal:null,className:null,contains:null,skip:!0}),n.inherit(n.QUOTE_STRING_MODE,{illegal:null,className:null,contains:null,skip:!0})]}]}}}());hljs.registerLanguage("scss",function(){"use strict";return function(e){var t={className:"variable",begin:"(\\$[a-zA-Z-][a-zA-Z0-9_-]*)\\b"},i={className:"number",begin:"#[0-9A-Fa-f]+"};return e.CSS_NUMBER_MODE,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,e.C_BLOCK_COMMENT_MODE,{name:"SCSS",case_insensitive:!0,illegal:"[=/|']",contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"selector-id",begin:"\\#[A-Za-z0-9_-]+",relevance:0},{className:"selector-class",begin:"\\.[A-Za-z0-9_-]+",relevance:0},{className:"selector-attr",begin:"\\[",end:"\\]",illegal:"$"},{className:"selector-tag",begin:"\\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video)\\b",relevance:0},{className:"selector-pseudo",begin:":(visited|valid|root|right|required|read-write|read-only|out-range|optional|only-of-type|only-child|nth-of-type|nth-last-of-type|nth-last-child|nth-child|not|link|left|last-of-type|last-child|lang|invalid|indeterminate|in-range|hover|focus|first-of-type|first-line|first-letter|first-child|first|enabled|empty|disabled|default|checked|before|after|active)"},{className:"selector-pseudo",begin:"::(after|before|choices|first-letter|first-line|repeat-index|repeat-item|selection|value)"},t,{className:"attribute",begin:"\\b(src|z-index|word-wrap|word-spacing|word-break|width|widows|white-space|visibility|vertical-align|unicode-bidi|transition-timing-function|transition-property|transition-duration|transition-delay|transition|transform-style|transform-origin|transform|top|text-underline-position|text-transform|text-shadow|text-rendering|text-overflow|text-indent|text-decoration-style|text-decoration-line|text-decoration-color|text-decoration|text-align-last|text-align|tab-size|table-layout|right|resize|quotes|position|pointer-events|perspective-origin|perspective|page-break-inside|page-break-before|page-break-after|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-y|overflow-x|overflow-wrap|overflow|outline-width|outline-style|outline-offset|outline-color|outline|orphans|order|opacity|object-position|object-fit|normal|none|nav-up|nav-right|nav-left|nav-index|nav-down|min-width|min-height|max-width|max-height|mask|marks|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|left|justify-content|initial|inherit|ime-mode|image-orientation|image-resolution|image-rendering|icon|hyphens|height|font-weight|font-variant-ligatures|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-language-override|font-kerning|font-feature-settings|font-family|font|float|flex-wrap|flex-shrink|flex-grow|flex-flow|flex-direction|flex-basis|flex|filter|empty-cells|display|direction|cursor|counter-reset|counter-increment|content|column-width|column-span|column-rule-width|column-rule-style|column-rule-color|column-rule|column-gap|column-fill|column-count|columns|color|clip-path|clip|clear|caption-side|break-inside|break-before|break-after|box-sizing|box-shadow|box-decoration-break|bottom|border-width|border-top-width|border-top-style|border-top-right-radius|border-top-left-radius|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-radius|border-left-width|border-left-style|border-left-color|border-left|border-image-width|border-image-source|border-image-slice|border-image-repeat|border-image-outset|border-image|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-right-radius|border-bottom-left-radius|border-bottom-color|border-bottom|border|background-size|background-repeat|background-position|background-origin|background-image|background-color|background-clip|background-attachment|background-blend-mode|background|backface-visibility|auto|animation-timing-function|animation-play-state|animation-name|animation-iteration-count|animation-fill-mode|animation-duration|animation-direction|animation-delay|animation|align-self|align-items|align-content)\\b",illegal:"[^\\s]"},{begin:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"},{begin:":",end:";",contains:[t,i,e.CSS_NUMBER_MODE,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,{className:"meta",begin:"!important"}]},{begin:"@(page|font-face)",lexemes:"@[a-z-]+",keywords:"@page @font-face"},{begin:"@",end:"[{;]",returnBegin:!0,keywords:"and or not only",contains:[{begin:"@[a-z-]+",className:"keyword"},t,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,i,e.CSS_NUMBER_MODE]}]}}}());hljs.registerLanguage("r",function(){"use strict";return function(e){var n="([a-zA-Z]|\\.[a-zA-Z.])[a-zA-Z0-9._]*";return{name:"R",contains:[e.HASH_COMMENT_MODE,{begin:n,keywords:{$pattern:n,keyword:"function if in break next repeat else for return switch while try tryCatch stop warning require library attach detach source setMethod setGeneric setGroupGeneric setClass ...",literal:"NULL NA TRUE FALSE T F Inf NaN NA_integer_|10 NA_real_|10 NA_character_|10 NA_complex_|10"},relevance:0},{className:"number",begin:"0[xX][0-9a-fA-F]+[Li]?\\b",relevance:0},{className:"number",begin:"\\d+(?:[eE][+\\-]?\\d*)?L\\b",relevance:0},{className:"number",begin:"\\d+\\.(?!\\d)(?:i\\b)?",relevance:0},{className:"number",begin:"\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d*)?i?\\b",relevance:0},{className:"number",begin:"\\.\\d+(?:[eE][+\\-]?\\d*)?i?\\b",relevance:0},{begin:"`",end:"`",relevance:0},{className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{begin:'"',end:'"'},{begin:"'",end:"'"}]}]}}}());hljs.registerLanguage("sql",function(){"use strict";return function(e){var t=e.COMMENT("--","$");return{name:"SQL",case_insensitive:!0,illegal:/[<>{}*]/,contains:[{beginKeywords:"begin end start commit rollback savepoint lock alter create drop rename call delete do handler insert load replace select truncate update set show pragma grant merge describe use explain help declare prepare execute deallocate release unlock purge reset change stop analyze cache flush optimize repair kill install uninstall checksum restore check backup revoke comment values with",end:/;/,endsWithParent:!0,keywords:{$pattern:/[\w\.]+/,keyword:"as abort abs absolute acc acce accep accept access accessed accessible account acos action activate add addtime admin administer advanced advise aes_decrypt aes_encrypt after agent aggregate ali alia alias all allocate allow alter always analyze ancillary and anti any anydata anydataset anyschema anytype apply archive archived archivelog are as asc ascii asin assembly assertion associate asynchronous at atan atn2 attr attri attrib attribu attribut attribute attributes audit authenticated authentication authid authors auto autoallocate autodblink autoextend automatic availability avg backup badfile basicfile before begin beginning benchmark between bfile bfile_base big bigfile bin binary_double binary_float binlog bit_and bit_count bit_length bit_or bit_xor bitmap blob_base block blocksize body both bound bucket buffer_cache buffer_pool build bulk by byte byteordermark bytes cache caching call calling cancel capacity cascade cascaded case cast catalog category ceil ceiling chain change changed char_base char_length character_length characters characterset charindex charset charsetform charsetid check checksum checksum_agg child choose chr chunk class cleanup clear client clob clob_base clone close cluster_id cluster_probability cluster_set clustering coalesce coercibility col collate collation collect colu colum column column_value columns columns_updated comment commit compact compatibility compiled complete composite_limit compound compress compute concat concat_ws concurrent confirm conn connec connect connect_by_iscycle connect_by_isleaf connect_by_root connect_time connection consider consistent constant constraint constraints constructor container content contents context contributors controlfile conv convert convert_tz corr corr_k corr_s corresponding corruption cos cost count count_big counted covar_pop covar_samp cpu_per_call cpu_per_session crc32 create creation critical cross cube cume_dist curdate current current_date current_time current_timestamp current_user cursor curtime customdatum cycle data database databases datafile datafiles datalength date_add date_cache date_format date_sub dateadd datediff datefromparts datename datepart datetime2fromparts day day_to_second dayname dayofmonth dayofweek dayofyear days db_role_change dbtimezone ddl deallocate declare decode decompose decrement decrypt deduplicate def defa defau defaul default defaults deferred defi defin define degrees delayed delegate delete delete_all delimited demand dense_rank depth dequeue des_decrypt des_encrypt des_key_file desc descr descri describ describe descriptor deterministic diagnostics difference dimension direct_load directory disable disable_all disallow disassociate discardfile disconnect diskgroup distinct distinctrow distribute distributed div do document domain dotnet double downgrade drop dumpfile duplicate duration each edition editionable editions element ellipsis else elsif elt empty enable enable_all enclosed encode encoding encrypt end end-exec endian enforced engine engines enqueue enterprise entityescaping eomonth error errors escaped evalname evaluate event eventdata events except exception exceptions exchange exclude excluding execu execut execute exempt exists exit exp expire explain explode export export_set extended extent external external_1 external_2 externally extract failed failed_login_attempts failover failure far fast feature_set feature_value fetch field fields file file_name_convert filesystem_like_logging final finish first first_value fixed flash_cache flashback floor flush following follows for forall force foreign form forma format found found_rows freelist freelists freepools fresh from from_base64 from_days ftp full function general generated get get_format get_lock getdate getutcdate global global_name globally go goto grant grants greatest group group_concat group_id grouping grouping_id groups gtid_subtract guarantee guard handler hash hashkeys having hea head headi headin heading heap help hex hierarchy high high_priority hosts hour hours http id ident_current ident_incr ident_seed identified identity idle_time if ifnull ignore iif ilike ilm immediate import in include including increment index indexes indexing indextype indicator indices inet6_aton inet6_ntoa inet_aton inet_ntoa infile initial initialized initially initrans inmemory inner innodb input insert install instance instantiable instr interface interleaved intersect into invalidate invisible is is_free_lock is_ipv4 is_ipv4_compat is_not is_not_null is_used_lock isdate isnull isolation iterate java join json json_exists keep keep_duplicates key keys kill language large last last_day last_insert_id last_value lateral lax lcase lead leading least leaves left len lenght length less level levels library like like2 like4 likec limit lines link list listagg little ln load load_file lob lobs local localtime localtimestamp locate locator lock locked log log10 log2 logfile logfiles logging logical logical_reads_per_call logoff logon logs long loop low low_priority lower lpad lrtrim ltrim main make_set makedate maketime managed management manual map mapping mask master master_pos_wait match matched materialized max maxextents maximize maxinstances maxlen maxlogfiles maxloghistory maxlogmembers maxsize maxtrans md5 measures median medium member memcompress memory merge microsecond mid migration min minextents minimum mining minus minute minutes minvalue missing mod mode model modification modify module monitoring month months mount move movement multiset mutex name name_const names nan national native natural nav nchar nclob nested never new newline next nextval no no_write_to_binlog noarchivelog noaudit nobadfile nocheck nocompress nocopy nocycle nodelay nodiscardfile noentityescaping noguarantee nokeep nologfile nomapping nomaxvalue nominimize nominvalue nomonitoring none noneditionable nonschema noorder nopr nopro noprom nopromp noprompt norely noresetlogs noreverse normal norowdependencies noschemacheck noswitch not nothing notice notnull notrim novalidate now nowait nth_value nullif nulls num numb numbe nvarchar nvarchar2 object ocicoll ocidate ocidatetime ociduration ociinterval ociloblocator ocinumber ociref ocirefcursor ocirowid ocistring ocitype oct octet_length of off offline offset oid oidindex old on online only opaque open operations operator optimal optimize option optionally or oracle oracle_date oradata ord ordaudio orddicom orddoc order ordimage ordinality ordvideo organization orlany orlvary out outer outfile outline output over overflow overriding package pad parallel parallel_enable parameters parent parse partial partition partitions pascal passing password password_grace_time password_lock_time password_reuse_max password_reuse_time password_verify_function patch path patindex pctincrease pctthreshold pctused pctversion percent percent_rank percentile_cont percentile_disc performance period period_add period_diff permanent physical pi pipe pipelined pivot pluggable plugin policy position post_transaction pow power pragma prebuilt precedes preceding precision prediction prediction_cost prediction_details prediction_probability prediction_set prepare present preserve prior priority private private_sga privileges procedural procedure procedure_analyze processlist profiles project prompt protection public publishingservername purge quarter query quick quiesce quota quotename radians raise rand range rank raw read reads readsize rebuild record records recover recovery recursive recycle redo reduced ref reference referenced references referencing refresh regexp_like register regr_avgx regr_avgy regr_count regr_intercept regr_r2 regr_slope regr_sxx regr_sxy reject rekey relational relative relaylog release release_lock relies_on relocate rely rem remainder rename repair repeat replace replicate replication required reset resetlogs resize resource respect restore restricted result result_cache resumable resume retention return returning returns reuse reverse revoke right rlike role roles rollback rolling rollup round row row_count rowdependencies rowid rownum rows rtrim rules safe salt sample save savepoint sb1 sb2 sb4 scan schema schemacheck scn scope scroll sdo_georaster sdo_topo_geometry search sec_to_time second seconds section securefile security seed segment select self semi sequence sequential serializable server servererror session session_user sessions_per_user set sets settings sha sha1 sha2 share shared shared_pool short show shrink shutdown si_averagecolor si_colorhistogram si_featurelist si_positionalcolor si_stillimage si_texture siblings sid sign sin size size_t sizes skip slave sleep smalldatetimefromparts smallfile snapshot some soname sort soundex source space sparse spfile split sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_small_result sql_variant_property sqlcode sqldata sqlerror sqlname sqlstate sqrt square standalone standby start starting startup statement static statistics stats_binomial_test stats_crosstab stats_ks_test stats_mode stats_mw_test stats_one_way_anova stats_t_test_ stats_t_test_indep stats_t_test_one stats_t_test_paired stats_wsr_test status std stddev stddev_pop stddev_samp stdev stop storage store stored str str_to_date straight_join strcmp strict string struct stuff style subdate subpartition subpartitions substitutable substr substring subtime subtring_index subtype success sum suspend switch switchoffset switchover sync synchronous synonym sys sys_xmlagg sysasm sysaux sysdate sysdatetimeoffset sysdba sysoper system system_user sysutcdatetime table tables tablespace tablesample tan tdo template temporary terminated tertiary_weights test than then thread through tier ties time time_format time_zone timediff timefromparts timeout timestamp timestampadd timestampdiff timezone_abbr timezone_minute timezone_region to to_base64 to_date to_days to_seconds todatetimeoffset trace tracking transaction transactional translate translation treat trigger trigger_nestlevel triggers trim truncate try_cast try_convert try_parse type ub1 ub2 ub4 ucase unarchived unbounded uncompress under undo unhex unicode uniform uninstall union unique unix_timestamp unknown unlimited unlock unnest unpivot unrecoverable unsafe unsigned until untrusted unusable unused update updated upgrade upped upper upsert url urowid usable usage use use_stored_outlines user user_data user_resources users using utc_date utc_timestamp uuid uuid_short validate validate_password_strength validation valist value values var var_samp varcharc vari varia variab variabl variable variables variance varp varraw varrawc varray verify version versions view virtual visible void wait wallet warning warnings week weekday weekofyear wellformed when whene whenev wheneve whenever where while whitespace window with within without work wrapped xdb xml xmlagg xmlattributes xmlcast xmlcolattval xmlelement xmlexists xmlforest xmlindex xmlnamespaces xmlpi xmlquery xmlroot xmlschema xmlserialize xmltable xmltype xor year year_to_month years yearweek",literal:"true false null unknown",built_in:"array bigint binary bit blob bool boolean char character date dec decimal float int int8 integer interval number numeric real record serial serial8 smallint text time timestamp tinyint varchar varchar2 varying void"},contains:[{className:"string",begin:"'",end:"'",contains:[{begin:"''"}]},{className:"string",begin:'"',end:'"',contains:[{begin:'""'}]},{className:"string",begin:"`",end:"`"},e.C_NUMBER_MODE,e.C_BLOCK_COMMENT_MODE,t,e.HASH_COMMENT_MODE]},e.C_BLOCK_COMMENT_MODE,t,e.HASH_COMMENT_MODE]}}}());hljs.registerLanguage("c",function(){"use strict";return function(e){var n=e.getLanguage("c-like").rawDefinition();return n.name="C",n.aliases=["c","h"],n}}());hljs.registerLanguage("json",function(){"use strict";return function(n){var e={literal:"true false null"},i=[n.C_LINE_COMMENT_MODE,n.C_BLOCK_COMMENT_MODE],t=[n.QUOTE_STRING_MODE,n.C_NUMBER_MODE],a={end:",",endsWithParent:!0,excludeEnd:!0,contains:t,keywords:e},l={begin:"{",end:"}",contains:[{className:"attr",begin:/"/,end:/"/,contains:[n.BACKSLASH_ESCAPE],illegal:"\\n"},n.inherit(a,{begin:/:/})].concat(i),illegal:"\\S"},s={begin:"\\[",end:"\\]",contains:[n.inherit(a)],illegal:"\\S"};return t.push(l,s),i.forEach((function(n){t.push(n)})),{name:"JSON",contains:t,keywords:e,illegal:"\\S"}}}());hljs.registerLanguage("python-repl",function(){"use strict";return function(n){return{aliases:["pycon"],contains:[{className:"meta",starts:{end:/ |$/,starts:{end:"$",subLanguage:"python"}},variants:[{begin:/^>>>(?=[ ]|$)/},{begin:/^\.\.\.(?=[ ]|$)/}]}]}}}());hljs.registerLanguage("markdown",function(){"use strict";return function(n){const e={begin:"<",end:">",subLanguage:"xml",relevance:0},a={begin:"\\[.+?\\][\\(\\[].*?[\\)\\]]",returnBegin:!0,contains:[{className:"string",begin:"\\[",end:"\\]",excludeBegin:!0,returnEnd:!0,relevance:0},{className:"link",begin:"\\]\\(",end:"\\)",excludeBegin:!0,excludeEnd:!0},{className:"symbol",begin:"\\]\\[",end:"\\]",excludeBegin:!0,excludeEnd:!0}],relevance:10},i={className:"strong",contains:[],variants:[{begin:/_{2}/,end:/_{2}/},{begin:/\*{2}/,end:/\*{2}/}]},s={className:"emphasis",contains:[],variants:[{begin:/\*(?!\*)/,end:/\*/},{begin:/_(?!_)/,end:/_/,relevance:0}]};i.contains.push(s),s.contains.push(i);var c=[e,a];return i.contains=i.contains.concat(c),s.contains=s.contains.concat(c),{name:"Markdown",aliases:["md","mkdown","mkd"],contains:[{className:"section",variants:[{begin:"^#{1,6}",end:"$",contains:c=c.concat(i,s)},{begin:"(?=^.+?\\n[=-]{2,}$)",contains:[{begin:"^[=-]*$"},{begin:"^",end:"\\n",contains:c}]}]},e,{className:"bullet",begin:"^[ \t]*([*+-]|(\\d+\\.))(?=\\s+)",end:"\\s+",excludeEnd:!0},i,s,{className:"quote",begin:"^>\\s+",contains:c,end:"$"},{className:"code",variants:[{begin:"(`{3,})(.|\\n)*?\\1`*[ ]*"},{begin:"(~{3,})(.|\\n)*?\\1~*[ ]*"},{begin:"```",end:"```+[ ]*$"},{begin:"~~~",end:"~~~+[ ]*$"},{begin:"`.+?`"},{begin:"(?=^( {4}|\\t))",contains:[{begin:"^( {4}|\\t)",end:"(\\n)$"}],relevance:0}]},{begin:"^[-\\*]{3,}",end:"$"},a,{begin:/^\[[^\n]+\]:/,returnBegin:!0,contains:[{className:"symbol",begin:/\[/,end:/\]/,excludeBegin:!0,excludeEnd:!0},{className:"link",begin:/:\s*/,end:/$/,excludeBegin:!0}]}]}}}());hljs.registerLanguage("javascript",function(){"use strict";const e=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],n=["true","false","null","undefined","NaN","Infinity"],a=[].concat(["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],["arguments","this","super","console","window","document","localStorage","module","global"],["Intl","DataView","Number","Math","Date","String","RegExp","Object","Function","Boolean","Error","Symbol","Set","Map","WeakSet","WeakMap","Proxy","Reflect","JSON","Promise","Float64Array","Int16Array","Int32Array","Int8Array","Uint16Array","Uint32Array","Float32Array","Array","Uint8Array","Uint8ClampedArray","ArrayBuffer"],["EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"]);function s(e){return r("(?=",e,")")}function r(...e){return e.map(e=>(function(e){return e?"string"==typeof e?e:e.source:null})(e)).join("")}return function(t){var i="[A-Za-z$_][0-9A-Za-z$_]*",c={begin:/<[A-Za-z0-9\\._:-]+/,end:/\/[A-Za-z0-9\\._:-]+>|\/>/},o={$pattern:"[A-Za-z$_][0-9A-Za-z$_]*",keyword:e.join(" "),literal:n.join(" "),built_in:a.join(" ")},l={className:"number",variants:[{begin:"\\b(0[bB][01]+)n?"},{begin:"\\b(0[oO][0-7]+)n?"},{begin:t.C_NUMBER_RE+"n?"}],relevance:0},E={className:"subst",begin:"\\$\\{",end:"\\}",keywords:o,contains:[]},d={begin:"html`",end:"",starts:{end:"`",returnEnd:!1,contains:[t.BACKSLASH_ESCAPE,E],subLanguage:"xml"}},g={begin:"css`",end:"",starts:{end:"`",returnEnd:!1,contains:[t.BACKSLASH_ESCAPE,E],subLanguage:"css"}},u={className:"string",begin:"`",end:"`",contains:[t.BACKSLASH_ESCAPE,E]};E.contains=[t.APOS_STRING_MODE,t.QUOTE_STRING_MODE,d,g,u,l,t.REGEXP_MODE];var b=E.contains.concat([{begin:/\(/,end:/\)/,contains:["self"].concat(E.contains,[t.C_BLOCK_COMMENT_MODE,t.C_LINE_COMMENT_MODE])},t.C_BLOCK_COMMENT_MODE,t.C_LINE_COMMENT_MODE]),_={className:"params",begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,contains:b};return{name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:o,contains:[t.SHEBANG({binary:"node",relevance:5}),{className:"meta",relevance:10,begin:/^\s*['"]use (strict|asm)['"]/},t.APOS_STRING_MODE,t.QUOTE_STRING_MODE,d,g,u,t.C_LINE_COMMENT_MODE,t.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",begin:"@[A-Za-z]+",contains:[{className:"type",begin:"\\{",end:"\\}",relevance:0},{className:"variable",begin:i+"(?=\\s*(-)|$)",endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]}),t.C_BLOCK_COMMENT_MODE,l,{begin:r(/[{,\n]\s*/,s(r(/(((\/\/.*)|(\/\*(.|\n)*\*\/))\s*)*/,i+"\\s*:"))),relevance:0,contains:[{className:"attr",begin:i+s("\\s*:"),relevance:0}]},{begin:"("+t.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",keywords:"return throw case",contains:[t.C_LINE_COMMENT_MODE,t.C_BLOCK_COMMENT_MODE,t.REGEXP_MODE,{className:"function",begin:"(\\([^(]*(\\([^(]*(\\([^(]*\\))?\\))?\\)|"+t.UNDERSCORE_IDENT_RE+")\\s*=>",returnBegin:!0,end:"\\s*=>",contains:[{className:"params",variants:[{begin:t.UNDERSCORE_IDENT_RE},{className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:o,contains:b}]}]},{begin:/,/,relevance:0},{className:"",begin:/\s/,end:/\s*/,skip:!0},{variants:[{begin:"<>",end:""},{begin:c.begin,end:c.end}],subLanguage:"xml",contains:[{begin:c.begin,end:c.end,skip:!0,contains:["self"]}]}],relevance:0},{className:"function",beginKeywords:"function",end:/\{/,excludeEnd:!0,contains:[t.inherit(t.TITLE_MODE,{begin:i}),_],illegal:/\[|%/},{begin:/\$[(.]/},t.METHOD_GUARD,{className:"class",beginKeywords:"class",end:/[{;=]/,excludeEnd:!0,illegal:/[:"\[\]]/,contains:[{beginKeywords:"extends"},t.UNDERSCORE_TITLE_MODE]},{beginKeywords:"constructor",end:/\{/,excludeEnd:!0},{begin:"(get|set)\\s+(?="+i+"\\()",end:/{/,keywords:"get set",contains:[t.inherit(t.TITLE_MODE,{begin:i}),{begin:/\(\)/},_]}],illegal:/#(?!!)/}}}());hljs.registerLanguage("typescript",function(){"use strict";const e=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],n=["true","false","null","undefined","NaN","Infinity"],a=[].concat(["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],["arguments","this","super","console","window","document","localStorage","module","global"],["Intl","DataView","Number","Math","Date","String","RegExp","Object","Function","Boolean","Error","Symbol","Set","Map","WeakSet","WeakMap","Proxy","Reflect","JSON","Promise","Float64Array","Int16Array","Int32Array","Int8Array","Uint16Array","Uint32Array","Float32Array","Array","Uint8Array","Uint8ClampedArray","ArrayBuffer"],["EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"]);return function(r){var t={$pattern:"[A-Za-z$_][0-9A-Za-z$_]*",keyword:e.concat(["type","namespace","typedef","interface","public","private","protected","implements","declare","abstract","readonly"]).join(" "),literal:n.join(" "),built_in:a.concat(["any","void","number","boolean","string","object","never","enum"]).join(" ")},s={className:"meta",begin:"@[A-Za-z$_][0-9A-Za-z$_]*"},i={className:"number",variants:[{begin:"\\b(0[bB][01]+)n?"},{begin:"\\b(0[oO][0-7]+)n?"},{begin:r.C_NUMBER_RE+"n?"}],relevance:0},o={className:"subst",begin:"\\$\\{",end:"\\}",keywords:t,contains:[]},c={begin:"html`",end:"",starts:{end:"`",returnEnd:!1,contains:[r.BACKSLASH_ESCAPE,o],subLanguage:"xml"}},l={begin:"css`",end:"",starts:{end:"`",returnEnd:!1,contains:[r.BACKSLASH_ESCAPE,o],subLanguage:"css"}},E={className:"string",begin:"`",end:"`",contains:[r.BACKSLASH_ESCAPE,o]};o.contains=[r.APOS_STRING_MODE,r.QUOTE_STRING_MODE,c,l,E,i,r.REGEXP_MODE];var d={begin:"\\(",end:/\)/,keywords:t,contains:["self",r.QUOTE_STRING_MODE,r.APOS_STRING_MODE,r.NUMBER_MODE]},u={className:"params",begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:t,contains:[r.C_LINE_COMMENT_MODE,r.C_BLOCK_COMMENT_MODE,s,d]};return{name:"TypeScript",aliases:["ts"],keywords:t,contains:[r.SHEBANG(),{className:"meta",begin:/^\s*['"]use strict['"]/},r.APOS_STRING_MODE,r.QUOTE_STRING_MODE,c,l,E,r.C_LINE_COMMENT_MODE,r.C_BLOCK_COMMENT_MODE,i,{begin:"("+r.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",keywords:"return throw case",contains:[r.C_LINE_COMMENT_MODE,r.C_BLOCK_COMMENT_MODE,r.REGEXP_MODE,{className:"function",begin:"(\\([^(]*(\\([^(]*(\\([^(]*\\))?\\))?\\)|"+r.UNDERSCORE_IDENT_RE+")\\s*=>",returnBegin:!0,end:"\\s*=>",contains:[{className:"params",variants:[{begin:r.UNDERSCORE_IDENT_RE},{className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:t,contains:d.contains}]}]}],relevance:0},{className:"function",beginKeywords:"function",end:/[\{;]/,excludeEnd:!0,keywords:t,contains:["self",r.inherit(r.TITLE_MODE,{begin:"[A-Za-z$_][0-9A-Za-z$_]*"}),u],illegal:/%/,relevance:0},{beginKeywords:"constructor",end:/[\{;]/,excludeEnd:!0,contains:["self",u]},{begin:/module\./,keywords:{built_in:"module"},relevance:0},{beginKeywords:"module",end:/\{/,excludeEnd:!0},{beginKeywords:"interface",end:/\{/,excludeEnd:!0,keywords:"interface extends"},{begin:/\$[(.]/},{begin:"\\."+r.IDENT_RE,relevance:0},s,d]}}}());hljs.registerLanguage("plaintext",function(){"use strict";return function(t){return{name:"Plain text",aliases:["text","txt"],disableAutodetect:!0}}}());hljs.registerLanguage("less",function(){"use strict";return function(e){var n="([\\w-]+|@{[\\w-]+})",a=[],s=[],t=function(e){return{className:"string",begin:"~?"+e+".*?"+e}},r=function(e,n,a){return{className:e,begin:n,relevance:a}},i={begin:"\\(",end:"\\)",contains:s,relevance:0};s.push(e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,t("'"),t('"'),e.CSS_NUMBER_MODE,{begin:"(url|data-uri)\\(",starts:{className:"string",end:"[\\)\\n]",excludeEnd:!0}},r("number","#[0-9A-Fa-f]+\\b"),i,r("variable","@@?[\\w-]+",10),r("variable","@{[\\w-]+}"),r("built_in","~?`[^`]*?`"),{className:"attribute",begin:"[\\w-]+\\s*:",end:":",returnBegin:!0,excludeEnd:!0},{className:"meta",begin:"!important"});var c=s.concat({begin:"{",end:"}",contains:a}),l={beginKeywords:"when",endsWithParent:!0,contains:[{beginKeywords:"and not"}].concat(s)},o={begin:n+"\\s*:",returnBegin:!0,end:"[;}]",relevance:0,contains:[{className:"attribute",begin:n,end:":",excludeEnd:!0,starts:{endsWithParent:!0,illegal:"[<=$]",relevance:0,contains:s}}]},g={className:"keyword",begin:"@(import|media|charset|font-face|(-[a-z]+-)?keyframes|supports|document|namespace|page|viewport|host)\\b",starts:{end:"[;{}]",returnEnd:!0,contains:s,relevance:0}},d={className:"variable",variants:[{begin:"@[\\w-]+\\s*:",relevance:15},{begin:"@[\\w-]+"}],starts:{end:"[;}]",returnEnd:!0,contains:c}},b={variants:[{begin:"[\\.#:&\\[>]",end:"[;{}]"},{begin:n,end:"{"}],returnBegin:!0,returnEnd:!0,illegal:"[<='$\"]",relevance:0,contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,l,r("keyword","all\\b"),r("variable","@{[\\w-]+}"),r("selector-tag",n+"%?",0),r("selector-id","#"+n),r("selector-class","\\."+n,0),r("selector-tag","&",0),{className:"selector-attr",begin:"\\[",end:"\\]"},{className:"selector-pseudo",begin:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{begin:"\\(",end:"\\)",contains:c},{begin:"!important"}]};return a.push(e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,g,d,o,b),{name:"Less",case_insensitive:!0,illegal:"[=>'/<($\"]",contains:a}}}());hljs.registerLanguage("lua",function(){"use strict";return function(e){var t={begin:"\\[=*\\[",end:"\\]=*\\]",contains:["self"]},a=[e.COMMENT("--(?!\\[=*\\[)","$"),e.COMMENT("--\\[=*\\[","\\]=*\\]",{contains:[t],relevance:10})];return{name:"Lua",keywords:{$pattern:e.UNDERSCORE_IDENT_RE,literal:"true false nil",keyword:"and break do else elseif end for goto if in local not or repeat return then until while",built_in:"_G _ENV _VERSION __index __newindex __mode __call __metatable __tostring __len __gc __add __sub __mul __div __mod __pow __concat __unm __eq __lt __le assert collectgarbage dofile error getfenv getmetatable ipairs load loadfile loadstring module next pairs pcall print rawequal rawget rawset require select setfenv setmetatable tonumber tostring type unpack xpcall arg self coroutine resume yield status wrap create running debug getupvalue debug sethook getmetatable gethook setmetatable setlocal traceback setfenv getinfo setupvalue getlocal getregistry getfenv io lines write close flush open output type read stderr stdin input stdout popen tmpfile math log max acos huge ldexp pi cos tanh pow deg tan cosh sinh random randomseed frexp ceil floor rad abs sqrt modf asin min mod fmod log10 atan2 exp sin atan os exit setlocale date getenv difftime remove time clock tmpname rename execute package preload loadlib loaded loaders cpath config path seeall string sub upper len gfind rep find match char dump gmatch reverse byte format gsub lower table setn insert getn foreachi maxn foreach concat sort remove"},contains:a.concat([{className:"function",beginKeywords:"function",end:"\\)",contains:[e.inherit(e.TITLE_MODE,{begin:"([_a-zA-Z]\\w*\\.)*([_a-zA-Z]\\w*:)?[_a-zA-Z]\\w*"}),{className:"params",begin:"\\(",endsWithParent:!0,contains:a}].concat(a)},e.C_NUMBER_MODE,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{className:"string",begin:"\\[=*\\[",end:"\\]=*\\]",contains:[t],relevance:5}])}}}());
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..40147ea
--- /dev/null
+++ b/index.html
@@ -0,0 +1,237 @@
+
+
+
+
+
+ Introduction
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
This book is intended as an introduction to the Leptos Web framework.
+It will walk through the fundamental concepts you need to build applications,
+beginning with a simple application rendered in the browser, and building toward a
+full-stack application with server-side rendering and hydration.
+
The guide doesn’t assume you know anything about fine-grained reactivity or the
+details of modern Web frameworks. It does assume you are familiar with the Rust
+programming language, HTML, CSS, and the DOM and basic Web APIs.
+
Leptos is most similar to frameworks like Solid (JavaScript)
+and Sycamore (Rust). There are some similarities
+to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and
+Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to
+understand Leptos.
+
You can find more detailed docs for each part of the API at Docs.rs.
+
+
The source code for the book is available here. PRs for typos or clarification are always welcome.
This is pretty straightforward: when the user is logged in, we want to show children. If the user is not logged in, we want to show fallback. And while we’re waiting to find out, we just render (), i.e., nothing.
+
In other words, we want to pass the children of <LoggedIn/>through the <Suspense/> component to become the children of the <Show/>. This is what I mean by “projection.”
+
This won’t compile.
+
error[E0507]: cannot move out of `fallback`, a captured variable in an `Fn` closure
+error[E0507]: cannot move out of `children`, a captured variable in an `Fn` closure
+
+
The problem here is that both <Suspense/> and <Show/> need to be able to construct their children multiple times. The first time you construct <Suspense/>’s children, it would take ownership of fallback and children to move them into the invocation of <Show/>, but then they're not available for future <Suspense/> children construction.
If you want to really understand the issue here, it may help to look at the expanded view macro. Here’s a cleaned-up version:
+
Suspense(
+ ::leptos::component_props_builder(&Suspense)
+ .fallback(|| ())
+ .children({
+ // fallback and children are moved into this closure
+ Box::new(move || {
+ {
+ // fallback and children captured here
+ leptos::Fragment::lazy(|| {
+ vec![
+ (Show(
+ ::leptos::component_props_builder(&Show)
+ .when(|| true)
+ // but fallback is moved into Show here
+ .fallback(fallback)
+ // and children is moved into Show here
+ .children(children)
+ .build(),
+ )
+ .into_view()),
+ ]
+ })
+ }
+ })
+ })
+ .build(),
+)
+
All components own their props; so the <Show/> in this case can’t be called because it only has captured references to fallback and children.
However, both <Suspense/> and <Show/> take ChildrenFn, i.e., their children should implement the Fn type so they can be called multiple times with only an immutable reference. This means we don’t need to own children or fallback; we just need to be able to pass 'static references to them.
+
We can solve this problem by using the store_value primitive. This essentially stores a value in the reactive system, handing ownership off to the framework in exchange for a reference that is, like signals, Copy and 'static, which we can access or modify through certain methods.
At the top level, we store both fallback and children in the reactive scope owned by LoggedIn. Now we can simply move those references down through the other layers into the <Show/> component and call them there.
Note that this works because <Show/> and <Suspense/> only need an immutable reference to their children (which .with_value can give it), not ownership.
+
In other cases, you may need to project owned props through a function that takes ChildrenFn and therefore needs to be called more than once. In this case, you may find the clone: helper in theview macro helpful.
cannot move out of `name`, a captured variable in an `Fn` closure
+
+
It’s captured through multiple levels of children that need to run more than once, and there’s no obvious way to clone it into the children.
+
In this case, the clone: syntax comes in handy. Calling clone:name will clone namebefore moving it into <Inner/>’s children, which solves our ownership issue.
Anyone creating a website or application soon runs into the question of styling. For a small app, a single CSS file is probably plenty to style your user interface. But as an application grows, many developers find that plain CSS becomes increasingly hard to manage.
+
Some frontend frameworks (like Angular, Vue, and Svelte) provide built-in ways to scope your CSS to particular components, making it easier to manage styles across a whole application without styles meant to modify one small component having a global effect. Other frameworks (like React or Solid) don’t provide built-in CSS scoping, but rely on libraries in the ecosystem to do it for them. Leptos is in this latter camp: the framework itself has no opinions about CSS at all, but provides a few tools and primitives that allow others to build styling libraries.
+
Here are a few different approaches to styling your Leptos app, other than plain CSS.
TailwindCSS is a popular utility-first CSS library. It allows you to style your application by using inline utility classes, with a custom CLI tool that scans your files for Tailwind class names and bundles the necessary CSS.
+
This allows you to write components like this:
+
#[component]
+fn Home() -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+
+ view! {
+ <main class="my-0 mx-auto max-w-3xl text-center">
+ <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
+ <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
+ <button
+ class="bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
+ on:click=move |_| set_count.update(|count| *count += 1)
+ >
+ {move || if count() == 0 {
+ "Click me!".to_string()
+ } else {
+ count().to_string()
+ }}
+ </button>
+ </main>
+ }
+}
Stylers is a compile-time scoped CSS library that lets you declare scoped CSS in the body of your component. Stylers will extract this CSS at compile time into CSS files that you can then import into your app, which means that it doesn’t add anything to the WASM binary size of your application.
Styled is a runtime scoped CSS library that integrates well with Leptos. It lets you declare scoped CSS in the body of your component function, and then applies those styles at runtime.
+
use styled::style;
+
+#[component]
+pub fn MyComponent() -> impl IntoView {
+ let styles = style!(
+ div {
+ background-color: red;
+ color: white;
+ }
+ );
+
+ styled::view! { styles,
+ <div>"This text should be red with white text."</div>
+ }
+}
Leptos has no opinions on how you style your website or app, but we’re very happy to provide support to any tools you’re trying to create to make it easier. If you’re working on a CSS or styling approach that you’d like to add to this list, please let us know!
Leptos 0.5 introduces the new experimental-islands feature. This guide will walk through the islands feature and core concepts, while implementing a demo app using the islands architecture.
The dominant JavaScript frontend frameworks (React, Vue, Svelte, Solid, Angular) all originated as frameworks for building client-rendered single-page apps (SPAs). The initial page load is rendered to HTML, then hydrated, and subsequent navigations are handled directly in the client. (Hence “single page”: everything happens from a single page load from the server, even if there is client-side routing later.) Each of these frameworks later added server-side rendering to improve initial load times, SEO, and user experience.
+
This means that by default, the entire app is interactive. It also means that the entire app has to be shipped to the client as JavaScript in order to be hydrated. Leptos has followed this same pattern.
But it’s also possible to work in the opposite direction. Rather than taking an entirely-interactive app, rendering it to HTML on the server, and then hydrating it in the browser, you can begin with a plain HTML page and add small areas of interactivity. This is the traditional format for any website or app before the 2010s: your browser makes a series of requests to the server and returns the HTML for each new page in response. After the rise of “single-page apps” (SPA), this approach has sometimes become known as a “multi-page app” (MPA) by comparison.
+
The phrase “islands architecture” has emerged recently to describe the approach of beginning with a “sea” of server-rendered HTML pages, and adding “islands” of interactivity throughout the page.
The rest of this guide will look at how to use islands with Leptos. For more background on the approach in general, check out some of the articles below:
I’m using Actix because I like it. Feel free to use Axum; there should be approximately no server-specific differences in this guide.
+
+
I’m just going to run
+
cargo leptos build
+
+
in the background while I fire up my editor and keep writing.
+
The first thing I’ll do is to add the experimental-islands feature in my Cargo.toml. I need to add this to both leptos and leptos_actix:
+
leptos = { version = "0.5", features = ["nightly", "experimental-islands"] }
+leptos_actix = { version = "0.5", optional = true, features = [
+ "experimental-islands",
+] }
+
+
Next I’m going to modify the hydrate function exported from src/lib.rs. I’m going to remove the line that calls leptos::mount_to_body(App) and replace it with
Nothing happens because we’ve just totally inverted the mental model of our app. Rather than being interactive by default and hydrating everything, the app is now plain HTML by default, and we need to opt into interactivity.
+
This has a big effect on WASM binary sizes: if I compile in release mode, this app is a measly 24kb of WASM (uncompressed), compared to 355kb in non-islands mode. (355kb is quite large for a “Hello, world!” It’s really just all the code related to client-side routing, which isn’t being used in the demo.)
+
When we click the button, nothing happens, because our whole page is static.
+
So how do we make something happen?
+
Let’s turn the HomePage component into an island!
+
Here was the non-interactive version:
+
#[component]
+fn HomePage() -> impl IntoView {
+ // Creates a reactive value to update the button
+ let (count, set_count) = create_signal(0);
+ let on_click = move |_| set_count.update(|count| *count += 1);
+
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <button on:click=on_click>"Click Me: " {count}</button>
+ }
+}
+
Here’s the interactive version:
+
#[island]
+fn HomePage() -> impl IntoView {
+ // Creates a reactive value to update the button
+ let (count, set_count) = create_signal(0);
+ let on_click = move |_| set_count.update(|count| *count += 1);
+
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <button on:click=on_click>"Click Me: " {count}</button>
+ }
+}
+
Now when I click the button, it works!
+
The #[island] macro works exactly like the #[component] macro, except that in islands mode, it designates this as an interactive island. If we check the binary size again, this is 166kb uncompressed in release mode; much larger than the 24kb totally static version, but much smaller than the 355kb fully-hydrated version.
+
If you open up the source for the page now, you’ll see that your HomePage island has been rendered as a special <leptos-island> HTML element which specifies which component should be used to hydrate it:
Remember that only code within an #[island] needs to be compiled to WASM and shipped to the browser. This means that islands should be as small and specific as possible. My HomePage, for example, would be better broken apart into a regular component and an island:
+
#[component]
+fn HomePage() -> impl IntoView {
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <Counter/>
+ }
+}
+
+#[island]
+fn Counter() -> impl IntoView {
+ // Creates a reactive value to update the button
+ let (count, set_count) = create_signal(0);
+ let on_click = move |_| set_count.update(|count| *count += 1);
+
+ view! {
+ <button on:click=on_click>"Click Me: " {count}</button>
+ }
+}
+
Now the <h1> doesn’t need to be included in the client bundle, or hydrated. This seems like a silly distinction now; but note that you can now add as much inert HTML content as you want to the HomePage itself, and the WASM binary size will remain exactly the same.
+
In regular hydration mode, your WASM binary size grows as a function of the size/complexity of your app. In islands mode, your WASM binary grows as a function of the amount of interactivity in your app. You can add as much non-interactive content as you want, outside islands, and it will not increase that binary size.
So, this 50% reduction in WASM binary size is nice. But really, what’s the point?
+
The point comes when you combine two key facts:
+
+
Code inside #[component] functions now only runs on the server.
+
Children and props can be passed from the server to islands, without being included in the WASM binary.
+
+
This means you can run server-only code directly in the body of a component, and pass it directly into the children. Certain tasks that take a complex blend of server functions and Suspense in fully-hydrated apps can be done inline in islands.
+
We’re going to rely on a third fact in the rest of this demo:
+
+
Context can be passed between otherwise-independent islands.
+
+
So, instead of our counter demo, let’s make something a little more fun: a tabbed interface that reads data from files on the server.
One of the most powerful things about islands is that you can pass server-rendered children into an island, without the island needing to know anything about them. Islands hydrate their own content, but not children that are passed to them.
+
As Dan Abramov of React put it (in the very similar context of RSCs), islands aren’t really islands: they’re donuts. You can pass server-only content directly into the “donut hole,” as it were, allowing you to create tiny atolls of interactivity, surrounded on both sides by the sea of inert server HTML.
+
+
In the demo code included below, I added some styles to show all server content as a light-blue “sea,” and all islands as light-green “land.” Hopefully that will help picture what I’m talking about!
+
+
To continue with the demo: I’m going to create a Tabs component. Switching between tabs will require some interactivity, so of course this will be an island. Let’s start simple for now:
Easy fix: let’s cargo add serde --features=derive. The #[island] macro wants to pull in serde here because it needs to serialize and deserialize the labels prop.
+
Now let’s update the HomePage to use Tabs.
+
#[component]
+fn HomePage() -> impl IntoView {
+ // these are the files we’re going to read
+ let files = ["a.txt", "b.txt", "c.txt"];
+ // the tab labels will just be the file names
+ let labels = files.iter().copied().map(Into::into).collect();
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <p>"Click any of the tabs below to read a recipe."</p>
+ <Tabs labels/>
+ }
+}
+
If you take a look in the DOM inspector, you’ll see the island is now something like
Okay, now let’s go back into the HomePage. We’re going to create the list of tabs to put into our tab box.
+
#[component]
+fn HomePage() -> impl IntoView {
+ let files = ["a.txt", "b.txt", "c.txt"];
+ let labels = files.iter().copied().map(Into::into).collect();
+ let tabs = move || {
+ files
+ .into_iter()
+ .enumerate()
+ .map(|(index, filename)| {
+ let content = std::fs::read_to_string(filename).unwrap();
+ view! {
+ <Tab index>
+ <h2>{filename.to_string()}</h2>
+ <p>{content}</p>
+ </Tab>
+ }
+ })
+ .collect_view()
+ };
+
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <p>"Click any of the tabs below to read a recipe."</p>
+ <Tabs labels>
+ <div>{tabs()}</div>
+ </Tabs>
+ }
+}
+
Uh... What?
+
If you’re used to using Leptos, you know that you just can’t do this. All code in the body of components has to run on the server (to be rendered to HTML) and in the browser (to hydrate), so you can’t just call std::fs; it will panic, because there’s no access to the local filesystem (and certainly not to the server filesystem!) in the browser. This would be a security nightmare!
+
Except... wait. We’re in islands mode. This HomePage component really does only run on the server. So we can, in fact, just use ordinary server code like this.
+
+
Is this a dumb example? Yes! Synchronously reading from three different local files in a .map() is not a good choice in real life. The point here is just to demonstrate that this is, definitely, server-only content.
+
+
Go ahead and create three files in the root of the project called a.txt, b.txt, and c.txt, and fill them in with whatever content you’d like.
+
Refresh the page and you should see the content in the browser. Edit the files and refresh again; it will be updated.
+
You can pass server-only content from a #[component] into the children of an #[island], without the island needing to know anything about how to access that data or render that content.
+
This is really important. Passing server children to islands means that you can keep islands small. Ideally, you don’t want to slap and #[island] around a whole chunk of your page. You want to break that chunk out into an interactive piece, which can be an #[island], and a bunch of additional server content that can be passed to that island as children, so that the non-interactive subsections of an interactive part of the page can be kept out of the WASM binary.
These aren’t really “tabs” yet: they just show every tab, all the time. So let’s add some simple logic to our Tabs and Tab components.
+
We’ll modify Tabs to create a simple selected signal. We provide the read half via context, and set the value of the signal whenever someone clicks one of our buttons.
Now the tabs behave exactly as I’d expect. Tabs passes the signal via context to each Tab, which uses it to determine whether it should be open or not.
+
+
That’s why in HomePage, I made let tabs = move || a function, and called it like {tabs()}: creating the tabs lazily this way meant that the Tabs island would already have provided the selected context by the time each Tab went looking for it.
+
+
Our complete tabs demo is about 220kb uncompressed: not the smallest demo in the world, but still about a third smaller than the counter button! Just for kicks, I built the same demo without islands mode, using #[server] functions and Suspense. and it was 429kb. So again, this was about a 50% savings in binary size. And this app includes quite minimal server-only content: remember that as we add additional server-only components and pages, this 220 will not grow.
This demo may seem pretty basic. It is. But there are a number of immediate takeaways:
+
+
50% WASM binary size reduction, which means measurable improvements in time to interactivity and initial load times for clients.
+
Reduced HTML page size. This one is less obvious, but it’s true and important: HTML generated from #[component]s doesn’t need all the hydration IDs and other boilerplate added.
+
Reduced data serialization costs. Creating a resource and reading it on the client means you need to serialize the data, so it can be used for hydration. If you’ve also read that data to create HTML in a Suspense, you end up with “double data,” i.e., the same exact data is both rendered to HTML and serialized as JSON, increasing the size of responses, and therefore slowing them down.
+
Easily use server-only APIs inside a #[component] as if it were a normal, native Rust function running on the server—which, in islands mode, it is!
+
Reduced #[server]/create_resource/Suspense boilerplate for loading server data.
The experimental-islands feature included in 0.5 reflects work at the cutting edge of what frontend web frameworks are exploring right now. As it stands, our islands approach is very similar to Astro (before its recent View Transitions support): it allows you to build a traditional server-rendered, multi-page app and pretty seamlessly integrate islands of interactivity.
+
There are some small improvements that will be easy to add. For example, we can do something very much like Astro's View Transitions approach:
+
+
add client-side routing for islands apps by fetching subsequent navigations from the server and replacing the HTML document with the new one
+
add animated transitions between the old and new document using the View Transitions API
+
support explicit persistent islands, i.e., islands that you can mark with unique IDs (something like persist:searchbar on the component in the view), which can be copied over from the old to the new document without losing their current state
+
+
There are other, larger architectural changes that I’m not sold on yet.
So far, everything we’ve rendered has been inside the <body> of the HTML document. And this makes sense. After all, everything you can see on a web page lives inside the <body>.
+
However, there are plenty of occasions where you might want to update something inside the <head> of the document using the same reactive primitives and component patterns you use for your UI.
leptos_meta provides special components that let you inject data from inside components anywhere in your application into the <head>:
+
<Title/> allows you to set the document’s title from any component. It also takes a formatter function that can be used to apply the same format to the title set by other pages. So, for example, if you put <Title formatter=|text| format!("{text} — My Awesome Site")/> in your <App/> component, and then <Title text="Page 1"/> and <Title text="Page 2"/> on your routes, you’ll get Page 1 — My Awesome Site and Page 2 — My Awesome Site.
+
<Link/> takes the standard attributes of the <link> element.
+
<Stylesheet/> creates a <link rel="stylesheet"> with the href you give.
+
<Style/> creates a <style> with the children you pass in (usually a string). You can use this to import some custom CSS from another file at compile time <Style>{include_str!("my_route.css")}</Style>.
+
<Meta/> lets you set <meta> tags with descriptions and other metadata.
leptos_meta also provides a <Script/> component, and it’s worth pausing here for a second. All of the other components we’ve considered inject <head>-only elements in the <head>. But a <script> can also be included in the body.
+
There’s a very simple way to determine whether you should use a capital-S <Script/> component or a lowercase-s <script> element: the <Script/> component will be rendered in the <head>, and the <script> element will be rendered wherever in the <body> of your user interface you put it in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.
There are even a couple elements designed to make semantic HTML and styling easier. <Html/> lets you set the lang and dir on your <html> tag from your application code. <Html/> and <Body/> both have class props that let you set their respective class attributes, which is sometimes needed by CSS frameworks for styling.
+
<Body/> and <Html/> both also have attributes props which can be used to set any number of additional attributes on them via the attr: syntax:
Now, some of this is useful in any scenario, but some of it is especially important for search-engine optimization (SEO). Making sure you have things like appropriate <title> and <meta> tags is crucial. Modern search engine crawlers do handle client-side rendering, i.e., apps that are shipped as an empty index.html and rendered entirely in JS/WASM. But they prefer to receive pages in which your app has been rendered to actual HTML, with metadata in the <head>.
+
This is exactly what leptos_meta is for. And in fact, during server rendering, this is exactly what it does: collect all the <head> content you’ve declared by using its components throughout your application, and then inject it into the actual <head>.
+
But I’m getting ahead of myself. We haven’t actually talked about server-side rendering yet. As a matter of fact... Let’s do that next!
This book is intended as an introduction to the Leptos Web framework.
+It will walk through the fundamental concepts you need to build applications,
+beginning with a simple application rendered in the browser, and building toward a
+full-stack application with server-side rendering and hydration.
+
The guide doesn’t assume you know anything about fine-grained reactivity or the
+details of modern Web frameworks. It does assume you are familiar with the Rust
+programming language, HTML, CSS, and the DOM and basic Web APIs.
+
Leptos is most similar to frameworks like Solid (JavaScript)
+and Sycamore (Rust). There are some similarities
+to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and
+Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to
+understand Leptos.
+
You can find more detailed docs for each part of the API at Docs.rs.
+
+
The source code for the book is available here. PRs for typos or clarification are always welcome.
There are two basic paths to getting started with Leptos:
+
+
+
Client-side rendering (CSR) with Trunk - a great option if you just want to make a snappy website with Leptos, or work with a pre-existing server or API.
+In CSR mode, Trunk compiles your Leptos app to WebAssembly (WASM) and runs it in the browser like a typical Javascript single-page app (SPA). The advantages of Leptos CSR include faster build times and a quicker iterative development cycle, as well as a simpler mental model and more options for deploying your app. CSR apps do come with some disadvantages: initial load times for your end users are slower compared to a server-side rendering approach, and the usual SEO challenges that come along with using a JS single-page app model apply to Leptos CSR apps as well. Also note that, under the hood, an auto-generated snippet of JS is used to load the Leptos WASM bundle, so JS must be enabled on the client device for your CSR app to display properly. As with all software engineering, there are trade-offs here you'll need to consider.
+
+
+
Full-stack, server-side rendering (SSR) with cargo-leptos - SSR is a great option for building CRUD-style websites and custom web apps if you want Rust powering both your frontend and backend.
+With the Leptos SSR option, your app is rendered to HTML on the server and sent down to the browser; then, WebAssembly is used to instrument the HTML so your app becomes interactive - this process is called 'hydration'. On the server side, Leptos SSR apps integrate closely with your choice of either Actix-web or Axum server libraries, so you can leverage those communities' crates to help build out your Leptos server.
+The advantages of taking the SSR route with Leptos include helping you get the best initial load times and optimal SEO scores for your web app. SSR apps can also dramatically simplify working across the server/client boundary via a Leptos feature called "server functions", which lets you transparently call functions on the server from your client code (more on this feature later). Full-stack SSR isn't all rainbows and butterflies, though - disadvantages include a slower developer iteration loop (because you need to recompile both the server and client when making Rust code changes), as well as some added complexity that comes along with hydration.
+
+
+
By the end of the book, you should have a good idea of which trade-offs to make and which route to take - CSR or SSR - depending on your project's requirements.
+
In Part 1 of this book, we'll start with client-side rendering Leptos sites and building reactive UI's using Trunk to serve our JS and WASM bundle to the browser.
+
We’ll introduce cargo-leptos in Part 2 of this book, which is all about working with the full power of Leptos in its full-stack, SSR mode.
+
+
+
Note
+
+
+
+
If you're coming from the Javascript world and terms like client-side rendering (CSR) and server-side rendering (SSR) are unfamiliar to you, the easiest way to understand the difference is by analogy:
+
Leptos' CSR mode is similar to working with React (or a 'signals'-based framework like SolidJS), and focuses on producing a client-side UI which you can use with any tech stack on the server.
+
Using Leptos' SSR mode is similar to working with a full-stack framework like Next.js in the React world (or Solid's "SolidStart" framework) - SSR helps you build sites and apps that are rendered on the server then sent down to the client. SSR can help to improve your site's loading performance and accessibility as well as make it easier for one person to work on both client- and server-side without needing to context-switch between different languages for frontend and backend.
+
The Leptos framework can be used either in CSR mode to just make a UI (like React), or you can use Leptos in full-stack SSR mode (like Next.js) so that you can build both your UI and your server with one language: Rust.
If you don’t have it installed already, you can install the "Trunk" tool for running Leptos CSR sites by running the following on the command-line:
+
cargo install trunk
+
+
And then create a basic Rust project
+
cargo init leptos-tutorial
+
+
cd into your new leptos-tutorial project and add leptos as a dependency
+
cargo add leptos --features=csr,nightly
+
+
Or you can leave off nightly if you're using stable Rust
+
cargo add leptos --features=csr
+
+
+
Using nightly Rust, and the nightly feature in Leptos enables the function-call syntax for signal getters and setters that is used in most of this book.
+
To use nightly Rust, you can either opt into nightly for all your Rust projects by running
If you’d rather use stable Rust with Leptos, you can do that too. In the guide and examples, you’ll just use the ReadSignal::get() and WriteSignal::set() methods instead of calling signal getters and setters as functions.
+
+
Make sure you've added the wasm32-unknown-unknown target so that Rust can compile your code to WebAssembly to run in the browser.
+
rustup target add wasm32-unknown-unknown
+
+
Create a simple index.html in the root of the leptos-tutorial directory
Now run trunk serve --open from the root of the leptos-tutorial directory.
+Trunk should automatically compile your app and open it in your default browser.
+If you make edits to main.rs, Trunk will recompile your source code and
+live-reload the page.
+
Welcome to the world of UI development with Rust and WebAssembly (WASM), powered by Leptos and Trunk!
+
+
Now before we get started building your first real UI's with Leptos, there are a couple of things you might want to know to help make your experience with Leptos just a little bit easier.
There are a couple of things you can do to improve your experience of developing websites and apps with Leptos. You may want to take a few minutes and set up your environment to optimize your development experience, especially if you want to code along with the examples in this book.
Because of the nature of macros (they can expand from anything to anything, but only if the input is exactly correct at that instant) it can be hard for rust-analyzer to do proper autocompletion and other support.
+
If you run into issues using these macros in your editor, you can explicitly tell rust-analyzer to ignore certain proc macros. For the #[server] macro especially, which annotates function bodies but doesn't actually transform anything inside the body of your function, this can be really helpful.
+
Starting in Leptos version 0.5.3, rust-analyzer support was added for the #[component] macro, but if you run into issues, you may want to add #[component] to the macro ignore list as well (see below).
+Note that this means that rust-analyzer doesn't know about your component props, which may generate its own set of errors or warnings in the IDE.
The Jetbrains intellij-rust plugin (RustRover as well) currently does not support dynamic config for macro exclusion.
+However, the project currently maintains a hardcoded list of excluded macros.
+As soon as this open PR is merged, the component and
+server macro will be excluded automatically without additional configuration needed.
+
Update (2023/10/02):
+The intellij-rust plugin got deprecated in favor of RustRover at the same time the PR was opened, but an official
+support request was made to integrate the contents of this PR.
"leptosfmt" is a formatter for the Leptos view! macro (inside of which you'll typically write your UI code). Because the view! macro enables an 'RSX' (like JSX) style of writing your UI's, cargo-fmt has a harder time auto-formatting your code that's inside the view! macro. leptosfmt is a crate that solves your formattting issues and keeps your RSX-style UI code looking nice and tidy!
+
leptosfmt can be installed and used via the commandline or from within your code editor:
+
First, install the tool with cargo install leptosfmt.
+
If you just want to use the default options from the command line, just run leptosfmt ./**/*.rs from the root of your project to format all the rust files using leptosfmt.
+
If you wish to set up your editor to work with leptosfmt, or if you wish to customize your leptosfmt experience, please see the instructions available on the leptosfmt github repo's README.md page.
+
Just note that it's recommended to set up your editor with leptosfmt on a per-workspace basis for best results.
One final note before we get to building with Leptos: if you haven't already, feel free to join the growing community on the Leptos Discord and on Github. Our Discord channel in particular is very active and friendly - we'd love to have you there!
+
+
+
Note
+
+
+
+
If you find a chapter or an explanation that isn't clear while you're working your way through the Leptos book, just mention it in the "docs-and-education" channel or ask a question in "help" so we can clear things up and update the book for others.
+
+
+
As you get further along in your Leptos journey and find that you have questions about "how to do 'x' with Leptos", then search the Discord "help" channel to see if a similar question has been asked before, or feel free to post your own question - the community is quite helpful and very responsive.
+
The "Discussions" on Github are also a great place for asking questions and keeping up with Leptos announcements.
+
And of course, if you run into any bugs while developing with Leptos or would like to make a feature request (or contribute a bug fix / new feature), open up an issue on the Github issue tracker.
The community has built a growing number of Leptos-related crates that will help you get productive with Leptos projects more quickly - check out the list of crates built on top of Leptos and contributed by the community on the Awesome Leptos repo on Github.
+
If you want to find the newest, up-and-coming Leptos-related crates, check out the "Tools and Libraries" section of the Leptos Discord. In that section, there are channels for the Leptos view! macro formatter (in the "leptosfmt" channel); there's a channel for the utility library "leptos-use"; another channel for the UI component libary "leptonic"; and a "libraries" channel where new leptos-* crates are discussed before making their way into the growing list of crates and resources available on Awesome Leptos.
In the first part of the book, we're going to look at building user interfaces on the client-side using Leptos. Under the hood, Leptos and Trunk are bundling up a snippet of Javascript which will load up the Leptos UI, which has been compiled to WebAssembly to drive the interactivity in your CSR (client-side rendered) website.
+
Part 1 will introduce you to the basic tools you need to build a reactive user interface powered by Leptos and Rust. By the end of Part 1, you should be able to
+build a snappy synchronous website that's rendered in the browser and which you can deploy on any static-site hosting service, like Github Pages or Vercel.
That “Hello, world!” was a very simple example. Let’s move on to something a
+little more like an ordinary app.
+
First, let’s edit the main function so that, instead of rendering the whole
+app, it just renders an <App/> component. Components are the basic unit of
+composition and design in most web frameworks, and Leptos is no exception.
+Conceptually, they are similar to HTML elements: they represent a section of the
+DOM, with self-contained, defined behavior. Unlike HTML elements, they are in
+PascalCase, so most Leptos applications will start with something like an
+<App/> component.
Now let’s define our <App/> component itself. Because it’s relatively simple,
+I’ll give you the whole thing up front, then walk through it line by line.
Like all component definitions, this begins with the #[component] macro. #[component] annotates a function so it can be
+used as a component in your Leptos application. We’ll see some of the other features of
+this macro in a couple chapters.
+
fn App() -> impl IntoView
+
Every component is a function with the following characteristics
+
+
It takes zero or more arguments of any type.
+
It returns impl IntoView, which is an opaque type that includes
+anything you could return from a Leptos view.
+
+
+
Component function arguments are gathered together into a single props struct which is built by the view macro as needed.
The body of the component function is a set-up function that runs once, not a
+render function that reruns multiple times. You’ll typically use it to create a
+few reactive variables, define any side effects that run in response to those values
+changing, and describe the user interface.
+
let (count, set_count) = create_signal(0);
+
create_signal
+creates a signal, the basic unit of reactive change and state management in Leptos.
+This returns a (getter, setter) tuple. To access the current value, you’ll
+use count.get() (or, on nightly Rust, the shorthand count()). To set the
+current value, you’ll call set_count.set(...) (or set_count(...)).
+
+
.get() clones the value and .set() overwrites it. In many cases, it’s more efficient to use .with() or .update(); check out the docs for ReadSignal and WriteSignal if you’d like to learn more about those trade-offs at this point.
Leptos defines user interfaces using a JSX-like format via the view macro.
+
view! {
+ <button
+ // define an event listener with on:
+ on:click=move |_| {
+ // on stable, this is set_count.set(3);
+ set_count(3);
+ }
+ >
+ // text nodes are wrapped in quotation marks
+ "Click me: "
+ // blocks can include Rust code
+ {move || count.get()}
+ </button>
+}
+
This should mostly be easy to understand: it looks like HTML, with a special
+on:click to define a click event listener, a text node that’s formatted like
+a Rust string, and then...
+
{move || count.get()}
+
whatever that is.
+
People sometimes joke that they use more closures in their first Leptos application
+than they’ve ever used in their lives. And fair enough. Basically, passing a function
+into the view tells the framework: “Hey, this is something that might change.”
+
When we click the button and call set_count, the count signal is updated. This
+move || count.get() closure, whose value depends on the value of count, reruns,
+and the framework makes a targeted update to that one specific text node, touching
+nothing else in your application. This is what allows for extremely efficient updates
+to the DOM.
+
Now, if you have Clippy on—or if you have a particularly sharp eye—you might notice
+that this closure is redundant, at least if you’re in nightly Rust. If you’re using
+Leptos with nightly Rust, signals are already functions, so the closure is unnecessary.
+As a result, you can write a simpler view:
Remember—and this is very important—only functions are reactive. This means that
+{count} and {count()} do very different things in your view. {count} passes
+in a function, telling the framework to update the view every time count changes.
+{count()} accesses the value of count once, and passes an i32 into the view,
+rendering it once, unreactively. You can see the difference in the CodeSandbox below!
+
Let’s make one final change. set_count(3) is a pretty useless thing for a click handler to do. Let’s replace “set this value to 3” with “increment this value by 1”:
+
move |_| {
+ set_count.update(|n| *n += 1);
+}
+
You can see here that while set_count just sets the value, set_count.update() gives us a mutable reference and mutates the value in place. Either one will trigger a reactive update in our UI.
+
+
Throughout this tutorial, we’ll use CodeSandbox to show interactive examples. To
+show the browser in the sandbox, you may need to click Add DevTools > Other Previews > 8080. Hover over any of the variables to show Rust-Analyzer details
+and docs for what’s going on. Feel free to fork the examples to play with them yourself!
use leptos::*;
+
+// The #[component] macro marks a function as a reusable component
+// Components are the building blocks of your user interface
+// They define a reusable unit of behavior
+#[component]
+fn App() -> impl IntoView {
+ // here we create a reactive signal
+ // and get a (getter, setter) pair
+ // signals are the basic unit of change in the framework
+ // we'll talk more about them later
+ let (count, set_count) = create_signal(0);
+
+ // the `view` macro is how we define the user interface
+ // it uses an HTML-like format that can accept certain Rust values
+ view! {
+ <button
+ // on:click will run whenever the `click` event fires
+ // every event handler is defined as `on:{eventname}`
+
+ // we're able to move `set_count` into the closure
+ // because signals are Copy and 'static
+ on:click=move |_| {
+ set_count.update(|n| *n += 1);
+ }
+ >
+ // text nodes in RSX should be wrapped in quotes,
+ // like a normal Rust string
+ "Click me"
+ </button>
+ <p>
+ <strong>"Reactive: "</strong>
+ // you can insert Rust expressions as values in the DOM
+ // by wrapping them in curly braces
+ // if you pass in a function, it will reactively update
+ {move || count.get()}
+ </p>
+ <p>
+ <strong>"Reactive shorthand: "</strong>
+ // signals are functions, so we can remove the wrapping closure
+ {count}
+ </p>
+ <p>
+ <strong>"Not reactive: "</strong>
+ // NOTE: if you write {count()}, this will *not* be reactive
+ // it simply gets the value of count once
+ {count()}
+ </p>
+ }
+}
+
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+ leptos::mount_to_body(|| view! { <App/> })
+}
So far we’ve seen how to use the view macro to create event listeners and to
+create dynamic text by passing a function (such as a signal) into the view.
+
But of course there are other things you might want to update in your user interface.
+In this section, we’ll look at how to update classes, styles and attributes dynamically,
+and we’ll introduce the concept of a derived signal.
+
Let’s start with a simple component that should be familiar: click a button to
+increment a counter.
Now let’s say I’d like to update the list of CSS classes on this element dynamically.
+For example, let’s say I want to add the class red when the count is odd. I can
+do this using the class: syntax.
+
class:red=move || count() % 2 == 1
+
class: attributes take
+
+
the class name, following the colon (red)
+
a value, which can be a bool or a function that returns a bool
+
+
When the value is true, the class is added. When the value is false, the class
+is removed. And if the value is a function that accesses a signal, the class will
+reactively update when the signal changes.
+
Now every time I click the button, the text should toggle between red and black as
+the number switches between even and odd.
+
Some CSS class names can’t be directly parsed by the view macro, especially if they include a mix of dashes and numbers or other characters. In that case, you can use a tuple syntax: class=("name", value) still directly updates a single class.
+
class=("button-20", move || count() % 2 == 1)
+
+
If you’re following along, make sure you go into your index.html and add something like this:
The same applies to plain attributes. Passing a plain string or primitive value to
+an attribute gives it a static value. Passing a function (including a signal) to
+an attribute causes it to update its value reactively. Let’s add another element
+to our view:
+
<progress
+ max="50"
+ // signals are functions, so this <=> `move || count.get()`
+ value=count
+/>
+
Now every time we set the count, not only will the class of the <button> be
+toggled, but the value of the <progress> bar will increase, which means that
+our progress bar will move forward.
You already know that we create reactive interfaces just by passing functions into
+the view. This means that we can easily change our progress bar. For example,
+suppose we want it to move twice as fast:
But imagine we want to reuse that calculation in more than one place. You can do this
+using a derived signal: a closure that accesses a signal.
+
let double_count = move || count() * 2;
+
+/* insert the rest of the view */
+<progress
+ max="50"
+ // we use it once here
+ value=double_count
+/>
+<p>
+ "Double Count: "
+ // and again here
+ {double_count}
+</p>
+
Derived signals let you create reactive computed values that can be used in multiple
+places in your application with minimal overhead.
+
Note: Using a derived signal like this means that the calculation runs once per
+signal change (when count() changes) and once per place we access double_count;
+in other words, twice. This is a very cheap calculation, so that’s fine.
+We’ll look at memos in a later chapter, which re designed to solve this problem
+for expensive calculations.
The view macro provides support for an additional attribute, inner_html, which
+can be used to directly set the HTML contents of any element, wiping out any other
+children you’ve given it. Note that this does not escape the HTML you provide. You
+should make sure that it only contains trusted input or that any HTML entities are
+escaped, to prevent cross-site scripting (XSS) attacks.
+
let html = "<p>This HTML will be injected.</p>";
+view! {
+ <div inner_html=html/>
+}
use leptos::*;
+
+#[component]
+fn App() -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+
+ // a "derived signal" is a function that accesses other signals
+ // we can use this to create reactive values that depend on the
+ // values of one or more other signals
+ let double_count = move || count() * 2;
+
+ view! {
+ <button
+ on:click=move |_| {
+ set_count.update(|n| *n += 1);
+ }
+ // the class: syntax reactively updates a single class
+ // here, we'll set the `red` class when `count` is odd
+ class:red=move || count() % 2 == 1
+ >
+ "Click me"
+ </button>
+ // NOTE: self-closing tags like <br> need an explicit /
+ <br/>
+
+ // We'll update this progress bar every time `count` changes
+ <progress
+ // static attributes work as in HTML
+ max="50"
+
+ // passing a function to an attribute
+ // reactively sets that attribute
+ // signals are functions, so this <=> `move || count.get()`
+ value=count
+ >
+ </progress>
+ <br/>
+
+ // This progress bar will use `double_count`
+ // so it should move twice as fast!
+ <progress
+ max="50"
+ // derived signals are functions, so they can also
+ // reactive update the DOM
+ value=double_count
+ >
+ </progress>
+ <p>"Count: " {count}</p>
+ <p>"Double Count: " {double_count}</p>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
+
+ // passing a function to an attribute
+ // reactively sets that attribute
+ // signals are functions, so this <=> `move || count.get()`
+ value=count
+ >
+ </progress>
+ <br/>
+
+ // This progress bar will use `double_count`
+ // so it should move twice as fast!
+ <progress
+ max="50"
+ // derived signals are functions, so they can also
+ // reactive update the DOM
+ value=double_count
+ >
+ </progress>
+ <p>"Count: " {count}</p>
+ <p>"Double Count: " {double_count}</p>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
So far, we’ve been building our whole application in a single component. This
+is fine for really tiny examples, but in any real application you’ll need to
+break the user interface out into multiple components, so you can break your
+interface down into smaller, reusable, composable chunks.
+
Let’s take our progress bar example. Imagine that you want two progress bars
+instead of one: one that advances one tick per click, one that advances two ticks
+per click.
+
You could do this by just creating two <progress> elements:
But of course, this doesn’t scale very well. If you want to add a third progress
+bar, you need to add this code another time. And if you want to edit anything
+about it, you need to edit it in triplicate.
+
Instead, let’s create a <ProgressBar/> component.
+
#[component]
+fn ProgressBar() -> impl IntoView {
+ view! {
+ <progress
+ max="50"
+ // hmm... where will we get this from?
+ value=progress
+ />
+ }
+}
+
There’s just one problem: progress is not defined. Where should it come from?
+When we were defining everything manually, we just used the local variable names.
+Now we need some way to pass an argument into the component.
We do this using component properties, or “props.” If you’ve used another frontend
+framework, this is probably a familiar idea. Basically, properties are to components
+as attributes are to HTML elements: they let you pass additional information into
+the component.
+
In Leptos, you define props by giving additional arguments to the component function.
+
#[component]
+fn ProgressBar(
+ progress: ReadSignal<i32>
+) -> impl IntoView {
+ view! {
+ <progress
+ max="50"
+ // now this works
+ value=progress
+ />
+ }
+}
+
Now we can use our component in the main <App/> component’s view.
+
#[component]
+fn App() -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+ view! {
+ <button on:click=move |_| { set_count.update(|n| *n += 1); }>
+ "Click me"
+ </button>
+ // now we use our component!
+ <ProgressBar progress=count/>
+ }
+}
+
Using a component in the view looks a lot like using an HTML element. You’ll
+notice that you can easily tell the difference between an element and a component
+because components always have PascalCase names. You pass the progress prop
+in as if it were an HTML element attribute. Simple.
You’ll notice that throughout this example, progress takes a reactive
+ReadSignal<i32>, and not a plain i32. This is very important.
+
Component props have no special meaning attached to them. A component is simply
+a function that runs once to set up the user interface. The only way to tell the
+interface to respond to changing is to pass it a signal type. So if you have a
+component property that will change over time, like our progress, it should
+be a signal.
Right now the max setting is hard-coded. Let’s take that as a prop too. But
+let’s add a catch: let’s make this prop optional by annotating the particular
+argument to the component function with #[prop(optional)].
+
#[component]
+fn ProgressBar(
+ // mark this prop optional
+ // you can specify it or not when you use <ProgressBar/>
+ #[prop(optional)]
+ max: u16,
+ progress: ReadSignal<i32>
+) -> impl IntoView {
+ view! {
+ <progress
+ max=max
+ value=progress
+ />
+ }
+}
+
Now, we can use <ProgressBar max=50 value=count/>, or we can omit max
+to use the default value (i.e., <ProgressBar value=count/>). The default value
+on an optional is its Default::default() value, which for a u16 is going to
+be 0. In the case of a progress bar, a max value of 0 is not very useful.
+
So let’s give it a particular default value instead.
This is great. But we began with two counters, one driven by count, and one by
+the derived signal double_count. Let’s recreate that by using double_count
+as the progress prop on another <ProgressBar/>.
+
#[component]
+fn App() -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+ let double_count = move || count() * 2;
+
+ view! {
+ <button on:click=move |_| { set_count.update(|n| *n += 1); }>
+ "Click me"
+ </button>
+ <ProgressBar progress=count/>
+ // add a second progress bar
+ <ProgressBar progress=double_count/>
+ }
+}
+
Hm... this won’t compile. It should be pretty easy to understand why: we’ve declared
+that the progress prop takes ReadSignal<i32>, and double_count is not
+ReadSignal<i32>. As rust-analyzer will tell you, its type is || -> i32, i.e.,
+it’s a closure that returns an i32.
+
There are a couple ways to handle this. One would be to say: “Well, I know that
+a ReadSignal is a function, and I know that a closure is a function; maybe I
+could just take any function?” If you’re savvy, you may know that both these
+implement the trait Fn() -> i32. So you could use a generic component:
Note that generic component props can’t be specified with an impl yet (progress: impl Fn() -> i32 + 'static,), in part because they’re actually used to generate a struct ProgressBarProps, and struct fields cannot be impl types. The #[component] macro may be further improved in the future to allow inline impl generic props.
There’s one more way we could implement this, and it would be to use #[prop(into)].
+This attribute automatically calls .into() on the values you pass as props,
+which allows you to easily pass props with different values.
+
In this case, it’s helpful to know about the
+Signal type. Signal
+is an enumerated type that represents any kind of readable reactive signal. It can
+be useful when defining APIs for components you’ll want to reuse while passing
+different sorts of signals. The MaybeSignal type is useful when you want to be able to take either a static or
+reactive value.
xx | <ProgressBar/>
+ | ^^^^^^^^^^^ cannot infer type of the type parameter `F` declared on the function `ProgressBar`
+ |
+help: consider specifying the generic argument
+ |
+xx | <ProgressBar::<F>/>
+ | +++++
+
+
There are just two problems:
+
+
Leptos’s view macro doesn’t support specifying a generic on a component with this turbofish syntax.
+
Even if you could, specifying the correct type here is not possible; closures and functions in general are unnameable types. The compiler can display them with a shorthand, but you can’t specify them.
+
+
However, you can get around this by providing a concrete type using Box<dyn _> or &dyn _:
This is one of the least essential but most important sections of this book.
+It’s not strictly necessary to document your components and their props. It may
+be very important, depending on the size of your team and your app. But it’s very
+easy, and bears immediate fruit.
+
To document a component and its props, you can simply add doc comments on the
+component function, and each one of the props:
+
/// Shows progress toward a goal.
+#[component]
+fn ProgressBar(
+ /// The maximum value of the progress bar.
+ #[prop(default = 100)]
+ max: u16,
+ /// How much progress should be displayed.
+ #[prop(into)]
+ progress: Signal<i32>,
+) -> impl IntoView {
+ /* ... */
+}
+
That’s all you need to do. These behave like ordinary Rust doc comments, except
+that you can document individual component props, which can’t be done with Rust
+function arguments.
+
This will automatically generate documentation for your component, its Props
+type, and each of the fields used to add props. It can be a little hard to
+understand how powerful this is until you hover over the component name or props
+and see the power of the #[component] macro combined with rust-analyzer here.
All Leptos components return -> impl IntoView. Some, though, need to return
+some data directly without any additional wrapping. These can be marked with
+#[component(transparent)], in which case they return exactly the value they
+return, without the rendering system transforming them in any way.
+
This is mostly used in two situations:
+
+
Creating wrappers around <Suspense/> or <Transition/>, which return a
+transparent suspense structure to integrate with SSR and hydration properly.
+
Refactoring <Route/> definitions for leptos_router out into separate
+components, because <Route/> is a transparent component that returns a
+RouteDefinition struct rather than a view.
+
+
In general, you should not need to use transparent components unless you are
+creating custom wrapping components that fall into one of these two categories.
use leptos::*;
+
+// Composing different components together is how we build
+// user interfaces. Here, we'll define a resuable <ProgressBar/>.
+// You'll see how doc comments can be used to document components
+// and their properties.
+
+/// Shows progress toward a goal.
+#[component]
+fn ProgressBar(
+ // Marks this as an optional prop. It will default to the default
+ // value of its type, i.e., 0.
+ #[prop(default = 100)]
+ /// The maximum value of the progress bar.
+ max: u16,
+ // Will run `.into()` on the value passed into the prop.
+ #[prop(into)]
+ // `Signal<T>` is a wrapper for several reactive types.
+ // It can be helpful in component APIs like this, where we
+ // might want to take any kind of reactive value
+ /// How much progress should be displayed.
+ progress: Signal<i32>,
+) -> impl IntoView {
+ view! {
+ <progress
+ max={max}
+ value=progress
+ />
+ <br/>
+ }
+}
+
+#[component]
+fn App() -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+
+ let double_count = move || count() * 2;
+
+ view! {
+ <button
+ on:click=move |_| {
+ set_count.update(|n| *n += 1);
+ }
+ >
+ "Click me"
+ </button>
+ <br/>
+ // If you have this open in CodeSandbox or an editor with
+ // rust-analyzer support, try hovering over `ProgressBar`,
+ // `max`, or `progress` to see the docs we defined above
+ <ProgressBar max=50 progress=count/>
+ // Let's use the default max value on this one
+ // the default is 100, so it should move half as fast
+ <ProgressBar progress=count/>
+ // Signal::derive creates a Signal wrapper from our derived signal
+ // using double_count means it should move twice as fast
+ <ProgressBar max=50 progress=Signal::derive(double_count)/>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
Whether you’re listing todos, displaying a table, or showing product images,
+iterating over a list of items is a common task in web applications. Reconciling
+the differences between changing sets of items can also be one of the trickiest
+tasks for a framework to handle well.
+
Leptos supports two different patterns for iterating over items:
Sometimes you need to show an item repeatedly, but the list you’re drawing from
+does not often change. In this case, it’s important to know that you can insert
+any Vec<IV> where IV: IntoView into your view. In other words, if you can render
+T, you can render Vec<T>.
+
let values = vec![0, 1, 2];
+view! {
+ // this will just render "012"
+ <p>{values.clone()}</p>
+ // or we can wrap them in <li>
+ <ul>
+ {values.into_iter()
+ .map(|n| view! { <li>{n}</li>})
+ .collect::<Vec<_>>()}
+ </ul>
+}
+
Leptos also provides a .collect_view() helper function that allows you to collect any iterator of T: IntoView into Vec<View>.
+
let values = vec![0, 1, 2];
+view! {
+ // this will just render "012"
+ <p>{values.clone()}</p>
+ // or we can wrap them in <li>
+ <ul>
+ {values.into_iter()
+ .map(|n| view! { <li>{n}</li>})
+ .collect_view()}
+ </ul>
+}
+
The fact that the list is static doesn’t mean the interface needs to be static.
+You can render dynamic items as part of a static list.
+
// create a list of 5 signals
+let length = 5;
+let counters = (1..=length).map(|idx| create_signal(idx));
+
+// each item manages a reactive view
+// but the list itself will never change
+let counter_buttons = counters
+ .map(|(count, set_count)| {
+ view! {
+ <li>
+ <button
+ on:click=move |_| set_count.update(|n| *n += 1)
+ >
+ {count}
+ </button>
+ </li>
+ }
+ })
+ .collect_view();
+
+view! {
+ <ul>{counter_buttons}</ul>
+}
+
You can render a Fn() -> Vec<_> reactively as well. But note that every time
+it changes, this will rerender every item in the list. This is quite inefficient!
+Fortunately, there’s a better way.
The <For/> component is a
+keyed dynamic list. It takes three props:
+
+
each: a function (such as a signal) that returns the items T to be iterated over
+
key: a key function that takes &T and returns a stable, unique key or ID
+
children: renders each T into a view
+
+
key is, well, the key. You can add, remove, and move items within the list. As
+long as each item’s key is stable over time, the framework does not need to rerender
+any of the items, unless they are new additions, and it can very efficiently add,
+remove, and move items as they change. This allows for extremely efficient updates
+to the list as it changes, with minimal additional work.
+
Creating a good key can be a little tricky. You generally do not want to use
+an index for this purpose, as it is not stable—if you remove or move items, their
+indices change.
+
But it’s a great idea to do something like generating a unique ID for each row as
+it is generated, and using that as an ID for the key function.
+
Check out the <DynamicList/> component below for an example.
use leptos::*;
+
+// Iteration is a very common task in most applications.
+// So how do you take a list of data and render it in the DOM?
+// This example will show you the two ways:
+// 1) for mostly-static lists, using Rust iterators
+// 2) for lists that grow, shrink, or move items, using <For/>
+
+#[component]
+fn App() -> impl IntoView {
+ view! {
+ <h1>"Iteration"</h1>
+ <h2>"Static List"</h2>
+ <p>"Use this pattern if the list itself is static."</p>
+ <StaticList length=5/>
+ <h2>"Dynamic List"</h2>
+ <p>"Use this pattern if the rows in your list will change."</p>
+ <DynamicList initial_length=5/>
+ }
+}
+
+/// A list of counters, without the ability
+/// to add or remove any.
+#[component]
+fn StaticList(
+ /// How many counters to include in this list.
+ length: usize,
+) -> impl IntoView {
+ // create counter signals that start at incrementing numbers
+ let counters = (1..=length).map(|idx| create_signal(idx));
+
+ // when you have a list that doesn't change, you can
+ // manipulate it using ordinary Rust iterators
+ // and collect it into a Vec<_> to insert it into the DOM
+ let counter_buttons = counters
+ .map(|(count, set_count)| {
+ view! {
+ <li>
+ <button
+ on:click=move |_| set_count.update(|n| *n += 1)
+ >
+ {count}
+ </button>
+ </li>
+ }
+ })
+ .collect::<Vec<_>>();
+
+ // Note that if `counter_buttons` were a reactive list
+ // and its value changed, this would be very inefficient:
+ // it would rerender every row every time the list changed.
+ view! {
+ <ul>{counter_buttons}</ul>
+ }
+}
+
+/// A list of counters that allows you to add or
+/// remove counters.
+#[component]
+fn DynamicList(
+ /// The number of counters to begin with.
+ initial_length: usize,
+) -> impl IntoView {
+ // This dynamic list will use the <For/> component.
+ // <For/> is a keyed list. This means that each row
+ // has a defined key. If the key does not change, the row
+ // will not be re-rendered. When the list changes, only
+ // the minimum number of changes will be made to the DOM.
+
+ // `next_counter_id` will let us generate unique IDs
+ // we do this by simply incrementing the ID by one
+ // each time we create a counter
+ let mut next_counter_id = initial_length;
+
+ // we generate an initial list as in <StaticList/>
+ // but this time we include the ID along with the signal
+ let initial_counters = (0..initial_length)
+ .map(|id| (id, create_signal(id + 1)))
+ .collect::<Vec<_>>();
+
+ // now we store that initial list in a signal
+ // this way, we'll be able to modify the list over time,
+ // adding and removing counters, and it will change reactively
+ let (counters, set_counters) = create_signal(initial_counters);
+
+ let add_counter = move |_| {
+ // create a signal for the new counter
+ let sig = create_signal(next_counter_id + 1);
+ // add this counter to the list of counters
+ set_counters.update(move |counters| {
+ // since `.update()` gives us `&mut T`
+ // we can just use normal Vec methods like `push`
+ counters.push((next_counter_id, sig))
+ });
+ // increment the ID so it's always unique
+ next_counter_id += 1;
+ };
+
+ view! {
+ <div>
+ <button on:click=add_counter>
+ "Add Counter"
+ </button>
+ <ul>
+ // The <For/> component is central here
+ // This allows for efficient, key list rendering
+ <For
+ // `each` takes any function that returns an iterator
+ // this should usually be a signal or derived signal
+ // if it's not reactive, just render a Vec<_> instead of <For/>
+ each=counters
+ // the key should be unique and stable for each row
+ // using an index is usually a bad idea, unless your list
+ // can only grow, because moving items around inside the list
+ // means their indices will change and they will all rerender
+ key=|counter| counter.0
+ // `children` receives each item from your `each` iterator
+ // and returns a view
+ children=move |(id, (count, set_count))| {
+ view! {
+ <li>
+ <button
+ on:click=move |_| set_count.update(|n| *n += 1)
+ >
+ {count}
+ </button>
+ <button
+ on:click=move |_| {
+ set_counters.update(|counters| {
+ counters.retain(|(counter_id, _)| counter_id != &id)
+ });
+ }
+ >
+ "Remove"
+ </button>
+ </li>
+ }
+ }
+ />
+ </ul>
+ </div>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
This chapter goes into iteration over nested data structures in a bit
+more depth. It belongs here with the other chapter on iteration, but feel
+free to skip it and come back if you’d like to stick with simpler subjects
+for now.
I just said that the framework does not rerender any of the items in one of the
+rows, unless the key has changed. This probably makes sense at first, but it can
+easily trip you up.
+
Let’s consider an example in which each of the items in our row is some data structure.
+Imagine, for example, that the items come from some JSON array of keys and values:
Let’s define a simple component that will iterate over the rows and display each one:
+
#[component]
+pub fn App() -> impl IntoView {
+ // start with a set of three rows
+ let (data, set_data) = create_signal(vec![
+ DatabaseEntry {
+ key: "foo".to_string(),
+ value: 10,
+ },
+ DatabaseEntry {
+ key: "bar".to_string(),
+ value: 20,
+ },
+ DatabaseEntry {
+ key: "baz".to_string(),
+ value: 15,
+ },
+ ]);
+ view! {
+ // when we click, update each row,
+ // doubling its value
+ <button on:click=move |_| {
+ set_data.update(|data| {
+ for row in data {
+ row.value *= 2;
+ }
+ });
+ // log the new value of the signal
+ logging::log!("{:?}", data.get());
+ }>
+ "Update Values"
+ </button>
+ // iterate over the rows and display each value
+ <For
+ each=data
+ key=|state| state.key.clone()
+ let:child
+ >
+ <p>{child.value}</p>
+ </For>
+ }
+}
+
+
Note the let:child syntax here. In the previous chapter we introduced <For/>
+with a children prop. We can actually create this value directly in the children
+of the <For/> component, without breaking out of the view macro: the let:child
+combined with <p>{child.value}</p> above is the equivalent of
+
children=|child| view! { <p>{child.value}</p> }
+
+
When you click the Update Values button... nothing happens. Or rather:
+the signal is updated, the new value is logged, but the {child.value}
+for each row doesn’t update.
+
Let’s see: is that because we forgot to add a closure to make it reactive?
+Let’s try {move || child.value}.
+
...Nope. Still nothing.
+
Here’s the problem: as I said, each row is only rerendered when the key changes.
+We’ve updated the value for each row, but not the key for any of the rows, so
+nothing has rerendered. And if you look at the type of child.value, it’s a plain
+i32, not a reactive ReadSignal<i32> or something. This means that even if we
+wrap a closure around it, the value in this row will never update.
+
We have three possible solutions:
+
+
change the key so that it always updates when the data structure changes
+
change the value so that it’s reactive
+
take a reactive slice of the data structure instead of using each row directly
Each row is only rerendered when the key changes. Our rows above didn’t rerender,
+because the key didn’t change. So: why not just force the key to change?
Now we include both the key and the value in the key. This means that whenever the
+value of a row changes, <For/> will treat it as if it’s an entirely new row, and
+replace the previous one.
This is very easy. We can make it even easier by deriving PartialEq, Eq, and Hash
+on DatabaseEntry, in which case we could just key=|state| state.clone().
This is the least efficient of the three options. Every time the value of a row
+changes, it throws out the previous <p> element and replaces it with an entirely new
+one. Rather than making a fine-grained update to the text node, in other words, it really
+does rerender the entire row on every change, and this is expensive in proportion to how
+complex the UI of the row is.
+
You’ll notice we also end up cloning the whole data structure so that <For/> can hold
+onto a copy of the key. For more complex structures, this can become a bad idea fast!
RwSignal<_> is a “read-write signal,” which combines the getter and setter in one object.
+I’m using it here because it’s a little easier to store in a struct than separate getters
+and setters.
+
#[component]
+pub fn App() -> impl IntoView {
+ // start with a set of three rows
+ let (data, set_data) = create_signal(vec![
+ DatabaseEntry {
+ key: "foo".to_string(),
+ value: create_rw_signal(10),
+ },
+ DatabaseEntry {
+ key: "bar".to_string(),
+ value: create_rw_signal(20),
+ },
+ DatabaseEntry {
+ key: "baz".to_string(),
+ value: create_rw_signal(15),
+ },
+ ]);
+ view! {
+ // when we click, update each row,
+ // doubling its value
+ <button on:click=move |_| {
+ data.with(|data| {
+ for row in data {
+ row.value.update(|value| *value *= 2);
+ }
+ });
+ // log the new value of the signal
+ logging::log!("{:?}", data.get());
+ }>
+ "Update Values"
+ </button>
+ // iterate over the rows and display each value
+ <For
+ each=data
+ key=|state| state.key.clone()
+ let:child
+ >
+ <p>{child.value}</p>
+ </For>
+ }
+}
+
This version works! And if you look in the DOM inspector in your browser, you’ll
+see that unlike in the previous version, in this version only the individual text
+nodes are updated. Passing the signal directly into {child.value} works, as
+signals do keep their reactivity if you pass them into the view.
+
Note that I changed the set_data.update() to a data.with(). .with() is the
+non-cloning way of accessing a signal’s value. In this case, we are only updating
+the internal values, not updating the list of values: because signals maintain their
+own state, we don’t actual need to update the data signal at all, so the immutable
+.with() is fine here.
+
+
In fact, this version doesn’t update data, so the <For/> is essentially a static
+list as in the last chapter, and this could just be a plain iterator. But the <For/>
+is useful if we want to add or remove rows in the future.
This is the most efficient option, and fits directly with the rest of the mental model
+of the framework: values that change over time are wrapped in signals so the interface
+can respond to them.
Nested reactivity can be cumbersome if you’re receiving data from an API or another
+data source you don’t control, and you don’t want to create a different struct wrapping
+each field in a signal.
we convert the data signal into an enumerated iterator
+
we use the children prop explicitly, to make it easier to run some non-view code
+
we define a value memo and use that in the view. This value field doesn’t actually
+use the child being passed into each row. Instead, it uses the index and reaches back
+into the original data to get the value.
+
+
Every time data changes, now, each memo will be recalculated. If its value has changed,
+it will update its text node, without rerendering the whole row.
It’s a bit more complex to set up this memo-per-row inside the <For/> loop rather than
+using nested signals. For example, you’ll notice that we have to guard against the possibility
+that the data[index] would panic by using data.get(index), because this memo may be
+triggered to re-run once just after the row is removed. (This is because the memo for each row
+and the whole <For/> both depend on the same data signal, and the order of execution for
+multiple reactive values that depend on the same signal isn’t guaranteed.)
+
Note also that while memos memoize their reactive changes, the same
+calculation does need to re-run to check the value every time, so nested reactive signals
+will still be more efficient for pinpoint updates here.
Forms and form inputs are an important part of interactive apps. There are two
+basic patterns for interacting with inputs in Leptos, which you may recognize
+if you’re familiar with React, SolidJS, or a similar framework: using controlled
+or uncontrolled inputs.
In a "controlled input," the framework controls the state of the input
+element. On every input event, it updates a local signal that holds the current
+state, which in turn updates the value prop of the input.
+
There are two important things to remember:
+
+
The input event fires on (almost) every change to the element, while the
+change event fires (more or less) when you unfocus the input. You probably
+want on:input, but we give you the freedom to choose.
+
The valueattribute only sets the initial value of the input, i.e., it
+only updates the input up to the point that you begin typing. The value
+property continues updating the input after that. You usually want to set
+prop:value for this reason. (The same is true for checked and prop:checked
+on an <input type="checkbox">.)
+
+
let (name, set_name) = create_signal("Controlled".to_string());
+
+view! {
+ <input type="text"
+ on:input=move |ev| {
+ // event_target_value is a Leptos helper function
+ // it functions the same way as event.target.value
+ // in JavaScript, but smooths out some of the typecasting
+ // necessary to make this work in Rust
+ set_name(event_target_value(&ev));
+ }
+
+ // the `prop:` syntax lets you update a DOM property,
+ // rather than an attribute.
+ prop:value=name
+ />
+ <p>"Name is: " {name}</p>
+}
Web browsers are the most ubiquitous and stable platform for rendering graphical user interfaces in existence. They have also maintained an incredible backwards compatibility over their three decades of existence. Inevitably, this means there are some quirks.
+
One odd quirk is that there is a distinction between HTML attributes and DOM element properties, i.e., between something called an “attribute” which is parsed from HTML and can be set on a DOM element with .setAttribute(), and something called a “property” which is a field of the JavaScript class representation of that parsed HTML element.
+
In the case of an <input value=...>, setting the valueattribute is defined as setting the initial value for the input, and setting valueproperty sets its current value. It maybe easiest to understand this by opening about:blank and running the following JavaScript in the browser console, line by line:
+
// create an input and append it to the DOM
+const el = document.createElement("input");
+document.body.appendChild(el);
+
+el.setAttribute("value", "test"); // updates the input
+el.setAttribute("value", "another test"); // updates the input again
+
+// now go and type into the input: delete some characters, etc.
+
+el.setAttribute("value", "one more time?");
+// nothing should have changed. setting the "initial value" does nothing now
+
+// however...
+el.value = "But this works";
+
+
Many other frontend frameworks conflate attributes and properties, or create a special case for inputs that sets the value correctly. Maybe Leptos should do this too; but for now, I prefer giving users the maximum amount of control over whether they’re setting an attribute or a property, and doing my best to educate people about the actual underlying browser behavior rather than obscuring it.
In an "uncontrolled input," the browser controls the state of the input element.
+Rather than continuously updating a signal to hold its value, we use a
+NodeRef to access
+the input once when we want to get its value.
+
In this example, we only notify the framework when the <form> fires a submit
+event.
NodeRef is a kind of reactive smart pointer: we can use it to access the
+underlying DOM node. Its value will be set when the element is rendered.
+
let on_submit = move |ev: SubmitEvent| {
+ // stop the page from reloading!
+ ev.prevent_default();
+
+ // here, we'll extract the value from the input
+ let value = input_element()
+ // event handlers can only fire after the view
+ // is mounted to the DOM, so the `NodeRef` will be `Some`
+ .expect("<input> to exist")
+ // `NodeRef` implements `Deref` for the DOM element type
+ // this means we can call`HtmlInputElement::value()`
+ // to get the current value of the input
+ .value();
+ set_name(value);
+};
+
Our on_submit handler will access the input’s value and use it to call set_name.
+To access the DOM node stored in the NodeRef, we can simply call it as a function
+(or using .get()). This will return Option<web_sys::HtmlInputElement>, but we
+know it will already have been filled when we rendered the view, so it’s safe to
+unwrap here.
+
We can then call .value() to get the value out of the input, because NodeRef
+gives us access to a correctly-typed HTML element.
The view should be pretty self-explanatory by now. Note two things:
+
+
Unlike in the controlled input example, we use value (not prop:value).
+This is because we’re just setting the initial value of the input, and letting
+the browser control its state. (We could use prop:value instead.)
+
We use node_ref to fill the NodeRef. (Older examples sometimes use _ref.
+They are the same thing, but node_ref has better rust-analyzer support.)
use leptos::{ev::SubmitEvent, *};
+
+#[component]
+fn App() -> impl IntoView {
+ view! {
+ <h2>"Controlled Component"</h2>
+ <ControlledComponent/>
+ <h2>"Uncontrolled Component"</h2>
+ <UncontrolledComponent/>
+ }
+}
+
+#[component]
+fn ControlledComponent() -> impl IntoView {
+ // create a signal to hold the value
+ let (name, set_name) = create_signal("Controlled".to_string());
+
+ view! {
+ <input type="text"
+ // fire an event whenever the input changes
+ on:input=move |ev| {
+ // event_target_value is a Leptos helper function
+ // it functions the same way as event.target.value
+ // in JavaScript, but smooths out some of the typecasting
+ // necessary to make this work in Rust
+ set_name(event_target_value(&ev));
+ }
+
+ // the `prop:` syntax lets you update a DOM property,
+ // rather than an attribute.
+ //
+ // IMPORTANT: the `value` *attribute* only sets the
+ // initial value, until you have made a change.
+ // The `value` *property* sets the current value.
+ // This is a quirk of the DOM; I didn't invent it.
+ // Other frameworks gloss this over; I think it's
+ // more important to give you access to the browser
+ // as it really works.
+ //
+ // tl;dr: use prop:value for form inputs
+ prop:value=name
+ />
+ <p>"Name is: " {name}</p>
+ }
+}
+
+#[component]
+fn UncontrolledComponent() -> impl IntoView {
+ // import the type for <input>
+ use leptos::html::Input;
+
+ let (name, set_name) = create_signal("Uncontrolled".to_string());
+
+ // we'll use a NodeRef to store a reference to the input element
+ // this will be filled when the element is created
+ let input_element: NodeRef<Input> = create_node_ref();
+
+ // fires when the form `submit` event happens
+ // this will store the value of the <input> in our signal
+ let on_submit = move |ev: SubmitEvent| {
+ // stop the page from reloading!
+ ev.prevent_default();
+
+ // here, we'll extract the value from the input
+ let value = input_element()
+ // event handlers can only fire after the view
+ // is mounted to the DOM, so the `NodeRef` will be `Some`
+ .expect("<input> to exist")
+ // `NodeRef` implements `Deref` for the DOM element type
+ // this means we can call`HtmlInputElement::value()`
+ // to get the current value of the input
+ .value();
+ set_name(value);
+ };
+
+ view! {
+ <form on:submit=on_submit>
+ <input type="text"
+ // here, we use the `value` *attribute* to set only
+ // the initial value, letting the browser maintain
+ // the state after that
+ value=name
+
+ // store a reference to this input in `input_element`
+ node_ref=input_element
+ />
+ <input type="submit" value="Submit"/>
+ </form>
+ <p>"Name is: " {name}</p>
+ }
+}
+
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+ leptos::mount_to_body(App)
+}
In most applications, you sometimes need to make a decision: Should I render this
+part of the view, or not? Should I render <ButtonA/> or <WidgetB/>? This is
+control flow.
When thinking about how to do this with Leptos, it’s important to remember a few
+things:
+
+
Rust is an expression-oriented language: control-flow expressions like
+if x() { y } else { z } and match x() { ... } return their values. This
+makes them very useful for declarative user interfaces.
+
For any T that implements IntoView—in other words, for any type that Leptos
+knows how to render—Option<T> and Result<T, impl Error>also implement
+IntoView. And just as Fn() -> T renders a reactive T, Fn() -> Option<T>
+and Fn() -> Result<T, impl Error> are reactive.
+
Rust has lots of handy helpers like Option::map,
+Option::and_then,
+Option::ok_or,
+Result::map,
+Result::ok, and
+bool::then that
+allow you to convert, in a declarative way, between a few different standard types,
+all of which can be rendered. Spending time in the Option and Result docs in particular
+is one of the best ways to level up your Rust game.
+
And always remember: to be reactive, values must be functions. You’ll see me constantly
+wrap things in a move || closure, below. This is to ensure that they actually rerun
+when the signal they depend on changes, keeping the UI reactive.
To connect the dots a little: this means that you can actually implement most of
+your control flow with native Rust code, without any control-flow components or
+special knowledge.
+
For example, let’s start with a simple signal and derived signal:
If you don’t recognize what’s going on with is_odd, don’t worry about it
+too much. It’s just a simple way to test whether an integer is odd by doing a
+bitwise AND with 1.
+
+
We can use these signals and ordinary Rust to build most control flow.
You could even inline this if you’d like, although personally I sometimes like the
+better cargo fmt and rust-analyzer support I get by pulling things out of the view.
Everything we’ve just done is basically fine. But there’s one thing you should remember
+and try to be careful with. Each one of the control-flow functions we’ve created so far
+is basically a derived signal: it will rerun every time the value changes. In the examples
+above, where the value switches from even to odd on every change, this is fine.
As a user clicks a button, you’d see something like this:
+
1: rendering Small
+2: rendering Small
+3: rendering Small
+4: rendering Small
+5: rendering Small
+6: rendering Big
+7: rendering Big
+8: rendering Big
+... ad infinitum
+
+
Every time value changes, it reruns the if statement. This makes sense, with
+how reactivity works. But it has a downside. For a simple text node, rerunning
+the if statement and rerendering isn’t a big deal. But imagine it were
+like this:
+
let message = move || if value() > 5 {
+ <Big/>
+} else {
+ <Small/>
+};
+
This rerenders <Small/> five times, then <Big/> infinitely. If they’re
+loading resources, creating signals, or even just creating DOM nodes, this is
+unnecessary work.
The <Show/> component is
+the answer. You pass it a when condition function, a fallback to be shown if
+the when function returns false, and children to be rendered if when is true.
<Show/> memoizes the when condition, so it only renders its <Small/> once,
+continuing to show the same component until value is greater than five;
+then it renders <Big/> once, continuing to show it indefinitely or until value
+goes below five and then renders <Small/> again.
+
This is a helpful tool to avoid rerendering when using dynamic if expressions.
+As always, there's some overhead: for a very simple node (like updating a single
+text node, or updating a class or attribute), a move || if ... will be more
+efficient. But if it’s at all expensive to render either branch, reach for
+<Show/>.
There‘s one final thing it’s important to say in this section.
+
The view macro doesn’t return the most-generic wrapping type
+View.
+Instead, it returns things with types like Fragment or HtmlElement<Input>. This
+can be a little annoying if you’re returning different HTML elements from
+different branches of a conditional:
This strong typing is actually very powerful, because
+HtmlElement is,
+among other things, a smart pointer: each HtmlElement<T> type implements
+Deref for the appropriate underlying web_sys type. In other words, in the browser
+your view returns real DOM elements, and you can access native DOM methods on
+them.
+
But it can be a little annoying in conditional logic like this, because you can’t
+return different types from different branches of a condition in Rust. There are two ways
+to get yourself out of this situation:
+
+
If you have multiple HtmlElement types, convert them to HtmlElement<AnyElement>
+with .into_any()
+
If you have a variety of view types that are not all HtmlElement, convert them to
+Views with .into_view().
+
+
Here’s the same example, with the conversion added:
use leptos::*;
+
+#[component]
+fn App() -> impl IntoView {
+ let (value, set_value) = create_signal(0);
+ let is_odd = move || value() & 1 == 1;
+ let odd_text = move || if is_odd() { Some("How odd!") } else { None };
+
+ view! {
+ <h1>"Control Flow"</h1>
+
+ // Simple UI to update and show a value
+ <button on:click=move |_| set_value.update(|n| *n += 1)>
+ "+1"
+ </button>
+ <p>"Value is: " {value}</p>
+
+ <hr/>
+
+ <h2><code>"Option<T>"</code></h2>
+ // For any `T` that implements `IntoView`,
+ // so does `Option<T>`
+
+ <p>{odd_text}</p>
+ // This means you can use `Option` methods on it
+ <p>{move || odd_text().map(|text| text.len())}</p>
+
+ <h2>"Conditional Logic"</h2>
+ // You can do dynamic conditional if-then-else
+ // logic in several ways
+ //
+ // a. An "if" expression in a function
+ // This will simply re-render every time the value
+ // changes, which makes it good for lightweight UI
+ <p>
+ {move || if is_odd() {
+ "Odd"
+ } else {
+ "Even"
+ }}
+ </p>
+
+ // b. Toggling some kind of class
+ // This is smart for an element that's going to
+ // toggled often, because it doesn't destroy
+ // it in between states
+ // (you can find the `hidden` class in `index.html`)
+ <p class:hidden=is_odd>"Appears if even."</p>
+
+ // c. The <Show/> component
+ // This only renders the fallback and the child
+ // once, lazily, and toggles between them when
+ // needed. This makes it more efficient in many cases
+ // than a {move || if ...} block
+ <Show when=is_odd
+ fallback=|| view! { <p>"Even steven"</p> }
+ >
+ <p>"Oddment"</p>
+ </Show>
+
+ // d. Because `bool::then()` converts a `bool` to
+ // `Option`, you can use it to create a show/hide toggled
+ {move || is_odd().then(|| view! { <p>"Oddity!"</p> })}
+
+ <h2>"Converting between Types"</h2>
+ // e. Note: if branches return different types,
+ // you can convert between them with
+ // `.into_any()` (for different HTML element types)
+ // or `.into_view()` (for all view types)
+ {move || match is_odd() {
+ true if value() == 1 => {
+ // <pre> returns HtmlElement<Pre>
+ view! { <pre>"One"</pre> }.into_any()
+ },
+ false if value() == 2 => {
+ // <p> returns HtmlElement<P>
+ // so we convert into a more generic type
+ view! { <p>"Two"</p> }.into_any()
+ }
+ _ => view! { <textarea>{value()}</textarea> }.into_any()
+ }}
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
In the last chapter, we saw that you can render Option<T>:
+in the None case, it will render nothing, and in the T case, it will render T
+(that is, if T implements IntoView). You can actually do something very similar
+with a Result<T, E>. In the Err(_) case, it will render nothing. In the Ok(T)
+case, it will render the T.
+
Let’s start with a simple component to capture a number input.
+
#[component]
+fn NumericInput() -> impl IntoView {
+ let (value, set_value) = create_signal(Ok(0));
+
+ // when input changes, try to parse a number from the input
+ let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
+
+ view! {
+ <label>
+ "Type a number (or not!)"
+ <input type="number" on:input=on_input/>
+ <p>
+ "You entered "
+ <strong>{value}</strong>
+ </p>
+ </label>
+ }
+}
+
Every time you change the input, on_input will attempt to parse its value into a 32-bit
+integer (i32), and store it in our value signal, which is a Result<i32, _>. If you
+type the number 42, the UI will display
+
You entered 42
+
+
But if you type the stringfoo, it will display
+
You entered
+
+
This is not great. It saves us using .unwrap_or_default() or something, but it would be
+much nicer if we could catch the error and do something with it.
An <ErrorBoundary/> is a little like the <Show/> component we saw in the last chapter.
+If everything’s okay—which is to say, if everything is Ok(_)—it renders its children.
+But if there’s an Err(_) rendered among those children, it will trigger the
+<ErrorBoundary/>’s fallback.
+
Let’s add an <ErrorBoundary/> to this example.
+
#[component]
+fn NumericInput() -> impl IntoView {
+ let (value, set_value) = create_signal(Ok(0));
+
+ let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
+
+ view! {
+ <h1>"Error Handling"</h1>
+ <label>
+ "Type a number (or something that's not a number!)"
+ <input type="number" on:input=on_input/>
+ <ErrorBoundary
+ // the fallback receives a signal containing current errors
+ fallback=|errors| view! {
+ <div class="error">
+ <p>"Not a number! Errors: "</p>
+ // we can render a list of errors as strings, if we'd like
+ <ul>
+ {move || errors.get()
+ .into_iter()
+ .map(|(_, e)| view! { <li>{e.to_string()}</li>})
+ .collect_view()
+ }
+ </ul>
+ </div>
+ }
+ >
+ <p>"You entered " <strong>{value}</strong></p>
+ </ErrorBoundary>
+ </label>
+ }
+}
+
Now, if you type 42, value is Ok(42) and you’ll see
+
You entered 42
+
+
If you type foo, value is Err(_) and the fallback will render. We’ve chosen to render
+the list of errors as a String, so you’ll see something like
+
Not a number! Errors:
+- cannot parse integer from empty string
+
+
If you fix the error, the error message will disappear and the content you’re wrapping in
+an <ErrorBoundary/> will appear again.
use leptos::*;
+
+#[component]
+fn App() -> impl IntoView {
+ let (value, set_value) = create_signal(Ok(0));
+
+ // when input changes, try to parse a number from the input
+ let on_input = move |ev| set_value(event_target_value(&ev).parse::<i32>());
+
+ view! {
+ <h1>"Error Handling"</h1>
+ <label>
+ "Type a number (or something that's not a number!)"
+ <input type="number" on:input=on_input/>
+ // If an `Err(_) had been rendered inside the <ErrorBoundary/>,
+ // the fallback will be displayed. Otherwise, the children of the
+ // <ErrorBoundary/> will be displayed.
+ <ErrorBoundary
+ // the fallback receives a signal containing current errors
+ fallback=|errors| view! {
+ <div class="error">
+ <p>"Not a number! Errors: "</p>
+ // we can render a list of errors
+ // as strings, if we'd like
+ <ul>
+ {move || errors.get()
+ .into_iter()
+ .map(|(_, e)| view! { <li>{e.to_string()}</li>})
+ .collect::<Vec<_>>()
+ }
+ </ul>
+ </div>
+ }
+ >
+ <p>
+ "You entered "
+ // because `value` is `Result<i32, _>`,
+ // it will render the `i32` if it is `Ok`,
+ // and render nothing and trigger the error boundary
+ // if it is `Err`. It's a signal, so this will dynamically
+ // update when `value` changes
+ <strong>{value}</strong>
+ </p>
+ </ErrorBoundary>
+ </label>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
You can think of your application as a nested tree of components. Each component
+handles its own local state and manages a section of the user interface, so
+components tend to be relatively self-contained.
+
Sometimes, though, you’ll want to communicate between a parent component and its
+child. For example, imagine you’ve defined a <FancyButton/> component that adds
+some styling, logging, or something else to a <button/>. You want to use a
+<FancyButton/> in your <App/> component. But how can you communicate between
+the two?
+
It’s easy to communicate state from a parent component to a child component. We
+covered some of this in the material on components and props.
+Basically if you want the parent to communicate to the child, you can pass a
+ReadSignal, a
+Signal, or even a
+MaybeSignal as a prop.
+
But what about the other direction? How can a child send notifications about events
+or state changes back up to the parent?
+
There are four basic patterns of parent-child communication in Leptos.
One approach is simply to pass a WriteSignal from the parent down to the child, and update
+it in the child. This lets you manipulate the state of the parent from the child.
This pattern is simple, but you should be careful with it: passing around a WriteSignal
+can make it hard to reason about your code. In this example, it’s pretty clear when you
+read <App/> that you are handing off the ability to mutate toggled, but it’s not at
+all clear when or how it will change. In this small, local example it’s easy to understand,
+but if you find yourself passing around WriteSignals like this throughout your code,
+you should really consider whether this is making it too easy to write spaghetti code.
You’ll notice that whereas <ButtonA/> was given a WriteSignal and decided how to mutate it,
+<ButtonB/> simply fires an event: the mutation happens back in <App/>. This has the advantage
+of keeping local state local, preventing the problem of spaghetti mutation. But it also means
+the logic to mutate that signal needs to exist up in <App/>, not down in <ButtonB/>. These
+are real trade-offs, not a simple right-or-wrong choice.
+
+
Note the way we use the Callback<In, Out> type. This is basically a
+wrapper around a closure Fn(In) -> Out that is also Copy and makes it
+easy to pass around.
+
We also used the #[prop(into)] attribute so we can pass a normal closure into
+on_click. Please see the chapter "into Props" for more details.
The code is very similar in this case. On more advanced use-cases using a
+closure might require some cloning compared to using a Callback.
+
+
Note the way we declare the generic type F here for the callback. If you’re
+confused, look back at the generic props section
+of the chapter on components.
You can actually write Option 2 in a slightly different way. If the callback maps directly onto
+a native DOM event, you can add an on: listener directly to the place you use the component
+in your view macro in <App/>.
+
#[component]
+pub fn App() -> impl IntoView {
+ let (toggled, set_toggled) = create_signal(false);
+ view! {
+ <p>"Toggled? " {toggled}</p>
+ // note the on:click instead of on_click
+ // this is the same syntax as an HTML element event listener
+ <ButtonC on:click=move |_| set_toggled.update(|value| *value = !*value)/>
+ }
+}
+
+
+#[component]
+pub fn ButtonC() -> impl IntoView {
+ view! {
+ <button>"Toggle"</button>
+ }
+}
+
This lets you write way less code in <ButtonC/> than you did for <ButtonB/>,
+and still gives a correctly-typed event to the listener. This works by adding an
+on: event listener to each element that <ButtonC/> returns: in this case, just
+the one <button>.
+
Of course, this only works for actual DOM events that you’re passing directly through
+to the elements you’re rendering in the component. For more complex logic that
+doesn’t map directly onto an element (say you create <ValidatedForm/> and want an
+on_valid_form_submit callback) you should use Option 2.
Now <ButtonD/> is no longer a direct child of <App/>, so you can’t simply
+pass your WriteSignal to its props. You could do what’s sometimes called
+“prop drilling,” adding a prop to each layer between the two:
This is a mess. <Layout/> and <Content/> don’t need set_toggled; they just
+pass it through to <ButtonD/>. But I need to declare the prop in triplicate.
+This is not only annoying but hard to maintain: imagine we add a “half-toggled”
+option and the type of set_toggled needs to change to an enum. We have to change
+it in three places!
You can provide data that skips levels by using provide_context
+and use_context. Contexts are identified
+by the type of the data you provide (in this example, WriteSignal<bool>), and they exist in a top-down
+tree that follows the contours of your UI tree. In this example, we can use context to skip the
+unnecessary prop drilling.
+
#[component]
+pub fn App() -> impl IntoView {
+ let (toggled, set_toggled) = create_signal(false);
+
+ // share `set_toggled` with all children of this component
+ provide_context(set_toggled);
+
+ view! {
+ <p>"Toggled? " {toggled}</p>
+ <Layout/>
+ }
+}
+
+// <Layout/> and <Content/> omitted
+// To work in this version, drop their references to set_toggled
+
+#[component]
+pub fn ButtonD() -> impl IntoView {
+ // use_context searches up the context tree, hoping to
+ // find a `WriteSignal<bool>`
+ // in this case, I .expect() because I know I provided it
+ let setter = use_context::<WriteSignal<bool>>()
+ .expect("to have found the setter provided");
+
+ view! {
+ <button
+ on:click=move |_| setter.update(|value| *value = !*value)
+ >
+ "Toggle"
+ </button>
+ }
+}
+
The same caveats apply to this as to <ButtonA/>: passing a WriteSignal
+around should be done with caution, as it allows you to mutate state from
+arbitrary parts of your code. But when done carefully, this can be one of
+the most effective techniques for global state management in Leptos: simply
+provide the state at the highest level you’ll need it, and use it wherever
+you need it lower down.
+
Note that there are no performance downsides to this approach. Because you
+are passing a fine-grained reactive signal, nothing happens in the intervening
+components (<Layout/> and <Content/>) when you update it. You are communicating
+directly between <ButtonD/> and <App/>. In fact—and this is the power of
+fine-grained reactivity—you are communicating directly between a button click
+in <ButtonD/> and a single text node in <App/>. It’s as if the components
+themselves don’t exist at all. And, well... at runtime, they don’t. It’s just
+signals and effects, all the way down.
use leptos::{ev::MouseEvent, *};
+
+// This highlights four different ways that child components can communicate
+// with their parent:
+// 1) <ButtonA/>: passing a WriteSignal as one of the child component props,
+// for the child component to write into and the parent to read
+// 2) <ButtonB/>: passing a closure as one of the child component props, for
+// the child component to call
+// 3) <ButtonC/>: adding an `on:` event listener to a component
+// 4) <ButtonD/>: providing a context that is used in the component (rather than prop drilling)
+
+#[derive(Copy, Clone)]
+struct SmallcapsContext(WriteSignal<bool>);
+
+#[component]
+pub fn App() -> impl IntoView {
+ // just some signals to toggle three classes on our <p>
+ let (red, set_red) = create_signal(false);
+ let (right, set_right) = create_signal(false);
+ let (italics, set_italics) = create_signal(false);
+ let (smallcaps, set_smallcaps) = create_signal(false);
+
+ // the newtype pattern isn't *necessary* here but is a good practice
+ // it avoids confusion with other possible future `WriteSignal<bool>` contexts
+ // and makes it easier to refer to it in ButtonC
+ provide_context(SmallcapsContext(set_smallcaps));
+
+ view! {
+ <main>
+ <p
+ // class: attributes take F: Fn() => bool, and these signals all implement Fn()
+ class:red=red
+ class:right=right
+ class:italics=italics
+ class:smallcaps=smallcaps
+ >
+ "Lorem ipsum sit dolor amet."
+ </p>
+
+ // Button A: pass the signal setter
+ <ButtonA setter=set_red/>
+
+ // Button B: pass a closure
+ <ButtonB on_click=move |_| set_right.update(|value| *value = !*value)/>
+
+ // Button B: use a regular event listener
+ // setting an event listener on a component like this applies it
+ // to each of the top-level elements the component returns
+ <ButtonC on:click=move |_| set_italics.update(|value| *value = !*value)/>
+
+ // Button D gets its setter from context rather than props
+ <ButtonD/>
+ </main>
+ }
+}
+
+/// Button A receives a signal setter and updates the signal itself
+#[component]
+pub fn ButtonA(
+ /// Signal that will be toggled when the button is clicked.
+ setter: WriteSignal<bool>,
+) -> impl IntoView {
+ view! {
+ <button
+ on:click=move |_| setter.update(|value| *value = !*value)
+ >
+ "Toggle Red"
+ </button>
+ }
+}
+
+/// Button B receives a closure
+#[component]
+pub fn ButtonB<F>(
+ /// Callback that will be invoked when the button is clicked.
+ on_click: F,
+) -> impl IntoView
+where
+ F: Fn(MouseEvent) + 'static,
+{
+ view! {
+ <button
+ on:click=on_click
+ >
+ "Toggle Right"
+ </button>
+ }
+
+ // just a note: in an ordinary function ButtonB could take on_click: impl Fn(MouseEvent) + 'static
+ // and save you from typing out the generic
+ // the component macro actually expands to define a
+ //
+ // struct ButtonBProps<F> where F: Fn(MouseEvent) + 'static {
+ // on_click: F
+ // }
+ //
+ // this is what allows us to have named props in our component invocation,
+ // instead of an ordered list of function arguments
+ // if Rust ever had named function arguments we could drop this requirement
+}
+
+/// Button C is a dummy: it renders a button but doesn't handle
+/// its click. Instead, the parent component adds an event listener.
+#[component]
+pub fn ButtonC() -> impl IntoView {
+ view! {
+ <button>
+ "Toggle Italics"
+ </button>
+ }
+}
+
+/// Button D is very similar to Button A, but instead of passing the setter as a prop
+/// we get it from the context
+#[component]
+pub fn ButtonD() -> impl IntoView {
+ let setter = use_context::<SmallcapsContext>().unwrap().0;
+
+ view! {
+ <button
+ on:click=move |_| setter.update(|value| *value = !*value)
+ >
+ "Toggle Small Caps"
+ </button>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
It’s pretty common to want to pass children into a component, just as you can pass
+children into an HTML element. For example, imagine I have a <FancyForm/> component
+that enhances an HTML <form>. I need some way to pass all its inputs.
How can you do this in Leptos? There are basically two ways to pass components to
+other components:
+
+
render props: properties that are functions that return a view
+
the children prop: a special component property that includes anything
+you pass as a child to the component.
+
+
In fact, you’ve already seen these both in action in the <Show/> component:
+
view! {
+ <Show
+ // `when` is a normal prop
+ when=move || value() > 5
+ // `fallback` is a "render prop": a function that returns a view
+ fallback=|| view! { <Small/> }
+ >
+ // `<Big/>` (and anything else here)
+ // will be given to the `children` prop
+ <Big/>
+ </Show>
+}
+
Let’s define a component that takes some children and a render prop.
+
#[component]
+pub fn TakesChildren<F, IV>(
+ /// Takes a function (type F) that returns anything that can be
+ /// converted into a View (type IV)
+ render_prop: F,
+ /// `children` takes the `Children` type
+ children: Children,
+) -> impl IntoView
+where
+ F: Fn() -> IV,
+ IV: IntoView,
+{
+ view! {
+ <h2>"Render Prop"</h2>
+ {render_prop()}
+
+ <h2>"Children"</h2>
+ {children()}
+ }
+}
+
render_prop and children are both functions, so we can call them to generate
+the appropriate views. children, in particular, is an alias for
+Box<dyn FnOnce() -> Fragment>. (Aren't you glad we named it Children instead?)
+
+
If you need a Fn or FnMut here because you need to call children more than once,
+we also provide ChildrenFn and ChildrenMut aliases.
+
+
We can use the component like this:
+
view! {
+ <TakesChildren render_prop=|| view! { <p>"Hi, there!"</p> }>
+ // these get passed to `children`
+ "Some text"
+ <span>"A span"</span>
+ </TakesChildren>
+}
The Fragment type is
+basically a way of wrapping a Vec<View>. You can insert it anywhere into your view.
+
But you can also access those inner views directly to manipulate them. For example, here’s
+a component that takes its children and turns them into an unordered list.
+
#[component]
+pub fn WrapsChildren(children: Children) -> impl IntoView {
+ // Fragment has `nodes` field that contains a Vec<View>
+ let children = children()
+ .nodes
+ .into_iter()
+ .map(|child| view! { <li>{child}</li> })
+ .collect_view();
+
+ view! {
+ <ul>{children}</ul>
+ }
+}
use leptos::*;
+
+// Often, you want to pass some kind of child view to another
+// component. There are two basic patterns for doing this:
+// - "render props": creating a component prop that takes a function
+// that creates a view
+// - the `children` prop: a special property that contains content
+// passed as the children of a component in your view, not as a
+// property
+
+#[component]
+pub fn App() -> impl IntoView {
+ let (items, set_items) = create_signal(vec![0, 1, 2]);
+ let render_prop = move || {
+ // items.with(...) reacts to the value without cloning
+ // by applying a function. Here, we pass the `len` method
+ // on a `Vec<_>` directly
+ let len = move || items.with(Vec::len);
+ view! {
+ <p>"Length: " {len}</p>
+ }
+ };
+
+ view! {
+ // This component just displays the two kinds of children,
+ // embedding them in some other markup
+ <TakesChildren
+ // for component props, you can shorthand
+ // `render_prop=render_prop` => `render_prop`
+ // (this doesn't work for HTML element attributes)
+ render_prop
+ >
+ // these look just like the children of an HTML element
+ <p>"Here's a child."</p>
+ <p>"Here's another child."</p>
+ </TakesChildren>
+ <hr/>
+ // This component actually iterates over and wraps the children
+ <WrapsChildren>
+ <p>"Here's a child."</p>
+ <p>"Here's another child."</p>
+ </WrapsChildren>
+ }
+}
+
+/// Displays a `render_prop` and some children within markup.
+#[component]
+pub fn TakesChildren<F, IV>(
+ /// Takes a function (type F) that returns anything that can be
+ /// converted into a View (type IV)
+ render_prop: F,
+ /// `children` takes the `Children` type
+ /// this is an alias for `Box<dyn FnOnce() -> Fragment>`
+ /// ... aren't you glad we named it `Children` instead?
+ children: Children,
+) -> impl IntoView
+where
+ F: Fn() -> IV,
+ IV: IntoView,
+{
+ view! {
+ <h1><code>"<TakesChildren/>"</code></h1>
+ <h2>"Render Prop"</h2>
+ {render_prop()}
+ <hr/>
+ <h2>"Children"</h2>
+ {children()}
+ }
+}
+
+/// Wraps each child in an `<li>` and embeds them in a `<ul>`.
+#[component]
+pub fn WrapsChildren(children: Children) -> impl IntoView {
+ // children() returns a `Fragment`, which has a
+ // `nodes` field that contains a Vec<View>
+ // this means we can iterate over the children
+ // to create something new!
+ let children = children()
+ .nodes
+ .into_iter()
+ .map(|child| view! { <li>{child}</li> })
+ .collect::<Vec<_>>();
+
+ view! {
+ <h1><code>"<WrapsChildren/>"</code></h1>
+ // wrap our wrapped children in a UL
+ <ul>{children}</ul>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
If you’re perfectly happy with the view! macro syntax described so far, you’re welcome to skip this chapter. The builder syntax described in this section is always available, but never required.
+
+
For one reason or another, many developers would prefer to avoid macros. Perhaps you don’t like the limited rustfmt support. (Although, you should check out leptosfmt, which is an excellent tool!) Perhaps you worry about the effect of macros on compile time. Perhaps you prefer the aesthetics of pure Rust syntax, or you have trouble context-switching between an HTML-like syntax and your Rust code. Or perhaps you want more flexibility in how you create and manipulate HTML elements than the view macro provides.
+
If you fall into any of those camps, the builder syntax may be for you.
+
The view macro expands an HTML-like syntax to a series of Rust functions and method calls. If you’d rather not use the view macro, you can simply use that expanded syntax yourself. And it’s actually pretty nice!
+
First off, if you want you can even drop the #[component] macro: a component is just a setup function that creates your view, so you can define a component as a simple function call:
Attributes are added with .attr(). This can take any of the same types that you could pass as an attribute into the view macro (types that implement IntoAttribute).
Similarly, the class:, prop:, and style: syntaxes map directly onto .class(), .prop(), and .style() methods.
+
Event listeners can be added with .on(). Typed events found in leptos::ev prevent typos in event names and allow for correct type inference in the callback function.
Many additional methods can be found in the HtmlElement docs, including some methods that are not directly available in the view macro.
+
+
All of this adds up to a very Rusty syntax to build full-featured views, if you prefer this style.
+
/// A simple counter view.
+// A component is really just a function call: it runs once to create the DOM and reactive system
+pub fn counter(initial_value: i32, step: u32) -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+
+ div()
+ .child((
+ button()
+ // typed events found in leptos::ev
+ // 1) prevent typos in event names
+ // 2) allow for correct type inference in callbacks
+ .on(ev::click, move |_| set_count.update(|count| count.clear()))
+ .child("Clear"),
+ button()
+ .on(ev::click, move |_| {
+ set_count.update(|count| count.decrease())
+ })
+ .child("-1"),
+ span().child(("Value: ", move || count.get().value(), "!")),
+ button()
+ .on(ev::click, move |_| {
+ set_count.update(|count| count.increase())
+ })
+ .child("+1"),
+ ))
+}
+
This also has the benefit of being more flexible: because these are all plain Rust functions and methods, it’s easier to use them in things like iterator adapters without any additional “magic”:
+
// take some set of attribute names and values
+let attrs: Vec<(&str, AttributeValue)> = todo!();
+// you can use the builder syntax to “spread” these onto the
+// element in a way that’s not possible with the view macro
+let p = attrs
+ .into_iter()
+ .fold(p(), |el, (name, value)| el.attr(name, value));
+
One caveat: the view macro applies significant optimizations in server-side-rendering (SSR) mode to improve HTML rendering performance significantly (think 2-4x faster, depending on the characteristics of any given app). It does this by analyzing your view at compile time and converting the static parts into simple HTML strings, rather than expanding them into the builder syntax.
+
This means two things:
+
+
The builder syntax and view macro should not be mixed, or should only be mixed very carefully: at least in SSR mode, the output of the view should be treated as a “black box” that can’t have additional builder methods applied to it without causing inconsistencies.
+
Using the builder syntax will result in less-than-optimal SSR performance. It won’t be slow, by any means (and it’s worth running your own benchmarks in any case), just slower than the view-optimized version.
Leptos is built on top of a fine-grained reactive system, designed to run expensive side effects (like rendering something in a browser, or making a network request) as infrequently as possible in response to change, reactive values.
+
So far we’ve seen signals in action. These chapters will go into a bit more depth, and look at effects, which are the other half of the story.
.get() clones the current value of the signal and tracks any future changes to the value reactively.
+
.with() takes a function, which receives the current value of the signal by reference (&T), and tracks any future changes.
+
.set() replaces the current value of the signal and notifies any subscribers that they need to update.
+
.update() takes a function, which receives a mutable reference to the current value of the signal (&mut T), and notifies any subscribers that they need to update. (.update() doesn’t return the value returned by the closure, but you can use .try_update() if you need to; for example, if you’re removing an item from a Vec<_> and want the removed item.)
+
+
Calling a ReadSignal as a function is syntax sugar for .get(). Calling a WriteSignal as a function is syntax sugar for .set(). So
+
let (count, set_count) = create_signal(0);
+set_count(1);
+logging::log!(count());
+
is the same as
+
let (count, set_count) = create_signal(0);
+set_count.set(1);
+logging::log!(count.get());
+
You might notice that .get() and .set() can be implemented in terms of .with() and .update(). In other words, count.get() is identical with count.with(|n| n.clone()), and count.set(1) is implemented by doing count.update(|n| *n = 1).
+
But of course, .get() and .set() (or the plain function-call forms!) are much nicer syntax.
+
However, there are some very good use cases for .with() and .update().
+
For example, consider a signal that holds a Vec<String>.
In terms of logic, this is simple enough, but it’s hiding some significant inefficiencies. Remember that names().is_empty() is sugar for names.get().is_empty(), which clones the value (it’s names.with(|n| n.clone()).is_empty()). This means we clone the whole Vec<String>, run is_empty(), and then immediately throw away the clone.
+
Likewise, set_names replaces the value with a whole new Vec<_>. This is fine, but we might as well just mutate the original Vec<_> in place.
Now our function simply takes names by reference to run is_empty(), avoiding that clone.
+
And if you have Clippy on, or if you have sharp eyes, you may notice we can make this even neater:
+
if names.with(Vec::is_empty) {
+ // ...
+}
+
After all, .with() simply takes a function that takes the value by reference. Since Vec::is_empty takes &self, we can pass it in directly and avoid the unnecessary closure.
+
There are some helper macros to make using .with() and .update() easier to use, especially when using multiple signals.
If you wanted to concatenate these 3 signals together without unnecessary cloning, you would have to write something like:
+
let name = move || {
+ first.with(|first| {
+ middle.with(|middle| last.with(|last| format!("{first} {middle} {last}")))
+ })
+};
+
Which is very long and annoying to write.
+
Instead, you can use the with! macro to get references to all the signals at the same time.
+
let name = move || with!(|first, middle, last| format!("{first} {middle} {last}"));
+
This expands to the same thing as above. Take a look at the with! docs for more info, and the corresponding macros update!, with_value! and update_value!.
Often people ask about situations in which some signal needs to change based on some other signal’s value. There are three good ways to do this, and one that’s less than ideal but okay under controlled circumstances.
3) A and B are independent signals, but sometimes updated at the same time. When you make the call to update A, make a separate call to update B.
+
let (age, set_age) = create_signal(32);
+let (favorite_number, set_favorite_number) = create_signal(42);
+// use this to handle a click on a `Clear` button
+let clear_handler = move |_| {
+ set_age(0);
+ set_favorite_number(0);
+};
4) Create an effect to write to B whenever A changes. This is officially discouraged, for several reasons:
+a) It will always be less efficient, as it means every time A updates you do two full trips through the reactive process. (You set A, which causes the effect to run, as well as any other effects that depend on A. Then you set B, which causes any effects that depend on B to run.)
+b) It increases your chances of accidentally creating things like infinite loops or over-re-running effects. This is the kind of ping-ponging, reactive spaghetti code that was common in the early 2010s and that we try to avoid with things like read-write segregation and discouraging writing to signals from effects.
+
In most situations, it’s best to rewrite things such that there’s a clear, top-down data flow based on derived signals or memos. But this isn’t the end of the world.
+
+
I’m intentionally not providing an example here. Read the create_effect docs to figure out how this would work.
We’ve made it this far without having mentioned half of the reactive system: effects.
+
Reactivity works in two halves: updating individual reactive values (“signals”) notifies the pieces of code that depend on them (“effects”) that they need to run again. These two halves of the reactive system are inter-dependent. Without effects, signals can change within the reactive system but never be observed in a way that interacts with the outside world. Without signals, effects run once but never again, as there’s no observable value to subscribe to. Effects are quite literally “side effects” of the reactive system: they exist to synchronize the reactive system with the non-reactive world outside it.
+
Hidden behind the whole reactive DOM renderer that we’ve seen so far is a function called create_effect.
+
create_effect takes a function as its argument. It immediately runs the function. If you access any reactive signal inside that function, it registers the fact that the effect depends on that signal with the reactive runtime. Whenever one of the signals that the effect depends on changes, the effect runs again.
+
let (a, set_a) = create_signal(0);
+let (b, set_b) = create_signal(0);
+
+create_effect(move |_| {
+ // immediately prints "Value: 0" and subscribes to `a`
+ log::debug!("Value: {}", a());
+});
+
The effect function is called with an argument containing whatever value it returned the last time it ran. On the initial run, this is None.
+
By default, effects do not run on the server. This means you can call browser-specific APIs within the effect function without causing issues. If you need an effect to run on the server, use create_isomorphic_effect.
If you’re familiar with a framework like React, you might notice one key difference. React and similar frameworks typically require you to pass a “dependency array,” an explicit set of variables that determine when the effect should rerun.
+
Because Leptos comes from the tradition of synchronous reactive programming, we don’t need this explicit dependency list. Instead, we automatically track dependencies depending on which signals are accessed within the effect.
+
This has two effects (no pun intended). Dependencies are:
+
+
Automatic: You don’t need to maintain a dependency list, or worry about what should or shouldn’t be included. The framework simply tracks which signals might cause the effect to rerun, and handles it for you.
+
Dynamic: The dependency list is cleared and updated every time the effect runs. If your effect contains a conditional (for example), only signals that are used in the current branch are tracked. This means that effects rerun the absolute minimum number of times.
+
+
+
If this sounds like magic, and if you want a deep dive into how automatic dependency tracking works, check out this video. (Apologies for the low volume!)
While they’re not a “zero-cost abstraction” in the most technical sense—they require some additional memory use, exist at runtime, etc.—at a higher level, from the perspective of whatever expensive API calls or other work you’re doing within them, effects are a zero-cost abstraction. They rerun the absolute minimum number of times necessary, given how you’ve described them.
+
Imagine that I’m creating some kind of chat software, and I want people to be able to display their full name, or just their first name, and to notify the server whenever their name changes:
+
let (first, set_first) = create_signal(String::new());
+let (last, set_last) = create_signal(String::new());
+let (use_last, set_use_last) = create_signal(true);
+
+// this will add the name to the log
+// any time one of the source signals changes
+create_effect(move |_| {
+ log(
+ if use_last() {
+ format!("{} {}", first(), last())
+ } else {
+ first()
+ },
+ )
+});
+
If use_last is true, effect should rerun whenever first, last, or use_last changes. But if I toggle use_last to false, a change in last will never cause the full name to change. In fact, last will be removed from the dependency list until use_last toggles again. This saves us from sending multiple unnecessary requests to the API if I change last multiple times while use_last is still false.
Effects are intended to run side-effects of the system, not to synchronize state within the system. In other words: don’t write to signals within effects.
+
If you need to define a signal that depends on the value of other signals, use a derived signal or create_memo.
+
If you need to synchronize some reactive value with the non-reactive world outside—like a web API, the console, the filesystem, or the DOM—create an effect.
+
+
If you’re curious for more information about when you should and shouldn’t use create_effect, check out this video for a more in-depth consideration!
We’ve managed to get this far without mentioning effects because they’re built into the Leptos DOM renderer. We’ve seen that you can create a signal and pass it into the view macro, and it will update the relevant DOM node whenever the signal changes:
This works because the framework essentially creates an effect wrapping this update. You can imagine Leptos translating this view into something like this:
+
let (count, set_count) = create_signal(0);
+
+// create a DOM element
+let p = create_element("p");
+
+// create an effect to reactively update the text
+create_effect(move |prev_value| {
+ // first, access the signal’s value and convert it to a string
+ let text = count().to_string();
+
+ // if this is different from the previous value, update the node
+ if prev_value != Some(text) {
+ p.set_text_content(&text);
+ }
+
+ // return this value so we can memoize the next update
+ text
+});
+
Every time count is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
In addition to create_effect, Leptos provides a watch function, which can be used for two main purposes:
+
+
Separating tracking and responding to changes by explicitly passing in a set of values to track.
+
Canceling tracking by calling a stop function.
+
+
Like create_resource, watch takes a first argument, which is reactively tracked, and a second, which is not. Whenever a reactive value in its deps argument is changed, the callback is run. watch returns a function that can be called to stop tracking the dependencies.
One of our core contributors said to me recently: “I never used closures this often
+until I started using Leptos.” And it’s true. Closures are at the heart of any Leptos
+application. It sometimes looks a little silly:
+
// a signal holds a value, and can be updated
+let (count, set_count) = create_signal(0);
+
+// a derived signal is a function that accesses other signals
+let double_count = move || count() * 2;
+let count_is_odd = move || count() & 1 == 1;
+let text = move || if count_is_odd() {
+ "odd"
+} else {
+ "even"
+};
+
+// an effect automatically tracks the signals it depends on
+// and reruns when they change
+create_effect(move |_| {
+ logging::log!("text = {}", text());
+});
+
+view! {
+ <p>{move || text().to_uppercase()}</p>
+}
Functions are at the heart of every UI framework. And this makes perfect sense. Creating a user interface is basically divided into two phases:
+
+
initial rendering
+
updates
+
+
In a web framework, the framework does some kind of initial rendering. Then it hands control back over to the browser. When certain events fire (like a mouse click) or asynchronous tasks finish (like an HTTP request finishing), the browser wakes the framework back up to update something. The framework runs some kind of code to update your user interface, and goes back asleep until the browser wakes it up again.
+
The key phrase here is “runs some kind of code.” The natural way to “run some kind of code” at an arbitrary point in time—in Rust or in any other programming language—is to call a function. And in fact every UI framework is based on rerunning some kind of function over and over:
+
+
virtual DOM (VDOM) frameworks like React, Yew, or Dioxus rerun a component or render function over and over, to generate a virtual DOM tree that can be reconciled with the previous result to patch the DOM
+
compiled frameworks like Angular and Svelte divide your component templates into “create” and “update” functions, rerunning the update function when they detect a change to the component’s state
+
in fine-grained reactive frameworks like SolidJS, Sycamore, or Leptos, you define the functions that rerun
+
+
That’s what all our components are doing.
+
Take our typical <SimpleCounter/> example in its simplest form:
The SimpleCounter function itself runs once. The value signal is created once. The framework hands off the increment function to the browser as an event listener. When you click the button, the browser calls increment, which updates value via set_value. And that updates the single text node represented in our view by {value}.
+
Closures are key to reactivity. They provide the framework with the ability to rerun the smallest possible unit of your application in response to a change.
+
So remember two things:
+
+
Your component function is a setup function, not a render function: it only runs once.
+
For values in your view template to be reactive, they must be functions: either signals (which implement the Fn traits) or closures.
Testing user interfaces can be relatively tricky, but really important. This article
+will discuss a couple principles and approaches for testing a Leptos app.
In many cases, it makes sense to pull the logic out of your components and test
+it separately. For some simple components, there’s no particular logic to test, but
+for many it’s worth using a testable wrapping type and implementing the logic in
+ordinary Rust impl blocks.
+
For example, instead of embedding logic in a component directly like this:
+
#[component]
+pub fn TodoApp() -> impl IntoView {
+ let (todos, set_todos) = create_signal(vec![Todo { /* ... */ }]);
+ // ⚠️ this is hard to test because it's embedded in the component
+ let num_remaining = move || todos.with(|todos| {
+ todos.iter().filter(|todo| !todo.completed).sum()
+ });
+}
+
You could pull that logic out into a separate data structure and test it:
+
pub struct Todos(Vec<Todo>);
+
+impl Todos {
+ pub fn num_remaining(&self) -> usize {
+ self.0.iter().filter(|todo| !todo.completed).sum()
+ }
+}
+
+#[cfg(test)]
+mod tests {
+ #[test]
+ fn test_remaining() {
+ // ...
+ }
+}
+
+#[component]
+pub fn TodoApp() -> impl IntoView {
+ let (todos, set_todos) = create_signal(Todos(vec![Todo { /* ... */ }]));
+ // ✅ this has a test associated with it
+ let num_remaining = move || todos.with(Todos::num_remaining);
+}
+
In general, the less of your logic is wrapped into your components themselves, the
+more idiomatic your code will feel and the easier it will be to test.
#[wasm_bindgen_test]
+fn clear() {
+ let document = leptos::document();
+ let test_wrapper = document.create_element("section").unwrap();
+ let _ = document.body().unwrap().append_child(&test_wrapper);
+
+ mount_to(
+ test_wrapper.clone().unchecked_into(),
+ || view! { <SimpleCounter initial_value=10 step=1/> },
+ );
+
+ let div = test_wrapper.query_selector("div").unwrap().unwrap();
+ let clear = test_wrapper
+ .query_selector("button")
+ .unwrap()
+ .unwrap()
+ .unchecked_into::<web_sys::HtmlElement>();
+
+ clear.click();
+
+assert_eq!(
+ div.outer_html(),
+ // here we spawn a mini reactive system to render the test case
+ run_scope(create_runtime(), || {
+ // it's as if we're creating it with a value of 0, right?
+ let (value, set_value) = create_signal(0);
+
+ // we can remove the event listeners because they're not rendered to HTML
+ view! {
+ <div>
+ <button>"Clear"</button>
+ <button>"-1"</button>
+ <span>"Value: " {value} "!"</span>
+ <button>"+1"</button>
+ </div>
+ }
+ // the view returned an HtmlElement<Div>, which is a smart pointer for
+ // a DOM element. So we can still just call .outer_html()
+ .outer_html()
+ })
+);
+}
This more developed test suite uses a system of fixtures to refactor the manual DOM manipulation of the counter tests and easily test a wide range of cases.
These tests use the common JavaScript testing tool Playwright to run end-to-end tests on the same example, using a library and testing approach familiar to may who have done frontend development before.
You can integrate any testing tool you’d like into this flow. This example uses Cucumber, a testing framework based on natural language.
+
@add_todo
+Feature: Add Todo
+
+ Background:
+ Given I see the app
+
+ @add_todo-see
+ Scenario: Should see the todo
+ Given I set the todo as Buy Bread
+ When I click the Add button
+ Then I see the todo named Buy Bread
+
+ # @allow.skipped
+ @add_todo-style
+ Scenario: Should see the pending todo
+ When I add a todo as Buy Oranges
+ Then I see the pending todo
+
+
The definitions for these actions are defined in Rust code.
+
use crate::fixtures::{action, world::AppWorld};
+use anyhow::{Ok, Result};
+use cucumber::{given, when};
+
+#[given("I see the app")]
+#[when("I open the app")]
+async fn i_open_the_app(world: &mut AppWorld) -> Result<()> {
+ let client = &world.client;
+ action::goto_path(client, "").await?;
+
+ Ok(())
+}
+
+#[given(regex = "^I add a todo as (.*)$")]
+#[when(regex = "^I add a todo as (.*)$")]
+async fn i_add_a_todo_titled(world: &mut AppWorld, text: String) -> Result<()> {
+ let client = &world.client;
+ action::add_todo(client, text.as_str()).await?;
+
+ Ok(())
+}
+
+// etc.
Feel free to check out the CI setup in the Leptos repo to learn more about how to use these tools in your own application. All of these testing methods are run regularly against actual Leptos example apps.
So far we’ve only been working with synchronous users interfaces: You provide some input,
+the app immediately processes it and updates the interface. This is great, but is a tiny
+subset of what web applications do. In particular, most web apps have to deal with some kind of asynchronous data loading, usually loading something from an API.
+
Asynchronous data is notoriously hard to integrate with the synchronous parts of your code. Leptos provides a cross-platform spawn_local function that makes it easy to run a Future, but there’s much more to it than that.
+
In this chapter, we’ll see how Leptos helps smooth out that process for you.
A Resource is a reactive data structure that reflects the current state of an asynchronous task, allowing you to integrate asynchronous Futures into the synchronous reactive system. Rather than waiting for its data to load with .await, you transform the Future into a signal that returns Some(T) if it has resolved, and None if it’s still pending.
+
You do this by using the create_resource function. This takes two arguments:
+
+
a source signal, which will generate a new Future whenever it changes
+
a fetcher function, which takes the data from that signal and returns a Future
+
+
Here’s an example
+
// our source signal: some synchronous, local state
+let (count, set_count) = create_signal(0);
+
+// our resource
+let async_data = create_resource(
+ count,
+ // every time `count` changes, this will run
+ |value| async move {
+ logging::log!("loading data from API");
+ load_data(value).await
+ },
+);
+
To create a resource that simply runs once, you can pass a non-reactive, empty source signal:
+
let once = create_resource(|| (), |_| async move { load_data().await });
+
To access the value you can use .get() or .with(|data| /* */). These work just like .get() and .with() on a signal—get clones the value and returns it, with applies a closure to it—but for any Resource<_, T>, they always return Option<T>, not T: because it’s always possible that your resource is still loading.
+
So, you can show the current state of a resource in your view:
Resources also provide a refetch() method that allows you to manually reload the data (for example, in response to a button click) and a loading() method that returns a ReadSignal<bool> indicating whether the resource is currently loading or not.
use gloo_timers::future::TimeoutFuture;
+use leptos::*;
+
+// Here we define an async function
+// This could be anything: a network request, database read, etc.
+// Here, we just multiply a number by 10
+async fn load_data(value: i32) -> i32 {
+ // fake a one-second delay
+ TimeoutFuture::new(1_000).await;
+ value * 10
+}
+
+#[component]
+fn App() -> impl IntoView {
+ // this count is our synchronous, local state
+ let (count, set_count) = create_signal(0);
+
+ // create_resource takes two arguments after its scope
+ let async_data = create_resource(
+ // the first is the "source signal"
+ count,
+ // the second is the loader
+ // it takes the source signal's value as its argument
+ // and does some async work
+ |value| async move { load_data(value).await },
+ );
+ // whenever the source signal changes, the loader reloads
+
+ // you can also create resources that only load once
+ // just return the unit type () from the source signal
+ // that doesn't depend on anything: we just load it once
+ let stable = create_resource(|| (), |_| async move { load_data(1).await });
+
+ // we can access the resource values with .get()
+ // this will reactively return None before the Future has resolved
+ // and update to Some(T) when it has resolved
+ let async_result = move || {
+ async_data
+ .get()
+ .map(|value| format!("Server returned {value:?}"))
+ // This loading state will only show before the first load
+ .unwrap_or_else(|| "Loading...".into())
+ };
+
+ // the resource's loading() method gives us a
+ // signal to indicate whether it's currently loading
+ let loading = async_data.loading();
+ let is_loading = move || if loading() { "Loading..." } else { "Idle." };
+
+ view! {
+ <button
+ on:click=move |_| {
+ set_count.update(|n| *n += 1);
+ }
+ >
+ "Click me"
+ </button>
+ <p>
+ <code>"stable"</code>": " {move || stable.get()}
+ </p>
+ <p>
+ <code>"count"</code>": " {count}
+ </p>
+ <p>
+ <code>"async_value"</code>": "
+ {async_result}
+ <br/>
+ {is_loading}
+ </p>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
That’s not so bad, but it’s kind of annoying. What if we could invert the flow of control?
+
The <Suspense/> component lets us do exactly that. You give it a fallback prop and children, one or more of which usually involves reading from a resource. Reading from a resource “under” a <Suspense/> (i.e., in one of its children) registers that resource with the <Suspense/>. If it’s still waiting for resources to load, it shows the fallback. When they’ve all loaded, it shows the children.
Every time one of the resources is reloading, the "Loading..." fallback will show again.
+
This inversion of the flow of control makes it easier to add or remove individual resources, as you don’t need to handle the matching yourself. It also unlocks some massive performance improvements during server-side rendering, which we’ll talk about during a later chapter.
In you’re simply trying to wait for some Future to resolve before rendering, you may find the <Await/> component helpful in reducing boilerplate. <Await/> essentially combines a resource with the source argument || () with a <Suspense/> with no fallback.
+
In other words:
+
+
It only polls the Future once, and does not respond to any reactive changes.
+
It does not render anything until the Future resolves.
+
After the Future resolves, it binds its data to whatever variable name you choose and then renders its children with that variable in scope.
+
+
async fn fetch_monkeys(monkey: i32) -> i32 {
+ // maybe this didn't need to be async
+ monkey * 2
+}
+view! {
+ <Await
+ // `future` provides the `Future` to be resolved
+ future=|| fetch_monkeys(3)
+ // the data is bound to whatever variable name you provide
+ let:data
+ >
+ // you receive the data by reference and can use it in your view here
+ <p>{*data} " little monkeys, jumping on the bed."</p>
+ </Await>
+}
You’ll notice in the <Suspense/> example that if you keep reloading the data, it keeps flickering back to "Loading...". Sometimes this is fine. For other times, there’s <Transition/>.
+
<Transition/> behaves exactly the same as <Suspense/>, but instead of falling back every time, it only shows the fallback the first time. On all subsequent loads, it continues showing the old data until the new data are ready. This can be really handy to prevent the flickering effect, and to allow users to continue interacting with your application.
+
This example shows how you can create a simple tabbed contact list with <Transition/>. When you select a new tab, it continues showing the current contact until the new data loads. This can be a much better user experience than constantly falling back to a loading message.
We’ve talked about how to load async data with resources. Resources immediately load data and work closely with <Suspense/> and <Transition/> components to show whether data is loading in your app. But what if you just want to call some arbitrary async function and keep track of what it’s doing?
+
Well, you could always use spawn_local. This allows you to just spawn an async task in a synchronous environment by handing the Future off to the browser (or, on the server, Tokio or whatever other runtime you’re using). But how do you know if it’s still pending? Well, you could just set a signal to show whether it’s loading, and another one to show the result...
+
All of this is true. Or you could use the final async primitive: create_action.
+
Actions and resources seem similar, but they represent fundamentally different things. If you’re trying to load data by running an async function, either once or when some other value changes, you probably want to use create_resource. If you’re trying to occasionally run an async function in response to something like a user clicking a button, you probably want to use create_action.
+
Say we have some async function we want to run.
+
async fn add_todo_request(new_title: &str) -> Uuid {
+ /* do some stuff on the server to add a new todo */
+}
+
create_action takes an async function that takes a reference to a single argument, which you could think of as its “input type.”
+
+
The input is always a single type. If you want to pass in multiple arguments, you can do it with a struct or tuple.
+
// if there's a single argument, just use that
+let action1 = create_action(|input: &String| {
+ let input = input.clone();
+ async move { todo!() }
+});
+
+// if there are no arguments, use the unit type `()`
+let action2 = create_action(|input: &()| async { todo!() });
+
+// if there are multiple arguments, use a tuple
+let action3 = create_action(
+ |input: &(usize, String)| async { todo!() }
+);
+
Because the action function takes a reference but the Future needs to have a 'static lifetime, you’ll usually need to clone the value to pass it into the Future. This is admittedly awkward but it unlocks some powerful features like optimistic UI. We’ll see a little more about that in future chapters.
+
+
So in this case, all we need to do to create an action is
+
let add_todo_action = create_action(|input: &String| {
+ let input = input.to_owned();
+ async move { add_todo_request(&input).await }
+});
+
Rather than calling add_todo_action directly, we’ll call it with .dispatch(), as in
You can do this from an event listener, a timeout, or anywhere; because .dispatch() isn’t an async function, it can be called from a synchronous context.
+
Actions provide access to a few signals that synchronize between the asynchronous action you’re calling and the synchronous reactive system:
This makes it easy to track the current state of your request, show a loading indicator, or do “optimistic UI” based on the assumption that the submission will succeed.
+
let input_ref = create_node_ref::<Input>();
+
+view! {
+ <form
+ on:submit=move |ev| {
+ ev.prevent_default(); // don't reload the page...
+ let input = input_ref.get().expect("input to exist");
+ add_todo_action.dispatch(input.value());
+ }
+ >
+ <label>
+ "What do you need to do?"
+ <input type="text"
+ node_ref=input_ref
+ />
+ </label>
+ <button type="submit">"Add Todo"</button>
+ </form>
+ // use our loading state
+ <p>{move || pending().then("Loading...")}</p>
+}
+
Now, there’s a chance this all seems a little over-complicated, or maybe too restricted. I wanted to include actions here, alongside resources, as the missing piece of the puzzle. In a real Leptos app, you’ll actually most often use actions alongside server functions, create_server_action, and the <ActionForm/> component to create really powerful progressively-enhanced forms. So if this primitive seems useless to you... Don’t worry! Maybe it will make sense later. (Or check out our todo_app_sqlite example now.)
use gloo_timers::future::TimeoutFuture;
+use leptos::{html::Input, *};
+use uuid::Uuid;
+
+// Here we define an async function
+// This could be anything: a network request, database read, etc.
+// Think of it as a mutation: some imperative async action you run,
+// whereas a resource would be some async data you load
+async fn add_todo(text: &str) -> Uuid {
+ _ = text;
+ // fake a one-second delay
+ TimeoutFuture::new(1_000).await;
+ // pretend this is a post ID or something
+ Uuid::new_v4()
+}
+
+#[component]
+fn App() -> impl IntoView {
+ // an action takes an async function with single argument
+ // it can be a simple type, a struct, or ()
+ let add_todo = create_action(|input: &String| {
+ // the input is a reference, but we need the Future to own it
+ // this is important: we need to clone and move into the Future
+ // so it has a 'static lifetime
+ let input = input.to_owned();
+ async move { add_todo(&input).await }
+ });
+
+ // actions provide a bunch of synchronous, reactive variables
+ // that tell us different things about the state of the action
+ let submitted = add_todo.input();
+ let pending = add_todo.pending();
+ let todo_id = add_todo.value();
+
+ let input_ref = create_node_ref::<Input>();
+
+ view! {
+ <form
+ on:submit=move |ev| {
+ ev.prevent_default(); // don't reload the page...
+ let input = input_ref.get().expect("input to exist");
+ add_todo.dispatch(input.value());
+ }
+ >
+ <label>
+ "What do you need to do?"
+ <input type="text"
+ node_ref=input_ref
+ />
+ </label>
+ <button type="submit">"Add Todo"</button>
+ </form>
+ <p>{move || pending().then(|| "Loading...")}</p>
+ <p>
+ "Submitted: "
+ <code>{move || format!("{:#?}", submitted())}</code>
+ </p>
+ <p>
+ "Pending: "
+ <code>{move || format!("{:#?}", pending())}</code>
+ </p>
+ <p>
+ "Todo ID: "
+ <code>{move || format!("{:#?}", todo_id())}</code>
+ </p>
+ }
+}
+
+fn main() {
+ leptos::mount_to_body(App)
+}
This is pretty straightforward: when the user is logged in, we want to show children. If the user is not logged in, we want to show fallback. And while we’re waiting to find out, we just render (), i.e., nothing.
+
In other words, we want to pass the children of <LoggedIn/>through the <Suspense/> component to become the children of the <Show/>. This is what I mean by “projection.”
+
This won’t compile.
+
error[E0507]: cannot move out of `fallback`, a captured variable in an `Fn` closure
+error[E0507]: cannot move out of `children`, a captured variable in an `Fn` closure
+
+
The problem here is that both <Suspense/> and <Show/> need to be able to construct their children multiple times. The first time you construct <Suspense/>’s children, it would take ownership of fallback and children to move them into the invocation of <Show/>, but then they're not available for future <Suspense/> children construction.
If you want to really understand the issue here, it may help to look at the expanded view macro. Here’s a cleaned-up version:
+
Suspense(
+ ::leptos::component_props_builder(&Suspense)
+ .fallback(|| ())
+ .children({
+ // fallback and children are moved into this closure
+ Box::new(move || {
+ {
+ // fallback and children captured here
+ leptos::Fragment::lazy(|| {
+ vec![
+ (Show(
+ ::leptos::component_props_builder(&Show)
+ .when(|| true)
+ // but fallback is moved into Show here
+ .fallback(fallback)
+ // and children is moved into Show here
+ .children(children)
+ .build(),
+ )
+ .into_view()),
+ ]
+ })
+ }
+ })
+ })
+ .build(),
+)
+
All components own their props; so the <Show/> in this case can’t be called because it only has captured references to fallback and children.
However, both <Suspense/> and <Show/> take ChildrenFn, i.e., their children should implement the Fn type so they can be called multiple times with only an immutable reference. This means we don’t need to own children or fallback; we just need to be able to pass 'static references to them.
+
We can solve this problem by using the store_value primitive. This essentially stores a value in the reactive system, handing ownership off to the framework in exchange for a reference that is, like signals, Copy and 'static, which we can access or modify through certain methods.
At the top level, we store both fallback and children in the reactive scope owned by LoggedIn. Now we can simply move those references down through the other layers into the <Show/> component and call them there.
Note that this works because <Show/> and <Suspense/> only need an immutable reference to their children (which .with_value can give it), not ownership.
+
In other cases, you may need to project owned props through a function that takes ChildrenFn and therefore needs to be called more than once. In this case, you may find the clone: helper in theview macro helpful.
cannot move out of `name`, a captured variable in an `Fn` closure
+
+
It’s captured through multiple levels of children that need to run more than once, and there’s no obvious way to clone it into the children.
+
In this case, the clone: syntax comes in handy. Calling clone:name will clone namebefore moving it into <Inner/>’s children, which solves our ownership issue.
So far, we've only been working with local state in components, and we’ve seen how to coordinate state between parent and child components. On occasion, there are times where people look for a more general solution for global state management that can work throughout an application.
+
In general, you do not need this chapter. The typical pattern is to compose your application out of components, each of which manages its own local state, not to store all state in a global structure. However, there are some cases (like theming, saving user settings, or sharing data between components in different parts of your UI) in which you may want to use some kind of global state management.
+
The three best approaches to global state are
+
+
Using the router to drive global state via the URL
+
Passing signals through context
+
Creating a global state struct and creating lenses into it with create_slice
In many ways, the URL is actually the best way to store global state. It can be accessed from any component, anywhere in your tree. There are native HTML elements like <form> and <a> that exist solely to update the URL. And it persists across page reloads and between devices; you can share a URL with a friend or send it from your phone to your laptop and any state stored in it will be replicated.
+
The next few sections of the tutorial will be about the router, and we’ll get much more into these topics.
+
But for now, we'll just look at options #2 and #3.
In the section on parent-child communication, we saw that you can use provide_context to pass signal from a parent component to a child, and use_context to read it in the child. But provide_context works across any distance. If you want to create a global signal that holds some piece of state, you can provide it and access it via context anywhere in the descendants of the component where you provide it.
+
A signal provided via context only causes reactive updates where it is read, not in any of the components in between, so it maintains the power of fine-grained reactive updates, even at a distance.
+
We start by creating a signal in the root of the app and providing it to
+all its children and descendants using provide_context.
+
#[component]
+fn App() -> impl IntoView {
+ // here we create a signal in the root that can be consumed
+ // anywhere in the app.
+ let (count, set_count) = create_signal(0);
+ // we'll pass the setter to specific components,
+ // but provide the count itself to the whole app via context
+ provide_context(count);
+
+ view! {
+ // SetterButton is allowed to modify the count
+ <SetterButton set_count/>
+ // These consumers can only read from it
+ // But we could give them write access by passing `set_count` if we wanted
+ <FancyMath/>
+ <ListItems/>
+ }
+}
+
<SetterButton/> is the kind of counter we’ve written several times now.
+(See the sandbox below if you don’t understand what I mean.)
+
<FancyMath/> and <ListItems/> both consume the signal we’re providing via
+use_context and do something with it.
+
/// A component that does some "fancy" math with the global count
+#[component]
+fn FancyMath() -> impl IntoView {
+ // here we consume the global count signal with `use_context`
+ let count = use_context::<ReadSignal<u32>>()
+ // we know we just provided this in the parent component
+ .expect("there to be a `count` signal provided");
+ let is_even = move || count() & 1 == 0;
+
+ view! {
+ <div class="consumer blue">
+ "The number "
+ <strong>{count}</strong>
+ {move || if is_even() {
+ " is"
+ } else {
+ " is not"
+ }}
+ " even."
+ </div>
+ }
+}
+
Note that this same pattern can be applied to more complex state. If you have multiple fields you want to update independently, you can do that by providing some struct of signals:
You may find it cumbersome to wrap each field of a structure in a separate signal like this. In some cases, it can be useful to create a plain struct with non-reactive fields, and then wrap that in a signal.
But there’s a problem: because our whole state is wrapped in one signal, updating the value of one field will cause reactive updates in parts of the UI that only depend on the other.
+
let state = expect_context::<RwSignal<GlobalState>>();
+view! {
+ <button on:click=move |_| state.update(|n| *n += 1)>"+1"</button>
+ <p>{move || state.with(|state| state.name.clone())}</p>
+}
+
In this example, clicking the button will cause the text inside <p> to be updated, cloning state.name again! Because signals are the atomic unit of reactivity, updating any field of the signal triggers updates to everything that depends on the signal.
+
There’s a better way. You can take fine-grained, reactive slices by using create_memo or create_slice (which uses create_memo but also provides a setter). “Memoizing” a value means creating a new reactive value which will only update when it changes. “Memoizing a slice” means creating a new reactive value which will only update when some field of the state struct updates.
+
Here, instead of reading from the state signal directly, we create “slices” of that state with fine-grained updates via create_slice. Each slice signal only updates when the particular piece of the larger struct it accesses updates. This means you can create a single root signal, and then take independent, fine-grained slices of it in different components, each of which can update without notifying the others of changes.
+
/// A component that updates the count in the global state.
+#[component]
+fn GlobalStateCounter() -> impl IntoView {
+ let state = expect_context::<RwSignal<GlobalState>>();
+
+ // `create_slice` lets us create a "lens" into the data
+ let (count, set_count) = create_slice(
+
+ // we take a slice *from* `state`
+ state,
+ // our getter returns a "slice" of the data
+ |state| state.count,
+ // our setter describes how to mutate that slice, given a new value
+ |state, n| state.count = n,
+ );
+
+ view! {
+ <div class="consumer blue">
+ <button
+ on:click=move |_| {
+ set_count(count() + 1);
+ }
+ >
+ "Increment Global Count"
+ </button>
+ <br/>
+ <span>"Count is: " {count}</span>
+ </div>
+ }
+}
+
Clicking this button only updates state.count, so if we create another slice
+somewhere else that only takes state.name, clicking the button won’t cause
+that other slice to update. This allows you to combine the benefits of a top-down
+data flow and of fine-grained reactive updates.
+
+
Note: There are some significant drawbacks to this approach. Both signals and memos need to own their values, so a memo will need to clone the field’s value on every change. The most natural way to manage state in a framework like Leptos is always to provide signals that are as locally-scoped and fine-grained as they can be, not to hoist everything up into global state. But when you do need some kind of global state, create_slice can be a useful tool.
use leptos::*;
+
+// So far, we've only been working with local state in components
+// We've only seen how to communicate between parent and child components
+// But there are also more general ways to manage global state
+//
+// The three best approaches to global state are
+// 1. Using the router to drive global state via the URL
+// 2. Passing signals through context
+// 3. Creating a global state struct and creating lenses into it with `create_slice`
+//
+// Option #1: URL as Global State
+// The next few sections of the tutorial will be about the router.
+// So for now, we'll just look at options #2 and #3.
+
+// Option #2: Pass Signals through Context
+//
+// In virtual DOM libraries like React, using the Context API to manage global
+// state is a bad idea: because the entire app exists in a tree, changing
+// some value provided high up in the tree can cause the whole app to render.
+//
+// In fine-grained reactive libraries like Leptos, this is simply not the case.
+// You can create a signal in the root of your app and pass it down to other
+// components using provide_context(). Changing it will only cause rerendering
+// in the specific places it is actually used, not the whole app.
+#[component]
+fn Option2() -> impl IntoView {
+ // here we create a signal in the root that can be consumed
+ // anywhere in the app.
+ let (count, set_count) = create_signal(0);
+ // we'll pass the setter to specific components,
+ // but provide the count itself to the whole app via context
+ provide_context(count);
+
+ view! {
+ <h1>"Option 2: Passing Signals"</h1>
+ // SetterButton is allowed to modify the count
+ <SetterButton set_count/>
+ // These consumers can only read from it
+ // But we could give them write access by passing `set_count` if we wanted
+ <div style="display: flex">
+ <FancyMath/>
+ <ListItems/>
+ </div>
+ }
+}
+
+/// A button that increments our global counter.
+#[component]
+fn SetterButton(set_count: WriteSignal<u32>) -> impl IntoView {
+ view! {
+ <div class="provider red">
+ <button on:click=move |_| set_count.update(|count| *count += 1)>
+ "Increment Global Count"
+ </button>
+ </div>
+ }
+}
+
+/// A component that does some "fancy" math with the global count
+#[component]
+fn FancyMath() -> impl IntoView {
+ // here we consume the global count signal with `use_context`
+ let count = use_context::<ReadSignal<u32>>()
+ // we know we just provided this in the parent component
+ .expect("there to be a `count` signal provided");
+ let is_even = move || count() & 1 == 0;
+
+ view! {
+ <div class="consumer blue">
+ "The number "
+ <strong>{count}</strong>
+ {move || if is_even() {
+ " is"
+ } else {
+ " is not"
+ }}
+ " even."
+ </div>
+ }
+}
+
+/// A component that shows a list of items generated from the global count.
+#[component]
+fn ListItems() -> impl IntoView {
+ // again, consume the global count signal with `use_context`
+ let count = use_context::<ReadSignal<u32>>().expect("there to be a `count` signal provided");
+
+ let squares = move || {
+ (0..count())
+ .map(|n| view! { <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
+ .collect::<Vec<_>>()
+ };
+
+ view! {
+ <div class="consumer green">
+ <ul>{squares}</ul>
+ </div>
+ }
+}
+
+// Option #3: Create a Global State Struct
+//
+// You can use this approach to build a single global data structure
+// that holds the state for your whole app, and then access it by
+// taking fine-grained slices using `create_slice` or `create_memo`,
+// so that changing one part of the state doesn't cause parts of your
+// app that depend on other parts of the state to change.
+
+#[derive(Default, Clone, Debug)]
+struct GlobalState {
+ count: u32,
+ name: String,
+}
+
+#[component]
+fn Option3() -> impl IntoView {
+ // we'll provide a single signal that holds the whole state
+ // each component will be responsible for creating its own "lens" into it
+ let state = create_rw_signal(GlobalState::default());
+ provide_context(state);
+
+ view! {
+ <h1>"Option 3: Passing Signals"</h1>
+ <div class="red consumer" style="width: 100%">
+ <h2>"Current Global State"</h2>
+ <pre>
+ {move || {
+ format!("{:#?}", state.get())
+ }}
+ </pre>
+ </div>
+ <div style="display: flex">
+ <GlobalStateCounter/>
+ <GlobalStateInput/>
+ </div>
+ }
+}
+
+/// A component that updates the count in the global state.
+#[component]
+fn GlobalStateCounter() -> impl IntoView {
+ let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
+
+ // `create_slice` lets us create a "lens" into the data
+ let (count, set_count) = create_slice(
+
+ // we take a slice *from* `state`
+ state,
+ // our getter returns a "slice" of the data
+ |state| state.count,
+ // our setter describes how to mutate that slice, given a new value
+ |state, n| state.count = n,
+ );
+
+ view! {
+ <div class="consumer blue">
+ <button
+ on:click=move |_| {
+ set_count(count() + 1);
+ }
+ >
+ "Increment Global Count"
+ </button>
+ <br/>
+ <span>"Count is: " {count}</span>
+ </div>
+ }
+}
+
+/// A component that updates the count in the global state.
+#[component]
+fn GlobalStateInput() -> impl IntoView {
+ let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");
+
+ // this slice is completely independent of the `count` slice
+ // that we created in the other component
+ // neither of them will cause the other to rerun
+ let (name, set_name) = create_slice(
+ // we take a slice *from* `state`
+ state,
+ // our getter returns a "slice" of the data
+ |state| state.name.clone(),
+ // our setter describes how to mutate that slice, given a new value
+ |state, n| state.name = n,
+ );
+
+ view! {
+ <div class="consumer green">
+ <input
+ type="text"
+ prop:value=name
+ on:input=move |ev| {
+ set_name(event_target_value(&ev));
+ }
+ />
+ <br/>
+ <span>"Name is: " {name}</span>
+ </div>
+ }
+}
+// This `main` function is the entry point into the app
+// It just mounts our component to the <body>
+// Because we defined it as `fn App`, we can now use it in a
+// template as <App/>
+fn main() {
+ leptos::mount_to_body(|| view! { <Option2/><Option3/> })
+}
In most cases, the path should drive what is displayed on the page. From the user’s perspective, for most applications, most major changes in the state of the app should be reflected in the URL. If you copy and paste the URL and open it in another tab, you should find yourself more or less in the same place.
+
In this sense, the router is really at the heart of the global state management for your application. More than anything else, it drives what is displayed on the page.
+
The router handles most of this work for you by mapping the current location to particular components.
First things first, make sure you’ve added the leptos_router package to your dependencies.
+
+
It’s important that the router is a separate package from leptos itself. This means that everything in the router can be defined in user-land code. If you want to create your own router, or use no router, you’re completely free to do that!
+
+
And import the relevant types from the router, either with something like
+
use leptos_router::{Route, RouteProps, Router, RouterProps, Routes, RoutesProps};
Routing behavior is provided by the <Router/> component. This should usually be somewhere near the root of your application, the rest of the app.
+
+
You shouldn’t try to use multiple <Router/>s in your app. Remember that the router drives global state: if you have multiple routers, which one decides what to do when the URL changes?
+
+
Let’s start with a simple <App/> component using the router:
The <Routes/> component is where you define all the routes to which a user can navigate in your application. Each possible route is defined by a <Route/> component.
+
You should place the <Routes/> component at the location within your app where you want routes to be rendered. Everything outside <Routes/> will be present on every page, so you can leave things like a navigation bar or menu outside the <Routes/>.
Individual routes are defined by providing children to <Routes/> with the <Route/> component. <Route/> takes a path and a view. When the current location matches path, the view will be created and displayed.
+
The path can include
+
+
a static path (/users),
+
dynamic, named parameters beginning with a colon (/:id),
+
and/or a wildcard beginning with an asterisk (/user/*any)
+
+
The view is a function that returns a view. Any component with no props works here, as does a closure that returns some view.
view takes a Fn() -> impl IntoView. If a component has no props, it can be passed directly into the view. In this case, view=Home is just a shorthand for || view! { <Home/> }.
+
+
Now if you navigate to / or to /users you’ll get the home page or the <Users/>. If you go to /users/3 or /blahblah you’ll get a user profile or your 404 page (<NotFound/>). On every navigation, the router determines which <Route/> should be matched, and therefore what content should be displayed where the <Routes/> component is defined.
+
Note that you can define your routes in any order. The router scores each route to see how good a match it is, rather than simply trying to match them top to bottom.
leptos_router is based on the assumption that you have one and only one <Routes/> component in your app. It uses this to generate routes on the server side, optimize route matching by caching calculated branches, and render your application.
+
You should not conditionally render <Routes/> using another component like <Show/> or <Suspense/>.
There’s a certain amount of duplication here: /users and /users/:id. This is fine for a small app, but you can probably already tell it won’t scale well. Wouldn’t it be nice if we could nest these routes?
But wait. We’ve just subtly changed what our application does.
+
The next section is one of the most important in this entire routing section of the guide. Read it carefully, and feel free to ask questions if there’s anything you don’t understand.
Nested routes are a form of layout, not a method of route definition.
+
Let me put that another way: The goal of defining nested routes is not primarily to avoid repeating yourself when typing out the paths in your route definitions. It is actually to tell the router to display multiple <Route/>s on the page at the same time, side by side.
If I go to /users/3, the path matches <Users/> and <UserProfile/>.
+
If I go to /users, the path matches <Users/> and <NoUser/>.
+
+
When I use nested routes, in other words, each path can match multiple routes: each URL can render the views provided by multiple <Route/> components, at the same time, on the same page.
+
This may be counter-intuitive, but it’s very powerful, for reasons you’ll hopefully see in a few minutes.
Most web applications contain levels of navigation that correspond to different parts of the layout. For example, in an email app you might have a URL like /contacts/greg, which shows a list of contacts on the left of the screen, and contact details for Greg on the right of the screen. The contact list and the contact details should always appear on the screen at the same time. If there’s no contact selected, maybe you want to show a little instructional text.
+
You can easily define this with nested routes
+
<Routes>
+ <Route path="/contacts" view=ContactList>
+ <Route path=":id" view=ContactInfo/>
+ <Route path="" view=|| view! {
+ <p>"Select a contact to view more info."</p>
+ }/>
+ </Route>
+</Routes>
+
You can go even deeper. Say you want to have tabs for each contact’s address, email/phone, and your conversations with them. You can add another set of nested routes inside :id:
The main page of the Remix website, a React framework from the creators of React Router, has a great visual example if you scroll down, with three levels of nested routing: Sales > Invoices > an invoice.
Parent routes do not automatically render their nested routes. After all, they are just components; they don’t know exactly where they should render their children, and “just stick it at the end of the parent component” is not a great answer.
+
Instead, you tell a parent component where to render any nested components with an <Outlet/> component. The <Outlet/> simply renders one of two things:
+
+
if there is no nested route that has been matched, it shows nothing
+
if there is a nested route that has been matched, it shows its view
+
+
That’s all! But it’s important to know and to remember, because it’s a common source of “Why isn’t this working?” frustration. If you don’t provide an <Outlet/>, the nested route won’t be displayed.
+
#[component]
+pub fn ContactList() -> impl IntoView {
+ let contacts = todo!();
+
+ view! {
+ <div style="display: flex">
+ // the contact list
+ <For each=contacts
+ key=|contact| contact.id
+ children=|contact| todo!()
+ />
+ // the nested child, if any
+ // don’t forget this!
+ <Outlet/>
+ </div>
+ }
+}
You don’t need to define all your routes in one place if you don’t want to. You can refactor any <Route/> and its children out into a separate component.
+
For example, you can refactor the example above to use two separate components:
This second component is a #[component(transparent)], meaning it just returns its data, not a view: in this case, it's a RouteDefinition struct, which is what the <Route/> returns. As long as it is marked #[component(transparent)], this sub-route can be defined wherever you want, and inserted as a component into your tree of route definitions.
All of this is nice, conceptually, but again—what’s the big deal?
+
Performance.
+
In a fine-grained reactive library like Leptos, it’s always important to do the least amount of rendering work you can. Because we’re working with real DOM nodes and not diffing a virtual DOM, we want to “rerender” components as infrequently as possible. Nested routing makes this extremely easy.
+
Imagine my contact list example. If I navigate from Greg to Alice to Bob and back to Greg, the contact information needs to change on each navigation. But the <ContactList/> should never be rerendered. Not only does this save on rendering performance, it also maintains state in the UI. For example, if I have a search bar at the top of <ContactList/>, navigating from Greg to Alice to Bob won’t clear the search.
+
In fact, in this case, we don’t even need to rerender the <Contact/> component when moving between contacts. The router will just reactively update the :id parameter as we navigate, allowing us to make fine-grained updates. As we navigate between contacts, we’ll update single text nodes to change the contact’s name, address, and so on, without doing any additional rerendering.
+
+
This sandbox includes a couple features (like nested routing) discussed in this section and the previous one, and a couple we’ll cover in the rest of this chapter. The router is such an integrated system that it makes sense to provide a single example, so don’t be surprised if there’s anything you don’t understand.
Static paths are useful for distinguishing between different pages, but almost every application wants to pass data through the URL at some point.
+
There are two ways you can do this:
+
+
named route params like id in /users/:id
+
named route queries like q in /search?q=Foo
+
+
Because of the way URLs are built, you can access the query from any<Route/> view. You can access route params from the <Route/> that defines them or any of its nested children.
+
Accessing params and queries is pretty simple with a couple of hooks:
Each of these comes with a typed option (use_query and use_params) and an untyped option (use_query_map and use_params_map).
+
The untyped versions hold a simple key-value map. To use the typed versions, derive the Params trait on a struct.
+
+
Params is a very lightweight trait to convert a flat key-value map of strings into a struct by applying FromStr to each field. Because of the flat structure of route params and URL queries, it’s significantly less flexible than something like serde; it also adds much less weight to your binary.
Note: The Params derive macro is located at leptos::Params, and the Params trait is at leptos_router::Params. If you avoid using glob imports like use leptos::*;, make sure you’re importing the right one for the derive macro.
+
If you are not using the nightly feature, you will get the error
+
no function or associated item named `into_param` found for struct `std::string::String` in the current scope
+
+
At the moment, supporting both T: FromStr and Option<T> for typed params requires a nightly feature. You can fix this by simply changing the struct to use q: Option<String> instead of q: String.
+
+
Now we can use them in a component. Imagine a URL that has both params and a query, like /contacts/:id?q=Search.
+
The typed versions return Memo<Result<T, _>>. It’s a Memo so it reacts to changes in the URL. It’s a Result because the params or query need to be parsed from the URL, and may or may not be valid.
The untyped versions return Memo<ParamsMap>. Again, it’s memo to react to changes in the URL. ParamsMap behaves a lot like any other map type, with a .get() method that returns Option<&String>.
This can get a little messy: deriving a signal that wraps an Option<_> or Result<_> can involve a couple steps. But it’s worth doing this for two reasons:
+
+
It’s correct, i.e., it forces you to consider the cases, “What if the user doesn’t pass a value for this query field? What if they pass an invalid value?”
+
It’s performant. Specifically, when you navigate between different paths that match the same <Route/> with only params or the query changing, you can get fine-grained updates to different parts of your app without rerendering. For example, navigating between different contacts in our contact-list example does a targeted update to the name field (and eventually contact info) without needing to replace or rerender the wrapping <Contact/>. This is what fine-grained reactivity is for.
+
+
+
This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explained them all yet.
Client-side navigation works perfectly fine with ordinary HTML <a> elements. The router adds a listener that handles every click on a <a> element and tries to handle it on the client side, i.e., without doing another round trip to the server to request HTML. This is what enables the snappy “single-page app” navigations you’re probably familiar with from most modern web apps.
+
The router will bail out of handling an <a> click under a number of situations
+
+
the click event has had prevent_default() called on it
+
the Meta, Alt, Ctrl, or Shift keys were held during click
+
the <a> has a target or download attribute, or rel="external"
+
the link has a different origin from the current location
+
+
In other words, the router will only try to do a client-side navigation when it’s pretty sure it can handle it, and it will upgrade every <a> element to get this special behavior.
+
+
This also means that if you need to opt out of client-side routing, you can do so easily. For example, if you have a link to another page on the same domain, but which isn’t part of your Leptos app, you can just use <a rel="external"> to tell the router it isn’t something it can handle.
+
+
The router also provides an <A> component, which does two additional things:
+
+
Correctly resolves relative nested routes. Relative routing with ordinary <a> tags can be tricky. For example, if you have a route like /post/:id, <A href="1"> will generate the correct relative route, but <a href="1"> likely will not (depending on where it appears in your view.) <A/> resolves routes relative to the path of the nested route within which it appears.
+
Sets the aria-current attribute to page if this link is the active link (i.e., it’s a link to the page you’re on). This is helpful for accessibility and for styling. For example, if you want to set the link a different color if it’s a link to the page you’re currently on, you can match this attribute with a CSS selector.
Your most-used methods of navigating between pages should be with <a> and <form> elements or with the enhanced <A/> and <Form/> components. Using links and forms to navigate is the best solution for accessibility and graceful degradation.
+
On occasion, though, you’ll want to navigate programmatically, i.e., call a function that can navigate to a new page. In that case, you should use the use_navigate function.
+
let navigate = leptos_router::use_navigate();
+navigate("/somewhere", Default::default());
+
+
You should almost never do something like <button on:click=move |_| navigate(/* ... */)>. Any on:click that navigates should be an <a>, for reasons of accessibility.
+
+
The second argument here is a set of NavigateOptions, which includes options to resolve the navigation relative to the current route as the <A/> component does, replace it in the navigation stack, include some navigation state, and maintain the current scroll state on navigation.
+
+
Once again, this is the same example. Check out the relative <A/> components, and take a look at the CSS in index.html to see the ARIA-based styling.
Links and forms sometimes seem completely unrelated. But, in fact, they work in very similar ways.
+
In plain HTML, there are three ways to navigate to another page:
+
+
An <a> element that links to another page: Navigates to the URL in its href attribute with the GET HTTP method.
+
A <form method="GET">: Navigates to the URL in its action attribute with the GET HTTP method and the form data from its inputs encoded in the URL query string.
+
A <form method="POST">: Navigates to the URL in its action attribute with the POST HTTP method and the form data from its inputs encoded in the body of the request.
+
+
Since we have a client-side router, we can do client-side link navigations without reloading the page, i.e., without a full round-trip to the server and back. It makes sense that we can do client-side form navigations in the same way.
+
The router provides a <Form> component, which works like the HTML <form> element, but uses client-side navigations instead of full page reloads. <Form/> works with both GET and POST requests. With method="GET", it will navigate to the URL encoded in the form data. With method="POST" it will make a POST request and handle the server’s response.
+
<Form/> provides the basis for some components like <ActionForm/> and <MultiActionForm/> that we’ll see in later chapters. But it also enables some powerful patterns of its own.
+
For example, imagine that you want to create a search field that updates search results in real time as the user searches, without a page reload, but that also stores the search in the URL so a user can copy and paste it to share results with someone else.
+
It turns out that the patterns we’ve learned so far make this easy to implement.
+
async fn fetch_results() {
+ // some async function to fetch our search results
+}
+
+#[component]
+pub fn FormExample() -> impl IntoView {
+ // reactive access to URL query strings
+ let query = use_query_map();
+ // search stored as ?q=
+ let search = move || query().get("q").cloned().unwrap_or_default();
+ // a resource driven by the search string
+ let search_results = create_resource(search, fetch_results);
+
+ view! {
+ <Form method="GET" action="">
+ <input type="search" name="q" value=search/>
+ <input type="submit"/>
+ </Form>
+ <Transition fallback=move || ()>
+ /* render search results */
+ </Transition>
+ }
+}
+
Whenever you click Submit, the <Form/> will “navigate” to ?q={search}. But because this navigation is done on the client side, there’s no page flicker or reload. The URL query string changes, which triggers search to update. Because search is the source signal for the search_results resource, this triggers search_results to reload its resource. The <Transition/> continues displaying the current search results until the new ones have loaded. When they are complete, it switches to displaying the new result.
+
This is a great pattern. The data flow is extremely clear: all data flows from the URL to the resource into the UI. The current state of the application is stored in the URL, which means you can refresh the page or text the link to a friend and it will show exactly what you’re expecting. And once we introduce server rendering, this pattern will prove to be really fault-tolerant, too: because it uses a <form> element and URLs under the hood, it actually works really well without even loading your WASM on the client.
+
We can actually take it a step further and do something kind of clever:
You’ll notice that this version drops the Submit button. Instead, we add an oninput attribute to the input. Note that this is noton:input, which would listen for the input event and run some Rust code. Without the colon, oninput is the plain HTML attribute. So the string is actually a JavaScript string. this.form gives us the form the input is attached to. requestSubmit() fires the submit event on the <form>, which is caught by <Form/> just as if we had clicked a Submit button. Now the form will “navigate” on every keystroke or input to keep the URL (and therefore the search) perfectly in sync with the user’s input as they type.
Anyone creating a website or application soon runs into the question of styling. For a small app, a single CSS file is probably plenty to style your user interface. But as an application grows, many developers find that plain CSS becomes increasingly hard to manage.
+
Some frontend frameworks (like Angular, Vue, and Svelte) provide built-in ways to scope your CSS to particular components, making it easier to manage styles across a whole application without styles meant to modify one small component having a global effect. Other frameworks (like React or Solid) don’t provide built-in CSS scoping, but rely on libraries in the ecosystem to do it for them. Leptos is in this latter camp: the framework itself has no opinions about CSS at all, but provides a few tools and primitives that allow others to build styling libraries.
+
Here are a few different approaches to styling your Leptos app, other than plain CSS.
TailwindCSS is a popular utility-first CSS library. It allows you to style your application by using inline utility classes, with a custom CLI tool that scans your files for Tailwind class names and bundles the necessary CSS.
+
This allows you to write components like this:
+
#[component]
+fn Home() -> impl IntoView {
+ let (count, set_count) = create_signal(0);
+
+ view! {
+ <main class="my-0 mx-auto max-w-3xl text-center">
+ <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
+ <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
+ <button
+ class="bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
+ on:click=move |_| set_count.update(|count| *count += 1)
+ >
+ {move || if count() == 0 {
+ "Click me!".to_string()
+ } else {
+ count().to_string()
+ }}
+ </button>
+ </main>
+ }
+}
Stylers is a compile-time scoped CSS library that lets you declare scoped CSS in the body of your component. Stylers will extract this CSS at compile time into CSS files that you can then import into your app, which means that it doesn’t add anything to the WASM binary size of your application.
Styled is a runtime scoped CSS library that integrates well with Leptos. It lets you declare scoped CSS in the body of your component function, and then applies those styles at runtime.
+
use styled::style;
+
+#[component]
+pub fn MyComponent() -> impl IntoView {
+ let styles = style!(
+ div {
+ background-color: red;
+ color: white;
+ }
+ );
+
+ styled::view! { styles,
+ <div>"This text should be red with white text."</div>
+ }
+}
Leptos has no opinions on how you style your website or app, but we’re very happy to provide support to any tools you’re trying to create to make it easier. If you’re working on a CSS or styling approach that you’d like to add to this list, please let us know!
So far, everything we’ve rendered has been inside the <body> of the HTML document. And this makes sense. After all, everything you can see on a web page lives inside the <body>.
+
However, there are plenty of occasions where you might want to update something inside the <head> of the document using the same reactive primitives and component patterns you use for your UI.
leptos_meta provides special components that let you inject data from inside components anywhere in your application into the <head>:
+
<Title/> allows you to set the document’s title from any component. It also takes a formatter function that can be used to apply the same format to the title set by other pages. So, for example, if you put <Title formatter=|text| format!("{text} — My Awesome Site")/> in your <App/> component, and then <Title text="Page 1"/> and <Title text="Page 2"/> on your routes, you’ll get Page 1 — My Awesome Site and Page 2 — My Awesome Site.
+
<Link/> takes the standard attributes of the <link> element.
+
<Stylesheet/> creates a <link rel="stylesheet"> with the href you give.
+
<Style/> creates a <style> with the children you pass in (usually a string). You can use this to import some custom CSS from another file at compile time <Style>{include_str!("my_route.css")}</Style>.
+
<Meta/> lets you set <meta> tags with descriptions and other metadata.
leptos_meta also provides a <Script/> component, and it’s worth pausing here for a second. All of the other components we’ve considered inject <head>-only elements in the <head>. But a <script> can also be included in the body.
+
There’s a very simple way to determine whether you should use a capital-S <Script/> component or a lowercase-s <script> element: the <Script/> component will be rendered in the <head>, and the <script> element will be rendered wherever in the <body> of your user interface you put it in, alongside other normal HTML elements. These cause JavaScript to load and run at different times, so use whichever is appropriate to your needs.
There are even a couple elements designed to make semantic HTML and styling easier. <Html/> lets you set the lang and dir on your <html> tag from your application code. <Html/> and <Body/> both have class props that let you set their respective class attributes, which is sometimes needed by CSS frameworks for styling.
+
<Body/> and <Html/> both also have attributes props which can be used to set any number of additional attributes on them via the attr: syntax:
Now, some of this is useful in any scenario, but some of it is especially important for search-engine optimization (SEO). Making sure you have things like appropriate <title> and <meta> tags is crucial. Modern search engine crawlers do handle client-side rendering, i.e., apps that are shipped as an empty index.html and rendered entirely in JS/WASM. But they prefer to receive pages in which your app has been rendered to actual HTML, with metadata in the <head>.
+
This is exactly what leptos_meta is for. And in fact, during server rendering, this is exactly what it does: collect all the <head> content you’ve declared by using its components throughout your application, and then inject it into the actual <head>.
+
But I’m getting ahead of myself. We haven’t actually talked about server-side rendering yet. As a matter of fact... Let’s do that next!
So far, everything we’ve written has been rendered almost entirely in the browser. When we create an app using Trunk, it’s served using a local development server. If you build it for production and deploy it, it’s served by whatever server or CDN you’re using. In either case, what’s served is an HTML page with
+
+
the URL of your Leptos app, which has been compiled to WebAssembly (WASM)
+
the URL of the JavaScript used to initialize this WASM blob
+
an empty <body> element
+
+
When the JS and WASM have loaded, Leptos will render your app into the <body>. This means that nothing appears on the screen until JS/WASM have loaded and run. This has some drawbacks:
+
+
It increases load time, as your user’s screen is blank until additional resources have been downloaded.
+
It’s bad for SEO, as load times are longer and the HTML you serve has no meaningful content.
+
It’s broken for users for whom JS/WASM don’t load for some reason (e.g., they’re on a train and just went into a tunnel before WASM finished loading; they’re using an older device that doesn’t support WASM; they have JavaScript or WASM turned off for some reason; etc.)
+
+
These downsides apply across the web ecosystem, but especially to WASM apps.
+
However, depending the on the requirements of your project, you may be fine with these limitations.
+
If you just want to deploy your Client-Side Rendered website, skip ahead to the chapter on "Deployment" - there, you'll find directions on how best to deploy your Leptos CSR site.
+
But what do you do if you want to return more than just an empty <body> tag in your index.html page? Use “Server-Side Rendering”!
+
Whole books could be (and probably have been) written about this topic, but at its core, it’s really simple: rather than returning an empty <body> tag, with SSR, you'll return an initial HTML page that reflects the actual starting state of your app or site, so that while JS/WASM are loading, and until they load, the user can access the plain HTML version.
+
Part 2 of this book, on Leptos SSR, will cover this topic in some detail!
The second part of the book is all about how to turn your beautiful UIs into full-stack Rust + Leptos powered websites and applications.
+
As you read in the last chapter, there are some limitations to using client-side rendered Leptos apps - over the next few chapters, you'll see how we can overcome those limitations
+and get the best performance and SEO out of your Leptos apps.
+
+
+
Info
+
+
+
+
When working with Leptos on the server side, you're free to choose either the Actix-web or the Axum integrations - the full feature set of Leptos is available with either option.
+
If, however, you need deploy to a WinterCG-compatible runtime like Deno, Cloudflare, etc., then choose the Axum integration as this deployment option is only available with Axum on the server. Lastly, if you'd like to go full-stack WASM/WASI and deploy to WASM-based serverless runtimes, then Axum is your go-to choice here too.
+
NB: this is a limitation of the web frameworks themselves, not Leptos.
So far, we’ve just been running code in the browser and using Trunk to coordinate the build process and run a local development process. If we’re going to add server-side rendering, we’ll need to run our application code on the server as well. This means we’ll need to build two separate binaries, one compiled to native code and running the server, the other compiled to WebAssembly (WASM) and running in the user’s browser. Additionally, the server needs to know how to serve this WASM version (and the JavaScript required to initialize it) to the browser.
+
This is not an insurmountable task but it adds some complication. For convenience and an easier developer experience, we built the cargo-leptos build tool. cargo-leptos basically exists to coordinate the build process for your app, handling recompiling the server and client halves when you make changes, and adding some built-in support for things like Tailwind, SASS, and testing.
+
Getting started is pretty easy. Just run
+
cargo install cargo-leptos
+
+
And then to create a new project, you can run either
+
# for an Actix template
+cargo leptos new --git leptos-rs/start
+
+
or
+
# for an Axum template
+cargo leptos new --git leptos-rs/start-axum
+
+
Now cd into the directory you’ve created and run
+
cargo leptos watch
+
+
Once your app has compiled you can open up your browser to http://localhost:3000 to see it.
+
cargo-leptos has lots of additional features and built in tools. You can learn more in its README.
+
But what exactly is happening when you open our browser to localhost:3000? Well, read on to find out.
Before we get into the weeds it might be helpful to have a higher-level overview. What exactly happens between the moment you type in the URL of a server-rendered Leptos app, and the moment you click a button and a counter increases?
+
I’m assuming some basic knowledge of how the Internet works here, and won’t get into the weeds about HTTP or whatever. Instead, I’ll try to show how different parts of the Leptos APIs map onto each part of the process.
+
This description also starts from the premise that your app is being compiled for two separate targets:
+
+
A server version, often running on Actix or Axum, compiled with the Leptos ssr feature
+
A browser version, compiled to WebAssembly (WASM) with the Leptos hydrate feature
+
+
The cargo-leptos build tool exists to coordinate the process of compiling your app for these two different targets.
Your browser makes a GET request for that URL to your server. At this point, the browser knows almost nothing about the page that’s going to be rendered. (The question “How does the browser know where to ask for the page?” is an interesting one, but out of the scope of this tutorial!)
+
The server receives that request, and checks whether it has a way to handle a GET request at that path. This is what the .leptos_routes() methods in leptos_axum and leptos_actix are for. When the server starts up, these methods walk over the routing structure you provide in <Routes/>, generating a list of all possible routes your app can handle and telling the server’s router “for each of these routes, if you get a request... hand it off to Leptos.”
+
The server sees that this route can be handled by Leptos. So it renders your root component (often called something like <App/>), providing it with the URL that’s being requested and some other data like the HTTP headers and request metadata.
+
Your application runs once on the server, building up an HTML version of the component tree that will be rendered at that route. (There’s more to be said here about resources and <Suspense/> in the next chapter.)
+
The server returns this HTML page, also injecting information on how to load the version of your app that has been compiled to WASM so that it can run in the browser.
+
+
+
The HTML page that’s returned is essentially your app, “dehydrated” or “freeze-dried”: it is HTML without any of the reactivity or event listeners you’ve added. The browser will “rehydrate” this HTML page by adding the reactive system and attaching event listeners to that server-rendered HTML. Hence the two feature flags that apply to the two halves of this process: ssr on the server for “server-side rendering”, and hydrate in the browser for that process of rehydration.
The browser receives this HTML page from the server. It immediately goes back to the server to begin loading the JS and WASM necessary to run the interactive, client side version of the app.
+
In the meantime, it renders the HTML version.
+
When the WASM version has reloaded, it does the same route-matching process that the server did. Because the <Routes/> component is identical on the server and in the client, the browser version will read the URL and render the same page that was already returned by the server.
+
During this initial “hydration” phase, the WASM version of your app doesn’t re-create the DOM nodes that make up your application. Instead, it walks over the existing HTML tree, “picking up” existing elements and adding the necessary interactivity.
+
+
+
Note that there are some trade-offs here. Before this hydration process is complete, the page will appear interactive but won’t actually respond to interactions. For example, if you have a counter button and click it before WASM has loaded, the count will not increment, because the necessary event listeners and reactivity have not been added yet. We’ll look at some ways to build in “graceful degradation” in future chapters.
The next step is very important. Imagine that the user now clicks a link to navigate to another page in your application.
+
The browser will not make another round trip to the server, reloading the full page as it would for navigating between plain HTML pages or an application that uses server rendering (for example with PHP) but without a client-side half.
+
Instead, the WASM version of your app will load the new page, right there in the browser, without requesting another page from the server. Essentially, your app upgrades itself from a server-loaded “multi-page app” into a browser-rendered “single-page app.” This yields the best of both worlds: a fast initial load time due to the server-rendered HTML, and fast secondary navigations because of the client-side routing.
+
Some of what will be described in the following chapters—like the interactions between server functions, resources, and <Suspense/>—may seem overly complicated. You might find yourself asking, “If my page is being rendered to HTML on the server, why can’t I just .await this on the server? If I can just call library X in a server function, why can’t I call it in my component?” The reason is pretty simple: to enable the upgrade from server rendering to client rendering, everything in your application must be able to run either on the server or in the browser.
+
This is not the only way to create a website or web framework, of course. But it’s the most common way, and we happen to think it’s quite a good way, to create the smoothest possible experience for your users.
Server-rendering a page that uses only synchronous data is pretty simple: You just walk down the component tree, rendering each element to an HTML string. But this is a pretty big caveat: it doesn’t answer the question of what we should do with pages that includes asynchronous data, i.e., the sort of stuff that would be rendered under a <Suspense/> node on the client.
+
When a page loads async data that it needs to render, what should we do? Should we wait for all the async data to load, and then render everything at once? (Let’s call this “async” rendering) Should we go all the way in the opposite direction, just sending the HTML we have immediately down to the client and letting the client load the resources and fill them in? (Let’s call this “synchronous” rendering) Or is there some middle-ground solution that somehow beats them both? (Hint: There is.)
+
If you’ve ever listened to streaming music or watched a video online, I’m sure you realize that HTTP supports streaming, allowing a single connection to send chunks of data one after another without waiting for the full content to load. You may not realize that browsers are also really good at rendering partial HTML pages. Taken together, this means that you can actually enhance your users’ experience by streaming HTML: and this is something that Leptos supports out of the box, with no configuration at all. And there’s actually more than one way to stream HTML: you can stream the chunks of HTML that make up your page in order, like frames of a video, or you can stream them... well, out of order.
+
Let me say a little more about what I mean.
+
Leptos supports all the major ways of rendering HTML that includes asynchronous data:
Synchronous: Serve an HTML shell that includes fallback for any <Suspense/>. Load data on the client using create_local_resource, replacing fallback once resources are loaded.
+
+
+
Pros: App shell appears very quickly: great TTFB (time to first byte).
+
Cons
+
+
Resources load relatively slowly; you need to wait for JS + WASM to load before even making a request.
+
No ability to include data from async resources in the <title> or other <meta> tags, hurting SEO and things like social media link previews.
+
+
+
+
If you’re using server-side rendering, the synchronous mode is almost never what you actually want, from a performance perspective. This is because it misses out on an important optimization. If you’re loading async resources during server rendering, you can actually begin loading the data on the server. Rather than waiting for the client to receive the HTML response, then loading its JS + WASM, then realize it needs the resources and begin loading them, server rendering can actually begin loading the resources when the client first makes the response. In this sense, during server rendering an async resource is like a Future that begins loading on the server and resolves on the client. As long as the resources are actually serializable, this will always lead to a faster total load time.
+
+
This is why create_resource requires resources data to be serializable by default, and why you need to explicitly use create_local_resource for any async data that is not serializable and should therefore only be loaded in the browser itself. Creating a local resource when you could create a serializable resource is always a deoptimization.
async: Load all resources on the server. Wait until all data are loaded, and render HTML in one sweep.
+
+
+
Pros: Better handling for meta tags (because you know async data even before you render the <head>). Faster complete load than synchronous because async resources begin loading on server.
+
Cons: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client. The page is totally blank until everything is loaded.
In-order streaming: Walk through the component tree, rendering HTML until you hit a <Suspense/>. Send down all the HTML you’ve got so far as a chunk in the stream, wait for all the resources accessed under the <Suspense/> to load, then render it to HTML and keep walking until you hit another <Suspense/> or the end of the page.
+
+
+
Pros: Rather than a blank screen, shows at least something before the data are ready.
+
Cons
+
+
Loads the shell more slowly than synchronous rendering (or out-of-order streaming) because it needs to pause at every <Suspense/>.
+
Unable to show fallback states for <Suspense/>.
+
Can’t begin hydration until the entire page has loaded, so earlier pieces of the page will not be interactive until the suspended chunks have loaded.
Out-of-order streaming: Like synchronous rendering, serve an HTML shell that includes fallback for any <Suspense/>. But load data on the server, streaming it down to the client as it resolves, and streaming down HTML for <Suspense/> nodes, which is swapped in to replace the fallback.
+
+
+
Pros: Combines the best of synchronous and async.
+
+
Fast initial response/TTFB because it immediately sends the whole synchronous shell
+
Fast total time because resources begin loading on the server.
+
Able to show the fallback loading state and dynamically replace it, instead of showing blank sections for un-loaded data.
+
+
+
Cons: Requires JavaScript to be enabled for suspended fragments to appear in correct order. (This small chunk of JS streamed down in a <script> tag alongside the <template> tag that contains the rendered <Suspense/> fragment, so it does not need to load any additional JS files.)
+
+
+
Partially-blocked streaming: “Partially-blocked” streaming is useful when you have multiple separate <Suspense/> components on the page. It is triggered by setting ssr=SsrMode::PartiallyBlocked on a route, and depending on blocking resources within the view. If one of the <Suspense/> components reads from one or more “blocking resources” (see below), the fallback will not be sent; rather, the server will wait until that <Suspense/> has resolved and then replace the fallback with the resolved fragment on the server, which means that it is included in the initial HTML response and appears even if JavaScript is disabled or not supported. Other <Suspense/> stream in out of order, similar to the SsrMode::OutOfOrder default.
+
+
This is useful when you have multiple <Suspense/> on the page, and one is more important than the other: think of a blog post and comments, or product information and reviews. It is not useful if there’s only one <Suspense/>, or if every <Suspense/> reads from blocking resources. In those cases it is a slower form of async rendering.
+
+
Pros: Works if JavaScript is disabled or not supported on the user’s device.
+
Cons
+
+
Slower initial response time than out-of-order.
+
Marginally overall response due to additional work on the server.
Because it offers the best blend of performance characteristics, Leptos defaults to out-of-order streaming. But it’s really simple to opt into these different modes. You do it by adding an ssr property onto one or more of your <Route/> components, like in the ssr_modes example.
+
<Routes>
+ // We’ll load the home page with out-of-order streaming and <Suspense/>
+ <Route path="" view=HomePage/>
+
+ // We'll load the posts with async rendering, so they can set
+ // the title and metadata *after* loading the data
+ <Route
+ path="/post/:id"
+ view=Post
+ ssr=SsrMode::Async
+ />
+</Routes>
+
For a path that includes multiple nested routes, the most restrictive mode will be used: i.e., if even a single nested route asks for async rendering, the whole initial request will be rendered async. async is the most restricted requirement, followed by in-order, and then out-of-order. (This probably makes sense if you think about it for a few minutes.)
Any Leptos versions later than 0.2.5 (i.e., git main and 0.3.x or later) introduce a new resource primitive with create_blocking_resource. A blocking resource still loads asynchronously like any other async/.await in Rust; it doesn’t block a server thread or anything. Instead, reading from a blocking resource under a <Suspense/> blocks the HTML stream from returning anything, including its initial synchronous shell, until that <Suspense/> has resolved.
+
Now from a performance perspective, this is not ideal. None of the synchronous shell for your page will load until that resource is ready. However, rendering nothing means that you can do things like set the <title> or <meta> tags in your <head> in actual HTML. This sounds a lot like async rendering, but there’s one big difference: if you have multiple <Suspense/> sections, you can block on one of them but still render a placeholder and then stream in the other.
+
For example, think about a blog post. For SEO and for social sharing, I definitely want my blog post’s title and metadata in the initial HTML <head>. But I really don’t care whether comments have loaded yet or not; I’d like to load those as lazily as possible.
+
With blocking resources, I can do something like this:
+
#[component]
+pub fn BlogPost() -> impl IntoView {
+ let post_data = create_blocking_resource(/* load blog post */);
+ let comment_data = create_resource(/* load blog post */);
+ view! {
+ <Suspense fallback=|| ()>
+ {move || {
+ post_data.with(|data| {
+ view! {
+ <Title text=data.title/>
+ <Meta name="description" content=data.excerpt/>
+ <article>
+ /* render the post content */
+ </article>
+ }
+ })
+ }}
+ </Suspense>
+ <Suspense fallback=|| "Loading comments...">
+ /* render comment data here */
+ </Suspense>
+ }
+}
+
The first <Suspense/>, with the body of the blog post, will block my HTML stream, because it reads from a blocking resource. Meta tags and other head elements awaiting the blocking resource will be rendered before the stream is sent.
+
Combined with the following route definition, which uses SsrMode::PartiallyBlocked, the blocking resource will be fully rendered on the server side, making it accessible to users who disable WebAssembly or JavaScript.
+
<Routes>
+ // We’ll load the home page with out-of-order streaming and <Suspense/>
+ <Route path="" view=HomePage/>
+
+ // We'll load the posts with async rendering, so they can set
+ // the title and metadata *after* loading the data
+ <Route
+ path="/post/:id"
+ view=Post
+ ssr=SsrMode::PartiallyBlocked
+ />
+</Routes>
+
The second <Suspense/>, with the comments, will not block the stream. Blocking resources gave me exactly the power and granularity I needed to optimize my page for SEO and user experience.
Let’s try an experiment to test your intuitions. Open up an app you’re server-rendering with cargo-leptos. (If you’ve just been using trunk so far to play with examples, go clone a cargo-leptos template just for the sake of this exercise.)
+
Put a log somewhere in your root component. (I usually call mine <App/>, but anything will do.)
+
#[component]
+pub fn App() -> impl IntoView {
+ logging::log!("where do I run?");
+ // ... whatever
+}
+
And let’s fire it up
+
cargo leptos watch
+
+
Where do you expect where do I run? to log?
+
+
In the command line where you’re running the server?
+
In the browser console when you load the page?
+
Neither?
+
Both?
+
+
Try it out.
+
...
+
...
+
...
+
Okay, consider the spoiler alerted.
+
You’ll notice of course that it logs in both places, assuming everything goes according to plan. In fact on the server it logs twice—first during the initial server startup, when Leptos renders your app once to extract the route tree, then a second time when you make a request. Each time you reload the page, where do I run? should log once on the server and once on the client.
+
If you think about the description in the last couple sections, hopefully this makes sense. Your application runs once on the server, where it builds up a tree of HTML which is sent to the client. During this initial render, where do I run? logs on the server.
+
Once the WASM binary has loaded in the browser, your application runs a second time, walking over the same user interface tree and adding interactivity.
+
+
Does that sound like a waste? It is, in a sense. But reducing that waste is a genuinely hard problem. It’s what some JS frameworks like Qwik are intended to solve, although it’s probably too early to tell whether it’s a net performance gain as opposed to other approaches.
Okay, hopefully all of that made sense. But what does it have to do with the title of this chapter, which is “Hydration bugs (and how to avoid them)”?
+
Remember that the application needs to run on both the server and the client. This generates a few different sets of potential issues you need to know how to avoid.
One way to create a bug is by creating a mismatch between the HTML that’s sent down by the server and what’s rendered on the client. It’s actually fairly hard to do this unintentionally, I think (at least judging by the bug reports I get from people.) But imagine I do something like this
In other words, if this is being compiled to WASM, it has three items; otherwise it’s empty.
+
When I load the page in the browser, I see nothing. If I open the console I see a bunch of warnings:
+
element with id 0-3 not found, ignoring it for hydration
+element with id 0-4 not found, ignoring it for hydration
+element with id 0-5 not found, ignoring it for hydration
+component with id _0-6c not found, ignoring it for hydration
+component with id _0-6o not found, ignoring it for hydration
+
+
The WASM version of your app, running in the browser, expects to find three items; but the HTML has none.
It’s pretty rare that you do this intentionally, but it could happen from somehow running different logic on the server and in the browser. If you’re seeing warnings like this and you don’t think it’s your fault, it’s much more likely that it’s a bug with <Suspense/> or something. Feel free to go ahead and open an issue or discussion on GitHub for help.
You can simply tell the effect to wait a tick before updating the signal, by using something like request_animation_frame, which will set a short timeout and then update the signal before the next frame.
+
create_effect(move |_| {
+ // do something like reading from localStorage
+ request_animation_frame(move || set_loaded(true));
+});
+
This allows the browser to hydrate with the correct, matching state (loaded is false when it reaches the view), then immediately update it to true once hydration is complete.
Imagine you happily import a dependency like gloo-net that you’ve been used to using to make requests in the browser, and use it in a create_resource in a server-rendered app.
+
You’ll probably instantly see the dreaded message
+
panicked at 'cannot call wasm-bindgen imported functions on non-wasm targets'
+
+
Uh-oh.
+
But of course this makes sense. We’ve just said that your app needs to run on the client and the server.
Only use libraries that can run on both the server and the client. reqwest, for example, works for making HTTP requests in both settings.
+
Use different libraries on the server and the client, and gate them using the #[cfg] macro. (Click here for an example.)
+
Wrap client-only code in create_effect. Because create_effect only runs on the client, this can be an effective way to access browser APIs that are not needed for initial rendering.
+
+
For example, say that I want to store something in the browser’s localStorage whenever a signal changes.
+
#[component]
+pub fn App() -> impl IntoView {
+ use gloo_storage::Storage;
+ let storage = gloo_storage::LocalStorage::raw();
+ logging::log!("{storage:?}");
+}
+
This panics because I can’t access LocalStorage during server rendering.
WebAssembly running in the browser is a pretty limited environment. You don’t have access to a file-system or to many of the other things the standard library may be used to having. Not every crate can even be compiled to WASM, let alone run in a WASM environment.
+
In particular, you’ll sometimes see errors about the crate mio or missing things from core. This is generally a sign that you are trying to compile something to WASM that can’t be compiled to WASM. If you’re adding server-only dependencies, you’ll want to mark them optional = true in your Cargo.toml and then enable them in the ssr feature definition. (Check out one of the template Cargo.toml files to see more details.)
+
You can use create_effect to specify that something should only run on the client, and not in the server. Is there a way to specify that something should run only on the server, and not the client?
+
In fact, there is. The next chapter will cover the topic of server functions in some detail. (In the meantime, you can check out their docs here.)
The previous section described the process of server-side rendering, using the server to generate an HTML version of the page that will become interactive in the browser. So far, everything has been “isomorphic”; in other words, your app has had the “same (iso) shape (morphe)” on the client and the server.
+
But a server can do a lot more than just render HTML! In fact, a server can do a whole bunch of things your browser can’t, like reading from and writing to a SQL database.
+
If you’re used to building JavaScript frontend apps, you’re probably used to calling out to some kind of REST API to do this sort of server work. If you’re used to building sites with PHP or Python or Ruby (or Java or C# or...), this server-side work is your bread and butter, and it’s the client-side interactivity that tends to be an afterthought.
+
With Leptos, you can do both: not only in the same language, not only sharing the same types, but even in the same files!
+
This section will talk about how to build the uniquely-server-side parts of your application.
If you’re creating anything beyond a toy app, you’ll need to run code on the server all the time: reading from or writing to a database that only runs on the server, running expensive computations using libraries you don’t want to ship down to the client, accessing APIs that need to be called from the server rather than the client for CORS reasons or because you need a secret API key that’s stored on the server and definitely shouldn’t be shipped down to a user’s browser.
+
Traditionally, this is done by separating your server and client code, and by setting up something like a REST API or GraphQL API to allow your client to fetch and mutate data on the server. This is fine, but it requires you to write and maintain your code in multiple separate places (client-side code for fetching, server-side functions to run), as well as creating a third thing to manage, which is the API contract between the two.
+
Leptos is one of a number of modern frameworks that introduce the concept of server functions. Server functions have two key characteristics:
+
+
Server functions are co-located with your component code, so that you can organize your work by feature, not by technology. For example, you might have a “dark mode” feature that should persist a user’s dark/light mode preference across sessions, and be applied during server rendering so there’s no flicker. This requires a component that needs to be interactive on the client, and some work to be done on the server (setting a cookie, maybe even storing a user in a database.) Traditionally, this feature might end up being split between two different locations in your code, one in your “frontend” and one in your “backend.” With server functions, you’ll probably just write them both in one dark_mode.rs and forget about it.
+
Server functions are isomorphic, i.e., they can be called either from the server or the browser. This is done by generating code differently for the two platforms. On the server, a server function simply runs. In the browser, the server function’s body is replaced with a stub that actually makes a fetch request to the server, serializing the arguments into the request and deserializing the return value from the response. But on either end, the function can simply be called: you can create an add_todo function that writes to your database, and simply call it from a click handler on a button in the browser!
Server functions can use server-only dependencies, like sqlx, and can access server-only resources, like our database.
+
Server functions are async. Even if they only did synchronous work on the server, the function signature would still need to be async, because calling them from the browser must be asynchronous.
+
Server functions return Result<T, ServerFnError>. Again, even if they only do infallible work on the server, this is true, because ServerFnError’s variants include the various things that can be wrong during the process of making a network request.
+
Server functions can be called from the client. Take a look at our click handler. This is code that will only ever run on the client. But it can call the function add_todo (using spawn_local to run the Future) as if it were an ordinary async function:
+
+
move |_| {
+ spawn_local(async {
+ add_todo("So much to do!".to_string()).await;
+ });
+}
+
+
Server functions are top-level functions defined with fn. Unlike event listeners, derived signals, and most everything else in Leptos, they are not closures! As fn calls, they have no access to the reactive state of your app or anything else that is not passed in as an argument. And again, this makes perfect sense: When you make a request to the server, the server doesn’t have access to client state unless you send it explicitly. (Otherwise we’d have to serialize the whole reactive system and send it across the wire with every request, which—while it served classic ASP for a while—is a really bad idea.)
+
Server function arguments and return values both need to be serializable with serde. Again, hopefully this makes sense: while function arguments in general don’t need to be serialized, calling a server function from the browser means serializing the arguments and sending them over HTTP.
+
+
There are a few things to note about the way you define a server function, too.
+
+
Server functions are created by using the #[server] macro to annotate a top-level function, which can be defined anywhere.
+
We provide the macro a type name. The type name is used internally as a container to hold, serialize, and deserialize the arguments.
+
We provide the macro a path. This is a prefix for the path at which we’ll mount a server function handler on our server. (See examples for Actix and Axum.)
+
You’ll need to have serde as a dependency with the derive featured enabled for the macro to work properly. You can easily add it to Cargo.toml with cargo add serde --features=derive.
You can optionally define a specific URL prefix to be used in the definition of the server function.
+This is done by providing an optional 2nd argument to the #[server] macro.
+By default the URL prefix will be /api, if not specified.
+Here are some examples:
+
#[server(AddTodo)] // will use the default URL prefix of `/api`
+#[server(AddTodo, "/foo")] // will use the URL prefix of `/foo`
By default, the server function call is a POST request that serializes the arguments as URL-encoded form data in the body of the request. (This means that server functions can be called from HTML forms, which we’ll see in a future chapter.) But there are a few other methods supported. Optionally, we can provide another argument to the #[server] macro to specify an alternate encoding:
The four options use different combinations of HTTP verbs and encoding methods:
+
Name
Method
Request
Response
+
Url (default)
POST
URL encoded
JSON
+
GetJson
GET
URL encoded
JSON
+
Cbor
POST
CBOR
CBOR
+
GetCbor
GET
URL encoded
CBOR
+
+
+
In other words, you have two choices:
+
+
GET or POST? This has implications for things like browser or CDN caching; while POST requests should not be cached, GET requests can be.
+
Plain text (arguments sent with URL/form encoding, results sent as JSON) or a binary format (CBOR, encoded as a base64 string)?
+
+
But remember: Leptos will handle all the details of this encoding and decoding for you. When you use a server function, it looks just like calling any other asynchronous function!
+
+
Why not PUT or DELETE? Why URL/form encoding, and not JSON?
+
These are reasonable questions. Much of the web is built on REST API patterns that encourage the use of semantic HTTP methods like DELETE to delete an item from a database, and many devs are accustomed to sending data to APIs in the JSON format.
+
The reason we use POST or GET with URL-encoded data by default is the <form> support. For better or for worse, HTML forms don’t support PUT or DELETE, and they don’t support sending JSON. This means that if you use anything but a GET or POST request with URL-encoded data, it can only work once WASM has loaded. As we’ll see in a later chapter, this isn’t always a great idea.
+
The CBOR encoding is suported for historical reasons; an earlier version of server functions used a URL encoding that didn’t support nested objects like structs or vectors as server function arguments, which CBOR did. But note that the CBOR forms encounter the same issue as PUT, DELETE, or JSON: they do not degrade gracefully if the WASM version of your app is not available.
By default, a unique path will be generated. You can optionally define a specific endpoint path to be used in the URL. This is done by providing an optional 4th argument to the #[server] macro. Leptos will generate the complete path by concatenating the URL prefix (2nd argument) and the endpoint path (4th argument).
+For example,
+
#[server(MyServerFnType, "/api", "Url", "hello")]
+
will generate a server function endpoint at /api/hello that accepts a POST request.
+
+
Can I use the same server function endpoint path with multiple encodings?
+
No. Different server functions must have unique paths. The #[server] macro automatically generates unique paths, but you need to be careful if you choose to specify the complete path manually, as the server looks up server functions by their path.
Server functions are a cool technology, but it’s very important to remember. Server functions are not magic; they’re syntax sugar for defining a public API. The body of a server function is never made public; it’s just part of your server binary. But the server function is a publicly accessible API endpoint, and it’s return value is just a JSON or similar blob. You should never return something sensitive from a server function.
So far, everything I’ve said is actually framework agnostic. (And in fact, the Leptos server function crate has been integrated into Dioxus as well!) Server functions are simply a way of defining a function-like RPC call that leans on Web standards like HTTP requests and URL encoding.
+
But in a way, they also provide the last missing primitive in our story so far. Because a server function is just a plain Rust async function, it integrates perfectly with the async Leptos primitives we discussed earlier. So you can easily integrate your server functions with the rest of your applications:
+
+
Create resources that call the server function to load data from the server
+
Read these resources under <Suspense/> or <Transition/> to enable streaming SSR and fallback states while data loads.
+
Create actions that call the server function to mutate data on the server
+
+
The final section of this book will make this a little more concrete by introducing patterns that use progressively-enhanced HTML forms to run these server actions.
+
But in the next few chapters, we’ll actually take a look at some of the details of what you might want to do with your server functions, including the best ways to integrate with the powerful extractors provided by the Actix and Axum server frameworks.
The server functions we looked at in the last chapter showed how to run code on the server, and integrate it with the user interface you’re rendering in the browser. But they didn’t show you much about how to actually use your server to its full potential.
We call Leptos a “full-stack” framework, but “full-stack” is always a misnomer (after all, it never means everything from the browser to your power company.) For us, “full stack” means that your Leptos app can run in the browser, and can run on the server, and can integrate the two, drawing together the unique features available in each; as we’ve seen in the book so far, a button click on the browser can drive a database read on the server, both written in the same Rust module. But Leptos itself doesn’t provide the server (or the database, or the operating system, or the firmware, or the electrical cables...)
+
Instead, Leptos provides integrations for the two most popular Rust web server frameworks, Actix Web (leptos_actix) and Axum (leptos_axum). We’ve built integrations with each server’s router so that you can simply plug your Leptos app into an existing server with .leptos_routes(), and easily handle server function calls.
+
+
If you haven’t seen our Actix and Axum templates, now’s a good time to check them out.
Both Actix and Axum handlers are built on the same powerful idea of extractors. Extractors “extract” typed data from an HTTP request, allowing you to access server-specific data easily.
+
Leptos provides extract helper functions to let you use these extractors directly in your server functions, with a convenient syntax very similar to handlers for each framework.
The extract function in leptos_actix takes a handler function as its argument. The handler follows similar rules to an Actix handler: it is an async function that receives arguments that will be extracted from the request and returns some value. The handler function receives that extracted data as its arguments, and can do further async work on them inside the body of the async move block. It returns whatever value you return back out into the server function.
The syntax for the leptos_axum::extract function is very similar. (Note: This is available on the git main branch, but has not been released as of writing.) Note that Axum extractors return a Result, so you’ll need to add something to handle the error case.
+
#[server(AxumExtract, "/api")]
+pub async fn axum_extract() -> Result<String, ServerFnError> {
+ use axum::{extract::Query, http::Method};
+ use leptos_axum::extract;
+
+ extract(|method: Method, res: Query<MyQuery>| async move {
+ format!("{method:?} and {}", res.q)
+ },
+ )
+ .await
+ .map_err(|e| ServerFnError::ServerError("Could not extract method and query...".to_string()))
+}
+
These are relatively simple examples accessing basic data from the server. But you can use extractors to access things like headers, cookies, database connection pools, and more, using the exact same extract() pattern.
+
The Axum extract function only supports extractors for which the state is (). If you need an extractor that uses State, you should use extract_with_state. This requires you to provide the state. You can do this by extending the existing LeptosOptions state using the Axum FromRef pattern, which providing the state as context during render and server functions with custom handlers.
+
use axum::extract::FromRef;
+
+/// Derive FromRef to allow multiple items in state, using Axum’s
+/// SubStates pattern.
+#[derive(FromRef, Debug, Clone)]
+pub struct AppState{
+ pub leptos_options: LeptosOptions,
+ pub pool: SqlitePool
+}
Because Actix and (especially) Axum are built on the idea of a single round-trip HTTP request and response, you typically run extractors near the “top” of your application (i.e., before you start rendering) and use the extracted data to determine how that should be rendered. Before you render a <button>, you load all the data your app could need. And any given route handler needs to know all the data that will need to be extracted by that route.
+
But Leptos integrates both the client and the server, and it’s important to be able to refresh small pieces of your UI with new data from the server without forcing a full reload of all the data. So Leptos likes to push data loading “down” in your application, as far towards the leaves of your user interface as possible. When you click a <button>, it can refresh just the data it needs. This is exactly what server functions are for: they give you granular access to data to be loaded and reloaded.
+
The extract() functions let you combine both models by using extractors in your server functions. You get access to the full power of route extractors, while decentralizing knowledge of what needs to be extracted down to your individual components. This makes it easier to refactor and reorganize routes: you don’t need to specify all the data a route needs up front.
Extractors provide an easy way to access request data inside server functions. Leptos also provides a way to modify the HTTP response, using the ResponseOptions type (see docs for Actix or Axum) types and the redirect helper function (see docs for Actix or Axum).
ResponseOptions is provided via context during the initial server rendering response and during any subsequent server function call. It allows you to easily set the status code for the HTTP response, or to add headers to the HTTP response, e.g., to set cookies.
+
#[server(TeaAndCookies)]
+pub async fn tea_and_cookies() -> Result<(), ServerFnError> {
+ use actix_web::{cookie::Cookie, http::header, http::header::HeaderValue};
+ use leptos_actix::ResponseOptions;
+
+ // pull ResponseOptions from context
+ let response = expect_context::<ResponseOptions>();
+
+ // set the HTTP status code
+ response.set_status(StatusCode::IM_A_TEAPOT);
+
+ // set a cookie in the HTTP response
+ let mut cookie = Cookie::build("biscuits", "yes").finish();
+ if let Ok(cookie) = HeaderValue::from_str(&cookie.to_string()) {
+ res.insert_header(header::SET_COOKIE, cookie);
+ }
+}
One common modification to an HTTP response is to redirect to another page. The Actix and Axum integrations provide a redirect function to make this easy to do. redirect simply sets an HTTP status code of 302 Found and sets the Location header.
#[server(Login, "/api")]
+pub async fn login(
+ username: String,
+ password: String,
+ remember: Option<String>,
+) -> Result<(), ServerFnError> {
+ // pull the DB pool and auth provider from context
+ let pool = pool()?;
+ let auth = auth()?;
+
+ // check whether the user exists
+ let user: User = User::get_from_username(username, &pool)
+ .await
+ .ok_or_else(|| {
+ ServerFnError::ServerError("User does not exist.".into())
+ })?;
+
+ // check whether the user has provided the correct password
+ match verify(password, &user.password)? {
+ // if the password is correct...
+ true => {
+ // log the user in
+ auth.login_user(user.id);
+ auth.remember_user(remember.is_some());
+
+ // and redirect to the home page
+ leptos_axum::redirect("/");
+ Ok(())
+ }
+ // if not, return an error
+ false => Err(ServerFnError::ServerError(
+ "Password does not match.".to_string(),
+ )),
+ }
+}
+
This server function can then be used from your application. This redirect works well with the progressively-enhanced <ActionForm/> component: without JS/WASM, the server response will redirect because of the status code and header. With JS/WASM, the <ActionForm/> will detect the redirect in the server function response, and use client-side navigation to redirect to the new page.
I’ve been driving around Boston for about fifteen years. If you don’t know Boston, let me tell you: Massachusetts has some of the most aggressive drivers(and pedestrians!) in the world. I’ve learned to practice what’s sometimes called “defensive driving”: assuming that someone’s about to swerve in front of you at an intersection when you have the right of way, preparing for a pedestrian to cross into the street at any moment, and driving accordingly.
+
“Progressive enhancement” is the “defensive driving” of web design. Or really, that’s “graceful degradation,” although they’re two sides of the same coin, or the same process, from two different directions.
+
Progressive enhancement, in this context, means beginning with a simple HTML site or application that works for any user who arrives at your page, and gradually enhancing it with layers of additional features: CSS for styling, JavaScript for interactivity, WebAssembly for Rust-powered interactivity; using particular Web APIs for a richer experience if they’re available and as needed.
+
Graceful degradation means handling failure gracefully when parts of that stack of enhancement aren’t available. Here are some sources of failure your users might encounter in your app:
+
+
Their browser doesn’t support WebAssembly because it needs to be updated.
+
Their browser can’t support WebAssembly because browser updates are limited to newer OS versions, which can’t be installed on the device. (Looking at you, Apple.)
+
They have WASM turned off for security or privacy reasons.
+
They have JavaScript turned off for security or privacy reasons.
+
JavaScript isn’t supported on their device (for example, some accessibility devices only support HTML browsing)
+
The JavaScript (or WASM) never arrived at their device because they walked outside and lost WiFi.
+
They stepped onto a subway car after loading the initial page and subsequent navigations can’t load data.
+
... and so on.
+
+
How much of your app still works if one of these holds true? Two of them? Three?
+
If the answer is something like “95%... okay, then 90%... okay, then 75%,” that’s graceful degradation. If the answer is “my app shows a blank screen unless everything works correctly,” that’s... rapid unscheduled disassembly.
+
Graceful degradation is especially important for WASM apps, because WASM is the newest and least-likely-to-be-supported of the four languages that run in the browser (HTML, CSS, JS, WASM).
There are a few practices that can help your apps degrade more gracefully:
+
+
Server-side rendering. Without SSR, your app simply doesn’t work without both JS and WASM loading. In some cases this may be appropriate (think internal apps gated behind a login) but in others it’s simply broken.
+
Native HTML elements. Use HTML elements that do the things that you want, without additional code: <a> for navigation (including to hashes within the page), <details> for an accordion, <form> to persist information in the URL, etc.
+
URL-driven state. The more of your global state is stored in the URL (as a route param or part of the query string), the more of the page can be generated during server rendering and updated by an <a> or a <form>, which means that not only navigations but state changes can work without JS/WASM.
+
SsrMode::PartiallyBlocked or SsrMode::InOrder. Out-of-order streaming requires a small amount of inline JS, but can fail if 1) the connection is broken halfway through the response or 2) the client’s device doesn’t support JS. Async streaming will give a complete HTML page, but only after all resources load. In-order streaming begins showing pieces of the page sooner, in top-down order. “Partially-blocked” SSR builds on out-of-order streaming by replacing <Suspense/> fragments that read from blocking resources on the server. This adds marginally to the initial response time (because of the O(n) string replacement work), in exchange for a more complete initial HTML response. This can be a good choice for situations in which there’s a clear distinction between “more important” and “less important” content, e.g., blog post vs. comments, or product info vs. reviews. If you choose to block on all the content, you’ve essentially recreated async rendering.
+
Leaning on <form>s. There’s been a bit of a <form> renaissance recently, and it’s no surprise. The ability of a <form> to manage complicated POST or GET requests in an easily-enhanced way makes it a powerful tool for graceful degradation. The example in the <Form/> chapter, for example, would work fine with no JS/WASM: because it uses a <form method="GET"> to persist state in the URL, it works with pure HTML by making normal HTTP requests and then progressively enhances to use client-side navigations instead.
+
+
There’s one final feature of the framework that we haven’t seen yet, and which builds on this characteristic of forms to build powerful applications: the <ActionForm/>.
<ActionForm/> is a specialized <Form/> that takes a server action, and automatically dispatches it on form submission. This allows you to call a server function directly from a <form>, even without JS/WASM.
Create an action using create_server_action, specifying the type of the server function you’ve defined.
+
Create an <ActionForm/>, providing the server action in the action prop.
+
Pass the named arguments to the server function as form fields with the same names.
+
+
+
Note:<ActionForm/> only works with the default URL-encoded POST encoding for server functions, to ensure graceful degradation/correct behavior as an HTML form.
+
+
#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+ todo!()
+}
+
+#[component]
+fn AddTodo() -> impl IntoView {
+ let add_todo = create_server_action::<AddTodo>();
+ // holds the latest *returned* value from the server
+ let value = add_todo.value();
+ // check if the server has returned an error
+ let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
+
+ view! {
+ <ActionForm action=add_todo>
+ <label>
+ "Add a Todo"
+ // `title` matches the `title` argument to `add_todo`
+ <input type="text" name="title"/>
+ </label>
+ <input type="submit" value="Add"/>
+ </ActionForm>
+ }
+}
+
It’s really that easy. With JS/WASM, your form will submit without a page reload, storing its most recent submission in the .input() signal of the action, its pending status in .pending(), and so on. (See the Action docs for a refresher, if you need.) Without JS/WASM, your form will submit with a page reload. If you call a redirect function (from leptos_axum or leptos_actix) it will redirect to the correct page. By default, it will redirect back to the page you’re currently on. The power of HTML, HTTP, and isomorphic rendering mean that your <ActionForm/> simply works, even with no JS/WASM.
Because the <ActionForm/> is just a <form>, it fires a submit event. You can use either HTML validation, or your own client-side validation logic in an on:submit. Just call ev.prevent_default() to prevent submission.
+
The FromFormData trait can be helpful here, for attempting to parse your server function’s data type from the submitted form.
+
let on_submit = move |ev| {
+ let data = AddTodo::from_event(&ev);
+ // silly example of validation: if the todo is "nope!", nope it
+ if data.is_err() || data.unwrap().title == "nope!" {
+ // ev.prevent_default() will prevent form submission
+ ev.prevent_default();
+ }
+}
There are as many ways to deploy a web application as there are developers, let alone applications. But there are a couple useful tips to keep in mind when deploying an app.
Remember: Always deploy Rust apps built in --release mode, not debug mode. This has a huge effect on both performance and binary size.
+
Test locally in release mode as well. The framework applies certain optimizations in release mode that it does not apply in debug mode, so it’s possible for bugs to surface at this point. (If your app behaves differently or you do encounter a bug, it’s likely a framework-level bug and you should open a GitHub issue with a reproduction.)
+
See the chapter on "Optimizing WASM Binary Size" for additional tips and tricks to further improve the time-to-interactive metric for your WASM app on first load.
+
+
+
We asked users to submit their deployment setups to help with this chapter. I’ll quote from them below, but you can read the full thread here.
If you’ve been building an app that only uses client-side rendering, working with Trunk as a dev server and build tool, the process is quite easy.
+
trunk build --release
+
+
trunk build will create a number of build artifacts in a dist/ directory. Publishing dist somewhere online should be all you need to deploy your app. This should work very similarly to deploying any JavaScript application.
The most popular way for people to deploy full-stack apps built with cargo-leptos is to use a cloud hosting service that supports deployment via a Docker build. Here’s a sample Dockerfile, which is based on the one we use to deploy the Leptos website.
+
# Get started with a build env with Rust nightly
+FROM rustlang/rust:nightly-bullseye as builder
+
+# If you’re using stable, use this instead
+# FROM rust:1.70-bullseye as builder
+
+# Install cargo-binstall, which makes it easier to install other
+# cargo extensions like cargo-leptos
+RUN wget https://github.com/cargo-bins/cargo-binstall/releases/latest/download/cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN tar -xvf cargo-binstall-x86_64-unknown-linux-musl.tgz
+RUN cp cargo-binstall /usr/local/cargo/bin
+
+# Install cargo-leptos
+RUN cargo binstall cargo-leptos -y
+
+# Add the WASM target
+RUN rustup target add wasm32-unknown-unknown
+
+# Make an /app dir, which everything will eventually live in
+RUN mkdir -p /app
+WORKDIR /app
+COPY . .
+
+# Build the app
+RUN cargo leptos build --release -vv
+
+FROM rustlang/rust:nightly-bullseye as runner
+# Copy the server binary to the /app directory
+COPY --from=builder /app/target/release/leptos-start /app/
+# /target/site contains our JS/WASM/CSS, etc.
+COPY --from=builder /app/target/site /app/site
+# Copy Cargo.toml if it’s needed at runtime
+COPY --from=builder /app/Cargo.toml /app/
+WORKDIR /app
+
+# Set any required env variables and
+ENV RUST_LOG="info"
+ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
+ENV LEPTOS_SITE_ROOT="site"
+EXPOSE 8080
+# Run the server
+CMD ["/app/leptos_start"]
+
One of the primary downsides of deploying a Rust/WebAssembly frontend app is that splitting a WASM file into smaller chunks to be dynamically loaded is significantly more difficult than splitting a JavaScript bundle. There have been experiments like wasm-split in the Emscripten ecosystem but at present there’s no way to split and dynamically load a Rust/wasm-bindgen binary. This means that the whole WASM binary needs to be loaded before your app becomes interactive. Because the WASM format is designed for streaming compilation, WASM files are much faster to compile per kilobyte than JavaScript files. (For a deeper look, you can read this great article from the Mozilla team on streaming WASM compilation.)
+
Still, it’s important to ship the smallest WASM binary to users that you can, as it will reduce their network usage and make your app interactive as quickly as possible.
This will hyper-optimize the WASM for your release build for size, while keeping your server build optimized for speed. (For a pure client-rendered app without server considerations, just use the [profile.wasm-release] block as your [profile.release].)
+
+
+
Always serve compressed WASM in production. WASM tends to compress very well, typically shrinking to less than 50% its uncompressed size, and it’s trivial to enable compression for static files being served from Actix or Axum.
+
+
+
If you’re using nightly Rust, you can rebuild the standard library with this same profile rather than the prebuilt standard library that’s distributed with the wasm32-unknown-unknown target.
+
+
+
To do this, create a file in your project at .cargo/config.toml
Note that if you're using this with SSR too, the same Cargo profile will be applied. You'll need to explicitly specify your target:
+
[build]
+target = "x86_64-unknown-linux-gnu" # or whatever
+
+
Also note that in some cases, the cfg feature has_std will not be set, which may cause build errors with some dependencies which check for has_std. You may fix any build errors due to this by adding:
+
[build]
+rustflags = ["--cfg=has_std"]
+
+
And you'll need to add panic = "abort" to [profile.release] in Cargo.toml. Note that this applies the same build-std and panic settings to your server binary, which may not be desirable. Some further exploration is probably needed here.
+
+
One of the sources of binary size in WASM binaries can be serde serialization/deserialization code. Leptos uses serde by default to serialize and deserialize resources created with create_resource. You might try experimenting with the miniserde and serde-lite features, which allow you to use those crates for serialization and deserialization instead; each only implements a subset of serde’s functionality, but typically optimizes for size over speed.
There are certain crates that tend to inflate binary sizes. For example, the regex crate with its default features adds about 500kb to a WASM binary (largely because it has to pull in Unicode table data!). In a size-conscious setting, you might consider avoiding regexes in general, or even dropping down and calling browser APIs to use the built-in regex engine instead. (This is what leptos_router does on the few occasions it needs a regular expression.)
+
In general, Rust’s commitment to runtime performance is sometimes at odds with a commitment to a small binary. For example, Rust monomorphizes generic functions, meaning it creates a distinct copy of the function for each generic type it’s called with. This is significantly faster than dynamic dispatch, but increases binary size. Leptos tries to balance runtime performance with binary size considerations pretty carefully; but you might find that writing code that uses many generics tends to increase binary size. For example, if you have a generic component with a lot of code in its body and call it with four different types, remember that the compiler could include four copies of that same code. Refactoring to use a concrete inner function or helper can often maintain performance and ergonomics while reducing binary size.
Remember that in a server-rendered app, JS bundle size/WASM binary size affects only one thing: time to interactivity on the first load. This is very important to a good user experience: nobody wants to click a button three times and have it do nothing because the interactive code is still loading — but it's not the only important measure.
+
It’s especially worth remembering that streaming in a single WASM binary means all subsequent navigations are nearly instantaneous, depending only on any additional data loading. Precisely because your WASM binary is not bundle split, navigating to a new route does not require loading additional JS/WASM, as it does in nearly every JavaScript framework. Is this copium? Maybe. Or maybe it’s just an honest trade-off between the two approaches!
+
Always take the opportunity to optimize the low-hanging fruit in your application. And always test your app under real circumstances with real user network speeds and devices before making any heroic efforts.
Leptos 0.5 introduces the new experimental-islands feature. This guide will walk through the islands feature and core concepts, while implementing a demo app using the islands architecture.
The dominant JavaScript frontend frameworks (React, Vue, Svelte, Solid, Angular) all originated as frameworks for building client-rendered single-page apps (SPAs). The initial page load is rendered to HTML, then hydrated, and subsequent navigations are handled directly in the client. (Hence “single page”: everything happens from a single page load from the server, even if there is client-side routing later.) Each of these frameworks later added server-side rendering to improve initial load times, SEO, and user experience.
+
This means that by default, the entire app is interactive. It also means that the entire app has to be shipped to the client as JavaScript in order to be hydrated. Leptos has followed this same pattern.
But it’s also possible to work in the opposite direction. Rather than taking an entirely-interactive app, rendering it to HTML on the server, and then hydrating it in the browser, you can begin with a plain HTML page and add small areas of interactivity. This is the traditional format for any website or app before the 2010s: your browser makes a series of requests to the server and returns the HTML for each new page in response. After the rise of “single-page apps” (SPA), this approach has sometimes become known as a “multi-page app” (MPA) by comparison.
+
The phrase “islands architecture” has emerged recently to describe the approach of beginning with a “sea” of server-rendered HTML pages, and adding “islands” of interactivity throughout the page.
The rest of this guide will look at how to use islands with Leptos. For more background on the approach in general, check out some of the articles below:
I’m using Actix because I like it. Feel free to use Axum; there should be approximately no server-specific differences in this guide.
+
+
I’m just going to run
+
cargo leptos build
+
+
in the background while I fire up my editor and keep writing.
+
The first thing I’ll do is to add the experimental-islands feature in my Cargo.toml. I need to add this to both leptos and leptos_actix:
+
leptos = { version = "0.5", features = ["nightly", "experimental-islands"] }
+leptos_actix = { version = "0.5", optional = true, features = [
+ "experimental-islands",
+] }
+
+
Next I’m going to modify the hydrate function exported from src/lib.rs. I’m going to remove the line that calls leptos::mount_to_body(App) and replace it with
Nothing happens because we’ve just totally inverted the mental model of our app. Rather than being interactive by default and hydrating everything, the app is now plain HTML by default, and we need to opt into interactivity.
+
This has a big effect on WASM binary sizes: if I compile in release mode, this app is a measly 24kb of WASM (uncompressed), compared to 355kb in non-islands mode. (355kb is quite large for a “Hello, world!” It’s really just all the code related to client-side routing, which isn’t being used in the demo.)
+
When we click the button, nothing happens, because our whole page is static.
+
So how do we make something happen?
+
Let’s turn the HomePage component into an island!
+
Here was the non-interactive version:
+
#[component]
+fn HomePage() -> impl IntoView {
+ // Creates a reactive value to update the button
+ let (count, set_count) = create_signal(0);
+ let on_click = move |_| set_count.update(|count| *count += 1);
+
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <button on:click=on_click>"Click Me: " {count}</button>
+ }
+}
+
Here’s the interactive version:
+
#[island]
+fn HomePage() -> impl IntoView {
+ // Creates a reactive value to update the button
+ let (count, set_count) = create_signal(0);
+ let on_click = move |_| set_count.update(|count| *count += 1);
+
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <button on:click=on_click>"Click Me: " {count}</button>
+ }
+}
+
Now when I click the button, it works!
+
The #[island] macro works exactly like the #[component] macro, except that in islands mode, it designates this as an interactive island. If we check the binary size again, this is 166kb uncompressed in release mode; much larger than the 24kb totally static version, but much smaller than the 355kb fully-hydrated version.
+
If you open up the source for the page now, you’ll see that your HomePage island has been rendered as a special <leptos-island> HTML element which specifies which component should be used to hydrate it:
Remember that only code within an #[island] needs to be compiled to WASM and shipped to the browser. This means that islands should be as small and specific as possible. My HomePage, for example, would be better broken apart into a regular component and an island:
+
#[component]
+fn HomePage() -> impl IntoView {
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <Counter/>
+ }
+}
+
+#[island]
+fn Counter() -> impl IntoView {
+ // Creates a reactive value to update the button
+ let (count, set_count) = create_signal(0);
+ let on_click = move |_| set_count.update(|count| *count += 1);
+
+ view! {
+ <button on:click=on_click>"Click Me: " {count}</button>
+ }
+}
+
Now the <h1> doesn’t need to be included in the client bundle, or hydrated. This seems like a silly distinction now; but note that you can now add as much inert HTML content as you want to the HomePage itself, and the WASM binary size will remain exactly the same.
+
In regular hydration mode, your WASM binary size grows as a function of the size/complexity of your app. In islands mode, your WASM binary grows as a function of the amount of interactivity in your app. You can add as much non-interactive content as you want, outside islands, and it will not increase that binary size.
So, this 50% reduction in WASM binary size is nice. But really, what’s the point?
+
The point comes when you combine two key facts:
+
+
Code inside #[component] functions now only runs on the server.
+
Children and props can be passed from the server to islands, without being included in the WASM binary.
+
+
This means you can run server-only code directly in the body of a component, and pass it directly into the children. Certain tasks that take a complex blend of server functions and Suspense in fully-hydrated apps can be done inline in islands.
+
We’re going to rely on a third fact in the rest of this demo:
+
+
Context can be passed between otherwise-independent islands.
+
+
So, instead of our counter demo, let’s make something a little more fun: a tabbed interface that reads data from files on the server.
One of the most powerful things about islands is that you can pass server-rendered children into an island, without the island needing to know anything about them. Islands hydrate their own content, but not children that are passed to them.
+
As Dan Abramov of React put it (in the very similar context of RSCs), islands aren’t really islands: they’re donuts. You can pass server-only content directly into the “donut hole,” as it were, allowing you to create tiny atolls of interactivity, surrounded on both sides by the sea of inert server HTML.
+
+
In the demo code included below, I added some styles to show all server content as a light-blue “sea,” and all islands as light-green “land.” Hopefully that will help picture what I’m talking about!
+
+
To continue with the demo: I’m going to create a Tabs component. Switching between tabs will require some interactivity, so of course this will be an island. Let’s start simple for now:
Easy fix: let’s cargo add serde --features=derive. The #[island] macro wants to pull in serde here because it needs to serialize and deserialize the labels prop.
+
Now let’s update the HomePage to use Tabs.
+
#[component]
+fn HomePage() -> impl IntoView {
+ // these are the files we’re going to read
+ let files = ["a.txt", "b.txt", "c.txt"];
+ // the tab labels will just be the file names
+ let labels = files.iter().copied().map(Into::into).collect();
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <p>"Click any of the tabs below to read a recipe."</p>
+ <Tabs labels/>
+ }
+}
+
If you take a look in the DOM inspector, you’ll see the island is now something like
Okay, now let’s go back into the HomePage. We’re going to create the list of tabs to put into our tab box.
+
#[component]
+fn HomePage() -> impl IntoView {
+ let files = ["a.txt", "b.txt", "c.txt"];
+ let labels = files.iter().copied().map(Into::into).collect();
+ let tabs = move || {
+ files
+ .into_iter()
+ .enumerate()
+ .map(|(index, filename)| {
+ let content = std::fs::read_to_string(filename).unwrap();
+ view! {
+ <Tab index>
+ <h2>{filename.to_string()}</h2>
+ <p>{content}</p>
+ </Tab>
+ }
+ })
+ .collect_view()
+ };
+
+ view! {
+ <h1>"Welcome to Leptos!"</h1>
+ <p>"Click any of the tabs below to read a recipe."</p>
+ <Tabs labels>
+ <div>{tabs()}</div>
+ </Tabs>
+ }
+}
+
Uh... What?
+
If you’re used to using Leptos, you know that you just can’t do this. All code in the body of components has to run on the server (to be rendered to HTML) and in the browser (to hydrate), so you can’t just call std::fs; it will panic, because there’s no access to the local filesystem (and certainly not to the server filesystem!) in the browser. This would be a security nightmare!
+
Except... wait. We’re in islands mode. This HomePage component really does only run on the server. So we can, in fact, just use ordinary server code like this.
+
+
Is this a dumb example? Yes! Synchronously reading from three different local files in a .map() is not a good choice in real life. The point here is just to demonstrate that this is, definitely, server-only content.
+
+
Go ahead and create three files in the root of the project called a.txt, b.txt, and c.txt, and fill them in with whatever content you’d like.
+
Refresh the page and you should see the content in the browser. Edit the files and refresh again; it will be updated.
+
You can pass server-only content from a #[component] into the children of an #[island], without the island needing to know anything about how to access that data or render that content.
+
This is really important. Passing server children to islands means that you can keep islands small. Ideally, you don’t want to slap and #[island] around a whole chunk of your page. You want to break that chunk out into an interactive piece, which can be an #[island], and a bunch of additional server content that can be passed to that island as children, so that the non-interactive subsections of an interactive part of the page can be kept out of the WASM binary.
These aren’t really “tabs” yet: they just show every tab, all the time. So let’s add some simple logic to our Tabs and Tab components.
+
We’ll modify Tabs to create a simple selected signal. We provide the read half via context, and set the value of the signal whenever someone clicks one of our buttons.
Now the tabs behave exactly as I’d expect. Tabs passes the signal via context to each Tab, which uses it to determine whether it should be open or not.
+
+
That’s why in HomePage, I made let tabs = move || a function, and called it like {tabs()}: creating the tabs lazily this way meant that the Tabs island would already have provided the selected context by the time each Tab went looking for it.
+
+
Our complete tabs demo is about 220kb uncompressed: not the smallest demo in the world, but still about a third smaller than the counter button! Just for kicks, I built the same demo without islands mode, using #[server] functions and Suspense. and it was 429kb. So again, this was about a 50% savings in binary size. And this app includes quite minimal server-only content: remember that as we add additional server-only components and pages, this 220 will not grow.
This demo may seem pretty basic. It is. But there are a number of immediate takeaways:
+
+
50% WASM binary size reduction, which means measurable improvements in time to interactivity and initial load times for clients.
+
Reduced HTML page size. This one is less obvious, but it’s true and important: HTML generated from #[component]s doesn’t need all the hydration IDs and other boilerplate added.
+
Reduced data serialization costs. Creating a resource and reading it on the client means you need to serialize the data, so it can be used for hydration. If you’ve also read that data to create HTML in a Suspense, you end up with “double data,” i.e., the same exact data is both rendered to HTML and serialized as JSON, increasing the size of responses, and therefore slowing them down.
+
Easily use server-only APIs inside a #[component] as if it were a normal, native Rust function running on the server—which, in islands mode, it is!
+
Reduced #[server]/create_resource/Suspense boilerplate for loading server data.
The experimental-islands feature included in 0.5 reflects work at the cutting edge of what frontend web frameworks are exploring right now. As it stands, our islands approach is very similar to Astro (before its recent View Transitions support): it allows you to build a traditional server-rendered, multi-page app and pretty seamlessly integrate islands of interactivity.
+
There are some small improvements that will be easy to add. For example, we can do something very much like Astro's View Transitions approach:
+
+
add client-side routing for islands apps by fetching subsequent navigations from the server and replacing the HTML document with the new one
+
add animated transitions between the old and new document using the View Transitions API
+
support explicit persistent islands, i.e., islands that you can mark with unique IDs (something like persist:searchbar on the component in the view), which can be copied over from the old to the new document without losing their current state
+
+
There are other, larger architectural changes that I’m not sold on yet.
You don’t need to know very much about how the reactive system actually works in order to use the library successfully. But it’s always useful to understand what’s going on behind the scenes once you start working with the framework at an advanced level.
+
The reactive primitives you use are divided into three sets:
+
+
Signals (ReadSignal/WriteSignal, RwSignal, Resource, Trigger) Values you can actively change to trigger reactive updates.
+
Computations (Memos) Values that depend on signals (or other computations) and derive a new reactive value through some pure computation.
+
Effects Observers that listen to changes in some signals or computations and run a function, causing some side effect.
+
+
Derived signals are a kind of non-primitve computation: as plain closures, they simply allow you to refactor some repeated signal-based computation into a reusable function that can be called in multiple places, but they are not represented in the reactive system itself.
+
All the other primitives actually exist in the reactive system as nodes in a reactive graph.
+
Most of the work of the reactive system consists of propagating changes from signals to effects, possibly through some intervening memos.
+
The assumption of the reactive system is that effects (like rendering to the DOM or making a network request) are orders of magnitude more expensive than things like updating a Rust data structure inside your app.
+
So the primary goal of the reactive system is to run effects as infrequently as possible.
+
Leptos does this through the construction of a reactive graph.
+
+
Leptos’s current reactive system is based heavily on the Reactively library for JavaScript. You can read Milo’s article “Super-Charging Fine-Grained Reactivity” for an excellent account of its algorithm, as well as fine-grained reactivity in general—including some beautiful diagrams!
Signals, memos, and effects all share three characteristics:
+
+
Value They have a current value: either the signal’s value, or (for memos and effects) the value returned by the previous run, if any.
+
Sources Any other reactive primitives they depend on. (For signals, this is an empty set.)
+
Subscribers Any other reactive primitives that depend on them. (For effects, this is an empty set.)
+
+
In reality then, signals, memos, and effects are just conventional names for one generic concept of a “node” in a reactive graph. Signals are always “root nodes,” with no sources/parents. Effects are always “leaf nodes,” with no subscribers. Memos typically have both sources and subscribers.
// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+create_effect(move |_| {
+ log!("{}", name_upper());
+});
+
+set_name("Bob");
+
You can easily imagine the reactive graph here: name is the only signal/origin node, the create_effect is the only effect/terminal node, and there’s one intervening memo.
// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(move |_| name.len());
+
+// D
+create_effect(move |_| {
+ log!("len = {}", name_len());
+});
+
+// E
+create_effect(move |_| {
+ log!("name = {}", name_upper());
+});
+
This is also pretty straightforward: a signal source signal (name/A) divides into two parallel tracks: name_upper/B and name_len/C, each of which has an effect that depends on it.
+
__A__
+| |
+B C
+| |
+D E
+
+
Now let’s update the signal.
+
set_name("Bob");
+
We immediately log
+
len = 3
+name = BOB
+
+
Let’s do it again.
+
set_name("Tim");
+
The log should shows
+
name = TIM
+
+
len = 3 does not log again.
+
Remember: the goal of the reactive system is to run effects as infrequently as possible. Changing name from "Bob" to "Tim" will cause each of the memos to re-run. But they will only notify their subscribers if their value has actually changed. "BOB" and "TIM" are different, so that effect runs again. But both names have the length 3, so they do not run again.
One more example, of what’s sometimes called the diamond problem.
+
// A
+let (name, set_name) = create_signal("Alice");
+
+// B
+let name_upper = create_memo(move |_| name.with(|n| n.to_uppercase()));
+
+// C
+let name_len = create_memo(move |_| name.len());
+
+// D
+create_effect(move |_| {
+ log!("{} is {} characters long", name_upper(), name_len());
+});
+
What does the graph look like for this?
+
__A__
+| |
+B C
+| |
+|__D__|
+
+
You can see why it's called the “diamond problem.” If I’d connected the nodes with straight lines instead of bad ASCII art, it would form a diamond: two memos, each of which depend on a signal, which feed into the same effect.
+
A naive, push-based reactive implementation would cause this effect to run twice, which would be bad. (Remember, our goal is to run effects as infrequently as we can.) For example, you could implement a reactive system such that signals and memos immediately propagate their changes all the way down the graph, through each dependency, essentially traversing the graph depth-first. In other words, updating A would notify B, which would notify D; then A would notify C, which would notify D again. This is both inefficient (D runs twice) and glitchy (D actually runs with the incorrect value for the second memo during its first run.)
Any reactive implementation worth its salt is dedicated to solving this issue. There are a number of different approaches (again, see Milo’s article for an excellent overview).
+
Here’s how ours works, in brief.
+
A reactive node is always in one of three states:
+
+
Clean: it is known not to have changed
+
Check: it is possible it has changed
+
Dirty: it has definitely changed
+
+
Updating a signal Dirty marks that signal Dirty, and marks all its descendants Check, recursively. Any of its descendants that are effects are added to a queue to be re-run.
Now those effects are run. (All of the effects will be marked Check at this point.) Before re-running its computation, the effect checks its parents to see if they are dirty. So
+
+
So D goes to B and checks if it is Dirty.
+
But B is also marked Check. So B does the same thing:
+
+
B goes to A, and finds that it is Dirty.
+
This means B needs to re-run, because one of its sources has changed.
+
B re-runs, generating a new value, and marks itself Clean
+
Because B is a memo, it then checks its prior value against the new value.
+
If they are the same, B returns "no change." Otherwise, it returns "yes, I changed."
+
+
+
If B returned “yes, I changed,” D knows that it definitely needs to run and re-runs immediately before checking any other sources.
+
If B returned “no, I didn’t change,” D continues on to check C (see process above for B.)
+
If neither B nor C has changed, the effect does not need to re-run.
+
If either B or C did change, the effect now re-runs.
+
+
Because the effect is only marked Check once and only queued once, it only runs once.
+
If the naive version was a “push-based” reactive system, simply pushing reactive changes all the way down the graph and therefore running the effect twice, this version could be called “push-pull.” It pushes the Check status all the way down the graph, but then “pulls” its way back up. In fact, for large graphs it may end up bouncing back up and down and left and right on the graph as it tries to determine exactly which nodes need to re-run.
+
Note this important trade-off: Push-based reactivity propagates signal changes more quickly, at the expense of over-re-running memos and effects. Remember: the reactive system is designed to minimize how often you re-run effects, on the (accurate) assumption that side effects are orders of magnitude more expensive than this kind of cache-friendly graph traversal happening entirely inside the library’s Rust code. The measurement of a good reactive system is not how quickly it propagates changes, but how quickly it propagates changes without over-notifying.
Note that signals always notify their children; i.e., a signal is always marked Dirty when it updates, even if its new value is the same as the old value. Otherwise, we’d have to require PartialEq on signals, and this is actually quite an expensive check on some types. (For example, add an unnecessary equality check to something like some_vec_signal.update(|n| n.pop()) when it’s clear that it has in fact changed.)
+
Memos, on the other hand, check whether they change before notifying their children. They only run their calculation once, no matter how many times you .get() the result, but they run whenever their signal sources change. This means that if the memo’s computation is very expensive, you may actually want to memoize its inputs as well, so that the memo only re-calculates when it is sure its inputs have changed.
All of this is cool, and memos are pretty great. But most actual applications have reactive graphs that are quite shallow and quite wide: you might have 100 source signals and 500 effects, but no memos or, in rare case, three or four memos between the signal and the effect. Memos are extremely good at what they do: limiting how often they notify their subscribers that they have changed. But as this description of the reactive system should show, they come with overhead in two forms:
+
+
A PartialEq check, which may or may not be expensive.
+
Added memory cost of storing another node in the reactive system.
+
Added computational cost of reactive graph traversal.
+
+
In cases in which the computation itself is cheaper than this reactive work, you should avoid “over-wrapping” with memos and simply use derived signals. Here’s a great example in which you should never use a memo:
+
let (a, set_a) = create_signal(1);
+// none of these make sense as memos
+let b = move || a() + 2;
+let c = move || b() % 2 == 0;
+let d = move || if c() { "even" } else { "odd" };
+
+set_a(2);
+set_a(3);
+set_a(5);
+
Even though memoizing would technically save an extra calculation of d between setting a to 3 and 5, these calculations are themselves cheaper than the reactive algorithm.
+
At the very most, you might consider memoizing the final node before running some expensive side effect:
+
let text = create_memo(move |_| {
+ d()
+});
+create_effect(move |_| {
+ engrave_text_into_bar_of_gold(&text());
+});
<ActionForm/> is a specialized <Form/> that takes a server action, and automatically dispatches it on form submission. This allows you to call a server function directly from a <form>, even without JS/WASM.
Create an action using create_server_action, specifying the type of the server function you’ve defined.
+
Create an <ActionForm/>, providing the server action in the action prop.
+
Pass the named arguments to the server function as form fields with the same names.
+
+
+
Note:<ActionForm/> only works with the default URL-encoded POST encoding for server functions, to ensure graceful degradation/correct behavior as an HTML form.
+
+
#[server(AddTodo, "/api")]
+pub async fn add_todo(title: String) -> Result<(), ServerFnError> {
+ todo!()
+}
+
+#[component]
+fn AddTodo() -> impl IntoView {
+ let add_todo = create_server_action::<AddTodo>();
+ // holds the latest *returned* value from the server
+ let value = add_todo.value();
+ // check if the server has returned an error
+ let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
+
+ view! {
+ <ActionForm action=add_todo>
+ <label>
+ "Add a Todo"
+ // `title` matches the `title` argument to `add_todo`
+ <input type="text" name="title"/>
+ </label>
+ <input type="submit" value="Add"/>
+ </ActionForm>
+ }
+}
+
It’s really that easy. With JS/WASM, your form will submit without a page reload, storing its most recent submission in the .input() signal of the action, its pending status in .pending(), and so on. (See the Action docs for a refresher, if you need.) Without JS/WASM, your form will submit with a page reload. If you call a redirect function (from leptos_axum or leptos_actix) it will redirect to the correct page. By default, it will redirect back to the page you’re currently on. The power of HTML, HTTP, and isomorphic rendering mean that your <ActionForm/> simply works, even with no JS/WASM.
Because the <ActionForm/> is just a <form>, it fires a submit event. You can use either HTML validation, or your own client-side validation logic in an on:submit. Just call ev.prevent_default() to prevent submission.
+
The FromFormData trait can be helpful here, for attempting to parse your server function’s data type from the submitted form.
+
let on_submit = move |ev| {
+ let data = AddTodo::from_event(&ev);
+ // silly example of validation: if the todo is "nope!", nope it
+ if data.is_err() || data.unwrap().title == "nope!" {
+ // ev.prevent_default() will prevent form submission
+ ev.prevent_default();
+ }
+}
I’ve been driving around Boston for about fifteen years. If you don’t know Boston, let me tell you: Massachusetts has some of the most aggressive drivers(and pedestrians!) in the world. I’ve learned to practice what’s sometimes called “defensive driving”: assuming that someone’s about to swerve in front of you at an intersection when you have the right of way, preparing for a pedestrian to cross into the street at any moment, and driving accordingly.
+
“Progressive enhancement” is the “defensive driving” of web design. Or really, that’s “graceful degradation,” although they’re two sides of the same coin, or the same process, from two different directions.
+
Progressive enhancement, in this context, means beginning with a simple HTML site or application that works for any user who arrives at your page, and gradually enhancing it with layers of additional features: CSS for styling, JavaScript for interactivity, WebAssembly for Rust-powered interactivity; using particular Web APIs for a richer experience if they’re available and as needed.
+
Graceful degradation means handling failure gracefully when parts of that stack of enhancement aren’t available. Here are some sources of failure your users might encounter in your app:
+
+
Their browser doesn’t support WebAssembly because it needs to be updated.
+
Their browser can’t support WebAssembly because browser updates are limited to newer OS versions, which can’t be installed on the device. (Looking at you, Apple.)
+
They have WASM turned off for security or privacy reasons.
+
They have JavaScript turned off for security or privacy reasons.
+
JavaScript isn’t supported on their device (for example, some accessibility devices only support HTML browsing)
+
The JavaScript (or WASM) never arrived at their device because they walked outside and lost WiFi.
+
They stepped onto a subway car after loading the initial page and subsequent navigations can’t load data.
+
... and so on.
+
+
How much of your app still works if one of these holds true? Two of them? Three?
+
If the answer is something like “95%... okay, then 90%... okay, then 75%,” that’s graceful degradation. If the answer is “my app shows a blank screen unless everything works correctly,” that’s... rapid unscheduled disassembly.
+
Graceful degradation is especially important for WASM apps, because WASM is the newest and least-likely-to-be-supported of the four languages that run in the browser (HTML, CSS, JS, WASM).
There are a few practices that can help your apps degrade more gracefully:
+
+
Server-side rendering. Without SSR, your app simply doesn’t work without both JS and WASM loading. In some cases this may be appropriate (think internal apps gated behind a login) but in others it’s simply broken.
+
Native HTML elements. Use HTML elements that do the things that you want, without additional code: <a> for navigation (including to hashes within the page), <details> for an accordion, <form> to persist information in the URL, etc.
+
URL-driven state. The more of your global state is stored in the URL (as a route param or part of the query string), the more of the page can be generated during server rendering and updated by an <a> or a <form>, which means that not only navigations but state changes can work without JS/WASM.
+
SsrMode::PartiallyBlocked or SsrMode::InOrder. Out-of-order streaming requires a small amount of inline JS, but can fail if 1) the connection is broken halfway through the response or 2) the client’s device doesn’t support JS. Async streaming will give a complete HTML page, but only after all resources load. In-order streaming begins showing pieces of the page sooner, in top-down order. “Partially-blocked” SSR builds on out-of-order streaming by replacing <Suspense/> fragments that read from blocking resources on the server. This adds marginally to the initial response time (because of the O(n) string replacement work), in exchange for a more complete initial HTML response. This can be a good choice for situations in which there’s a clear distinction between “more important” and “less important” content, e.g., blog post vs. comments, or product info vs. reviews. If you choose to block on all the content, you’ve essentially recreated async rendering.
+
Leaning on <form>s. There’s been a bit of a <form> renaissance recently, and it’s no surprise. The ability of a <form> to manage complicated POST or GET requests in an easily-enhanced way makes it a powerful tool for graceful degradation. The example in the <Form/> chapter, for example, would work fine with no JS/WASM: because it uses a <form method="GET"> to persist state in the URL, it works with pure HTML by making normal HTTP requests and then progressively enhances to use client-side navigations instead.
+
+
There’s one final feature of the framework that we haven’t seen yet, and which builds on this characteristic of forms to build powerful applications: the <ActionForm/>.
We’ve made it this far without having mentioned half of the reactive system: effects.
+
Reactivity works in two halves: updating individual reactive values (“signals”) notifies the pieces of code that depend on them (“effects”) that they need to run again. These two halves of the reactive system are inter-dependent. Without effects, signals can change within the reactive system but never be observed in a way that interacts with the outside world. Without signals, effects run once but never again, as there’s no observable value to subscribe to. Effects are quite literally “side effects” of the reactive system: they exist to synchronize the reactive system with the non-reactive world outside it.
+
Hidden behind the whole reactive DOM renderer that we’ve seen so far is a function called create_effect.
+
create_effect takes a function as its argument. It immediately runs the function. If you access any reactive signal inside that function, it registers the fact that the effect depends on that signal with the reactive runtime. Whenever one of the signals that the effect depends on changes, the effect runs again.
+
let (a, set_a) = create_signal(0);
+let (b, set_b) = create_signal(0);
+
+create_effect(move |_| {
+ // immediately prints "Value: 0" and subscribes to `a`
+ log::debug!("Value: {}", a());
+});
+
The effect function is called with an argument containing whatever value it returned the last time it ran. On the initial run, this is None.
+
By default, effects do not run on the server. This means you can call browser-specific APIs within the effect function without causing issues. If you need an effect to run on the server, use create_isomorphic_effect.
If you’re familiar with a framework like React, you might notice one key difference. React and similar frameworks typically require you to pass a “dependency array,” an explicit set of variables that determine when the effect should rerun.
+
Because Leptos comes from the tradition of synchronous reactive programming, we don’t need this explicit dependency list. Instead, we automatically track dependencies depending on which signals are accessed within the effect.
+
This has two effects (no pun intended). Dependencies are:
+
+
Automatic: You don’t need to maintain a dependency list, or worry about what should or shouldn’t be included. The framework simply tracks which signals might cause the effect to rerun, and handles it for you.
+
Dynamic: The dependency list is cleared and updated every time the effect runs. If your effect contains a conditional (for example), only signals that are used in the current branch are tracked. This means that effects rerun the absolute minimum number of times.
+
+
+
If this sounds like magic, and if you want a deep dive into how automatic dependency tracking works, check out this video. (Apologies for the low volume!)
While they’re not a “zero-cost abstraction” in the most technical sense—they require some additional memory use, exist at runtime, etc.—at a higher level, from the perspective of whatever expensive API calls or other work you’re doing within them, effects are a zero-cost abstraction. They rerun the absolute minimum number of times necessary, given how you’ve described them.
+
Imagine that I’m creating some kind of chat software, and I want people to be able to display their full name, or just their first name, and to notify the server whenever their name changes:
+
let (first, set_first) = create_signal(String::new());
+let (last, set_last) = create_signal(String::new());
+let (use_last, set_use_last) = create_signal(true);
+
+// this will add the name to the log
+// any time one of the source signals changes
+create_effect(move |_| {
+ log(
+ if use_last() {
+ format!("{} {}", first(), last())
+ } else {
+ first()
+ },
+ )
+});
+
If use_last is true, effect should rerun whenever first, last, or use_last changes. But if I toggle use_last to false, a change in last will never cause the full name to change. In fact, last will be removed from the dependency list until use_last toggles again. This saves us from sending multiple unnecessary requests to the API if I change last multiple times while use_last is still false.
Effects are intended to run side-effects of the system, not to synchronize state within the system. In other words: don’t write to signals within effects.
+
If you need to define a signal that depends on the value of other signals, use a derived signal or create_memo.
+
If you need to synchronize some reactive value with the non-reactive world outside—like a web API, the console, the filesystem, or the DOM—create an effect.
+
+
If you’re curious for more information about when you should and shouldn’t use create_effect, check out this video for a more in-depth consideration!
We’ve managed to get this far without mentioning effects because they’re built into the Leptos DOM renderer. We’ve seen that you can create a signal and pass it into the view macro, and it will update the relevant DOM node whenever the signal changes:
This works because the framework essentially creates an effect wrapping this update. You can imagine Leptos translating this view into something like this:
+
let (count, set_count) = create_signal(0);
+
+// create a DOM element
+let p = create_element("p");
+
+// create an effect to reactively update the text
+create_effect(move |prev_value| {
+ // first, access the signal’s value and convert it to a string
+ let text = count().to_string();
+
+ // if this is different from the previous value, update the node
+ if prev_value != Some(text) {
+ p.set_text_content(&text);
+ }
+
+ // return this value so we can memoize the next update
+ text
+});
+
Every time count is updated, this effect wil rerun. This is what allows reactive, fine-grained updates to the DOM.
In addition to create_effect, Leptos provides a watch function, which can be used for two main purposes:
+
+
Separating tracking and responding to changes by explicitly passing in a set of values to track.
+
Canceling tracking by calling a stop function.
+
+
Like create_resource, watch takes a first argument, which is reactively tracked, and a second, which is not. Whenever a reactive value in its deps argument is changed, the callback is run. watch returns a function that can be called to stop tracking the dependencies.
Leptos is built on top of a fine-grained reactive system, designed to run expensive side effects (like rendering something in a browser, or making a network request) as infrequently as possible in response to change, reactive values.
+
So far we’ve seen signals in action. These chapters will go into a bit more depth, and look at effects, which are the other half of the story.
One of our core contributors said to me recently: “I never used closures this often
+until I started using Leptos.” And it’s true. Closures are at the heart of any Leptos
+application. It sometimes looks a little silly:
+
// a signal holds a value, and can be updated
+let (count, set_count) = create_signal(0);
+
+// a derived signal is a function that accesses other signals
+let double_count = move || count() * 2;
+let count_is_odd = move || count() & 1 == 1;
+let text = move || if count_is_odd() {
+ "odd"
+} else {
+ "even"
+};
+
+// an effect automatically tracks the signals it depends on
+// and reruns when they change
+create_effect(move |_| {
+ logging::log!("text = {}", text());
+});
+
+view! {
+ <p>{move || text().to_uppercase()}</p>
+}
Functions are at the heart of every UI framework. And this makes perfect sense. Creating a user interface is basically divided into two phases:
+
+
initial rendering
+
updates
+
+
In a web framework, the framework does some kind of initial rendering. Then it hands control back over to the browser. When certain events fire (like a mouse click) or asynchronous tasks finish (like an HTTP request finishing), the browser wakes the framework back up to update something. The framework runs some kind of code to update your user interface, and goes back asleep until the browser wakes it up again.
+
The key phrase here is “runs some kind of code.” The natural way to “run some kind of code” at an arbitrary point in time—in Rust or in any other programming language—is to call a function. And in fact every UI framework is based on rerunning some kind of function over and over:
+
+
virtual DOM (VDOM) frameworks like React, Yew, or Dioxus rerun a component or render function over and over, to generate a virtual DOM tree that can be reconciled with the previous result to patch the DOM
+
compiled frameworks like Angular and Svelte divide your component templates into “create” and “update” functions, rerunning the update function when they detect a change to the component’s state
+
in fine-grained reactive frameworks like SolidJS, Sycamore, or Leptos, you define the functions that rerun
+
+
That’s what all our components are doing.
+
Take our typical <SimpleCounter/> example in its simplest form:
The SimpleCounter function itself runs once. The value signal is created once. The framework hands off the increment function to the browser as an event listener. When you click the button, the browser calls increment, which updates value via set_value. And that updates the single text node represented in our view by {value}.
+
Closures are key to reactivity. They provide the framework with the ability to rerun the smallest possible unit of your application in response to a change.
+
So remember two things:
+
+
Your component function is a setup function, not a render function: it only runs once.
+
For values in your view template to be reactive, they must be functions: either signals (which implement the Fn traits) or closures.
.get() clones the current value of the signal and tracks any future changes to the value reactively.
+
.with() takes a function, which receives the current value of the signal by reference (&T), and tracks any future changes.
+
.set() replaces the current value of the signal and notifies any subscribers that they need to update.
+
.update() takes a function, which receives a mutable reference to the current value of the signal (&mut T), and notifies any subscribers that they need to update. (.update() doesn’t return the value returned by the closure, but you can use .try_update() if you need to; for example, if you’re removing an item from a Vec<_> and want the removed item.)
+
+
Calling a ReadSignal as a function is syntax sugar for .get(). Calling a WriteSignal as a function is syntax sugar for .set(). So
+
let (count, set_count) = create_signal(0);
+set_count(1);
+logging::log!(count());
+
is the same as
+
let (count, set_count) = create_signal(0);
+set_count.set(1);
+logging::log!(count.get());
+
You might notice that .get() and .set() can be implemented in terms of .with() and .update(). In other words, count.get() is identical with count.with(|n| n.clone()), and count.set(1) is implemented by doing count.update(|n| *n = 1).
+
But of course, .get() and .set() (or the plain function-call forms!) are much nicer syntax.
+
However, there are some very good use cases for .with() and .update().
+
For example, consider a signal that holds a Vec<String>.
In terms of logic, this is simple enough, but it’s hiding some significant inefficiencies. Remember that names().is_empty() is sugar for names.get().is_empty(), which clones the value (it’s names.with(|n| n.clone()).is_empty()). This means we clone the whole Vec<String>, run is_empty(), and then immediately throw away the clone.
+
Likewise, set_names replaces the value with a whole new Vec<_>. This is fine, but we might as well just mutate the original Vec<_> in place.
Now our function simply takes names by reference to run is_empty(), avoiding that clone.
+
And if you have Clippy on, or if you have sharp eyes, you may notice we can make this even neater:
+
if names.with(Vec::is_empty) {
+ // ...
+}
+
After all, .with() simply takes a function that takes the value by reference. Since Vec::is_empty takes &self, we can pass it in directly and avoid the unnecessary closure.
+
There are some helper macros to make using .with() and .update() easier to use, especially when using multiple signals.
If you wanted to concatenate these 3 signals together without unnecessary cloning, you would have to write something like:
+
let name = move || {
+ first.with(|first| {
+ middle.with(|middle| last.with(|last| format!("{first} {middle} {last}")))
+ })
+};
+
Which is very long and annoying to write.
+
Instead, you can use the with! macro to get references to all the signals at the same time.
+
let name = move || with!(|first, middle, last| format!("{first} {middle} {last}"));
+
This expands to the same thing as above. Take a look at the with! docs for more info, and the corresponding macros update!, with_value! and update_value!.
Often people ask about situations in which some signal needs to change based on some other signal’s value. There are three good ways to do this, and one that’s less than ideal but okay under controlled circumstances.
3) A and B are independent signals, but sometimes updated at the same time. When you make the call to update A, make a separate call to update B.
+
let (age, set_age) = create_signal(32);
+let (favorite_number, set_favorite_number) = create_signal(42);
+// use this to handle a click on a `Clear` button
+let clear_handler = move |_| {
+ set_age(0);
+ set_favorite_number(0);
+};
4) Create an effect to write to B whenever A changes. This is officially discouraged, for several reasons:
+a) It will always be less efficient, as it means every time A updates you do two full trips through the reactive process. (You set A, which causes the effect to run, as well as any other effects that depend on A. Then you set B, which causes any effects that depend on B to run.)
+b) It increases your chances of accidentally creating things like infinite loops or over-re-running effects. This is the kind of ping-ponging, reactive spaghetti code that was common in the early 2010s and that we try to avoid with things like read-write segregation and discouraging writing to signals from effects.
+
In most situations, it’s best to rewrite things such that there’s a clear, top-down data flow based on derived signals or memos. But this isn’t the end of the world.
+
+
I’m intentionally not providing an example here. Read the create_effect docs to figure out how this would work.
First things first, make sure you’ve added the leptos_router package to your dependencies.
+
+
It’s important that the router is a separate package from leptos itself. This means that everything in the router can be defined in user-land code. If you want to create your own router, or use no router, you’re completely free to do that!
+
+
And import the relevant types from the router, either with something like
+
use leptos_router::{Route, RouteProps, Router, RouterProps, Routes, RoutesProps};
Routing behavior is provided by the <Router/> component. This should usually be somewhere near the root of your application, the rest of the app.
+
+
You shouldn’t try to use multiple <Router/>s in your app. Remember that the router drives global state: if you have multiple routers, which one decides what to do when the URL changes?
+
+
Let’s start with a simple <App/> component using the router:
The <Routes/> component is where you define all the routes to which a user can navigate in your application. Each possible route is defined by a <Route/> component.
+
You should place the <Routes/> component at the location within your app where you want routes to be rendered. Everything outside <Routes/> will be present on every page, so you can leave things like a navigation bar or menu outside the <Routes/>.
Individual routes are defined by providing children to <Routes/> with the <Route/> component. <Route/> takes a path and a view. When the current location matches path, the view will be created and displayed.
+
The path can include
+
+
a static path (/users),
+
dynamic, named parameters beginning with a colon (/:id),
+
and/or a wildcard beginning with an asterisk (/user/*any)
+
+
The view is a function that returns a view. Any component with no props works here, as does a closure that returns some view.
view takes a Fn() -> impl IntoView. If a component has no props, it can be passed directly into the view. In this case, view=Home is just a shorthand for || view! { <Home/> }.
+
+
Now if you navigate to / or to /users you’ll get the home page or the <Users/>. If you go to /users/3 or /blahblah you’ll get a user profile or your 404 page (<NotFound/>). On every navigation, the router determines which <Route/> should be matched, and therefore what content should be displayed where the <Routes/> component is defined.
+
Note that you can define your routes in any order. The router scores each route to see how good a match it is, rather than simply trying to match them top to bottom.
leptos_router is based on the assumption that you have one and only one <Routes/> component in your app. It uses this to generate routes on the server side, optimize route matching by caching calculated branches, and render your application.
+
You should not conditionally render <Routes/> using another component like <Show/> or <Suspense/>.
There’s a certain amount of duplication here: /users and /users/:id. This is fine for a small app, but you can probably already tell it won’t scale well. Wouldn’t it be nice if we could nest these routes?
But wait. We’ve just subtly changed what our application does.
+
The next section is one of the most important in this entire routing section of the guide. Read it carefully, and feel free to ask questions if there’s anything you don’t understand.
Nested routes are a form of layout, not a method of route definition.
+
Let me put that another way: The goal of defining nested routes is not primarily to avoid repeating yourself when typing out the paths in your route definitions. It is actually to tell the router to display multiple <Route/>s on the page at the same time, side by side.
If I go to /users/3, the path matches <Users/> and <UserProfile/>.
+
If I go to /users, the path matches <Users/> and <NoUser/>.
+
+
When I use nested routes, in other words, each path can match multiple routes: each URL can render the views provided by multiple <Route/> components, at the same time, on the same page.
+
This may be counter-intuitive, but it’s very powerful, for reasons you’ll hopefully see in a few minutes.
Most web applications contain levels of navigation that correspond to different parts of the layout. For example, in an email app you might have a URL like /contacts/greg, which shows a list of contacts on the left of the screen, and contact details for Greg on the right of the screen. The contact list and the contact details should always appear on the screen at the same time. If there’s no contact selected, maybe you want to show a little instructional text.
+
You can easily define this with nested routes
+
<Routes>
+ <Route path="/contacts" view=ContactList>
+ <Route path=":id" view=ContactInfo/>
+ <Route path="" view=|| view! {
+ <p>"Select a contact to view more info."</p>
+ }/>
+ </Route>
+</Routes>
+
You can go even deeper. Say you want to have tabs for each contact’s address, email/phone, and your conversations with them. You can add another set of nested routes inside :id:
The main page of the Remix website, a React framework from the creators of React Router, has a great visual example if you scroll down, with three levels of nested routing: Sales > Invoices > an invoice.
Parent routes do not automatically render their nested routes. After all, they are just components; they don’t know exactly where they should render their children, and “just stick it at the end of the parent component” is not a great answer.
+
Instead, you tell a parent component where to render any nested components with an <Outlet/> component. The <Outlet/> simply renders one of two things:
+
+
if there is no nested route that has been matched, it shows nothing
+
if there is a nested route that has been matched, it shows its view
+
+
That’s all! But it’s important to know and to remember, because it’s a common source of “Why isn’t this working?” frustration. If you don’t provide an <Outlet/>, the nested route won’t be displayed.
+
#[component]
+pub fn ContactList() -> impl IntoView {
+ let contacts = todo!();
+
+ view! {
+ <div style="display: flex">
+ // the contact list
+ <For each=contacts
+ key=|contact| contact.id
+ children=|contact| todo!()
+ />
+ // the nested child, if any
+ // don’t forget this!
+ <Outlet/>
+ </div>
+ }
+}
You don’t need to define all your routes in one place if you don’t want to. You can refactor any <Route/> and its children out into a separate component.
+
For example, you can refactor the example above to use two separate components:
This second component is a #[component(transparent)], meaning it just returns its data, not a view: in this case, it's a RouteDefinition struct, which is what the <Route/> returns. As long as it is marked #[component(transparent)], this sub-route can be defined wherever you want, and inserted as a component into your tree of route definitions.
All of this is nice, conceptually, but again—what’s the big deal?
+
Performance.
+
In a fine-grained reactive library like Leptos, it’s always important to do the least amount of rendering work you can. Because we’re working with real DOM nodes and not diffing a virtual DOM, we want to “rerender” components as infrequently as possible. Nested routing makes this extremely easy.
+
Imagine my contact list example. If I navigate from Greg to Alice to Bob and back to Greg, the contact information needs to change on each navigation. But the <ContactList/> should never be rerendered. Not only does this save on rendering performance, it also maintains state in the UI. For example, if I have a search bar at the top of <ContactList/>, navigating from Greg to Alice to Bob won’t clear the search.
+
In fact, in this case, we don’t even need to rerender the <Contact/> component when moving between contacts. The router will just reactively update the :id parameter as we navigate, allowing us to make fine-grained updates. As we navigate between contacts, we’ll update single text nodes to change the contact’s name, address, and so on, without doing any additional rerendering.
+
+
This sandbox includes a couple features (like nested routing) discussed in this section and the previous one, and a couple we’ll cover in the rest of this chapter. The router is such an integrated system that it makes sense to provide a single example, so don’t be surprised if there’s anything you don’t understand.
Static paths are useful for distinguishing between different pages, but almost every application wants to pass data through the URL at some point.
+
There are two ways you can do this:
+
+
named route params like id in /users/:id
+
named route queries like q in /search?q=Foo
+
+
Because of the way URLs are built, you can access the query from any<Route/> view. You can access route params from the <Route/> that defines them or any of its nested children.
+
Accessing params and queries is pretty simple with a couple of hooks:
Each of these comes with a typed option (use_query and use_params) and an untyped option (use_query_map and use_params_map).
+
The untyped versions hold a simple key-value map. To use the typed versions, derive the Params trait on a struct.
+
+
Params is a very lightweight trait to convert a flat key-value map of strings into a struct by applying FromStr to each field. Because of the flat structure of route params and URL queries, it’s significantly less flexible than something like serde; it also adds much less weight to your binary.
Note: The Params derive macro is located at leptos::Params, and the Params trait is at leptos_router::Params. If you avoid using glob imports like use leptos::*;, make sure you’re importing the right one for the derive macro.
+
If you are not using the nightly feature, you will get the error
+
no function or associated item named `into_param` found for struct `std::string::String` in the current scope
+
+
At the moment, supporting both T: FromStr and Option<T> for typed params requires a nightly feature. You can fix this by simply changing the struct to use q: Option<String> instead of q: String.
+
+
Now we can use them in a component. Imagine a URL that has both params and a query, like /contacts/:id?q=Search.
+
The typed versions return Memo<Result<T, _>>. It’s a Memo so it reacts to changes in the URL. It’s a Result because the params or query need to be parsed from the URL, and may or may not be valid.
The untyped versions return Memo<ParamsMap>. Again, it’s memo to react to changes in the URL. ParamsMap behaves a lot like any other map type, with a .get() method that returns Option<&String>.
This can get a little messy: deriving a signal that wraps an Option<_> or Result<_> can involve a couple steps. But it’s worth doing this for two reasons:
+
+
It’s correct, i.e., it forces you to consider the cases, “What if the user doesn’t pass a value for this query field? What if they pass an invalid value?”
+
It’s performant. Specifically, when you navigate between different paths that match the same <Route/> with only params or the query changing, you can get fine-grained updates to different parts of your app without rerendering. For example, navigating between different contacts in our contact-list example does a targeted update to the name field (and eventually contact info) without needing to replace or rerender the wrapping <Contact/>. This is what fine-grained reactivity is for.
+
+
+
This is the same example from the previous section. The router is such an integrated system that it makes sense to provide a single example highlighting multiple features, even if we haven’t explained them all yet.
Client-side navigation works perfectly fine with ordinary HTML <a> elements. The router adds a listener that handles every click on a <a> element and tries to handle it on the client side, i.e., without doing another round trip to the server to request HTML. This is what enables the snappy “single-page app” navigations you’re probably familiar with from most modern web apps.
+
The router will bail out of handling an <a> click under a number of situations
+
+
the click event has had prevent_default() called on it
+
the Meta, Alt, Ctrl, or Shift keys were held during click
+
the <a> has a target or download attribute, or rel="external"
+
the link has a different origin from the current location
+
+
In other words, the router will only try to do a client-side navigation when it’s pretty sure it can handle it, and it will upgrade every <a> element to get this special behavior.
+
+
This also means that if you need to opt out of client-side routing, you can do so easily. For example, if you have a link to another page on the same domain, but which isn’t part of your Leptos app, you can just use <a rel="external"> to tell the router it isn’t something it can handle.
+
+
The router also provides an <A> component, which does two additional things:
+
+
Correctly resolves relative nested routes. Relative routing with ordinary <a> tags can be tricky. For example, if you have a route like /post/:id, <A href="1"> will generate the correct relative route, but <a href="1"> likely will not (depending on where it appears in your view.) <A/> resolves routes relative to the path of the nested route within which it appears.
+
Sets the aria-current attribute to page if this link is the active link (i.e., it’s a link to the page you’re on). This is helpful for accessibility and for styling. For example, if you want to set the link a different color if it’s a link to the page you’re currently on, you can match this attribute with a CSS selector.
Your most-used methods of navigating between pages should be with <a> and <form> elements or with the enhanced <A/> and <Form/> components. Using links and forms to navigate is the best solution for accessibility and graceful degradation.
+
On occasion, though, you’ll want to navigate programmatically, i.e., call a function that can navigate to a new page. In that case, you should use the use_navigate function.
+
let navigate = leptos_router::use_navigate();
+navigate("/somewhere", Default::default());
+
+
You should almost never do something like <button on:click=move |_| navigate(/* ... */)>. Any on:click that navigates should be an <a>, for reasons of accessibility.
+
+
The second argument here is a set of NavigateOptions, which includes options to resolve the navigation relative to the current route as the <A/> component does, replace it in the navigation stack, include some navigation state, and maintain the current scroll state on navigation.
+
+
Once again, this is the same example. Check out the relative <A/> components, and take a look at the CSS in index.html to see the ARIA-based styling.
Links and forms sometimes seem completely unrelated. But, in fact, they work in very similar ways.
+
In plain HTML, there are three ways to navigate to another page:
+
+
An <a> element that links to another page: Navigates to the URL in its href attribute with the GET HTTP method.
+
A <form method="GET">: Navigates to the URL in its action attribute with the GET HTTP method and the form data from its inputs encoded in the URL query string.
+
A <form method="POST">: Navigates to the URL in its action attribute with the POST HTTP method and the form data from its inputs encoded in the body of the request.
+
+
Since we have a client-side router, we can do client-side link navigations without reloading the page, i.e., without a full round-trip to the server and back. It makes sense that we can do client-side form navigations in the same way.
+
The router provides a <Form> component, which works like the HTML <form> element, but uses client-side navigations instead of full page reloads. <Form/> works with both GET and POST requests. With method="GET", it will navigate to the URL encoded in the form data. With method="POST" it will make a POST request and handle the server’s response.
+
<Form/> provides the basis for some components like <ActionForm/> and <MultiActionForm/> that we’ll see in later chapters. But it also enables some powerful patterns of its own.
+
For example, imagine that you want to create a search field that updates search results in real time as the user searches, without a page reload, but that also stores the search in the URL so a user can copy and paste it to share results with someone else.
+
It turns out that the patterns we’ve learned so far make this easy to implement.
+
async fn fetch_results() {
+ // some async function to fetch our search results
+}
+
+#[component]
+pub fn FormExample() -> impl IntoView {
+ // reactive access to URL query strings
+ let query = use_query_map();
+ // search stored as ?q=
+ let search = move || query().get("q").cloned().unwrap_or_default();
+ // a resource driven by the search string
+ let search_results = create_resource(search, fetch_results);
+
+ view! {
+ <Form method="GET" action="">
+ <input type="search" name="q" value=search/>
+ <input type="submit"/>
+ </Form>
+ <Transition fallback=move || ()>
+ /* render search results */
+ </Transition>
+ }
+}
+
Whenever you click Submit, the <Form/> will “navigate” to ?q={search}. But because this navigation is done on the client side, there’s no page flicker or reload. The URL query string changes, which triggers search to update. Because search is the source signal for the search_results resource, this triggers search_results to reload its resource. The <Transition/> continues displaying the current search results until the new ones have loaded. When they are complete, it switches to displaying the new result.
+
This is a great pattern. The data flow is extremely clear: all data flows from the URL to the resource into the UI. The current state of the application is stored in the URL, which means you can refresh the page or text the link to a friend and it will show exactly what you’re expecting. And once we introduce server rendering, this pattern will prove to be really fault-tolerant, too: because it uses a <form> element and URLs under the hood, it actually works really well without even loading your WASM on the client.
+
We can actually take it a step further and do something kind of clever:
You’ll notice that this version drops the Submit button. Instead, we add an oninput attribute to the input. Note that this is noton:input, which would listen for the input event and run some Rust code. Without the colon, oninput is the plain HTML attribute. So the string is actually a JavaScript string. this.form gives us the form the input is attached to. requestSubmit() fires the submit event on the <form>, which is caught by <Form/> just as if we had clicked a Submit button. Now the form will “navigate” on every keystroke or input to keep the URL (and therefore the search) perfectly in sync with the user’s input as they type.
In most cases, the path should drive what is displayed on the page. From the user’s perspective, for most applications, most major changes in the state of the app should be reflected in the URL. If you copy and paste the URL and open it in another tab, you should find yourself more or less in the same place.
+
In this sense, the router is really at the heart of the global state management for your application. More than anything else, it drives what is displayed on the page.
+
The router handles most of this work for you by mapping the current location to particular components.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/searcher.js b/searcher.js
new file mode 100644
index 0000000..d2b0aee
--- /dev/null
+++ b/searcher.js
@@ -0,0 +1,483 @@
+"use strict";
+window.search = window.search || {};
+(function search(search) {
+ // Search functionality
+ //
+ // You can use !hasFocus() to prevent keyhandling in your key
+ // event handlers while the user is typing their search.
+
+ if (!Mark || !elasticlunr) {
+ return;
+ }
+
+ //IE 11 Compatibility from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
+ if (!String.prototype.startsWith) {
+ String.prototype.startsWith = function(search, pos) {
+ return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;
+ };
+ }
+
+ var search_wrap = document.getElementById('search-wrapper'),
+ searchbar = document.getElementById('searchbar'),
+ searchbar_outer = document.getElementById('searchbar-outer'),
+ searchresults = document.getElementById('searchresults'),
+ searchresults_outer = document.getElementById('searchresults-outer'),
+ searchresults_header = document.getElementById('searchresults-header'),
+ searchicon = document.getElementById('search-toggle'),
+ content = document.getElementById('content'),
+
+ searchindex = null,
+ doc_urls = [],
+ results_options = {
+ teaser_word_count: 30,
+ limit_results: 30,
+ },
+ search_options = {
+ bool: "AND",
+ expand: true,
+ fields: {
+ title: {boost: 1},
+ body: {boost: 1},
+ breadcrumbs: {boost: 0}
+ }
+ },
+ mark_exclude = [],
+ marker = new Mark(content),
+ current_searchterm = "",
+ URL_SEARCH_PARAM = 'search',
+ URL_MARK_PARAM = 'highlight',
+ teaser_count = 0,
+
+ SEARCH_HOTKEY_KEYCODE = 83,
+ ESCAPE_KEYCODE = 27,
+ DOWN_KEYCODE = 40,
+ UP_KEYCODE = 38,
+ SELECT_KEYCODE = 13;
+
+ function hasFocus() {
+ return searchbar === document.activeElement;
+ }
+
+ function removeChildren(elem) {
+ while (elem.firstChild) {
+ elem.removeChild(elem.firstChild);
+ }
+ }
+
+ // Helper to parse a url into its building blocks.
+ function parseURL(url) {
+ var a = document.createElement('a');
+ a.href = url;
+ return {
+ source: url,
+ protocol: a.protocol.replace(':',''),
+ host: a.hostname,
+ port: a.port,
+ params: (function(){
+ var ret = {};
+ var seg = a.search.replace(/^\?/,'').split('&');
+ var len = seg.length, i = 0, s;
+ for (;i': '>',
+ '"': '"',
+ "'": '''
+ };
+ var repl = function(c) { return MAP[c]; };
+ return function(s) {
+ return s.replace(/[&<>'"]/g, repl);
+ };
+ })();
+
+ function formatSearchMetric(count, searchterm) {
+ if (count == 1) {
+ return count + " search result for '" + searchterm + "':";
+ } else if (count == 0) {
+ return "No search results for '" + searchterm + "'.";
+ } else {
+ return count + " search results for '" + searchterm + "':";
+ }
+ }
+
+ function formatSearchResult(result, searchterms) {
+ var teaser = makeTeaser(escapeHTML(result.doc.body), searchterms);
+ teaser_count++;
+
+ // The ?URL_MARK_PARAM= parameter belongs inbetween the page and the #heading-anchor
+ var url = doc_urls[result.ref].split("#");
+ if (url.length == 1) { // no anchor found
+ url.push("");
+ }
+
+ // encodeURIComponent escapes all chars that could allow an XSS except
+ // for '. Due to that we also manually replace ' with its url-encoded
+ // representation (%27).
+ var searchterms = encodeURIComponent(searchterms.join(" ")).replace(/\'/g, "%27");
+
+ return '' + result.doc.breadcrumbs + ''
+ + ''
+ + teaser + '';
+ }
+
+ function makeTeaser(body, searchterms) {
+ // The strategy is as follows:
+ // First, assign a value to each word in the document:
+ // Words that correspond to search terms (stemmer aware): 40
+ // Normal words: 2
+ // First word in a sentence: 8
+ // Then use a sliding window with a constant number of words and count the
+ // sum of the values of the words within the window. Then use the window that got the
+ // maximum sum. If there are multiple maximas, then get the last one.
+ // Enclose the terms in .
+ var stemmed_searchterms = searchterms.map(function(w) {
+ return elasticlunr.stemmer(w.toLowerCase());
+ });
+ var searchterm_weight = 40;
+ var weighted = []; // contains elements of ["word", weight, index_in_document]
+ // split in sentences, then words
+ var sentences = body.toLowerCase().split('. ');
+ var index = 0;
+ var value = 0;
+ var searchterm_found = false;
+ for (var sentenceindex in sentences) {
+ var words = sentences[sentenceindex].split(' ');
+ value = 8;
+ for (var wordindex in words) {
+ var word = words[wordindex];
+ if (word.length > 0) {
+ for (var searchtermindex in stemmed_searchterms) {
+ if (elasticlunr.stemmer(word).startsWith(stemmed_searchterms[searchtermindex])) {
+ value = searchterm_weight;
+ searchterm_found = true;
+ }
+ };
+ weighted.push([word, value, index]);
+ value = 2;
+ }
+ index += word.length;
+ index += 1; // ' ' or '.' if last word in sentence
+ };
+ index += 1; // because we split at a two-char boundary '. '
+ };
+
+ if (weighted.length == 0) {
+ return body;
+ }
+
+ var window_weight = [];
+ var window_size = Math.min(weighted.length, results_options.teaser_word_count);
+
+ var cur_sum = 0;
+ for (var wordindex = 0; wordindex < window_size; wordindex++) {
+ cur_sum += weighted[wordindex][1];
+ };
+ window_weight.push(cur_sum);
+ for (var wordindex = 0; wordindex < weighted.length - window_size; wordindex++) {
+ cur_sum -= weighted[wordindex][1];
+ cur_sum += weighted[wordindex + window_size][1];
+ window_weight.push(cur_sum);
+ };
+
+ if (searchterm_found) {
+ var max_sum = 0;
+ var max_sum_window_index = 0;
+ // backwards
+ for (var i = window_weight.length - 1; i >= 0; i--) {
+ if (window_weight[i] > max_sum) {
+ max_sum = window_weight[i];
+ max_sum_window_index = i;
+ }
+ };
+ } else {
+ max_sum_window_index = 0;
+ }
+
+ // add around searchterms
+ var teaser_split = [];
+ var index = weighted[max_sum_window_index][2];
+ for (var i = max_sum_window_index; i < max_sum_window_index+window_size; i++) {
+ var word = weighted[i];
+ if (index < word[2]) {
+ // missing text from index to start of `word`
+ teaser_split.push(body.substring(index, word[2]));
+ index = word[2];
+ }
+ if (word[1] == searchterm_weight) {
+ teaser_split.push("")
+ }
+ index = word[2] + word[0].length;
+ teaser_split.push(body.substring(word[2], index));
+ if (word[1] == searchterm_weight) {
+ teaser_split.push("")
+ }
+ };
+
+ return teaser_split.join('');
+ }
+
+ function init(config) {
+ results_options = config.results_options;
+ search_options = config.search_options;
+ searchbar_outer = config.searchbar_outer;
+ doc_urls = config.doc_urls;
+ searchindex = elasticlunr.Index.load(config.index);
+
+ // Set up events
+ searchicon.addEventListener('click', function(e) { searchIconClickHandler(); }, false);
+ searchbar.addEventListener('keyup', function(e) { searchbarKeyUpHandler(); }, false);
+ document.addEventListener('keydown', function(e) { globalKeyHandler(e); }, false);
+ // If the user uses the browser buttons, do the same as if a reload happened
+ window.onpopstate = function(e) { doSearchOrMarkFromUrl(); };
+ // Suppress "submit" events so the page doesn't reload when the user presses Enter
+ document.addEventListener('submit', function(e) { e.preventDefault(); }, false);
+
+ // If reloaded, do the search or mark again, depending on the current url parameters
+ doSearchOrMarkFromUrl();
+ }
+
+ function unfocusSearchbar() {
+ // hacky, but just focusing a div only works once
+ var tmp = document.createElement('input');
+ tmp.setAttribute('style', 'position: absolute; opacity: 0;');
+ searchicon.appendChild(tmp);
+ tmp.focus();
+ tmp.remove();
+ }
+
+ // On reload or browser history backwards/forwards events, parse the url and do search or mark
+ function doSearchOrMarkFromUrl() {
+ // Check current URL for search request
+ var url = parseURL(window.location.href);
+ if (url.params.hasOwnProperty(URL_SEARCH_PARAM)
+ && url.params[URL_SEARCH_PARAM] != "") {
+ showSearch(true);
+ searchbar.value = decodeURIComponent(
+ (url.params[URL_SEARCH_PARAM]+'').replace(/\+/g, '%20'));
+ searchbarKeyUpHandler(); // -> doSearch()
+ } else {
+ showSearch(false);
+ }
+
+ if (url.params.hasOwnProperty(URL_MARK_PARAM)) {
+ var words = decodeURIComponent(url.params[URL_MARK_PARAM]).split(' ');
+ marker.mark(words, {
+ exclude: mark_exclude
+ });
+
+ var markers = document.querySelectorAll("mark");
+ function hide() {
+ for (var i = 0; i < markers.length; i++) {
+ markers[i].classList.add("fade-out");
+ window.setTimeout(function(e) { marker.unmark(); }, 300);
+ }
+ }
+ for (var i = 0; i < markers.length; i++) {
+ markers[i].addEventListener('click', hide);
+ }
+ }
+ }
+
+ // Eventhandler for keyevents on `document`
+ function globalKeyHandler(e) {
+ if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea' || e.target.type === 'text') { return; }
+
+ if (e.keyCode === ESCAPE_KEYCODE) {
+ e.preventDefault();
+ searchbar.classList.remove("active");
+ setSearchUrlParameters("",
+ (searchbar.value.trim() !== "") ? "push" : "replace");
+ if (hasFocus()) {
+ unfocusSearchbar();
+ }
+ showSearch(false);
+ marker.unmark();
+ } else if (!hasFocus() && e.keyCode === SEARCH_HOTKEY_KEYCODE) {
+ e.preventDefault();
+ showSearch(true);
+ window.scrollTo(0, 0);
+ searchbar.select();
+ } else if (hasFocus() && e.keyCode === DOWN_KEYCODE) {
+ e.preventDefault();
+ unfocusSearchbar();
+ searchresults.firstElementChild.classList.add("focus");
+ } else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE
+ || e.keyCode === UP_KEYCODE
+ || e.keyCode === SELECT_KEYCODE)) {
+ // not `:focus` because browser does annoying scrolling
+ var focused = searchresults.querySelector("li.focus");
+ if (!focused) return;
+ e.preventDefault();
+ if (e.keyCode === DOWN_KEYCODE) {
+ var next = focused.nextElementSibling;
+ if (next) {
+ focused.classList.remove("focus");
+ next.classList.add("focus");
+ }
+ } else if (e.keyCode === UP_KEYCODE) {
+ focused.classList.remove("focus");
+ var prev = focused.previousElementSibling;
+ if (prev) {
+ prev.classList.add("focus");
+ } else {
+ searchbar.select();
+ }
+ } else { // SELECT_KEYCODE
+ window.location.assign(focused.querySelector('a'));
+ }
+ }
+ }
+
+ function showSearch(yes) {
+ if (yes) {
+ search_wrap.classList.remove('hidden');
+ searchicon.setAttribute('aria-expanded', 'true');
+ } else {
+ search_wrap.classList.add('hidden');
+ searchicon.setAttribute('aria-expanded', 'false');
+ var results = searchresults.children;
+ for (var i = 0; i < results.length; i++) {
+ results[i].classList.remove("focus");
+ }
+ }
+ }
+
+ function showResults(yes) {
+ if (yes) {
+ searchresults_outer.classList.remove('hidden');
+ } else {
+ searchresults_outer.classList.add('hidden');
+ }
+ }
+
+ // Eventhandler for search icon
+ function searchIconClickHandler() {
+ if (search_wrap.classList.contains('hidden')) {
+ showSearch(true);
+ window.scrollTo(0, 0);
+ searchbar.select();
+ } else {
+ showSearch(false);
+ }
+ }
+
+ // Eventhandler for keyevents while the searchbar is focused
+ function searchbarKeyUpHandler() {
+ var searchterm = searchbar.value.trim();
+ if (searchterm != "") {
+ searchbar.classList.add("active");
+ doSearch(searchterm);
+ } else {
+ searchbar.classList.remove("active");
+ showResults(false);
+ removeChildren(searchresults);
+ }
+
+ setSearchUrlParameters(searchterm, "push_if_new_search_else_replace");
+
+ // Remove marks
+ marker.unmark();
+ }
+
+ // Update current url with ?URL_SEARCH_PARAM= parameter, remove ?URL_MARK_PARAM and #heading-anchor .
+ // `action` can be one of "push", "replace", "push_if_new_search_else_replace"
+ // and replaces or pushes a new browser history item.
+ // "push_if_new_search_else_replace" pushes if there is no `?URL_SEARCH_PARAM=abc` yet.
+ function setSearchUrlParameters(searchterm, action) {
+ var url = parseURL(window.location.href);
+ var first_search = ! url.params.hasOwnProperty(URL_SEARCH_PARAM);
+ if (searchterm != "" || action == "push_if_new_search_else_replace") {
+ url.params[URL_SEARCH_PARAM] = searchterm;
+ delete url.params[URL_MARK_PARAM];
+ url.hash = "";
+ } else {
+ delete url.params[URL_MARK_PARAM];
+ delete url.params[URL_SEARCH_PARAM];
+ }
+ // A new search will also add a new history item, so the user can go back
+ // to the page prior to searching. A updated search term will only replace
+ // the url.
+ if (action == "push" || (action == "push_if_new_search_else_replace" && first_search) ) {
+ history.pushState({}, document.title, renderURL(url));
+ } else if (action == "replace" || (action == "push_if_new_search_else_replace" && !first_search) ) {
+ history.replaceState({}, document.title, renderURL(url));
+ }
+ }
+
+ function doSearch(searchterm) {
+
+ // Don't search the same twice
+ if (current_searchterm == searchterm) { return; }
+ else { current_searchterm = searchterm; }
+
+ if (searchindex == null) { return; }
+
+ // Do the actual search
+ var results = searchindex.search(searchterm, search_options);
+ var resultcount = Math.min(results.length, results_options.limit_results);
+
+ // Display search metrics
+ searchresults_header.innerText = formatSearchMetric(resultcount, searchterm);
+
+ // Clear and insert results
+ var searchterms = searchterm.split(' ');
+ removeChildren(searchresults);
+ for(var i = 0; i < resultcount ; i++){
+ var resultElem = document.createElement('li');
+ resultElem.innerHTML = formatSearchResult(results[i], searchterms);
+ searchresults.appendChild(resultElem);
+ }
+
+ // Display results
+ showResults(true);
+ }
+
+ fetch(path_to_root + 'searchindex.json')
+ .then(response => response.json())
+ .then(json => init(json))
+ .catch(error => { // Try to load searchindex.js if fetch failed
+ var script = document.createElement('script');
+ script.src = path_to_root + 'searchindex.js';
+ script.onload = () => init(window.search);
+ document.head.appendChild(script);
+ });
+
+ // Exported functions
+ search.hasFocus = hasFocus;
+})(window.search);
diff --git a/searchindex.js b/searchindex.js
new file mode 100644
index 0000000..dfd0e19
--- /dev/null
+++ b/searchindex.js
@@ -0,0 +1 @@
+Object.assign(window.search, {"doc_urls":["01_introduction.html#introduction","getting_started/index.html#getting-started","getting_started/index.html#hello-world-getting-set-up-for-leptos-csr-development","getting_started/leptos_dx.html#leptos-developer-experience-improvements","getting_started/leptos_dx.html#1-editor-autocompletion-inside-component-and-server","getting_started/leptos_dx.html#2-set-up-leptosfmt-with-rust-analyzer-optional","getting_started/community_crates.html#the-leptos-community-and-leptos--crates","getting_started/community_crates.html#the-community","getting_started/community_crates.html#leptos--crates","view/index.html#part-1-building-user-interfaces","view/01_basic_component.html#a-basic-component","view/01_basic_component.html#the-component-signature","view/01_basic_component.html#the-component-body","view/01_basic_component.html#the-view","view/02_dynamic_attributes.html#view-dynamic-classes-styles-and-attributes","view/02_dynamic_attributes.html#dynamic-classes","view/02_dynamic_attributes.html#dynamic-styles","view/02_dynamic_attributes.html#dynamic-attributes","view/02_dynamic_attributes.html#derived-signals","view/03_components.html#components-and-props","view/03_components.html#component-props","view/03_components.html#reactive-and-static-props","view/03_components.html#optional-props","view/03_components.html#default-props","view/03_components.html#generic-props","view/03_components.html#into-props","view/03_components.html#optional-generic-props","view/03_components.html#documenting-components","view/04_iteration.html#iteration","view/04_iteration.html#static-views-with-vec","view/04_iteration.html#dynamic-rendering-with-the--component","view/04b_iteration.html#iterating-over-more-complex-data-with","view/04b_iteration.html#the-problem","view/04b_iteration.html#option-1-change-the-key","view/04b_iteration.html#pros","view/04b_iteration.html#cons","view/04b_iteration.html#option-2-nested-signals","view/04b_iteration.html#pros-1","view/04b_iteration.html#cons-1","view/04b_iteration.html#option-3-memoized-slices","view/04b_iteration.html#pros-2","view/04b_iteration.html#cons-2","view/05_forms.html#forms-and-inputs","view/05_forms.html#controlled-inputs","view/05_forms.html#uncontrolled-inputs","view/06_control_flow.html#control-flow","view/06_control_flow.html#a-few-tips","view/06_control_flow.html#so-what","view/06_control_flow.html#if-statements","view/06_control_flow.html#option","view/06_control_flow.html#match-statements","view/06_control_flow.html#preventing-over-rendering","view/06_control_flow.html#","view/06_control_flow.html#note-type-conversions","view/07_errors.html#error-handling","view/07_errors.html#","view/08_parent_child.html#parent-child-communication","view/08_parent_child.html#1-pass-a--writesignal","view/08_parent_child.html#2-use-a-callback","view/08_parent_child.html#21-use-closure-instead-of-callback","view/08_parent_child.html#3-use-an-event-listener","view/08_parent_child.html#4-providing-a-context","view/08_parent_child.html#41-the-context-api","view/09_component_children.html#component-children","view/09_component_children.html#manipulating-children","view/builder.html#no-macros-the-view-builder-syntax","view/builder.html#performance-note","reactivity/index.html#reactivity","reactivity/working_with_signals.html#working-with-signals","reactivity/working_with_signals.html#getting-and-setting","reactivity/working_with_signals.html#making-signals-depend-on-each-other","reactivity/working_with_signals.html#good-options","reactivity/working_with_signals.html#if-you-really-must","reactivity/14_create_effect.html#responding-to-changes-with-create_effect","reactivity/14_create_effect.html#autotracking-and-dynamic-dependencies","reactivity/14_create_effect.html#effects-as-zero-cost-ish-abstraction","reactivity/14_create_effect.html#to-create_effect-or-not-to-create_effect","reactivity/14_create_effect.html#effects-and-rendering","reactivity/14_create_effect.html#explicit-cancelable-tracking-with-watch","reactivity/interlude_functions.html#interlude-reactivity-and-functions","reactivity/interlude_functions.html#functions-and-ui-frameworks","testing.html#testing-your-components","testing.html#1-test-business-logic-with-ordinary-rust-tests","testing.html#2-test-components-with-end-to-end-e2e-testing","testing.html#wasm-bindgen-test-with--counter","testing.html#wasm-bindgen-test-with-counters_stable","testing.html#playwright-with-counters_stable","testing.html#gherkincucumber-tests-with-todo_app_sqlite","testing.html#learning-more","async/index.html#working-with-async","async/10_resources.html#loading-data-with-resources","async/11_suspense.html#","async/11_suspense.html#-1","async/12_transition.html#","async/13_actions.html#mutating-data-with-actions","interlude_projecting_children.html#projecting-children","interlude_projecting_children.html#the-problem","interlude_projecting_children.html#the-details","interlude_projecting_children.html#solution","interlude_projecting_children.html#a-final-note","15_global_state.html#global-state-management","15_global_state.html#option-1-url-as-global-state","15_global_state.html#option-2-passing-signals-through-context","15_global_state.html#option-3-create-a-global-state-struct-and-slices","router/index.html#routing","router/index.html#the-basics","router/index.html#the-philosophy","router/16_routes.html#defining-routes","router/16_routes.html#getting-started","router/16_routes.html#providing-the","router/16_routes.html#defining","router/16_routes.html#conditional-routes","router/17_nested_routing.html#nested-routing","router/17_nested_routing.html#nested-routes-as-layout","router/17_nested_routing.html#why-nested-routing","router/17_nested_routing.html#","router/17_nested_routing.html#refactoring-route-definitions","router/17_nested_routing.html#nested-routing-and-performance","router/18_params_and_queries.html#params-and-queries","router/19_a.html#the--component","router/19_a.html#navigating-programmatically","router/20_form.html#the--component","interlude_styling.html#interlude-styling","interlude_styling.html#tailwindcss-utility-first-css","interlude_styling.html#stylers-compile-time-css-extraction","interlude_styling.html#styled-runtime-css-scoping","interlude_styling.html#contributions-welcome","metadata.html#metadata","metadata.html#metadata-components","metadata.html#and","metadata.html#and-1","metadata.html#metadata-and-server-rendering","csr_wrapping_up.html#wrapping-up-part-1-client-side-rendering","ssr/index.html#part-2-server-side-rendering","ssr/21_cargo_leptos.html#introducing-cargo-leptos","ssr/22_life_cycle.html#the-life-of-a-page-load","ssr/22_life_cycle.html#on-the-server","ssr/22_life_cycle.html#in-the-browser","ssr/22_life_cycle.html#client-side-navigation","ssr/23_ssr_modes.html#async-rendering-and-ssr-modes","ssr/23_ssr_modes.html#synchronous-rendering","ssr/23_ssr_modes.html#async-rendering","ssr/23_ssr_modes.html#in-order-streaming","ssr/23_ssr_modes.html#out-of-order-streaming","ssr/23_ssr_modes.html#using-ssr-modes","ssr/23_ssr_modes.html#blocking-resources","ssr/24_hydration_bugs.html#hydration-bugs--and-how-to-avoid-them","ssr/24_hydration_bugs.html#a-thought-experiment","ssr/24_hydration_bugs.html#the-potential-for-bugs","ssr/24_hydration_bugs.html#mismatches-between-server-and-client-code","ssr/24_hydration_bugs.html#not-all-client-code-can-run-on-the-server","ssr/24_hydration_bugs.html#not-all-server-code-can-run-on-the-client","server/index.html#working-with-the-server","server/25_server_functions.html#server-functions","server/25_server_functions.html#using-server-functions","server/25_server_functions.html#server-function-url-prefixes","server/25_server_functions.html#server-function-encodings","server/25_server_functions.html#server-functions-endpoint-paths","server/25_server_functions.html#an-important-note-on-security","server/25_server_functions.html#integrating-server-functions-with-leptos","server/26_extractors.html#extractors","server/26_extractors.html#server-frameworks","server/26_extractors.html#using-extractors","server/26_extractors.html#actix-extractors","server/26_extractors.html#axum-extractors","server/26_extractors.html#a-note-about-data-loading-patterns","server/27_response.html#responses-and-redirects","server/27_response.html#responseoptions","server/27_response.html#redirect","progressive_enhancement/index.html#progressive-enhancement-and-graceful-degradation","progressive_enhancement/index.html#defensive-design","progressive_enhancement/action_form.html#","progressive_enhancement/action_form.html#client-side-validation","progressive_enhancement/action_form.html#complex-inputs","deployment/index.html#deployment","deployment/index.html#general-advice","deployment/index.html#deploying-a-client-side-rendered-app","deployment/index.html#deploying-a-full-stack-app","deployment/binary_size.html#optimizing-wasm-binary-size","deployment/binary_size.html#things-to-do","deployment/binary_size.html#things-to-avoid","deployment/binary_size.html#a-final-thought","islands.html#guide-islands","islands.html#the-islands-architecture","islands.html#additional-reading","islands.html#activating-islands-mode","islands.html#using-islands","islands.html#using-islands-effectively","islands.html#unlocking-superpowers","islands.html#passing-server-children-to-islands","islands.html#passing-context-between-islands","islands.html#overview","islands.html#future-exploration","islands.html#additional-information","islands.html#demo-code","appendix_reactive_graph.html#appendix-how-does-the-reactive-system-work","appendix_reactive_graph.html#the-reactive-graph","appendix_reactive_graph.html#simple-dependencies","appendix_reactive_graph.html#splitting-branches","appendix_reactive_graph.html#reuniting-branches","appendix_reactive_graph.html#solving-the-diamond-problem","appendix_reactive_graph.html#memos-vs-signals","appendix_reactive_graph.html#memos-vs-derived-signals"],"index":{"documentStore":{"docInfo":{"0":{"body":93,"breadcrumbs":2,"title":1},"1":{"body":411,"breadcrumbs":4,"title":2},"10":{"body":95,"breadcrumbs":9,"title":2},"100":{"body":85,"breadcrumbs":6,"title":3},"101":{"body":50,"breadcrumbs":8,"title":5},"102":{"body":213,"breadcrumbs":9,"title":6},"103":{"body":802,"breadcrumbs":10,"title":7},"104":{"body":0,"breadcrumbs":2,"title":1},"105":{"body":44,"breadcrumbs":2,"title":1},"106":{"body":47,"breadcrumbs":2,"title":1},"107":{"body":0,"breadcrumbs":5,"title":2},"108":{"body":51,"breadcrumbs":5,"title":2},"109":{"body":53,"breadcrumbs":5,"title":2},"11":{"body":54,"breadcrumbs":9,"title":2},"110":{"body":180,"breadcrumbs":5,"title":2},"111":{"body":91,"breadcrumbs":5,"title":2},"112":{"body":77,"breadcrumbs":5,"title":2},"113":{"body":151,"breadcrumbs":6,"title":3},"114":{"body":131,"breadcrumbs":5,"title":2},"115":{"body":86,"breadcrumbs":4,"title":1},"116":{"body":91,"breadcrumbs":6,"title":3},"117":{"body":335,"breadcrumbs":6,"title":3},"118":{"body":535,"breadcrumbs":5,"title":2},"119":{"body":175,"breadcrumbs":2,"title":1},"12":{"body":88,"breadcrumbs":9,"title":2},"120":{"body":284,"breadcrumbs":3,"title":2},"121":{"body":567,"breadcrumbs":4,"title":2},"122":{"body":93,"breadcrumbs":4,"title":2},"123":{"body":129,"breadcrumbs":6,"title":4},"124":{"body":95,"breadcrumbs":7,"title":5},"125":{"body":42,"breadcrumbs":6,"title":4},"126":{"body":26,"breadcrumbs":4,"title":2},"127":{"body":37,"breadcrumbs":2,"title":1},"128":{"body":87,"breadcrumbs":3,"title":2},"129":{"body":60,"breadcrumbs":3,"title":2},"13":{"body":409,"breadcrumbs":8,"title":1},"130":{"body":50,"breadcrumbs":3,"title":2},"131":{"body":75,"breadcrumbs":4,"title":3},"132":{"body":195,"breadcrumbs":12,"title":7},"133":{"body":93,"breadcrumbs":10,"title":5},"134":{"body":158,"breadcrumbs":10,"title":3},"135":{"body":83,"breadcrumbs":11,"title":3},"136":{"body":159,"breadcrumbs":9,"title":1},"137":{"body":112,"breadcrumbs":9,"title":1},"138":{"body":148,"breadcrumbs":11,"title":3},"139":{"body":170,"breadcrumbs":13,"title":4},"14":{"body":68,"breadcrumbs":12,"title":5},"140":{"body":155,"breadcrumbs":11,"title":2},"141":{"body":52,"breadcrumbs":11,"title":2},"142":{"body":75,"breadcrumbs":11,"title":2},"143":{"body":199,"breadcrumbs":12,"title":3},"144":{"body":87,"breadcrumbs":12,"title":3},"145":{"body":240,"breadcrumbs":11,"title":2},"146":{"body":0,"breadcrumbs":10,"title":3},"147":{"body":177,"breadcrumbs":9,"title":2},"148":{"body":25,"breadcrumbs":9,"title":2},"149":{"body":188,"breadcrumbs":12,"title":5},"15":{"body":113,"breadcrumbs":9,"title":2},"150":{"body":143,"breadcrumbs":11,"title":4},"151":{"body":92,"breadcrumbs":11,"title":4},"152":{"body":98,"breadcrumbs":4,"title":2},"153":{"body":222,"breadcrumbs":6,"title":2},"154":{"body":284,"breadcrumbs":7,"title":3},"155":{"body":35,"breadcrumbs":8,"title":4},"156":{"body":228,"breadcrumbs":7,"title":3},"157":{"body":76,"breadcrumbs":8,"title":4},"158":{"body":45,"breadcrumbs":7,"title":3},"159":{"body":122,"breadcrumbs":8,"title":4},"16":{"body":39,"breadcrumbs":9,"title":2},"160":{"body":23,"breadcrumbs":4,"title":1},"161":{"body":102,"breadcrumbs":5,"title":2},"162":{"body":38,"breadcrumbs":5,"title":2},"163":{"body":71,"breadcrumbs":5,"title":2},"164":{"body":136,"breadcrumbs":5,"title":2},"165":{"body":122,"breadcrumbs":7,"title":4},"166":{"body":31,"breadcrumbs":6,"title":2},"167":{"body":63,"breadcrumbs":5,"title":1},"168":{"body":128,"breadcrumbs":5,"title":1},"169":{"body":225,"breadcrumbs":8,"title":4},"17":{"body":50,"breadcrumbs":9,"title":2},"170":{"body":247,"breadcrumbs":6,"title":2},"171":{"body":178,"breadcrumbs":6,"title":1},"172":{"body":48,"breadcrumbs":8,"title":3},"173":{"body":63,"breadcrumbs":7,"title":2},"174":{"body":15,"breadcrumbs":2,"title":1},"175":{"body":80,"breadcrumbs":3,"title":2},"176":{"body":46,"breadcrumbs":6,"title":5},"177":{"body":174,"breadcrumbs":5,"title":4},"178":{"body":86,"breadcrumbs":9,"title":4},"179":{"body":227,"breadcrumbs":6,"title":1},"18":{"body":322,"breadcrumbs":9,"title":2},"180":{"body":125,"breadcrumbs":7,"title":2},"181":{"body":98,"breadcrumbs":7,"title":2},"182":{"body":20,"breadcrumbs":4,"title":2},"183":{"body":151,"breadcrumbs":4,"title":2},"184":{"body":32,"breadcrumbs":4,"title":2},"185":{"body":107,"breadcrumbs":5,"title":3},"186":{"body":218,"breadcrumbs":4,"title":2},"187":{"body":112,"breadcrumbs":5,"title":3},"188":{"body":84,"breadcrumbs":4,"title":2},"189":{"body":473,"breadcrumbs":6,"title":4},"19":{"body":125,"breadcrumbs":9,"title":2},"190":{"body":167,"breadcrumbs":6,"title":4},"191":{"body":99,"breadcrumbs":3,"title":1},"192":{"body":104,"breadcrumbs":4,"title":2},"193":{"body":9,"breadcrumbs":4,"title":2},"194":{"body":141,"breadcrumbs":4,"title":2},"195":{"body":172,"breadcrumbs":8,"title":4},"196":{"body":58,"breadcrumbs":6,"title":2},"197":{"body":38,"breadcrumbs":6,"title":2},"198":{"body":105,"breadcrumbs":6,"title":2},"199":{"body":123,"breadcrumbs":6,"title":2},"2":{"body":233,"breadcrumbs":10,"title":8},"20":{"body":99,"breadcrumbs":9,"title":2},"200":{"body":280,"breadcrumbs":7,"title":3},"201":{"body":75,"breadcrumbs":7,"title":3},"202":{"body":134,"breadcrumbs":8,"title":4},"21":{"body":41,"breadcrumbs":10,"title":3},"22":{"body":77,"breadcrumbs":9,"title":2},"23":{"body":22,"breadcrumbs":9,"title":2},"24":{"body":182,"breadcrumbs":9,"title":2},"25":{"body":101,"breadcrumbs":8,"title":1},"26":{"body":141,"breadcrumbs":10,"title":3},"27":{"body":330,"breadcrumbs":9,"title":2},"28":{"body":42,"breadcrumbs":7,"title":1},"29":{"body":135,"breadcrumbs":9,"title":3},"3":{"body":24,"breadcrumbs":8,"title":4},"30":{"body":451,"breadcrumbs":9,"title":3},"31":{"body":24,"breadcrumbs":15,"title":5},"32":{"body":228,"breadcrumbs":11,"title":1},"33":{"body":40,"breadcrumbs":14,"title":4},"34":{"body":13,"breadcrumbs":11,"title":1},"35":{"body":52,"breadcrumbs":11,"title":1},"36":{"body":177,"breadcrumbs":14,"title":4},"37":{"body":16,"breadcrumbs":11,"title":1},"38":{"body":21,"breadcrumbs":11,"title":1},"39":{"body":109,"breadcrumbs":14,"title":4},"4":{"body":166,"breadcrumbs":10,"title":6},"40":{"body":12,"breadcrumbs":11,"title":1},"41":{"body":72,"breadcrumbs":11,"title":1},"42":{"body":24,"breadcrumbs":9,"title":2},"43":{"body":264,"breadcrumbs":9,"title":2},"44":{"body":400,"breadcrumbs":9,"title":2},"45":{"body":13,"breadcrumbs":9,"title":2},"46":{"body":107,"breadcrumbs":9,"title":2},"47":{"body":57,"breadcrumbs":7,"title":0},"48":{"body":28,"breadcrumbs":8,"title":1},"49":{"body":50,"breadcrumbs":8,"title":1},"5":{"body":104,"breadcrumbs":11,"title":7},"50":{"body":29,"breadcrumbs":9,"title":2},"51":{"body":143,"breadcrumbs":10,"title":3},"52":{"body":84,"breadcrumbs":8,"title":1},"53":{"body":341,"breadcrumbs":10,"title":3},"54":{"body":106,"breadcrumbs":9,"title":2},"55":{"body":231,"breadcrumbs":8,"title":1},"56":{"body":87,"breadcrumbs":11,"title":3},"57":{"body":89,"breadcrumbs":11,"title":3},"58":{"body":109,"breadcrumbs":11,"title":3},"59":{"body":72,"breadcrumbs":13,"title":5},"6":{"body":0,"breadcrumbs":10,"title":4},"60":{"body":112,"breadcrumbs":12,"title":4},"61":{"body":160,"breadcrumbs":11,"title":3},"62":{"body":492,"breadcrumbs":11,"title":3},"63":{"body":178,"breadcrumbs":10,"title":2},"64":{"body":264,"breadcrumbs":10,"title":2},"65":{"body":335,"breadcrumbs":13,"title":4},"66":{"body":84,"breadcrumbs":11,"title":2},"67":{"body":38,"breadcrumbs":2,"title":1},"68":{"body":11,"breadcrumbs":5,"title":2},"69":{"body":277,"breadcrumbs":5,"title":2},"7":{"body":104,"breadcrumbs":7,"title":1},"70":{"body":20,"breadcrumbs":7,"title":4},"71":{"body":86,"breadcrumbs":5,"title":2},"72":{"body":98,"breadcrumbs":4,"title":1},"73":{"body":160,"breadcrumbs":7,"title":3},"74":{"body":103,"breadcrumbs":7,"title":3},"75":{"body":121,"breadcrumbs":9,"title":5},"76":{"body":53,"breadcrumbs":6,"title":2},"77":{"body":91,"breadcrumbs":6,"title":2},"78":{"body":360,"breadcrumbs":8,"title":4},"79":{"body":64,"breadcrumbs":7,"title":3},"8":{"body":77,"breadcrumbs":8,"title":2},"80":{"body":233,"breadcrumbs":7,"title":3},"81":{"body":15,"breadcrumbs":3,"title":2},"82":{"body":104,"breadcrumbs":8,"title":7},"83":{"body":21,"breadcrumbs":8,"title":7},"84":{"body":83,"breadcrumbs":5,"title":4},"85":{"body":38,"breadcrumbs":5,"title":4},"86":{"body":55,"breadcrumbs":3,"title":2},"87":{"body":103,"breadcrumbs":4,"title":3},"88":{"body":22,"breadcrumbs":3,"title":2},"89":{"body":59,"breadcrumbs":3,"title":2},"9":{"body":65,"breadcrumbs":10,"title":5},"90":{"body":331,"breadcrumbs":7,"title":3},"91":{"body":193,"breadcrumbs":3,"title":1},"92":{"body":156,"breadcrumbs":3,"title":1},"93":{"body":179,"breadcrumbs":3,"title":1},"94":{"body":497,"breadcrumbs":5,"title":3},"95":{"body":12,"breadcrumbs":5,"title":2},"96":{"body":111,"breadcrumbs":4,"title":1},"97":{"body":60,"breadcrumbs":4,"title":1},"98":{"body":103,"breadcrumbs":4,"title":1},"99":{"body":135,"breadcrumbs":5,"title":2}},"docs":{"0":{"body":"This book is intended as an introduction to the Leptos Web framework. It will walk through the fundamental concepts you need to build applications, beginning with a simple application rendered in the browser, and building toward a full-stack application with server-side rendering and hydration. The guide doesn’t assume you know anything about fine-grained reactivity or the details of modern Web frameworks. It does assume you are familiar with the Rust programming language, HTML, CSS, and the DOM and basic Web APIs. Leptos is most similar to frameworks like Solid (JavaScript) and Sycamore (Rust). There are some similarities to other frameworks like React (JavaScript), Svelte (JavaScript), Yew (Rust), and Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to understand Leptos. You can find more detailed docs for each part of the API at Docs.rs . The source code for the book is available here . PRs for typos or clarification are always welcome.","breadcrumbs":"Introduction » Introduction","id":"0","title":"Introduction"},"1":{"body":"There are two basic paths to getting started with Leptos: Client-side rendering (CSR) with Trunk - a great option if you just want to make a snappy website with Leptos, or work with a pre-existing server or API. In CSR mode, Trunk compiles your Leptos app to WebAssembly (WASM) and runs it in the browser like a typical Javascript single-page app (SPA). The advantages of Leptos CSR include faster build times and a quicker iterative development cycle, as well as a simpler mental model and more options for deploying your app. CSR apps do come with some disadvantages: initial load times for your end users are slower compared to a server-side rendering approach, and the usual SEO challenges that come along with using a JS single-page app model apply to Leptos CSR apps as well. Also note that, under the hood, an auto-generated snippet of JS is used to load the Leptos WASM bundle, so JS must be enabled on the client device for your CSR app to display properly. As with all software engineering, there are trade-offs here you'll need to consider. Full-stack, server-side rendering (SSR) with cargo-leptos - SSR is a great option for building CRUD-style websites and custom web apps if you want Rust powering both your frontend and backend. With the Leptos SSR option, your app is rendered to HTML on the server and sent down to the browser; then, WebAssembly is used to instrument the HTML so your app becomes interactive - this process is called 'hydration'. On the server side, Leptos SSR apps integrate closely with your choice of either Actix-web or Axum server libraries, so you can leverage those communities' crates to help build out your Leptos server. The advantages of taking the SSR route with Leptos include helping you get the best initial load times and optimal SEO scores for your web app. SSR apps can also dramatically simplify working across the server/client boundary via a Leptos feature called \"server functions\", which lets you transparently call functions on the server from your client code (more on this feature later). Full-stack SSR isn't all rainbows and butterflies, though - disadvantages include a slower developer iteration loop (because you need to recompile both the server and client when making Rust code changes), as well as some added complexity that comes along with hydration. By the end of the book, you should have a good idea of which trade-offs to make and which route to take - CSR or SSR - depending on your project's requirements. In Part 1 of this book, we'll start with client-side rendering Leptos sites and building reactive UI's using Trunk to serve our JS and WASM bundle to the browser. We’ll introduce cargo-leptos in Part 2 of this book, which is all about working with the full power of Leptos in its full-stack, SSR mode. Note If you're coming from the Javascript world and terms like client-side rendering (CSR) and server-side rendering (SSR) are unfamiliar to you, the easiest way to understand the difference is by analogy: Leptos' CSR mode is similar to working with React (or a 'signals'-based framework like SolidJS), and focuses on producing a client-side UI which you can use with any tech stack on the server. Using Leptos' SSR mode is similar to working with a full-stack framework like Next.js in the React world (or Solid's \"SolidStart\" framework) - SSR helps you build sites and apps that are rendered on the server then sent down to the client. SSR can help to improve your site's loading performance and accessibility as well as make it easier for one person to work on both client- and server-side without needing to context-switch between different languages for frontend and backend. The Leptos framework can be used either in CSR mode to just make a UI (like React), or you can use Leptos in full-stack SSR mode (like Next.js) so that you can build both your UI and your server with one language: Rust.","breadcrumbs":"Getting Started » Getting Started","id":"1","title":"Getting Started"},"10":{"body":"That “Hello, world!” was a very simple example. Let’s move on to something a little more like an ordinary app. First, let’s edit the main function so that, instead of rendering the whole app, it just renders an component. Components are the basic unit of composition and design in most web frameworks, and Leptos is no exception. Conceptually, they are similar to HTML elements: they represent a section of the DOM, with self-contained, defined behavior. Unlike HTML elements, they are in PascalCase, so most Leptos applications will start with something like an component. fn main() { leptos::mount_to_body(|| view! { })\n} Now let’s define our component itself. Because it’s relatively simple, I’ll give you the whole thing up front, then walk through it line by line. #[component]\nfn App() -> impl IntoView { let (count, set_count) = create_signal(0); view! { }\n}","breadcrumbs":"Part 1: Building User Interfaces » A Basic Component » A Basic Component","id":"10","title":"A Basic Component"},"100":{"body":"So far, we've only been working with local state in components, and we’ve seen how to coordinate state between parent and child components. On occasion, there are times where people look for a more general solution for global state management that can work throughout an application. In general, you do not need this chapter. The typical pattern is to compose your application out of components, each of which manages its own local state, not to store all state in a global structure. However, there are some cases (like theming, saving user settings, or sharing data between components in different parts of your UI) in which you may want to use some kind of global state management. The three best approaches to global state are Using the router to drive global state via the URL Passing signals through context Creating a global state struct and creating lenses into it with create_slice","breadcrumbs":"Global State Management » Global State Management","id":"100","title":"Global State Management"},"101":{"body":"In many ways, the URL is actually the best way to store global state. It can be accessed from any component, anywhere in your tree. There are native HTML elements like