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.

[marekdedic]

Thanks, I tried clarifying this in the docs -> #14799

[tgf9]

I'd like to improve the docs for svelte/reactivity

Yeah, having better docs would be really nice.

I've been trying to figure out how to use SvelteMap correctly. I wrote this code to figure out the behavior.

<script>
	import {SvelteMap} from "svelte/reactivity";

	let m1 = new SvelteMap();
	let m2 = new Map();

	let m3 = new SvelteMap();
	let m4 = new Map();

	$effect(() => {
		m1.set(1, {n: 1});
		m2.set(1, {n: 1});

		let e = $state({n: 1});
		m3.set(1, e);

		let ee = $state({n: 1});
		m4.set(1, ee);
	});
	
	function increment() {
		m1.get(1).n++;
		m2.get(1).n++;
		m3.get(1).n++;
		m4.get(1).n++;
	}
	function getMut() {
		const v1 = m1.get(1);
		const v2 = m2.get(1);
		const v3 = m3.get(1);
		const v4 = m4.get(1);

		v1.n++;
		v2.n++;
		v3.n++;
		v4.n++;
	}
	function getSet() {
		const v1 = m1.get(1);
		const v2 = m2.get(1);
		const v3 = m3.get(1);
		const v4 = m4.get(1);

		m1.set(1, {n: v1.n+1});
		m1.set(1, {n: v2.n+1});
		m1.set(1, {n: v3.n+1});
		m1.set(1, {n: v4.n+1});
	}

	function reassign() {
		const v1 = m1.get(1);
		const v2 = m2.get(1);
		const v3 = m3.get(1);
		const v4 = m4.get(1);
		
		const nm1 = new SvelteMap();
		const nm2 = new Map();
		const nm3 = new SvelteMap();
		const nm4 = new Map();

		v1.n++;
		v2.n++;
		v3.n++;
		v4.n++;

		nm1.set(1, v1);
		nm2.set(1, v2);
		nm3.set(1, v3);
		nm4.set(1, v4);

		m1 = nm1;
		m2 = nm2;
		m3 = nm3;
		m4 = nm4;
	}
</script>

{#if true}
	{@const v1 = m1.get(1)?.n ?? -1}
	{@const v2 = m2.get(1)?.n ?? -1}
	{@const v3 = m3.get(1)?.n ?? -1}
	{@const v4 = m4.get(1)?.n ?? -1}
	
	<p>m1: {v1}</p>
	<p>m2: {v2}</p>
	<p>m3: {v3}</p>
	<p>m4: {v4}</p>
{/if}

<button onclick={increment}>increment</button>
<button onclick={getMut}>getMut</button>
<button onclick={getSet}>getSet</button>
<button onclick={reassign}>reassign</button>

It seems like, probably for most people they should be doing:

let m = SvelteMap();
let e = $state({n: 0});
m.set(1, e);

Using SvelteMap and $state makes the following trigger updates.

let v = m.get(1);
v.n++;

If you only use SvelteMap, like this:

let m = new SvelteMap();
m.set(1, {n: 0});

Then this doesn't trigger updates.

let v = m.get(1);
v.n++;

However, this does.

let v = m.get(1);
m.set(1, {n: v.n+1});

[marekdedic]

Thanks, I added this to the docs in #14799