Svelte 5 object mutations

[dm-de]

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]

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]

Fixed by #10464