reactivity broken (SvelteDate / new Date + setInterval)

[5P5]

Describe the bug

svelte reactivity is completely broken out of the box.

with import { SvelteDate } from 'svelte/reactivity' please see playground example.

• h1 is reactive, as reasonably expected
• h2 and h3 are both not reactive! (time not updating)
• but like h4 that is suddenly reactive?!

なに??!!
is the behavior indented?
am I missing something?

---

bonus
change playground example

- let date=new SvelteDate()
+ let date=$state(new Date())

nothing updates at all.

according to Advanced Svelte / Advanced reactivity / Reactive built-ins that should work.

Reproduction

svelte.dev/playground

Logs

No response

System Info

all not working
- Chromium Version 129.0.6668.89 (Official Build) snap (64-bit)
- Firefox 132.0b5 20241008203725 mozilla-deb
- node v18.19.0

Severity

blocking all usage of svelte

[5P5]

related issues
#13513
#12717
but those PRs did not fix

[paoloricciuti]

The reason why the last works is because it's in the same node as getTime which is reactive.

The issue here is likely that we are not creating an underlying signal on to string.

[brunnerh]

{date} not working is a known limitation. All output would need to be bloated with more explicit conversions to account for this. You are supposed to use date.toString() if you want this output.

{date.valueOf()} seems to currently not be captured by the implementation that only checks for methods beginning with get, to and set.

svelte/packages/svelte/src/reactivity/date.js

Lines 32 to 33 in 0fd1a45

	for (const method of methods) {
	if (method.startsWith('get') || method.startsWith('to')) {

valueOf could be added as special case here.

[paoloricciuti]

{date} not working is a known limitation. All output would need to be bloated with more explicit conversions to account for this.

Oh yeah i was about to write...the problem is actually that date is not reactive per se (the properties are) so when generating the code it doesn't wrap it in an effect.

[paoloricciuti]

Also what the tutorial is saying is that you need to reassign date = new Date(); to make it work without SvelteDate

Like this repl

[5P5]

Also what the tutorial is saying is that you need to reassign date = new Date(); to make it work without SvelteDate

interestingly enough like that, with the plain date object assign, h2 and h3 get updated

[paoloricciuti]

Also what the tutorial is saying is that you need to reassign date = new Date(); to make it work without SvelteDate

interestingly enough like that, with the plain date object assign, h2 and h3 get updated

Yup because you are just reassigning the whole data object

[5P5]

ah, I see.
Thanks for clarifying