[Embeddable] Seamless React integration

[dokmic]

Background

The current way of rendering React applications inside an embeddable widget requires the usage of the react-dom library. Because of that, we have a detached Virtual DOM tree per each widget, which may negatively impact performance.
Another downside of this approach is that we are losing the React context, and we have to reinitialize in every implementation (e.g., internationalization and theme). That causes code repetition along with growing technical debt.

Proposal

We can provide seamless integration with React by extending our contract to allow returning React elements in the render function. We can conditionally mount returned React children in the runtime or fall back to the existing approach.

class HelloWorldEmbeddable extends Embeddable {
 render() {
   return <EuiEmptyPrompt body={this.getTitle()} />;
 }
}

Additionally, we can allow third-party applications to return regular DOM nodes that will be appended to the containing node. This change should abstract us from DOM manipulation inside embeddable components.

class HelloWorldEmbeddable extends Embeddable {
 render() {
   const container = document.createElement(‘div’);
   render(<EuiEmptyPrompt body={this.getTitle()} />, container);

   return container;
 }
}

These changes should provide better interaction with React as well as a framework-agnostic way of rendering widgets. This can be done by using methods polymorphism in TypeScript and providing multiple render method overloads. In the base implementation, we can check the method’s returned value and mount that into the existing Virtual DOM tree.

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

Closing this issue again as it was covered in #143131