Skip to content

Svelte 5 object mutations #10373

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.

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

Closed
dm-de opened this issue Feb 1, 2024 · 2 comments
Closed

Svelte 5 object mutations #10373

dm-de opened this issue Feb 1, 2024 · 2 comments
Labels

Comments

@dm-de
Copy link

dm-de commented Feb 1, 2024

Describe the bug

I noticed that Vue and Solid, which also have modern reactivity, handle objects differently.

Vue and Solid have reactive objects that are not recreated. This behavior also exists in Svelte 4.

In Svelte 5, objects are extended with reactivity - but these objects are copies of the originals. It is therefore not possible to make comparisons with objects.

e.g. if you send items-array and item-object (which is also contained in items) to a sub-component, you will see that item does not exist in items. Svelte 5 simply generates a copy and sends it to the component.

In addition, objects that are added to arrays are also mutated. You can no longer work with the original objects and you need to drop them.

I did some research and created the following examples comparing Svelte, Vue and Solid.

Reproduction

Example send Items and Item to sub-component.
Then it will try to find item inside items.

Vue & Solid pass this test. (FOUND! ist shown)
Svelte fails (no FOUND! visible)
Svelte code: change items version from reactive to non reactive - you will see a difference.

You can click output lines to modify them - so you see reactivity is really working.

Svelte 5:
LINK

Vue:
LINK

Solid:
LINK

Logs

No response

System Info

next.44

Severity

annoyance

@dummdidumm dummdidumm added the bug label Feb 2, 2024
@dummdidumm dummdidumm added this to the 5.0 milestone Feb 2, 2024
@dummdidumm
Copy link
Member

dummdidumm commented Feb 2, 2024

This only happens at dev time because we're wrapping the whole object in a readonly proxy to prevent mutations of the object. But because of the proxification the object isn't the original one anymore, and the comparison fails. We need to find a different way to tackle this at dev time (or are forced to remove this validation completely).

@dummdidumm
Copy link
Member

Fixed by #10464

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants