From 7d62528f7af75cf00b1c901a95eb97996cbc7d54 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 25 Jun 2024 17:01:15 +0100
Subject: [PATCH] fix: ensure correct each block element is moved during
 reconcilation

---
 .changeset/smooth-cameras-appear.md           |  5 ++++
 .../src/internal/client/dom/blocks/each.js    | 17 +++++++++---
 .../samples/each-updates-6/_config.js         | 27 +++++++++++++++++++
 .../samples/each-updates-6/main.svelte        | 26 ++++++++++++++++++
 4 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/smooth-cameras-appear.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte

diff --git a/.changeset/smooth-cameras-appear.md b/.changeset/smooth-cameras-appear.md
new file mode 100644
index 0000000000..77dfb049f2
--- /dev/null
+++ b/.changeset/smooth-cameras-appear.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure correct each block element is moved during reconcilation
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index e20d4ec41f..57e8d71180 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -482,10 +482,11 @@ function create_item(anchor, prev, next, value, key, index, render_fn, flags) {
 
 /**
  * @param {import('#client').TemplateNode} dom
+ * @param {import('#client').TemplateNode | null} sibling
  * @param {import("#client").Effect} effect
  * @returns {import('#client').TemplateNode}
  */
-function get_adjusted_first_node(dom, effect) {
+function get_adjusted_first_node(dom, sibling, effect) {
 	if ((dom.nodeType === 3 && /** @type {Text} */ (dom).data === '') || dom.nodeType === 8) {
 		var adjusted = effect.first;
 		var next;
@@ -498,7 +499,11 @@ function get_adjusted_first_node(dom, effect) {
 			}
 			adjusted = next;
 		}
-		return get_first_node(/** @type {import("#client").Effect} */ (adjusted));
+		var adjusted_dom = get_first_node(/** @type {import("#client").Effect} */ (adjusted));
+		// If we have a sibling that contains the adjusted_dom, then use that instead.
+		if (sibling?.contains(adjusted_dom)) {
+			return sibling;
+		}
 	}
 	return dom;
 }
@@ -511,9 +516,13 @@ function get_adjusted_first_node(dom, effect) {
 function get_first_node(effect) {
 	var dom = effect.dom;
 	if (is_array(dom)) {
-		return get_adjusted_first_node(dom[0], effect);
+		return get_adjusted_first_node(dom[0], dom[1], effect);
 	}
-	return get_adjusted_first_node(/** @type {import('#client').TemplateNode} **/ (dom), effect);
+	return get_adjusted_first_node(
+		/** @type {import('#client').TemplateNode} **/ (dom),
+		null,
+		effect
+	);
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js
new file mode 100644
index 0000000000..8bd2d17131
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-6/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<ul><li>test (1) <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span></li><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`,
+
+	async test({ assert, target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li>test (1) <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span></li><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte
new file mode 100644
index 0000000000..a1b948ac0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-6/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	const items = $state([
+		{ name: 'test', id: 1, color: 'red' },
+		{ name: 'test 2', id: 2 },
+		{ name: 'test 3', id: 3 },
+	]);
+	const onclick = () => {
+		const from = 0;
+		const to = 2;
+		items.splice(to, 0, items.splice(from, 1)[0]);
+	};
+</script>
+
+{#snippet renderItem(item)}
+	<li>
+		{item.name} ({item.id})
+		{#if item.color}<span style="background-color: {item.color}; width: 20px; height: 20px; display: inline-block;"></span>{/if}
+	</li>
+{/snippet}
+
+<ul>
+	{#each items as item (item.id)}
+		{@render renderItem(item)}
+	{/each}
+</ul>
+<button {onclick}>Swap items 1 & 3</button>