svecosystem / runed

Magical utilities for your Svelte applications (WIP)
https://runed.dev
MIT License
470 stars 23 forks source link

Does `watch` work with objects? #119

Closed frederikhors closed 2 months ago

frederikhors commented 2 months ago

Describe the bug

Even if you click mulitple times the button console.log() popup just one time.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACl1QvW6DMBB-ldOpg5EQTYcuFEjbMUM6dIwzEGOIVWMj-2gVWbx7ZaMGqcPJuvv-zhewV1p6LE8BTTtKLPFtmjBHuk2x8d9Sk8QcvZ2diJPKC6cmarjhpMbJOoIAPy2JKyzQOzsCRzcb2b3uiqfnYsfxJVJjaUkgrOkUKWughgdPLUkWlixSDKd-NiJhZIdBy2M7SpZBSHq6K4u4KNTwf1DXwPHdXjjCHjge7NVwhPJvmNZY1qC0LzuxDOpm8znnwE5bl8AUDpHjrZaFtgPjuMozEK3WsuOYrd7xqR63-5i7Vwnh8PlxLDw5ZQbV39gdypbq4ppYUVFdZiJrwBqhlfiqw3aJJZ1cXFszSIg_jmErvcEcR9upXskOS3KzXM7LL-0d0VjbAQAA

Logs

No response

System Info

"svelte": "5.0.0-next.184"

Severity

blocking all usage of WithRunes

huntabyte commented 2 months ago

Hey @frederikhors!

As mentioned in the comments of #120, this is a feature, not a bug.

You'll see you get the same behavior with a regular $effect: REPL

To get the behavior you're looking for, you need to leverage $state.snapshot() which will cause it to track the object itself rather than the individual properties: REPL

Not-Jayden commented 2 months ago

I question if this could still be supported with a deep option in the config, as I also found this behaviour unintuitive at first glance, though I get it just maps to how $effect() behaves.

I think adding the ability to easily deeply track state changes like we've become familiar with from Svelte 4 would be a really nice additional benefit/motivation to using watch() over $effect().

But also maybe this should just be proposed as a config option for $effect() in Svelte 🤷‍♂️

frederikhors commented 1 month ago

@huntabyte can we add a deep option to it?

huntabyte commented 1 month ago

I don't particularly like the idea of adding the deep as we want users of this library to understand Svelte 5. If there was some significant work to do to make this happen, then potentially, but it's almost equal in terms of code you have to write:

{ deep: true }
// vs
`$state.snapshot()`

and you get the benefit of understanding how Svelte 5 works.

Happy to have my mind changed if @TGlide or @AdrianGonz97 disagree with me here.

frederikhors commented 1 month ago

I think you're right. You convinced me.