Svelte 5: `$state` setter `this` is not the proxy

[brunnerh]

Describe the bug

Setting properties via this in a $state object does not trigger updates since the proxy gets bypassed. this is the raw object.

Should the setter function be called with the proxy as this?
(That is already the case for getters, but maybe there are some reasons not to do this, e.g. performance.)

---

Relevant code:

svelte/packages/svelte/src/internal/client/proxy.js

Lines 246 to 248 in 919e7ad

	// Set the new value before updating any signals so that any listeners get the new value
	// @ts-ignore
	target[prop] = value;

If the descriptor is checked for a set function, that could be invoked with the receiver. Something along the lines of:

var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
if (descriptor.set)
  descriptor.set.call(receiver, value);
else
  target[prop] = value;

Reproduction

<script>
  let text = $state({
    value: 'svelte',
    get uppercase() {
      return this.value.toUpperCase()
    },
    set uppercase(v) {
      this.value = v.toLowerCase()
    }
  })
</script>

<input bind:value={text.uppercase} />
<p>{text.value}</p>

REPL

Logs

No response

System Info

REPL

Severity

annoyance

[trueadm]

I benchmarked it and this does indeed add a bit of overhead for writing a new property to an array of 1000 elements with 6x CPU slowdown:

Before:
7.2ms

After:
10.3ms

I don't think it's that bad though, and correctness here is arguably more important.