eVinAu
Router preload and cache.set don't seem to be working
I've got an app that uses a HashRouter, and a couple of routes. The first route is a search page for events, which loads up suggested events for the user and has a form for custom searches, and then displays a list of events, and each list item is wrapped in an A component, pointed at the second route. The second route has a param for event id, and contains methods for interacting with events, as well as an A component linking back to the search page.
Following the docs, I've written a file that exports API call functions to get the list of suggested events and the data for each event, which are wrapped in the cache method. In the top level component, where the router lives, I'm importing both API methods and wrapping them in functions that pass the relevant param to each method, which then becomes the load prop for the route. Within each route, I'm importing the relevant API method and wrapping createAsync around it to create a reactive signal for the API data. I can tell it's working, because I'm seeing the right data and page loads are instant after the initial load.
However, preloads don't appear to be being triggered. The functions don't actually run when I hover over links. Also, the intent parameter is set to "native", not "navigate" when I click on an A component, which isn't what the docs say.
Additionally, when I load the data for the suggested events, I'm trying to manually cache the data for the corresponding events, using the cache.set method, by calling
cache.set(getEvent.keyFor(event.id), event) on each event returned by the API call within the getSuggestedEvents method. This doesn't seem to be working. If I call cache.set within a component, and then call getEvent afterwards, it does return the manually set data, but when I navigate to the page for that event, it's calling the API and overriding the manually set data, as if it's not aware that the cache has been set for that key.
How do I make the cache and preload behaviour work properly?4 replies
Dispose function not actually disposing of anything
I'm running Solid as a partial view inside another, non-Solid app. I've used webpack to export Solid's render function and assign it to the Window object (so i can access it from the outer app by calling window.render) and then I dynamically import the components I need and render them to a div on the page, and I hold on to the return value of the render function so I can dispose of it later. When I want to swap one component out for another, I call that dispose function, dynamically import the new component, and render that instead. The problem is that this doesn't work. When I call the dispose function, it clears out the div on the page, but it doesn't trigger any cleanup functions, so all effects keep tracking and any content rendered outside that div with portals persist.
If, instead, I export render within each component, and then import it along with the component and use that render function to render, then it does dispose properly. However, I'd like to not have to add export { render } from "solid-js/web" at the end of every file if I can avoid it.
Is there a solution for this issue that lets me render a dynamically imported component and dispose of it when I need to without having to export render in every component?
13 replies
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?
1 replies