reacitivity broken when using classes

[mithrendal]

Describe the bug

state rune reactivity does not work when using an object which has been "newed" from an Java or Typescript class

<script>
    class MyJSclass {
       count = 0;
    }
    let jsclazz = $state(new MyJSclass());
</script>
    
counter { jsclazz.count } 
    
<button onclick={()=>jsclazz.count++}>increase</button>

when the rune declaration

    let jsclazz = $state(new MyJSclass());  

is changed to

    let jsclazz = $state({...new MyJSclass()});  

it works as expected.

Reproduction

<script>
    class MyJSclass {
      count = 0;
    }
    let jsclazz = $state(new MyJSclass());
</script>
    
counter { jsclazz.count } 
    
<button onclick={()=>jsclazz.count++}>increase</button>

Logs

System Info

any svelte5 system, online REPL or freshly scaffolded svelte5 app

Severity

annoyance

[brunnerh]

Related/duplicate of:

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

[paoloricciuti]

Currently it work as expected and as @brunnerh said it's a duplicate of a feature request, therefore closing...thanks for reporting!

[mithrendal]

...thanks for reporting!

@paoloricciuti Thank you for the info , that the behavior is intended and that it works as expected !

So I learned that in order to get the reactivity on JS-Objects created from classes (i.e. non-POJOs) the Svelte5 recommended way

is either

   class MyClass{
      count = $state(0);
   }
   let my_obj = $state(new MyClass());  

or

  let my_obj = $state( {...new MyClass()} as MyClass )

correct ?

The latter code fragment does not need any modification of the class.

Do you think that it maybe makes sense to include it in the class section of https://svelte.dev/docs/svelte/$state ?

[paoloricciuti]

Honestly spreading classes is something very risky and this also negates the benefits of using classes in the first place because you will end up with a POJO anyway. So i would stick with using state within classes

[mithrendal]

@paoloricciuti yes I see now. 🙈 You are right, better not mention the spreading in the svelte docs. It is too risky depending in the way how you use classes.

We are fine in using POJOs. We only make classes for data structures anyway so we also can use POJOs instead. We initially used classes for data structures because it is a typescript project and it felt to us as the natural typescript way of defining them and svelte4 did not complain. Maybe better as spreading is the modern structuredClone() (only in modern browsers) which deep copies instead of shallow and therefore avoids unwanted mutation.

Anyway thanks for pinging back. ❤️Loving your work on svelte5 so far.

[brunnerh]

If you only have POJOs you don't need any of that, they can just be mutated directly and will be reactive (via proxies).

Also, spreading plain objects usually is not as much of an issue, at least you will not lose the prototype in the process (it will just be a plain object before and after). You will lose custom getters and setters, though.