Rendering Solid inside another app
I work as a web developer maintaining an organisation's web portal. The portal is quite old - it's built using ASP.NET MVC 5 and Knockout, and features a lot of custom architecture. I'd like to make moves towards upgrading it to a more modern framework (and while I've picked Solid for that we may settle on something else in the end), but we have only a very small team and it's a large project - too large to port it all over to a new framework in one go. To that end, I've been experimenting with getting it to a point where we can at least use Solid to design new pages.
Our app works via a wrapper (containing a search bar and banner and so on) around a swappable module running a hash-based, file-based router. I've written a webpack config and rewritten the wrapper logic so that we can write pages in conventional, modern Solid, and then the app will dynamically import and render them when appropriate.
The issue is that to do this, I'm having to export the render function from solid-js in every root component, and then use that imported render function to render the component, and store the disposal function it returns to clear up the page once it's unloaded. I have tried numerous ways to get Solid's render function to sit in the wrapper that goes around the swappable modules, so that the user doesn't have to keep downloading the same render function every time they go to a different page, but in every attempt I've made, it's rendered correctly, but then when the disposal function is called, it doesn't actually dispose of anything - intervals continue to run, components rendered in a portal aren't disposed of, and all signals and effects continue to track. This is obviously undesirable, and I wanted to understand what's going and how to properly use the render function to render Solid within another application. What's going on and how might I get it to work better?
0 Replies