SvelteSet spread into array, reactivity not passing to child components

[petermakeswebsites]

Describe the bug

It looks like when you use SvelteSet, if you use the spread directly and pass it as a prop to a child component, the reactivity breaks.

Reproduction

Press 'add one' on the repo:

<script>
	import { SvelteSet } from 'svelte/reactivity';
	import B from "./B.svelte"
	const numbers = new SvelteSet([0,1,2])
</script>

<button onclick={() => numbers.add(numbers.size)}>Add one</button> <br />

Without child component:
{[...numbers].join()}<br />

With child component:
<B numbers={[...numbers]} /><br />

Child component using `values()`:
<B numbers={[...numbers.values()]} />

B.svelte:

<script>
	let { numbers } = $props();
</script>
{numbers.join()}

Logs

No response

System Info

On REPL, Arc/Chrome

Severity

annoyance

[harrisi]

This kind of seems expected? One way around it is to use $state or $state.raw (I don't actually know when it matters with things from svelte/reactivity). Either one fixes the issue.

[petermakeswebsites]

This kind of seems expected? One way around it is to use $state or $state.raw (I don't actually know when it matters with things from svelte/reactivity). Either one fixes the issue.

There are many workarounds depending on what the goal is. But I don't see how <B numbers={[...numbers]} /> should behave differently from <B numbers={[...numbers.values()]} /> when you're iterating over the values which should be reactive in both cases.

[petermakeswebsites]

Worth noting as well that it appears that this is specifically when passing to a child component. For example deriveds work fine. The following code reacts as you'd expect, reacting and displaying the numbers as they change.

<script>
	import { SvelteSet } from 'svelte/reactivity';
	const numbers = new SvelteSet([0,1,2])
	let spread = $derived([...numbers]) // Works whether you do ...numbers or ...numbers.values(), unlike example above
</script>
<button onclick={() => numbers.add(numbers.size)}>Add one</button> <br />
{spread.join()}

[MotionlessTrain]

Interestingly, if you use <B numbers={[...numbers].map(num => num)} />, it is reactive as well. So it looks like you need to call any method to make it reactive (.values(), .join() or .map())