How to use Messages with wrapper components?

[mdtusz]

Description

I'm submitting a question.

I'm trying to create some wrapper components that exist mostly for presentation and organization and have run into the issue that I can't make use of any events/messages in the child components since they are expecting the parent component's Message type. As a simple example:

A Foo wrapper component that does nothing but wrap children in a div with a class.

// The rest of the Component impl omitted for brevity. 
fn view(&self) -> Html<Foo> {
    html! {
        <div class="foo-class">
            {self.props.children.iter().collect::<Html<Foo>>()}
        </div>
    }
}

A Bar parent component with Message = BarMsg that wants to make use of Foo.

fn view(&self) -> Html<Bar> {
    html! {
        <Foo>
            <button class="child-1" onclick=|_| BarMsg::Click(1)>{"Button 1"}</button>
            <button class="child-2" onclick=|_| BarMsg::Click(2)>{"Button 2"}</button>
        </Foo>
    }
}

This won't work unfortunately because the compiler demands the onclick for the button's to be of the type specified for the Foo component. The desired behaviour is to "bubble" the events/messages up to the parent Bar component that is making use of the Foo component.

I've tried out a few different things with type parameters on the Foo component in order to try and get the correct Message type, but can't seem to make it work.

I'm thinking there may be some Type-Fu that I'm missing out on that will solve this, but it's no doubt an ergonomics issue for a fairly common pattern, so any help will be great and I'll be happy to make an example case for the repo if I can get things working.

[jstarry]

@mdtusz thanks for the report and apologies for the half-baked implementation. Soon I'll write up better documentation for this but as of right now:

(From #589)

Unsupported

• Passing required properties from (P) -> (C)
• Allow sending messages from (C) -> (B)

Terminology

(B) Base component that renders components nested inside each other
(P) Parent component that has a children property and can render those children
(C) Child component that is nested inside parent and included inside the Parent's children

[jstarry]

I'll have to think more about a better way to handle this 😬 open to ideas!

[jstarry]

@mdtusz I've created a PR to fix this issue. Could you please try out the branch and let me know if it fixes your problem?

[jstarry]

Fixed by #783