Is there a way to embed Solid into existing React project?

[mhuretski]

Hi,

Solid is outperforming React, but our React project is huge to consider refactoring it to Solid with a whole peace. Is there any relevant way to embed Solid inside React app so migration could be partial like page by page or something like this? I saw references for vite bundler, but we're using webpack.

[ryansolid]

Yeah mechanically you can use something similar to what I did in https://stackblitz.com/edit/hr-meheraj-vite-react-rr54iq?file=src%2Freactify.jsx. Like basically can just take this reactify function but bundling would take a bit of work. In webpack you could probably setup some rules based on directory for what to transform. Maybe a 2 pass build process that converts Solid first, and then bundle it into the React project. I'm not sure. You are right though if we can solve bundling then this is very doable.

[mhuretski]

Solid is only 7.6 kB gzipped, so it's not like a big deal for the majority of React projects to have it on top.
What do you think about adding something like Adoption/Integration/Migration section on https://www.solidjs.com/ with some HOW-TO user manuals describing how to integrate Solid to existing React projects? Could it potentially increase Solid popularity even more than having meta framework Solid-Start?
React community is huge and it could let more developers to use Solid in their daily work and eventually in a couple of years could let refactor the whole projects to Solid, just having navigation handled by react-router or next/remix/etc, so the last thing would be to change router to solid router or in case of next/remix to solid-start with similar routing structure and to get rid of redundant dependencies.
It feels much safer to migrate by small pieces rather than trying to wrap the whole project into something new and expect it to work the same way.
Performance-wise, wins are quite obvious when starting a new project, but full migration of existing production projects - not so much.
I managed to find vite example, but what was surprising that it took a while to find it. Like you're having this example for vite (unfortunately not for webpack but still) and if it's published it could make a real difference.