It would be great if custom child elements can be as ergonomic as 'children'

[Nejat]

While developing a custom Element which had three separate child sections, see multiple optional child sections, I learned, from @mrxiaozhuox, that custom children required a rsx!{ cx, div{ ... } } to be used, as documented in passing children.

This behavior is automatically mapped for the children: Element<'a> pattern.

It would be great for it to be automatically mapped for all properties defined as Element<'a> or if there is a need for flexibility, it could be opted in with an attribute, i.e. #[prop(render_rsx)] or something similar.

Current Usage

    Hero {
        body: rsx! { cx,
            div {
                class: "container center",
                figure {
                    class: "image",
                    style: "max-width: 160px;",
                    img {
                        src: "src/assets/images/logo-color.png"
                    }
                }
            }
        }
    }

Proposed Usage

    Hero {
        body: {
            div {
                class: "container center",
                figure {
                    class: "image",
                    style: "max-width: 160px;",
                    img {
                        src: "src/assets/images/logo-color.png"
                    }
                }
            }
        }
    }

thanks for considering it

[jkelleyrtp]

I think this makes sense and is totally reasonable.

In the meantime you can tear about the children manually, at the expense of type safety.

Three VNodes in an Element (header, body, footer, like you have) are assembled as a fragment.

if let Some(VNode::Fragment(frag)) = &cx.props.children {
    // you can then extract the nodes out directly.
    let [head, body, footer] = frag.children;
}

[jkelleyrtp]

There's no way we can write a parser that accepts this, unfortunately, unless we started special casing field names which ends up being more characters than just rsx! {}