Difference in Behavior Between writable(...) and $state(...) with Classes

[Tb1281]

Describe the bug

It seems that writable(...) and $state(...) behave differently when used with class instances.

For example, given the following class:

class Test {
test = 0;
}

• Using writable(new Test()) makes it reactive.
• However, using $state(new Test()) does not make it reactive.

This behavior is described in the migration guide, but I wanted to confirm if this is the intended design.

If it is, should we always use writable(...) for handling reactivity with class instances?

Playground example for reference:
https://svelte.dev/playground/74b96807cf2a405984f202fe1c8a01cb?version=5.2.7

Reproduction

https://svelte.dev/playground/74b96807cf2a405984f202fe1c8a01cb?version=5.2.7

Logs

No response

System Info

All

Severity

annoyance

[brunnerh]

If the class is your code, you can just make it reactive.

// has to be a in `.svelte.js`/`.svelte.ts` file or a component
class Test {
  test = $state(0);
}

Otherwise, see this issue:

• Proposal: a way to make non-POJOs reactive #10560

... and this comment in particular.

You can of course also use a store but those have various limitations; I would generally avoid them in Svelte 5.

[dummdidumm]

Closing because, yes, it is working as designed, for the reasons pointed out above.

[Tb1281]

Yes, I can do like that. However, Class imported by other libraries are not reactive with $state(...) :(