fix: link offscreen items and last effect in each block correctly

It's possible that due to how new elements are inserted into the array that `effect.last` is wrong. We need to ensure it is really the last item to keep items properly connected to the graph. In addition we link offscreen items after all onscreen items, to ensure they don't have wrong pointers.

Fixes #17201

Author: dummdidumm

.changeset/great-ghosts-unite.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: link offscreen items and last effect in each block correctly

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -503,6 +503,8 @@ function reconcile(state, array, anchor, flags, get_key) {
 		current = item.next;
 	}
 
+	let has_offscreen_items = items.size > length;
+
 	if (current !== null || seen !== undefined) {
 		var to_destroy = seen === undefined ? [] : array_from(seen);
 
@@ -516,6 +518,8 @@ function reconcile(state, array, anchor, flags, get_key) {
 
 		var destroy_length = to_destroy.length;
 
+		has_offscreen_items = items.size - destroy_length > length;
+
 		if (destroy_length > 0) {
 			var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
 
@@ -533,6 +537,18 @@ function reconcile(state, array, anchor, flags, get_key) {
 		}
 	}
 
+	// Append offscreen items at the end
+	if (has_offscreen_items) {
+		for (const item of items.values()) {
+			if (!item.o) {
+				link(state, prev, item);
+				prev = item;
+			}
+		}
+	}
+
+	state.effect.last = prev && prev.e;
+
 	if (is_animated) {
 		queue_micro_task(() => {
 			if (to_animate === undefined) return;

packages/svelte/tests/runtime-runes/samples/each-updates-10/_config.js

@@ -0,0 +1,51 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [add, adjust] = target.querySelectorAll('button');
+
+		add.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button> <button>adjust</button>
+			<h2>Keyed</h2>
+			<div>Item: 1. Index: 0</div>
+			<div>Item: 0. Index: 1</div>
+			<h2>Unkeyed</h2>
+			<div>Item: 1. Index: 0</div>
+			<div>Item: 0. Index: 1</div>`
+		);
+
+		add.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button> <button>adjust</button>
+			<h2>Keyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 0. Index: 2</div>
+			<h2>Unkeyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 0. Index: 2</div>`
+		);
+
+		adjust.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button> <button>adjust</button>
+			<h2>Keyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 10. Index: 2</div>
+			<h2>Unkeyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 10. Index: 2</div>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/each-updates-10/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	const items = $state([{ t: 0 }]);
+</script>
+
+<button onclick={() => items.unshift({t:items.length})}>add</button>
+<button onclick={() => items.at(-1).t = 10}>adjust</button>
+ 
+<h2>Keyed</h2>
+{#each items as item, index (item)}
+	<div>Item: {item.t}. Index: {index}</div>
+{/each}
+
+<h2>Unkeyed</h2>
+{#each items as item, index}
+	<div>Item: {item.t}. Index: {index}</div>
+{/each}