Needed to create the single-spa-solid library

[imkgautam]

I want to combine React and Solid apps using single-spa library. In the single-spa ecosystem, most of the helper libraries available expect for solid. If someone already created the library or have any approach to combine these two apps into a single page, please let me know.

[ryansolid]

Hey I moved this to discussions since this is a little open ended. Mostly that there are a lot of different permutations and approaches. And most of this applies to all SPA frameworks and not specific to React or Solid. There are a few specifics though.

I'm going to caution you right from the start mixing SPA frameworks in any way that isn't just 2 separate mount points on the page has lot of challenges. This is true of any SPA framework. I honestly think Web Components might be the best solution even if they carry more overhead. But first I will describe the native JavaScript solution.

On the surface to embed React in Solid is pretty easy. Solid doesn't re-render so you can often just get a ref to a mount element and then just call render from react-dom as much as you need.

function SolidComponent(props) {
  let mount:
  createEffect(() => {
    // access any props or state from solid that you want to pass to the React Component and then call render
    reactDom.render(/* */)
  })
  return <div ref={mount}></div>
}

In React it is pretty similar. I actually made a codesandbox for this: https://codesandbox.io/s/solid-react-hoc-8m2yd?file=/solid-react.js. There is a real limitation here when it comes to props.children since React renders VDOM nodes and Solid renders real DOM. There is no easy way to handle this generically with the existing tools in the framework. Solid can't understand React's VDOM and would need to synchronize sub rendering. And React would need to manually insert and manage cleanup/update the DOM nodes through a useEffect call.

However in practice, this is even harder. It's a bit harder because they both use their own JSX transform. You would need to make sure that your bundler knows which files to transform to Solid and which to transform to React. TypeScript likely will also complain about conflicting JSX types because React does not play nice and hijacks the global namespace. These can be somewhat alleviated by adding pragma comment to the top of the file.

/* @jsxImportSource: solid-js */

However Solid still uses a custom compiler for JSX so you will need to still tell the bundler how to differentiate. One trick you could look at doing is setting the file extension like .react.jsx or .solid.jsx and make rules around that. That puts you on a path to custom rollup/webpack configs but could handle it. Then all you'd need to do is make a couple wrappers like I did in the codesandbox and have those not need compilation.

This is all a bit complicated so I think it comes down to optimizing for which library will be driving the app and then wrap the other framework sparingly.

The final option which might be the best is just use Web Components for interopt. Build them separately and then just pull them together. React does not play the best with Web Components though so you might need to look into limitations there around how properties are passed. Children aren't a problem as they have to be DOM nodes so at least on Solid's side being the Web Component will work well. Solid Element package could do this easily. A web component wrapper for React might already exist to handle the challenge of slotting (that's children in Web Components).

[imkgautam]

Thank you so much for such a great explanation, you've cleared my doubt.

[karfau]

while the approach you describe might be possible when using single-spa when using something they call a "parcel", the more "basic" approach is that each mounted micro frontend has it's own mount point and "owns" it's part of the DOM.
https://single-spa.js.org/docs/ecosystem provides the list of "official" framework integrations, which is what I understood from the OPs question, would be nice if it would also be available for solid-js (as in publishing a single-spa-solid[-js] package).

The purpose is to provide the glue code to mount/unmount/bootsrap solid into the dom in a consistent and configurable way, depending on the route(s) that the user is visiting.

As an example here is the code for mounting plain html/js without any framework:
https://github.com/single-spa/single-spa-html/blob/master/src/single-spa-html.js
which allows you to use it like this:
https://single-spa.js.org/docs/ecosystem-html-web-components#usage

And this is the one for preact
https://github.com/single-spa/single-spa-preact/blob/master/src/single-spa-preact.js
and the related usage docs
https://single-spa.js.org/docs/ecosystem-preact#quickstart

so while technically it's possible to come up with those things on your own, by providing a mount, unmount and bootstrap function and export them from you app entrypoint,
it would be great to know what would be the things to consider when mounting/unmounting a solid app.

I'm quite new to the framework itself, and would appreciate some guidance.

[nduartech]

So I created this, courtesy of everyone's fav GPT, but by no means should anyone use it/would love contributions if it needs refactoring/improvement: https://github.com/nduartech/single-spa-solid