Svelte Adapter is broken for DatePicker component #2179
Description
🐛 Bug report
Since the Svelte adapter relies on the $state.snapshot
rune, it leads to unexpected behavior:
zag/packages/frameworks/svelte/src/use-service.svelte.ts
Lines 11 to 13 in 674ddb0
zag/packages/frameworks/svelte/src/use-service.svelte.ts
Lines 24 to 28 in 674ddb0
The issue arises because $state.snapshot
creates a recursive copy of the passed value using the window.structuredClone
API, which removes private properties from objects and, most importantly, their prototype.
Here is issue in Svelte project with extensive description - sveltejs/svelte#15022
But actually $state.snapshot doesn't work in cases when an external library expects to receive an instance of certain class, not just a regular object. Cause $state.snapshot actually makes a copy of object using window.structuredClone API which doesn't keep object prototype, nor private properties: Things that don't work with structured clone .
Which makes usage of $state.snapshot completely broken with libraries that actually work with classes, not an "anonymous" objects.
So, the DatePicker component expects the value
prop to contain an array of CalendarDate
class instances. However, the $state.snapshot
rune effectively removes the object prototype from the items in the "value" array, causing ZagJS to throw an error like:
Uncaught TypeError: start.toDate is not a function
.
💥 Steps to reproduce
See Stackblitz repro, it fails immediately
💻 Link to reproduction
https://stackblitz.com/edit/vitejs-vite-imndkpws?file=src%2FApp.svelte
🧐 Expected behavior
DatePicker component still work with Svelte
🧭 Possible Solution
Probably it's better to not wrap component's context
prop with $state.snapshot
rune at all
Here's how Skeleton UI project uses Zag with Svelte: https://github.com/skeletonlabs/skeleton/blob/24f798f95017b557898583dee0d4897d321e9433/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte#L79
🌍 System information
Software | Version(s) |
---|---|
Zag Version | 0.81.2 |
Browser | Chrome 131.0.6778.265 |
Operating System | Win 11 |