[Svelte 5] Bindings to nested fields are not immediately reactive when the target is a class field.

[AgarwalPragy]

Describe the bug

Bindings for nested fields are reactive when the target is a standalone value, but not immediately reactive when the target is a class field.

Reproduction

REPL

<script>
  let val = $state({x: {y: ''}});
	
  class Value {
    x = $state({y: ''})
  }

  const obj = new Value()
</script>

<div>     reactive: <input bind:value={val.x.y} /> {val.x.y}</div>
<div>semi-reactive: <input bind:value={obj.x.y} /> {obj.x.y}</div>

Note that the 2nd binding is semi-reactive - if you change the value in 2nd input, nothing happens, until you also change the value in the 1st input.

Logs

No response

System Info

N/A

Severity

annoyance

[dummdidumm]

This works as expected - although the behavior is surprising at first.

The reason why this doesn't work in the class case is that Svelte can't see that x is a $state variable, and as such it doesn't schedule an update of obj.x when obj.x.y changes.

If you put Svelte in immutable mode you'd get the same behavior in both cases

[Rich-Harris]

(for clarity: we have some thoughts on how to make this behaviour less surprising, but it isn't public yet. bear with us)

[AgarwalPragy]

Fair enough - but combined with the fact that Runes based reactivity doesn't work for nested values outside classes either #9639, it seems to make reactivity significantly less powerful - or am I doing it all wrong?

Basically, you need to use a class if you want effects to work on nested values - but then the bindings stop working.

[Antonio-Bennett]

@dummdidumm Can I know why svelte doesn’t see that it is a $state variable

[dummdidumm]

obj.x.y refers to the obj variable. It's a regular class instance for Svelte (it doesn't follow the declaration; imagine this can also live in a separate file, Svelte can't follow that). obj.x.y to JavaScript means "invoke the getter for x set the new value for y". Therefore the variable x which is actually the $state is never set, and as such the UI does not update.

[AgarwalPragy]

Fixed by #9739