Component Arguments and HTML Attributes

Component Arguments

Components can be given named arguments, like this:

{{!-- src/components/customer_card.hbs --}}
<div class="card text-center">
    <div class="card-body">
        <h5 class="card-title">{{ @name }}</h5>
        <p class="card-text">
            {{yield}}
        </p>
    </div>
</div>

And then using the component from a template looks like this:

<CustomerCard @name="Acme Widgets">
    We ship to your door.
</CustomerCard>

In the generated code, the datatype of an argument is a JSON Value type, derived from the calling template. From the example above, @name="Acme Widgets" informs the Auric code generator that the name argument is a String:

// src/generated/components/customer_card.rs
// This file is @generated by auric-build.

use auric_runtime::components::*;
use leptos::prelude::*;

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

HTML Attributes

When using a component from a template, you can also pass through attributes such as class or anything else, like this:

<CustomerCard class="text-center" @name="Acme Widgets">
    We ship to your door.
</CustomerCard>

And the generated view with the calling code ends up looking like this:

// src/generated/view/customers.rs
// This file is @generated by auric-build.

use auric_runtime::components::*;
use leptos::prelude::*;

#[component]
pub fn CustomersView() -> impl IntoView {
    ...
    view! {
        <CustomerCardComponent attr:class="text-center" name="Acme Widgets".to_string()>
            "We ship to your door."
        </CustomerCardComponent>
    }
}