Svelte rune store with map is not reactive

[baseplate-admin]

Hi,

So i have this store

// modals.svelte.ts

export function createModalStore() {
	const modals = ["search"] as const;
	type IModals = (typeof modals)[number];

	let state = $state(new Map<IModals, boolean>(modals.map((item) => [item, false])));

	return {
		get state() {
			return state;
		},
		get_modal_state(name: IModals) {
			return state.get(name);
		},
		open_modal(name: IModals) {
			state.set(name, true);
		}
	};
}

I have a component

<!-- $modals/index.svelte -->
<script lang="ts">
	import { createModalStore } from "$stores/modals.svelte";

	const modal_store = createModalStore();

	$inspect(modal_store.state);
</script>

and a layout.svelte

<!-- +layout.svelte -->
<script lang='ts'>
        import { createModalStore } from "$stores/modals.svelte";
	import Modals from "$modals/index.svelte";

	const modal_store = createModalStore();
</script>

<Modals />
<button
    onclick={() => {
	    modal_store.open_modal("search");
    }}
    >
</button>

The underlying $state is changed but it's not reactive.

[brunnerh]

$state does not affect classes, only objects and arrays.
If you need a reactive Map, there is an implementation that can be imported:

import { Map } from 'svelte/reactivity';

Svelte provides reactive Map, Set, Date and URL classes. These can be imported from svelte/reactivity and used just like their native counterparts.

[baseplate-admin]

Got it, Thanks a lot