Svelte 5: how to make paramsPersister reactive here?

[frederikhors]

In the reproduction below the $effect is not called whenever I change filters.

Reproduction here

Since I would like to use paramsPersister like:

paramsPersister({ condition, pagination, search })

I need it to be reactive but it's not.

Is there a way?

[frederikhors]

@FoHoOV your suggestions got me here. Can you help me undestand why isn't $effect() running?

[FoHoOV]

1. you can refactor the createURL as muuuch as you like, its just plain vanilla js. The only thing here is that the caller (not the callee) will rerun whenever its dependencies change which is what you wanted as far as I understand.
2. Our lord and savior svelte has it all :D. You mean something like this?
   note that I'm not passing the signals directly, but in a closure. Passing the signal directly, will get the value of that signal at the point of invoking the function, in a sense unwrapping the signal.

let count = $state(0);	
objectChangeLogger(count);

will compile into:

let count = $.source(0);
objectChangeLogger($.get(count));

notice in the second line, its doing $.get(count), this is what I mean by "getting the value of that signal at the point of invoking the function" and which is why you can do things like console.log(count) and you don't have to manually do console.log(get(count)) everytime you need to read from it. But by passing in a closure, I will get:

objectChangeLogger(() => $.get(count));

Now whereever I invoke this closure, svelte can "see", hey this is a signal, if needed created a dependency ie. within derived, effects and etc. Why? because it will do the $.get(count) when somebody invokes the closure. I hope this was helpful and answered the question >_<

[frederikhors]

WOW! Thank you very muuuch!

Your code is almost 100% what I need: I just need one more thing: to be able to change count and something from the objectChangeLogger helper.

Example (doesn't work)

I need this because in the helper I would have the afterNavigate() to be able to read from URL params and write to those variables.

This is all I need and then I'll be happy forever!

[FoHoOV]

Currently, we are passing the getters (for example $.get), we have to also pass along the setters as well. You mean somehting like this? Or this if you want to mutate count only? As you can see, if the number of things we want to mutate grows, we would have to define bunch of getters and setters, thats why using classes are suggested in this case cuz svelte adds the setters and getters itself (I've already sent the links for this, if want to follow this pattern instead you can use those links and the docs, also there are bunch of exampels on web).
side note: I personally prefer to not mutate the page data.

[frederikhors]

Can you please write an example of objectChangeLogger Class? I can't understand how to write one!

[FoHoOV]

I really would recommend reading the docs and bunch examples out there🥺. Maybe something like this then (note that you will loose internal state, whenever derived reruns, but in your original example you don't hold any internal state so it doesn't matter)? Yet again I'm just a random dude, maybe this is not something the maintainers would suggest. This was as far as I could help. Have a great day!