Templates

Templates contain Handlebars markup laying out a snippet of HTML.

The Application Template

Every Auric application has an application template at src/templates/application.hbs, and its contents are displayed at all times. This template establishes the outer-most structure of your application layout.

The default content looks like this:

<h1>Welcome to Auric SPA!</h1>
{{outlet}}

When you build your application, a Leptos component is generated for the application template. This code representation of a template is called the View.

$ make
$ cat src/generated/views/application.rs

use leptos::prelude::*;
#[allow(unused)]
use leptos_router::{path, components::*};
#[allow(unused)]
use auric_runtime::components::*;
use crate::generated::views::{
    index::IndexView,
};

#[component]
pub fn ApplicationView() -> impl IntoView {
    view! {
        <Router>
            <Routes fallback=|| "Not found.">
                <Route path=path!("/") view=IndexView />
                <Route path=path!("/*any") view=|| view! { <h1>Not found.</h1> } />
            </Routes>

            <h1>Welcome to Auric SPA!</h1>
            <div />
        </Router>
    }
}

The Index Template

Every Auric application also has an implicit Index route, and associated template containing default {{outlet}} content. This is required by the Leptos router, which needs an IndexView to associate with the root route having path="/".

The implicit index template can be replaced with an explicit one, if you need to control the content:

$ auric generate template index
created src/templates/index.hbs

And likewise, the implicit index route can be replaced with an explicit one:

$ auric generate route index
created src/routes/index.rs
updated src/routes/mod.rs
created src/templates/index.hbs

Other Templates

Let's define a new route to display a list of customers:

$ auric generate route customers
created src/routes/customers.rs
updated src/routes/mod.rs
created src/templates/customers.hbs
==> make
   Compiling drr v0.1.0 (/Users/davidr/workspaces/drr)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 1.70s

The default content for a new template is simply {{outlet}}. But let's update the template to display a list of customers:

<h2>Customers:</h2>

{{#each this.model.customers as |customer|}}
    <li>{{customer.name}}</li>
{{/each}}

The Route at src/routes/customers.rs would then define a model() function to load the list of customers from the Store.

NOTE:

Route model() functions that return Store models is not implemented yet.

When you build your application, the Leptos CustomersView component is generated, and looks like this:

$ cat src/generated/views/customers.rs

use leptos::prelude::*;
#[allow(unused)]
use auric_runtime::components::*;

#[component]
pub fn CustomersView() -> impl IntoView {
    view! {
        <h2>Customers:</h2>
        ...
    }
}

Performance and Security

You might have noticed that Handlebars templates are only used at compile-time, and they are not bundled within your web application's wasm bundle, or rendered at runtime. Instead, they are translated at build time into Leptos components, which are compiled and statically linked into your wasm bundle. This design ensures that views are hardened, performant, and async.