oncreate issues with Nested Components in a loop of an array with items added before the end of the array

[btakita]

It seems like there are some tracking issues with a loop, changed arrays (unshifted item), & nested component (manifested in oncreate).

https://svelte.technology/repl?version=1.24.0&gist=3d12f2bbd599b5d73443c0ded72c808c

The expected output is:

title__oncreate=Title 0

title__oncreate=Title 1

title__oncreate=Title 2

[btakita]

Looks like using the same array & unshifting the item also has the same issue.

https://svelte.technology/repl?version=1.24.0&gist=3d12f2bbd599b5d73443c0ded72c808c

Also, there are issue with adding items in the middle of the array.

https://svelte.technology/repl?version=1.24.0&gist=a1a246237f812a6dfb6d27bc33392c93

Note that pushing the next item works...

https://svelte.technology/repl?version=1.24.0&gist=136c0713ac5f2220a5a5adac0e4b9fb2

[Rich-Harris]

This is expected behaviour — when you go from [b, c] to [a, b, c] you're not telling the first component 'you are now in the middle', you're telling it that it was b but it's now a. But if you're setting data in oncreate (and not using this.observe to keep it up to date) then it will stay fixed on the old, incorrect value.

In theory there's a simple way to get this to work, which is to use the syntax for keyed each blocks:

{{#each things as thing @id}}
  <!-- thing.id uniquely identifies each thing -->
{{/each}}

That way, you are telling the first component that it's now second, and the second component that it's now third.

Two problems however:

• There's no way to say 'use the thing itself, rather than a property of the thing', which is what you need in this case (because each title is a string not an object)
• There's a bug! For some reason, Title 0 is appearing at the end of the list when we use keyed updates.