DOM order is not guaranteed when using keys

[andyjessop]

If you add a key to an each block, when that updates, the DOM order of the component is no longer guaranteed - maybe it's moving those updates to the end.

{{#each ones as one @text}}
  <div>{{one.text}}</div>
{{/each}}

{{#each twos as two @text}}
  <div>{{two.text}}</div>
{{/each}}

<script>
  export default {
    data()
      return {
	ones: [{ text: '1' }],
      	twos: [{ text: '2' }],
       };
    },
    oncreate() {
      this.set({ ones: [{ text: '11' }] });
    }
  }
</script>

If you run this, you'll see that the "ones" are placed after the "twos" once the component is created.

REPL: https://svelte.technology/repl?version=1.60.0&gist=e4d16c0723f25a51525fac0b8afd02d8

[Rich-Harris]

Fixed in 1.60.2 — thanks

[andyjessop]

Works nicely, thanks!