fix: link offscreen items and last effect in each block correctly (alternative) (#17244)

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.

Fixes #17201

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

Author: Rich-Harris

.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

@@ -637,6 +637,10 @@ function link(state, prev, next) {
 		state.first = next;
 		state.effect.first = next && next.e;
 	} else {
+		if (prev.e === state.effect.last && next !== null) {
+			state.effect.last = next.e;
+		}
+
 		if (prev.e.next) {
 			prev.e.next.prev = null;
 		}
@@ -648,6 +652,10 @@ function link(state, prev, next) {
 	if (next === null) {
 		state.effect.last = prev && prev.e;
 	} else {
+		if (next.e === state.effect.last && prev === null) {
+			state.effect.last = next.e.prev;
+		}
+
 		if (next.e.prev) {
 			next.e.prev.next = null;
 		}

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}