Repository navigation
Example code/docs on interoping with other libraries/frameworks #504
Description
I have some large sveltejs projects with large components. I'd like to introduce Solidjs to more easily decompose the large components into tsx functions. Are there any good examples of embedding SolidJS into another library? It can be generalized, accounting for the compilation, dom/ssr rendering, reactive event wiring, signals, hydration, cleanup, etc.
Svelte kit, next.js, vuex are all powerful PWA libraries. Until Solidjs has a similar project, it may be useful to wrap Solidjs within one of these projects.
Reacted by Ari Seyhun
Activity
ryansolid commentedon Jun 26, 2021
Client only in theory is probably pretty simple and similar in most frameworks. You get a ref and call Solid's render function in the suitable place according to the framework.
But generalizable is hard. SSR has other constraints depending on how the host works. VDOM, strings etc..Building might be ok but like Solid and React both having JSX would be a dance. Have you ever seen examples of docs like this before? I think there are a lot of pitfalls and it would take doing the integrations and writing detailed guides for each.
ryansolid commentedon Jun 28, 2021
Yeah I don't know what to do with this one. I could have a better example around using refs to import 3rd parties but the other side is really wide open and not particularly easy if even possible. I will leave this open to gather some feedback but I don't have any plans for the moment.
btakita commentedon Jul 2, 2021
As discussed in the Help channel on discord, In the case of Sveltejs, it would be useful to have analogs to some of Svelte's concepts such as
bind:being something likeuse:bindAttribute=['value', getter, setter]Also, helper functions for interoping between Solid Signals & Svelte stores would be useful. Each library combo can have its own set of interops.
ryansolid commentedon Jul 2, 2021
Yeah I see separate packages being built for these cases. I think the contributors would need to be intimately familiar with both frameworks to do this and up to date on the latest in each of these frameworks. I'm sure there would be some people in this scenario that could really benefit from this and also be the best people to maintain the effort. I haven't seen libraries like this before as I said earlier so I don't know if there is any precedent but would look forward to supporting anyone willing to prove it out.
ryansolid commentedon Jul 26, 2021
I don't really have much in actionable items here. Solid won't integrate with existing meta frameworks directly. And interopt points with libraries depend on each library. I've seen some interesting solutions to the problem like: https://www.npmjs.com/package/react-solid-bridge
And I made these:
https://codesandbox.io/s/solid-react-hoc-8m2yd
https://codesandbox.io/s/react-solid-hoc-5lmt2
But I'm leaving it here. This is just beyond the scope of the core project to maintain I think.
fix(signals): a first load in flight stays loading through an identit…
fix(signals): latest() read inline and through a memo show the same s…