You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
🐛 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 thewindow.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
So, the DatePicker component expects the
value
prop to contain an array ofCalendarDate
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 allHere'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
📝 Additional information
The text was updated successfully, but these errors were encountered: