svelte 5: stale reactive prop

[izznat]

Describe the bug

The prop is not updated even though it is changed and triggers rerender.

Reproduction

Please look at src/lib/components/Toolbar.svelte and src/routes/+page.svelte.
Reproduction

Other relevant files:

• src/lib/use-machine.svelte.ts
• src/lib/use-service.svelte.ts
• src/lib/use-snapshot.svelte.ts

Steps:

1. Open browser console
2. Click the alpha channel input that has the value of 1
3. Observe the inspection logs on the console
4. Notice that machine.state log is correctly updated but state log is not but also has updated label

Expected behavior:
state prop is updated correctly. See console panel while toggling the state in this REPL.

Logs

It's too long to fit in here, but you can see at browser console that machine.state is changed while state is not via inspect rune in Toolbar.svelte.

System Info

System:
    OS: Linux 6.6 Pop!_OS 22.04 LTS
    CPU: (8) x64 AMD Ryzen 3 5300U with Radeon Graphics
    Memory: 2.65 GB / 9.56 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 21.6.1 - ~/.proto/shims/node
    Yarn: 1.22.21 - ~/.proto/shims/yarn
    npm: 10.4.0 - ~/.proto/shims/npm
    pnpm: 8.14.3 - ~/.proto/shims/pnpm
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.40

Severity

annoyance

[7nik]

Oh, god, please use REPL and reduce the code to the minimum required to reproduce the bug. And add reproduction steps and expected and observed results (at least in brief).

Isn't it kinda correct behaviour because with machine.state, you subscribe to the object directly, while with state_ to component prop updates?

[izznat]

Added the steps to reproduce. For the REPL, I'm not able to replicate the bug behavior but I can write the REPL for expected behavior later.

[izznat]

Added the expected behavior REPL. Let me know if it's still not enough.

[izznat]

Unnecessary files have been removed from the stackblitz reproduction. Sometimes stackblitz will show you the cache instead of the updated one if you've open it before, if that's the case, please wait for a while before opening it or try different browser.

[7nik]

This is my simplification so far: https://stackblitz.com/edit/github-jbfaqz?file=src%2Froutes%2F%2Bpage.svelte

state in Toolbar seems never to receive updates. It's probably related to the fact that state is a frozen object, though I couldn't isolate this bug to REPL.

[dummdidumm]

I think this is what it boils down to. zag-js uses Reflect.ownKeys for the snapshot method.

[7nik]

Wouldn't storing metadata in a WeakMap instead of a symbol prop be better for preventing internal data leaks and edge cases like this one?

[dummdidumm]

It probably would be, yes, but WeakMap is very slow sadly.