I have a few dozens of reactive primitive values (like e.g. div_status = "frozen") which I need to pass between component/module boundaries, including +page.svelte files and svelte.js modules. These values represent changable properties of the UI, and will hence influence (a) styles as well as (b) event listeners for user interactions. It's important, that the values are reactive across the whole app. Especially, they need to be able to change during drag events, e.g. as soon an element has been dragged further than a certain offset-distance or when it is hovering a dropzone etc.
As I'm currently transforming my code base to Svelte 5, I am reassessing best practices for this use case. Currently I am relying completely on stores (however, I should add, that I have not been able to import them properly inside the svelte.js modules, so any hints are welcome, here too!).
Now, the Svelte 5 Docs suggest $state() may be used as an equivalent to stores, which simplifies a bunch of things including refactoring the code (see the docs). However, today I came to realise, that mutating primitive state (like $state("frozen")) accross component/module boundaries is quite tricky, without reassigning the variables. For example, if in module 1 I assign let div_status = $("frozen") and then in module 2 I write div_status = "fast" I would overwrite the state and hence lose all reactivity.
A way around this issue would be to use Object Arrays; either by bundling multiple related primitives together (e.g. div_status = {status: "frozen", color: "red", content: "empty"}) or by storing the values individually as div_status = {value: "frozen"} etc. This would work since div_status.value = "fast" would not reassign the reactive $state. On the other hand, this introduces more complexity. Furthermore, now I have to decide in which component I want to store/assign the initial values. I guess it would be easiest to do this in one of the top-level components and then make the $state variables accessible via either passing them as $props or via Context-API?!
Lastly, I've already come across solutions with returning set and get functions (i.e. things like { get value() { return state; }, set value(v) { state = v; } }). Here, I have to admit, that I am not really familiar with this concept (but eager to learn). Moreover, I am wondering, whether this would be an appropriate solution for my case at all, i.e. whether this would provide reactivity on a drag-level, and hence before any return function of the drag handler can be fired.
Voilà. I'd be extremely grateful for some best practice advice. I know that the answer may depend a lot on the specific use cases... so please tell me, if I shall add some more detail there.