React in Elm with Web Components

Howdy!

At work, we have a React app that’s driving our Elm app. It’s gotten to the point where the majority of the codebase is in Elm and we’ve decided that we want all new code to be in Elm. All new pages for the past few months have been completely in Elm and all legacy pages are completely in React. We’re thinking about flipping it to make Elm drive the legacy React pages so we can stay completely within Elm rather than have to do routing/url parsing on the JS side and all other logic on the Elm side. My idea was mount each legacy React page in a web component then on the corresponding Elm page display that web component.

If anyone else has done something similar mounting React/Angular/Vue apps in web components, how did it go? Where there any major problems getting it to build, shipping, increase in bundle size, etc?

I also wrote a super simple proof of concept to see how mounting a React app in web component would work!

We evaluated several options for building web components for shared UI at work recently. Looking back on our docs from that work, React seems to have some issues firing events when it’s rendered in a custom element: https://github.com/facebook/react/issues/9242

It may be that this only happens when using shadow DOM though? The notes I still have are a bit vague. In the end we ended up not using Shadow DOM anyway, as trying to polyfill it in older browsers seemed to create more headaches than it’s worth, so you might be fine without it. (Also we ultimately chose Stencil rather than React, but that probably doesn’t matter to you).

As part of our transition to Elm we had React inside Elm for a long time (not anymore). We used custom elements only for this. I don’t think you need web components as the only important part are the custom elements. This worked really well for us, no problems whatsoever. Here is some code we had for this https://gist.github.com/sporto/627d6c895fcade2564fc7d01851371c2

2 Likes

This looks to be nicer that web components and less steps in the build process. This is exactly the kind of think I’m looking for, thanks so much!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.