Cannot spread class instances as props

[sacrosanctic]

Describe the bug

Since Svelte pushes for the use of JS classes, it seems like I would also want to be able to spread them as I do with objects. Currently, it just doesn't work. There are workarounds, such as arrow functions or .bind(this) (examples in the REPL). Would like clarification on whether any of these methods are recommended.

<script>
  import Child from './Child.svelte'

  class Counter {
    count = $state(0)

    constructor(input) {
      this.count = input
    }

    onAdd() {
      this.count++
    }
  }

  const counter2 = new Counter(0)
</script>

<h2>❌ spread props</h2>
<Child {...counter2} />
<hr />

Other

Discord Thread

Reproduction

REPL

Logs

System Info

.

Severity

annoyance

[Conduitry]

A regular object spread would lose this binding, so artificially introducing it when spreading props sounds wrong to me. I'm -1 on changing anything here.

[sacrosanctic]

What's the official stance in trying to use js classes and spreading?

[Conduitry]

The official stance of who? The authors of the JS spec? Svelte doesn't need to have a stance on this.

Try doing foo = new class { bar = 5; getBar() { return this.bar; } } and then doing different sorts of spreading and destructuring.

[dummdidumm]

Agree with Conduitry here, adding special logic here would be very confusing. Imagine you see the spread working, then you extract it out to JS because you merge-spread two classes and suddenly it stops working. Or what if you spread inside an effect, or a derived? There would be too much incontinency to make this worthwhile. Therefore closing, thank you.