SvelteSet is not reactive

[caboe]

Describe the bug

I am not sure, if this is intended, but to me this behavior is very strange:

• create a variable with the state rune and a SvelteMap as value
• add a react rune to trigger some side effects. The changes will not be tracked, but if you wrap it with Array.from, it will.

<script>
	import { SvelteSet } from "svelte/reactivity"
	let fruits = $state(new SvelteSet(['foo', 'bar']))

	/* does not work */
	$effect(() => {
		console.log("effect", fruits)
	});

	/* works */
	$effect(() => {
		console.log("effect with Array", Array.from(fruits))
	});
</script>


<h1>Hello {JSON.stringify(Array.from(fruits))}!</h1>
<button onclick={()=>fruits.add('banana')}>Banana!</button>

Reproduction

Playground: https://svelte.dev/playground/58e91fc3d5e14fd3b08b864629c45e1c?version=5.22.4#H4sIAAAAAAAAE5WQMW_CMBCF_8pxQoojRYlYaRKJTlWHdqAbZjDhAhbBjuwDGkX575UJKAtLt9PT-74nu0ejzoRLXF-pYVoTww95xgRr3ZDH5aZH7trQCAEmz_6qbVN_ZzDBnfL0Kq-sYTLscYm5r5xuuZRGsj631jH0MI0OUDt7BokjmzlSFeur5k5iQBpiqN1Fs4cC5p4VkzB0mwxiE9XWRglEO-WibRxLE7gs21vyYCzDzbpTiOZU11SxEDEUJfQhklxZ421DaWMPQuLYkJg8NoOMh_jt6Qwq_y8X3DQfYeWc6oL2fqThyeKxME3k2fRVRpr8uCg_qGks9J_r76_Us9PmoOtOvJAMszw7Lkpp8t2F2Rqwpmp0dSp6ERfl2ErVfi-inTLKqCgeyvf7NcuzESkxQaZfxiW7Cw3b4Q_D0wPhIwIAAA==

Logs

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 154.13 MB / 32.00 GB
    Shell: 3.6.1 - /usr/local/bin/fish
  Binaries:
    Node: 22.10.0 - ~/.local/share/nvm/v22.10.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.9.0 - ~/.local/share/nvm/v22.10.0/bin/npm
    pnpm: 8.7.6 - /usr/local/bin/pnpm
    bun: 1.0.13 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.142
    Edge: 133.0.3065.92
    Firefox Nightly: 137.0a1
    Safari: 17.5
  npmPackages:
    svelte: ^5.17.0 => 5.17.0

Severity

annoyance

[Ocean-OS]

The reason for this is that since you never reassign or directly mutate the set, it is only proxied, and not turned into a $state. When you call Array.from, it iterates through the set, triggering reactivity when its items are accessed.
Like how setting properties on an object doesn't invalidate the entire object, adding items to a SvelteSet doesn't invalidate the entire set. If you want to log an object whenever deep property changes happen, use $inspect.

[paoloricciuti]

Correct...the accessing svelteset will not make the effect react to push to it...but if you access anything that involves the values (which is required for anything that is not a simple example with console.log) then it will react. Be it Array.from or set.size or looping over the set.

Closing since it works as intended, but thanks for reporting

[caboe]

OK, I see the point, but this is very misleading. When manipulating a SvelteSet (or Array, or Object), the derived values are getting updated and also the view. Only the $effect does not run, only if the variable gets processed (Array.from etc).
Maybe this should be explained more in the documentation.
But thank you for your answers.

[paoloricciuti]

OK, I see the point, but this is very misleading. When manipulating a SvelteSet (or Array, or Object), the derived values are getting updated and also the view. Only the $effect does not run, only if the variable gets processed (Array.from etc). Maybe this should be explained more in the documentation. But thank you for your answers.

If you have a derived you are accessing a value no? If you do

$effect(()=>{
    console.log(my_set.values());
});

It will update just like it you do

$effect(()=>{
    console.log(my_set.has(2));
});

How are you creating a derived that doesn't access a property?

[caboe]

The problem, I see is, that if you do not have an overview over the whole code, you might come to wrong conclusions about the behavior:

<script>
	const basicColors = $state(['white', 'black'])
        // ...

	let newColor = $state('')

	function addColor(){
		userColors.push(newColor)
		newColor = ''
	}

	function fetchColors(colors){
		console.log('Fetching products for colors', colors)
	}

	$effect(()=>{
		fetchColors(userColors)
	})

	$effect(()=>{
		fetchColors(allColors)
	})
</script>


<h1>All Colors: {allColors} {userColors} </h1>
<input type="text" bind:value={newColor}/>
<button onclick={addColor}>Add Color</button>

With this information, you do not know which effect will be executed. You might expect, that both behave the same, because in the template section both will be updated, if the value changes. But that is not the case, because of the declaration:

	let userColors = $state([])
	let allColors = $derived(basicColors.join(userColors))

I consider to have some kind of dependency watch function like this:

  const watch = (...deps) => {
    deps.forEach(dep => {
      if (Array.isArray(dep)) {
        dep.forEach(item => item); // Track each array element
        dep.length; // Track length changes
      } else if (typeof dep === 'object' && dep !== null) {
        Object.values(dep).forEach(v => v); // Track object properties
      } else {
        dep?.toString(); // Track primitives
      }
    });
  };

[paoloricciuti]

When you fetch color you access them no? If you just lot the whole array it will not work but it you actually access them then you will have a dependency on them