`SvelteSet` reactivity breaks in reassignment

[hyunbinseo]

Describe the bug

Behaviors of 1 and 3 are inconsistent.

---

1. Works without warning:

<script lang="ts">
  import { SvelteSet } from 'svelte/reactivity';

  let ids = new SvelteSet([1]);
</script>

{#each ids as id (id)}{id}{/each}

<!-- Pressing this will render 2 above -->
<button type="button" onclick={() => (ids = new SvelteSet([2]))}>
  Update IDs
</button>

2. Breaks. Pressing the button does not render 2

<script lang="ts">
  import { SvelteSet } from 'svelte/reactivity';

  // `ids` is updated, but is not declared with `$state(...)`.
  let ids = new SvelteSet([1]);
  const count = $derived(ids.size); // added
</script>

{#each ids as id (id)}{id}{/each}

<button type="button" onclick={() => (ids = new SvelteSet([2]))}>
  Update IDs
</button>

3. Works, but results in ESLint error:

<script lang="ts">
  import { SvelteSet } from 'svelte/reactivity';

  // SvelteSet is already reactive, $state wrapping is unnecessary.
  let ids = $state(new SvelteSet([1]));
  const count = $derived(ids.size); // added
</script>

{#each ids as id (id)}{id}{/each}

<button type="button" onclick={() => (ids = new SvelteSet([2]))}>
  Update IDs
</button>

Reproduction

https://svelte.dev/playground/31fb8c5a3285467ebbed95ec40ce7d30?version=5.36.6

Severity

annoyance

[Conduitry]

1 works because the component is compiled in v4 compatibility mode, as there are no runes. If you force it into runes mode with <svelte:options runes />, the assignment stops being reactive.

The behavior in 2 sounds like what I would expect. When you're in runes mode, reassigning a non-$state() variable does not result in any reactivity.

3 is how I would suggest writing this component. The only issue here sounds like the ESLint error/warning, which should be reported in https://github.com/sveltejs/eslint-plugin-svelte

[hyunbinseo]

Thanks for the explanation.

Didn't realize no. 1 was in Svelte 4 (non-runes) mode until you pointed it out.

It does say legacy mode on VS Code as well.

Maybe an optional forced runes mode can fix this confusion?

I love how Svelte 5 is backwards compatible, but it's just too confusing.

[paoloricciuti]

Maybe an optional forced runes mode can fix this confusion?

You can do it yourself adding runes: true to your svelte config (you should probably use dynamicCompileOptions (https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) tho so that you can continue use libraries in that use legacy syntax.

[PatrickG]

About that eslint error.
This is discussed here: sveltejs/eslint-plugin-svelte#1180 & sveltejs/eslint-plugin-svelte#1154
And should get solved by this PR: sveltejs/eslint-plugin-svelte#1202
In the meantime, you can set the allowReassign option to true in your eslint config.