Components

A component is like your own custom HTML tag. It provides a way for you to centralize and re-use a snippet of HTML.

Let's generate a component to layout a customer record using a Bootstrap card class:

$ auric generate component customer-card
created src/components/customer_card.hbs
==> make
   Compiling ...
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 11.91s

The initial content of src/components/customer_card.hbs is simply {{yield}}. Let's customize it:

<div class="card text-center">
    <div class="card-body">
        {{yield}}
    </div>
</div>

If we rebuid our project, we can see that a Leptos component was generated for our component at src/generated/components/customer_card.rs:

$ make
   Compiling ...
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 11.91s

$ cat src/generated/components/customer_card.rs

use leptos::prelude::*;

#[component]
pub fn CustomerCardComponent(children: Children) -> impl IntoView {
    view! {
        <div class="card text-center">
            <div class="card-body">
                {children()}
            </div>
        </div>
    }
}

Now let's reference our new customer card component from another view:

{{!-- src/templates/customers.hbs --}}
<CustomerCard>
    Acme Widgets
</CustomerCard>

<CustomerCard>
    Standard Paper Supplies, Inc.
</CustomerCard>

If we rebuild our project, we can examine the Leptos component that was generated for the customers view, which now contains the references to the customer card component:

$ make
   Compiling ...
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 11.91s

$ cat src/generated/views/customers.rs

use leptos::prelude::*;

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

#[allow(unused)]
use crate::generated::components::{
    customer_card::CustomerCardComponent,
};

#[component]
pub fn CustomersView() -> impl IntoView {
    view! {
        <CustomerCardComponent>
            Acme Widgets
        </CustomerCardComponent>
        
        <CustomerCardComponent>
            Standard Paper Supplies, Inc.
        </CustomerCardComponent>
    }
}