Svelte 5: $state props are not updating in .svelte.js files when changed in component

[Razunter]

Describe the bug

There some sort of reactivity issue with .svelte.js files - component props declared with $state are not updated when changed inside of component. In the example, show state changed in component is ignored in .svelte.js and setting the value of reactive show to true doesn't trigger component update.

With $set in Svelte 4 it worked fine, $set with createClassComponent in Svelte 5 has this issue.

Reproduction

https://svelte.dev/playground/f8ad8de7487241db9eb2aa6938793f2b?version=5.1.9

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
    Memory: 28.48 GB / 31.27 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 23.1.0 - ~/.volta/tools/image/node/23.1.0/bin/node
    npm: 10.9.0 - ~/.volta/tools/image/node/23.1.0/bin/npm
    pnpm: 9.12.2 - ~/.volta/bin/pnpm
    bun: 1.1.34 - ~/.bun/bin/bun
  npmPackages:
    rollup: ^4.24.4 => 4.24.4
    svelte: ^5.1.9 => 5.1.9

Severity

blocking an upgrade

[leonidaz]

The problem is when props are destructured, you get the value of the state proxy but not the proxy itself. So, then you're just updating a plain value.

You can either pass in as an object with other keys for access, or create an object with getter and setter or pass in functions that change the state in the svelte.js. In the demo below I created a getter and setter for showModal for the props object.

Also, I wouldn't use $effect to track the open state to open the dialog and instead use a call back or an exported function. In the demo below I provided an example of the exported function, show() that would call dialog.showModal(). see docs: https://svelte.dev/docs/svelte/$effect#When-not-to-use-$effect

Playground Example:

Playground

I didn't try to mess around with the legacy component (just removed it).

[Razunter]

Well, it breaks legacy components (and Svelte 5 aims to be mostly compatible) and it's in the docs:

For $set, use $state instead to create a reactive property object and manipulate it.

https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

And it's not really reactive in this case...

[brunnerh]

The problem with the mount example is that the code is equivalent to not having a bind: on the property, so the local state is not updated and goes out of sync. Setting the property to true does not trigger anything because it is still true at that point.

This:

const modalProps = $state({ showModal: false })
mount(Modal, { target: document.body, props: modalProps })

Is essentially equivalent to:

<script>
  let showModal = $state(false);
</script>
<Modal {showModal} />

Svelte detects bindings by checking for a setter on the property, so the suggestion by @leonidaz works. Without a setter, the component keeps its own local value and only modifies that.

Maybe this should be documented in more detail.

[leonidaz]

Well, it breaks legacy components (and Svelte 5 aims to be mostly compatible) and it's in the docs:

For $set, use $state instead to create a reactive property object and manipulate it.

https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

And it's not really reactive in this case...

It seems that the legacy component via createClassComponent is implemented differently for props and when they're assigned via destructuring, the getters and setters are removed and it just becomes a regular local prop. Not sure if this is intended to be like this or this is a bug.

So, if the legacy component receives a wrapped object instead and thus destructuring doesn't affect it, like {modal: {showModal}}, then click works. the modern (svelte 5 components) should also work via a wrapper.

legacy works with an object wrapper

@trueadm don't know if you guys want to tackle it

here's a repro without an object wrapper which fires only once because the getters and setters are removed via destructuring legacy fires once

[leonidaz]

@paoloricciuti @dummdidumm @trueadm

I believe this is a bug with createClassComponent as far destructuring props and losing getters and setters can be fixed (constructor and $set) by copying the props via something like:

Object.create(
  Object.getPrototypeOf(props), 
  Object.getOwnPropertyDescriptors(props) 
)