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.

https://github.com/sveltejs/svelte/blob/0fd1a4513175e90ed42ea46f21d8c641472b7c6f/packages/svelte/src/reactivity/date.js#L32-L33

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