Using SvelteMap with runes and stores

[marekdedic]

Hi,
I have a question about how SvelteMap (and generally all convenience classes from svelte/reactivity) should be used to offer reactive values across files.

Say I have a global storage of Foo instances with their IDs, which I would like to implement with a Map-like structure. So say I have a file src/lib/fooStorage.svelte.ts:

export const fooStorage = new Map([
  ["id1", new Foo(1)],
  ["id2", new Foo(2)],
]);

Now my question is what is the recommended way of making this reactive? I understand from the docs that I should use a SvelteMap, but is it enough on its own? (just replacing new Map with new SvelteMap) Or should I put it inside a state? (cosnt fooStorage = $state(new SvelteMap(...)))? If I am using stores (for example because the values in the map depend on another store like a query from @tanstack/svetle-query), should I put the SvelteMap inside the store? Or are those two incompatible?

If possible, I'd like to improve the docs for svelte/reactivity (willing to make a PR) to clearly state all these.

[brunnerh]

Depending on what the keys are and possibly other factors like performance, this could potentially just be a plain object wrapped in $state. If you have non-standard keys like objects/class instances, you would want the SvelteMap.

Wrapping the SvelteMap in $state is pointless because you are exporting the object and the only thing $state would add here is reactivity on reassignments which would not make sense. $state does not affect anything inside of classes such as SvelteMap.

I would not introduce new stores, they restrict you to an inferior syntax compared to runes. If you need to interact with existing stores, use fromStore to get an object that works well with $derived and $effect even outside of Svelte components (where you cannot use the store $-syntax).

[marekdedic]

Thanks for the answer, the way I understand it is:

1. It does not make sense to put a SvelteMap inside a $state (maybe outside some specific situations like a state with SvelteMap | undefined, is that correct?).
2. Still no idea whether it makes sense to use SvelteMap in a store, or just a plain Map (like Writable<Map>)

I get your point about preferring runes over stores, but that opens additional questions - if I convert a store to a $state using fromStore, will the resulting $state be reactive to the changes in the original store? Like:

<script lang="ts">
  const myStore = someFunctionThatReturnsStore();
  const myState = fromStore(myStore);
</script>

{myState.current}

<button
  onclick={() => {
    myStore.set("new value"); // Does this update the state in the component?
  }}
> Click me!</button>

(this isn't really documented in fromStore either, let's improve that)

[brunnerh]

1. SvelteMap in $state only makes sense for (re)assignments. Example:

   <svelte:options runes />
   <script>
   	import { SvelteMap } from 'svelte/reactivity';
   
   	let map = new SvelteMap();
   
   	function set() {
   		map.set(crypto.randomUUID(), new Date().toISOString());
   	}
   
   	function reassign() {
   		// requires $state, you get a warning anyway, though
   		map = new SvelteMap();
   	}
   </script>

2. The methods on a regular Map are not reactive, so if you want to use them in a reactive context in Svelte 5, it could make sense to use SvelteMap in a store. Specifics really depend on the shape and function of the store, though.

will the resulting $state be reactive to the changes in the original store?

Yes, that's the whole point.