Svelte 5: Nonstate reference warning is too aggressive

[Rich-Harris]

Describe the bug

#9669 introduced a warning for mutated nonstate that is referenced in the template. It shouldn't apply in cases like this, because the compiler should assume that obj.count could be an accessor:

<script>
	let count = $state(0);

	let obj = {
		get count() {
			return count;
		},
		set count(v) {
			count = v;
		}
	}

	function increment() {
		obj.count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {obj.count}
</button>

In other words it should only apply to identifiers that aren't part of a MemberExpression, and only when the value is reassigned rather than simply mutated.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE01QSw7CIBC9CiEuNBo_W9qaeA7rosWpQduhgaGJIdxdWmx1NXlv3ofB80a1YLm4eo5VB1zwS9_zHad3PwI7QEsQsdXOyJHJrTSqp3OJJbVATGqHxAq2slQRrI-bLG6-O10_48aPsKTHLF5vZqokA-QMJj5LZNilaRf98GeY64ZZPY6QKhuHkpRGplAa6OC_Kj5ln7zbgp2yrys__K7BvHZE0a1RyFbJV-GXnDCdO7FWML-ETRHJdo6f1Om7ahTcuSDjINzCB3wP_0BfAQAA

Logs

No response

System Info

next

Severity

annoyance

[sockmaster27]

I'm also getting this warning on a TypeScript enum:

<script lang="ts">
  enum Which {
    First,
    Second,
  }
  let which = $state(Which.First);
</script>

<button onclick={(): void => {
        which = Which.Second;
    }}>
    {which}
</button>

warning  Which is updated, but is not declared with $state(...). Changing its value will not correctly trigger updates.(non-state-reference)  svelte/valid-compile

I'm only getting it from eslint and not Svelte itself though.

[thorsby]

I'm seeing the same warning with the below simplified example.
It's used to wrap an external library as a component.

<script>
let ref;
let grid;
grid = new Grid(ref);
</script>

<div bind:this={ref} />

The warning is both in the compiler and Svelte extension for VSC.
ref is updated, but is not declared with $state(...). Changing its value will not correctly trigger updates.

System info
svelte@5.0.0-next.27

[gregmulvaney]

Way to aggressive. Dom refs don't need to be reactive. Even the listed examples in Svelte 5 docs disagree with compiler and eslint warnings.

https://component-party.dev/?f=svelte4,svelte5#dom-ref

[trueadm]

This has been fixed.

[eunukasiko]

Still seeing this for enum which is declared in <script lang="ts" context="module"> block

[quinnvaughn]

It has not been fixed for DOM elements being binded @trueadm

[Rich-Harris]

Can you provide a repro in the playground?

[cmendoza-cs]

Experiencing this issue as well, the repro looks like this, though I don't think the playground shows those kinds of link warnings (or does it?):
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE0VPTWvDMAz9K0Ls0LJAumuaFHbYP9itGTRxlEbMkUMsrwzj_z6cQHfU-9J7EUe25LG6RpRuJqzwfVmwQP1d8uF_yCphgd6F1WSk9mblRS-ttGpJwbggCg28eO2UDqfjuZXMjUGMshNgMSvNJHo4QsxMq7vntYG3LNa0O3Jar_Jhz1CW8DmxB8tCcCf1oBPBo1uF5Q5DIFC3QbeeZah0Yn-Dnqx7tFKX_w2l7oOqE3BiLJvvJj7bJHham7i9TdumTecriFvJlPP2jAsWOLuBR6YBK10Dpa_0B4kJDiNAAQAA

Anyway, this is what it looks like on my editor

[paoloricciuti]

Experiencing this issue as well, the repro looks like this, though I don't think the playground shows those kinds of link warnings (or does it?): https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE0VPTWvDMAz9K0Ls0LJAumuaFHbYP9itGTRxlEbMkUMsrwzj_z6cQHfU-9J7EUe25LG6RpRuJqzwfVmwQP1d8uF_yCphgd6F1WSk9mblRS-ttGpJwbggCg28eO2UDqfjuZXMjUGMshNgMSvNJHo4QsxMq7vntYG3LNa0O3Jar_Jhz1CW8DmxB8tCcCf1oBPBo1uF5Q5DIFC3QbeeZah0Yn-Dnqx7tFKX_w2l7oOqE3BiLJvvJj7bJHham7i9TdumTecriFvJlPP2jAsWOLuBR6YBK10Dpa_0B4kJDiNAAQAA

Anyway, this is what it looks like on my editor

It should...can you check which version of svelte you are using locally?

[cmendoza-cs]

It should...can you check which version of svelte you are using locally?

I currently have 5.0.0-next.210