Can we use view! let: syntax in user components?

[abherer-constant]

Some built in components, such as For support non-prop parameters such aslet:data in the example copied below from the docs.

let (data, set_data) = create_signal(vec![0, 1, 2]);
view! {
    <For
        each=move || data.get()
        key=|n| *n
        // stores the item in each row in a variable named `data`
        let:data
    >
        <p>{data}</p>
    </For>
}

I found where these fields are read in the view macro, but I do not understand how a component can make use of them.

My question is: Is the let: syntax recommended in user defined components or should we stick to accepting a Fn(T)->impl IntoView that can then be called from within the component?

[gbj]

If you define a children prop that takes arguments, those arguments are provided in order by let:. It's always a little hard to know how best to document things like this, but it's perfectly fine to use it in your own components.

It's mostly useful for things that are similar to <For/> or <Await/>, where you would otherwise have a render prop that's similar to Fn(T) -> impl IntoView (as you say), but would rather keep it inline rather than breaking out of the JSX. It's hard to come up with good examples but the mechanics work as below.

#[component]
pub fn App() -> impl IntoView {
    view! {
        <TakesLet
            input="text"
            let:output
        >
            <p>{output}</p>
        </TakesLet>
    }
}

#[component]
pub fn TakesLet<F, V>(input: &'static str, children: F) -> impl IntoView
where
    F: FnOnce(String) -> V,
    V: IntoView,
{
    children(input.to_uppercase())
}

[abherer-constant]

That is exactly what I was looking for! Thank you for all your work!