Reactivity issue with dates

[johnnysprinkles]

Describe the bug

I'm building a calendar and I have a chain of reactivity involving Date objects that's not updating as expected. The start of the chain is a date I'm mutating so I'm using SvelteDate there, but then I'm making some derived state which just constructs new Date object (doesn't mutate) and it's not updating as expected.

Reproduction

https://svelte.dev/playground/3e983b8dfd814c0195d7389d9775f2c2?version=5.30.2

Logs

System Info

jpsimons@Johns-Mac-mini burlyweb % bunx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 15.4.1
    CPU: (8) arm64 Apple M2
    Memory: 70.14 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
    bun: 1.2.13 - ~/.bun/bin/bun
  Browsers:
    Chrome: 136.0.7103.93
    Safari: 18.4
  npmPackages:
    svelte: ^5.28.2 => 5.28.2

Severity

blocking an upgrade

[johnnysprinkles]

Note that when I coerse the date to a number (a millisecond timestamp) this all works fine. I'm not understanding why though.

See working repro case here:
https://svelte.dev/playground/189710124fe34ad291ec6a31e13a5709?version=5.30.2

[zqianem]

The SvelteDate has to be "read" in some way —

(https://svelte.dev/docs/svelte/svelte-reactivity#SvelteDate)

Reading the date (whether with methods like date.getTime() or date.toString(), or via things like Intl.DateTimeFormat) in an effect or derived will cause it to be re-evaluated when the value of the date changes.

but oddly, passing an instance of Date (which SvelteDate is) to the Date() constructor doesn't actually call valueOf(), which SvelteDate expects in order to track reads:

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#dateobject)

This is equivalent to new Date(dateObject.valueOf()), except the valueOf() method is not called.

Wrapping the SvelteDate in Number does call valueOf().

This just seems like one of those weird web platform edge cases 🤷.

[johnnysprinkles]

Yeah, I might be the only one still using the Date interface from the nineties. I actually think it's pretty simple and elegant the way you can do date arithmetic with it though. Sounds like there's nothing to change or fix in Svelte itself.

[zqianem]

Oh, that reminds of a tiny ponyfill for the upcoming ZonedDateTime I made a while back expressly for calendar math. I remember finding it kinda neat how easily Date math translated to the new API.

Agreed, there's nothing to change in Svelte for this. It may be a bit awkward once the Temporal API becomes widely available since that doesn't have mutable objects, so it wouldn't make sense to have Svelte* wrappers — maybe at that point we update the docs for SvelteDate to encourage not using it in favor of Temporal.

[johnnysprinkles]

The thing I'm building is an online scheduling system for my mobile knife sharpening business, it's coming along nicely. Once it's finished I'll see if I can get it in the monthly "built with Svelte" showcase.