How to add children to a Custom component?

[tversteeg]

I have an external library which exports Custom Elements, I'm trying to wrap these in Leptos elements like so:

#[component]
fn MdTextField(cx: Scope, #[prop(optional, into)] label: Option<String>) -> impl IntoView {
    custom(cx, Custom::new("md-outlined-text-field")).prop("label", label)
}

This works fine. But what I can't figure out is to do the same thing while also adding children:

#[component]
fn MdDialog(cx: Scope, children: Children) -> impl IntoView {
    custom(cx, Custom::new("md-dialog"))
        // This method doesn't exist
        .children(children)
}

I've scanned through the source code and documentation, but I couldn't find the proper way to pass the children.

Is this even currently possible with Custom Elements? I'm willing to create a PR for it if pointed in the right direction to start.

[gbj]

Oh yeah totally possible. The syntax in the builder to add a child or children to any element is .child(). So for example you could do

#[component]
fn MdDialog(cx: Scope, children: Children) -> impl IntoView {
    custom(cx, Custom::new("md-outlined-text-field"))
        .child(children(cx))
}

or, if you want to add each child separately without the fragment, something like

#[component]
fn MdDialog(cx: Scope, children: Children) -> impl IntoView {
    let children = children(cx);
    let el = custom(cx, Custom::new("md-outlined-text-field"));
    children
        .nodes
        .into_iter()
        .fold(el, |el, child| el.child(child))
}

BTW Are you working on a Material Design wrapper library for Leptos? I'd love to share it with the community when it's ready!

[tversteeg]

Thanks a lot! That works perfectly.

BTW Are you working on a Material Design wrapper library for Leptos? I'd love to share it with the community when it's ready!

For now I'm mainly exploring whether Leptos fits the needs of (easily) interfacing with external JS/TS libraries for a proprietary project at work. It's a 100% client side app written in Vue but the current application state handling is giving me headaches so I would love to RIIR with Leptos.

If it does, I'll explore whether it's possible to automatically generate Leptos bindings for the Material Design library. There's no way I'm manually going to maintain/implement that, since the API surface is so big and fast moving. If I can generate the bindings, I'll publicly release it, no promises though! 😁

[gbj]

Makes perfect sense! Hope you enjoy the experimentation. We have a pretty active Discord community too if that's your thing.

[tversteeg]

I'm not sure whether I should create a new issue, a new discussion or a comment for this so I'll go for a comment:

How can I make the children optional?

When I instantiate the above like this, I get a pretty unhelpful error:

<MdDialog/>

Long error

warning: use of deprecated method `material::MdDialogPropsBuilder::<((), __open, __fullscreen, __fullscreen_breakpoint, __footer_hidden, __stacked, __default_action, __action_attribute, __focus_attribute, __scrim_click_action, __escape_key_action, __modeless, __draggable)>::build`: Missing required field children
  --> src/app.rs:40:5
   |
40 | /     view! { cx,
41 | |         <h1>"Welcome to Leptos!"</h1>
42 | |         <button on:click=on_click>"Click Me: " {count}</button>
43 | |
...  |
52 | |         <MdDialog/>
53 | |     }
   | |_____^
   |
   = note: `#[warn(deprecated)]` on by default
   = note: this warning originates in the macro `view` (in Nightly builds, run with -Z macro-backtrace for more info)

error[E0061]: this method takes 1 argument but 0 arguments were supplied
    --> src/app.rs:40:5
     |
40   | /     view! { cx,
41   | |         <h1>"Welcome to Leptos!"</h1>
42   | |         <button on:click=on_click>"Click Me: " {count}</button>
43   | |
...    |
52   | |         <MdDialog/>
53   | |     }
     | |_____^ an argument of type `MdDialogPropsBuilder_Error_Missing_required_field_children` is missing
     |
note: method defined here
    --> src/material.rs:1064:1
     |
1064 | #[component]
     | ^^^^^^^^^^^^
     = note: this error originates in the macro `view` which comes from the expansion of the derive macro `::leptos::typed_builder::TypedBuilder` (in Nightly builds, run with -Z macro-backtrace for more info)
help: provide the argument
     |
53   |     }(/* MdDialogPropsBuilder_Error_Missing_required_field_children */)
     |      ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

I tried making the type Option<Children> but that requires me to wrap the whole view block in Some(..)..

[gbj]

You can make a prop optional by using #[prop(optional)]

#[component]
fn MdDialog(cx: Scope, #[prop(optional)] children: Option<Children>) -> impl IntoView {

This will use the default value (None) if it's absent, and automatically provides the wrapping Some(_) if it's present.