Third-party components embedding

[therustmonk]

According to #83 we need a capability to embed third-party components which lives in own lifecycle, like Ace.

[Boscop]

I'm looking forward to this. My use case is: I'm writing a game with the unrust webgl engine, and want to have a HUD GUI overlay based on html with yew (also a chat text field etc.) so I need two way communication between the yew app and the wasm game..
What would be the best way to do this? Using wasm imported/exported functions for rpc?

[samuelvanderwaal]

Missing label:

• feature

[tieje]

@hamza1311 , if this is not been solved, can you please assign this ticket to me?
Loosely related to #135

[hamza1311]

Don't portals solve this? I'm not sure what the solution here is. Do you have anything in mind, @tieje?

CC: @WorldSEnder

[tieje]

Don't portals solve this? I'm not sure what the solution here is. Do you have anything in mind, @tieje?

CC: @WorldSEnder

I don't know. Sorry, but I am still yet a learner.

[WorldSEnder]

Portals can get you there, to some degree. You could for example render something akin to

// Create your third-party component somehow, probably by calling to JS
// Should not be in the view function directly, but in use_state or the component's create
let third_party_element: web_sys::Element = todo!();
// Now, in the view function you can use a portal to let yew handle the children of that element
// These could be for example slotted
let portal_to_children = yew::html::create_portal(html! {
    <>
        <p slot="some-slot">{"I will be rendered as a child of third_party_element"}</p>
        <p slot="some-other-slot">{"E.g. 'slot' can be used with web components"}</p>
    </>
}, third_party_element.clone());
// Render both the original element, and the portal
html! {
<> 
    {portal_to_children}
    {VDom::VRef(third_party_element.into())}
</>
}

Note: I haven't thought about event propagation/bubbling with the above, but I think it should work fine.