PersistedState does not write state to storage if only a nested property is changed.

[gyszalai]

Describe the bug

The #serialize method is only called in the current setter of the PersistedState class. If the state is an object with deeply nested properties and a property is changed in the 2nd or 3rd level, serialization won't run.

Reproduction

Github repo with the demonstration: https://github.com/gyszalai/runed-persisted-state-repro

Logs

System Info

System:
    OS: macOS 15.3.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 132.64 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.12.3 - ~/.nvm/versions/node/v20.18.0/bin/pnpm
  Browsers:
    Brave Browser: 133.1.75.178
    Chrome: 133.0.6943.99
    Edge: 128.0.2739.79
    Safari: 18.3
  npmPackages:
    @sveltejs/kit: ^2.16.0 => 2.17.2 
    runed: ^0.23.4 => 0.23.4 
    svelte: ^5.0.0 => 5.20.2

Severity

blocking an upgrade

[slinso]

I am currently struggling with binding to a property.

<Tabs.Root bind:active={state.property} ...

Currently this is not working. When I try to $inspect the state, changes to the active tab do not trigger any state changes.
Would your pull request fix this behaviour as well?

[gyszalai]

@slinso yes, it seems to be working perfectly.

I have a state like this:

{ "prop1": { "prop2": { "prop3": "some text" }}}

The value property of a text input is bound to the state.current.prop1.prop2.prop3 property.
If I change the value of the value of prop3 the text input value updates correctly and the value is instantly written to the storage as well.

Note that you have to bind to state.current.<property> not state.<property>

[slinso]

Thank you! Hope it gets merged soon.

Yes, I used state.current.<property> in my code, just forgot to write it.