Open TravelingTice opened 5 months ago
Latest commit: 3d6e5fe0667e6a18875653311a06537ae81c0c32
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
The recent update enhances the queryParam
function in a SvelteKit application to handle navigation states effectively. It now prevents updates during navigation, ensuring data consistency. A new subscription mechanism has been introduced to manage subscriptions and navigation events efficiently, providing a smoother user experience.
Files | Change Summary |
---|---|
src/lib/sveltekit-search-params.ts |
Enhanced queryParam with navigation status check to prevent updates during navigation. |
playground/src/routes/paramOnNavigateBug/+page.svelte |
Added functionality to update param2 based on changes in param1 using query parameters. |
queryParam
in a SvelteKit project with prerendering crashes the build due to url.searchParams
access issue. The enhancement in sveltekit-search-params.ts
should resolve this bug by handling navigation states effectively.šāØ
In the code's vast, green field,
A clever rabbit hopped and kneeled.
"Before we leap, let's look," it said,
Ensure no path we tread is tread."
With wisdom and a tiny grin,
It fixed the flow, so smooth within.
šš
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Name | Link |
---|---|
Latest commit | 3d6e5fe0667e6a18875653311a06537ae81c0c32 |
Latest deploy log | https://app.netlify.com/sites/sveltekit-search-params/deploys/65fbd8af5bca2400083c832f |
Deploy Preview | https://deploy-preview-73--sveltekit-search-params.netlify.app |
Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Hey thanks for the contribution...i think this could be a good idea but i'm a little worried about not unsubscribing from navigating. I think a better approach would be to subscribe to navigating inside each builder function (basically queryParam
and queryParameters
), store the unsubscribe in a variable so that you can call it togheter with the unsubscribe from the derived store.
If you need guidance on this feel free to hit me up.
Also it would be wonderful if you could write a failing test that pass after the fix, again if you need guidance on this i can help you š
Hey! Thanks and glad you like the suggested approach :) Yes subscribing globally feels a bit tricky indeed, will try to fix that. Also the test sounds good indeed! Haven't explored testing yet here so will do so when I have a bit more time on my hands. Will let you know if I run into any trouble
Also do you know why Netlify action is failing? Seems to be having trouble installing dependencies for some reason..
Hey! Thanks and glad you like the suggested approach :) Yes subscribing globally feels a bit tricky indeed, will try to fix that. Also the test sounds good indeed! Haven't explored testing yet here so will do so when I have a bit more time on my hands. Will let you know if I run into any trouble
Also do you know why Netlify action is failing? Seems to be having trouble installing dependencies for some reason..
I think they are failing because you are not in my organization but should not be a problem at all. Let me know if you need any help with testing or in general to fix this.
Actually is failing because I've updated sveltekit and netlify project is still running on node 16...will fix that
Hmm went a bit further with this one and it looks like the current solution won't solve it in the case described in https://github.com/paoloricciuti/sveltekit-search-params/issues/71. The problem is that in my app, the new query param would mount after the other one was updated. But in this case, 1 param directly depends on and is subscribed to the updates of the other param. Making updating really fast. Too fast for navigating to even start working. See some debug logs locally:
In the playground test case I added, navigating gets triggered for both param updates, before navigating state is updated
In my app, subscribing happens after navigating has started, meaning current fix will be working
I'm pretty deep in it but unfortunately not sure how to solve this one š
Hmm went a bit further with this one and it looks like the current solution won't solve it in the case described in #71. The problem is that in my app, the new query param would mount after the other one was updated. But in this case, 1 param directly depends on and is subscribed to the updates of the other param. Making updating really fast. Too fast for navigating to even start working. See some debug logs locally:
In the playground test case I added, navigating gets triggered for both param updates, before navigating state is updated
In my app, subscribing happens after navigating has started, meaning current fix will be working
I'm pretty deep in it but unfortunately not sure how to solve this one š
Mmm interesting...i will try to investigate this a bit myself. This is definitely a bit of an edge case but it's definitely something worth investing into fixing.
Ok i've investigating this a bit and yeah there's no way to wait for the navigation without disrupting the rest of the flow and there's no way to know that you want to do that just by looking at the assignment. Maybe the best option would be another api. I will try as soon as i have time.
Yeah it's definitely a very tricky one! I wish I had some more time to look into it as well.. hope you can find a nice solution..
This PR tries to solve the bug explained in issue: https://github.com/paoloricciuti/sveltekit-search-params/issues/71
The problem is that navigation is "overwritten" when there is another store update right after the previous one (for example when a component mounts that has a
bind:value
to a new store that usesqueryParam
.The way I managed to solve it is by subscribing to the
navigating
store provided by Sveltekit. This way you can know if it's currently navigating to a different url or page. Then when this is the case in the_set
action, I just subscribe to the same store again there to wait until navigating is back to false, and then perform the same_set
action. This solved it for me!Let me know if this is a viable solution. I'm no expert in Sveltekit's internals so I have no idea if this is a proper/safe fix with or without any side effects. I'm just creating a simple app that doesn't have any server routing. But this did solve it in my case.
Also I'm not sure if the same bug appears in the other provided store builder
queryParameters
. I'm not using that one but looking at the code it looks very similar, so maybe a similar fix will work there. But not sure. Let me know if this is any good šSummary by CodeRabbit
queryParam
function to handle navigation states effectively.param2
whenparam1
changes using query parameters.