Removing binded items from array

[Freeskier]

Describe the bug

Hi, i have encountered a problem when i have a binded element to the array and then trying to remove element from that array. Demo is self-explaintatory. Just click remove button and watch console output.
Do you have any idea how to prevent error?

Reproduction

https://svelte-omnisite.vercel.app/playground/hello-world?version=5.0.0-next.272#H4sIAAAAAAAACnWR3W7CMAyFX8XKJoVJFb2v2k7THoNyEYoL0VonJOZvUd59SgvbGOzSJ8cn9ucgOt2jF8UiCD5bFMUoiEyQGlL1Zu3cH7DnpK2Ux0d6a4iR2ItClL512jL0ijaVZC_rhvRgjWN4N4M1hMTQOTOAnOffyiVKNtRwjwzKuQIC44kL8Ow0bTJw2L0WoOgcoYJnz4pxtrh4pPJrmcXs2iM_T638Ve6OuDuivDWMnuVLQw2V-TR2nYrwhKrdphlA-akhZqBjGq78WWKlaV047KqgnFvo5dxhFy_2vG4o5CkmjvGrPbMhMNT2uv2oAkJVjx9UsFjG2uFgDljmk61uSGQi5YiC3R5j9s9t_uK7vdCD1_s71VfiAdKHI-WENy2nVj3OXmDEbZ2xfnbPqrQTB95qX4VEoJ4IlLm922MZvwARiW5GbwIAAA==

Logs

No response

System Info

REPL

Severity

annoyance

[adiguba]

Hello,

I think the problem is that bind:this resets the value to undefined when the node is unmounted.
But the index do no longer exists...

In your case, you don't have to use index, so this will work :
https://svelte-omnisite.vercel.app/playground/hello-world?version=5.0.0-next.272#H4sIAAAAAAAACnWRYW_CIBCG_8qFLUGTxn5vShezn6F-oPXUZi0wOJ2O8N8HqNucLiG53PHycvecZ5t-QMeqhWd0MsiqXGAFU3JM2dyYmTvgQKnWSoeP6p1WhIqiDatdZ3tDMEi1FZwcb5aqH422BK86RhV1sLF6BD4rvysXK75USxqQQFpbgSc8UgWObK-2BVjcvFQg1SmAgGdHknCyuGi4dGtehOL6hn8eO_4rff_AePitIGtW0_inqstz201K_BPKbpd6AOlAhtRU_dN826t1FZsRXs5iCJAcU5JiKKOFL5NByMbtnkgr0Kob-u5NeATRZGsBi1VoLI76gHV5lsW3kWbyYRXZPYbin638BXe7mwe39xtqrqx9HiDzTWDTeLIdcDKFDNpYbdzknlJtziRo1zvhE4gmsw11ae7mWIUvyjSpU2kCAAA=

[Freeskier]

@adiguba Thank you for the solution. I will use it :) but anyway, the second solution i came up with is to instantiate component using mount and unmount function. As show in second reproduction, i want to store 'handle' of the component somehow in array. Is it possible? I would like to know it for the future :)

https://svelte-omnisite.vercel.app/playground/hello-world?version=5.0.0-next.272#H4sIAAAAAAAACn1S0W6DMAz8FSuqBJUY1V4ZIE37jNIHCm4bDZyMGLYpyr9Phrbqtm4viFwu57PPXh10h05lW6_406LKZkAliupeTs_Wpm7CjgXb1w7v4Y0hRmKnMpW7ZtCWoavpWETsorKiinVvzcDgoTcjcQIjzT8Q4DCYHqJFKbqhvpjeGkLiMyPdXJH0ht0hQ6sn83Q5MDqGAlaOa8Z4u1tXJFcrPByw4TheQ1GCF6jilSZnBZVHQuSwrijfLC2IccpbPcFeU5vxSbvCS61QCqnV08LYj8yGwFDT6ea18HitcO5ylt_KJ-2QjnyCB3gUY6GiUA7YmwnzzSJzXxLwxrV02ZjeQrFMM74OJgHP9XBEzuaZJGAHY13mGT84g6h27ds7RiGsF6HZkR3dKRY58RPKum1vrKhEyVuV8TBiSP5YkZ_BfF-UO7e_16W8xOdBCkKQCGf38X8BNoac6TDtzDGOTjq6ZvgzRQvlPIWQb-yvvnbhC66410MGAwAA

[brunnerh]

The problem is the let test = $state([]), it causes the values to be proxied so you attempt to unmount a proxy instance which won't work. Either don't make that a state or maybe use $state.raw.

Using .raw() and shrinking array
(Array is not used in a way that would make it update properly in a reactive context, with raw it should be fully re-assigned on change.)

[Freeskier]

Thank you @brunnerh ! Last question - can I get a reference to newly created component? I mean that "comp" variable works as a handle for unmount function, but what if I want to for example reference "comp.innerText"?

[brunnerh]

There is no such thing. Components don't have defined bounds, they can contain 0 to n elements.
If you need a container, create one yourself first and mount the component on that container.

[Freeskier]

That makes sense. Thank you for explanation