React components mounted by Web components

Development
1

Hello,

we are facing many challenges regarding React mounting. We have our MountingService, which works for most of the cases, but it leaves us to solve the corner cases of mounting on ajax loaded html fragments and a lot of problems with unmounting the components correctly.

I would like to propose a better (I believe) solution of components mounting, using a webcomponents[1]. As webcomponents are native in most of modern browsers (except Edge :blush:) and has polyfills[2] for the ones, who do not support them yet (even Edge :stuck_out_tongue_winking_eye:).

That way we would move the responsibility with handling of mounts/unmounts to the browser native capabilities. That way we should be on a safe side and whole mounting/unmounting should work much smoother.

There is a POC of mine, for not making this too long, I will link it and depending on feedback I would make some deep dive. POC have got two parts:

Please share your thoughts on the topic.

[1] https://www.webcomponents.org/
[2] https://www.webcomponents.org/polyfills/

2 Likes
2

I am all for having reliable mounting that will help us add react components into existing pages. If webcomponents promise to ease our pain, I think it is worth exploring what they offer. Looking forward to see a progress in this area!

3

Thanks for bringing it up @ezr-ondrej :+1:

I love the direction of your POC and I believe it can replace our current mounting mechanism with the ruby helpers while it will simplify the way we are using react components.

+1 from me

4

As there are no complains and some :heart: I have pushed forward with PRs. Again it is structured to:

In the later is a snippet how to use the new mounter. I believe we should get more reliable and more convenient mounting support.

Any comments or suggestions how to improve the code are appreciated! :wink:

2 Likes