Skip to content

svelte 5: non enumerable property is removed in unstate #10315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
izznat opened this issue Jan 27, 2024 · 5 comments · Fixed by #10348
Closed

svelte 5: non enumerable property is removed in unstate #10315

izznat opened this issue Jan 27, 2024 · 5 comments · Fixed by #10348

Comments

@izznat
Copy link

izznat commented Jan 27, 2024 •
edited
Loading

Describe the bug

Invoking unstate inside $derived results to a nested prop value removed.

Reproduction

Please look at the +page.svelte file in the repo below.
Reproduction

Steps:

  1. Open browser console, the error will occurs immediately.

Logs

+page.svelte:14 (3) ['hue', 'saturation', 'lightness']
+page.svelte:15 (3) ['hue', 'saturation', 'lightness'] 'unstate'
@zag-js_color-picker.js?v=0cf62db1:3391 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getChannels')
    at getAreaChannels (@zag-js_color-picker.js?v=0cf62db1:3391:32)
    at Object.getAreaProps (@zag-js_color-picker.js?v=0cf62db1:3519:38)
    at +page.svelte:43:26
    at chunk-QT3JEXLR.js?v=437d8e57:2652:47
    at execute_signal_fn (chunk-MPTA7GKG.js?v=437d8e57:539:7)
    at execute_effect (chunk-MPTA7GKG.js?v=437d8e57:668:31)
    at schedule_effect (chunk-MPTA7GKG.js?v=437d8e57:740:5)
    at internal_create_effect (chunk-MPTA7GKG.js?v=437d8e57:1243:5)
    at render_effect (chunk-MPTA7GKG.js?v=437d8e57:1315:10)
    at Module.spread_attributes_effect (chunk-QT3JEXLR.js?v=437d8e57:2651:3)

System Info

System:
    OS: Linux 6.6 Pop!_OS 22.04 LTS
    CPU: (8) x64 AMD Ryzen 3 5300U with Radeon Graphics
    Memory: 2.48 GB / 9.56 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 21.6.1 - ~/.proto/shims/node
    Yarn: 1.22.21 - ~/.proto/shims/yarn
    npm: 10.4.0 - ~/.proto/shims/npm
    pnpm: 8.14.3 - ~/.proto/shims/pnpm
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.40

Severity

annoyance
@izznat izznat changed the title unstate in $derived removing a nested prop value svelte 5: unstate in $derived removing a nested prop value Jan 27, 2024
@izznat izznat mentioned this issue Jan 27, 2024
Merged
8 tasks
@trueadm
Copy link
Contributor

trueadm commented Jan 30, 2024

Please can you create as repro on the REPL rather than stackblitz? Thanks.

@izznat
Copy link
Author

izznat commented Jan 30, 2024

I'll try.

@izznat
Copy link
Author

izznat commented Jan 31, 2024 •
edited
Loading

Here is the REPL.

It seems it occurs when a property is defined using Object.defineProperty and not set it to be enumerable. Because unstate / unwrap uses Object.keys to traverse the object. It doesn't have anything to do with $derived.

The solution in zag is to set enumerable to true for computed context properties. The solution in svelte is to use Object.getOwnPropertyNames instead of Object.keys inside the unwrap function.

@izznat izznat changed the title svelte 5: unstate in $derived removing a nested prop value svelte 5: non enumerable property is removed in unstate Jan 31, 2024
@trueadm trueadm mentioned this issue Jan 31, 2024
Merged
@trueadm
Copy link
Contributor

trueadm commented Jan 31, 2024

@izznatsir Thank you for that. Can you try out #10348 and see if it fixes your problem?

@izznat
Copy link
Author

izznat commented Jan 31, 2024

Confirmed it fixed my issue. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: improve unstate handling of non enumerable properties sveltejs/svelte
2 participants
@trueadm @izznat