fix: ensure correct each block element is moved during reconcilation

.changeset/smooth-cameras-appear.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure correct each block element is moved during reconcilation

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1646,7 +1646,11 @@ export const template_visitors = {
 
 			add_template(template_name, args);
 
-			body.push(b.var(id, b.call(template_name)), ...state.before_init, ...state.init);
+			body.push(
+				b.var(id, b.call(template_name, b.id('$$anchor'))),
+				...state.before_init,
+				...state.init
+			);
 			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 		} else if (is_single_child_not_needing_template) {
 			context.visit(trimmed[0], state);
@@ -1684,7 +1688,7 @@ export const template_visitors = {
 
 				if (use_comment_template) {
 					// special case — we can use `$.comment` instead of creating a unique template
-					body.push(b.var(id, b.call('$.comment')));
+					body.push(b.var(id, b.call('$.comment', b.id('$$anchor'))));
 				} else {
 					let flags = TEMPLATE_FRAGMENT;
 
@@ -1697,7 +1701,7 @@ export const template_visitors = {
 						b.literal(flags)
 					]);
 
-					body.push(b.var(id, b.call(template_name)));
+					body.push(b.var(id, b.call(template_name, b.id('$$anchor'))));
 				}
 
 				body.push(...state.before_init, ...state.init);

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

@@ -291,7 +291,10 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 		item = items.get(key);
 
 		if (item === undefined) {
-			var child_anchor = current ? get_first_node(current.e) : anchor;
+			var effect_dom = current?.e.dom;
+			var child_anchor = /** @type {Node} */ (
+				effect_dom ? (is_array(effect_dom) ? effect_dom[0] : effect_dom) : anchor
+			);
 
 			prev = create_item(child_anchor, prev, prev.next, value, key, i, render_fn, flags);
 
@@ -486,7 +489,10 @@ function create_item(anchor, prev, next, value, key, index, render_fn, flags) {
  * @returns {import('#client').TemplateNode}
  */
 function get_adjusted_first_node(dom, effect) {
-	if ((dom.nodeType === 3 && /** @type {Text} */ (dom).data === '') || dom.nodeType === 8) {
+	if (
+		(dom.nodeType === 3 && /** @type {Text} */ (dom).data === '') ||
+		(dom.nodeType === 8 && /** @type {Comment} */ (dom).data !== '[')
+	) {
 		var adjusted = effect.first;
 		var next;
 		while (adjusted !== null) {

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

@@ -82,7 +82,7 @@ function html_to_dom(target, effect, value, svg, mathml) {
 		var child = /** @type {Text | Element | Comment} */ (node.firstChild);
 		target.before(child);
 		if (effect !== null) {
-			push_template_node(child, effect);
+			push_template_node(child, null, effect);
 		}
 		return child;
 	}
@@ -98,7 +98,7 @@ function html_to_dom(target, effect, value, svg, mathml) {
 	}
 
 	if (effect !== null) {
-		push_template_node(nodes, effect);
+		push_template_node(nodes, null, effect);
 	}
 
 	return nodes;

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -140,7 +140,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 					swap_block_dom(element_effect, prev_element, element);
 					prev_element.remove();
 				} else {
-					push_template_node(element, element_effect);
+					push_template_node(element, null, element_effect);
 				}
 
 				if (render_fn) {

packages/svelte/src/internal/client/dom/blocks/svelte-head.js

@@ -1,7 +1,7 @@
 import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrate_nodes } from '../hydration.js';
 import { empty } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
-import { HYDRATION_END, HYDRATION_START } from '../../../../constants.js';
+import { HYDRATION_START } from '../../../../constants.js';
 
 /**
  * @type {Node | undefined}

packages/svelte/src/internal/client/dom/template.js

@@ -9,10 +9,12 @@ import { queue_micro_task } from './task.js';
 /**
  * @template {import("#client").TemplateNode | import("#client").TemplateNode[]} T
  * @param {T} dom
+ * @param {import("#client").TemplateNode | null} anchor
  * @param {import("#client").Effect} effect
  */
 export function push_template_node(
 	dom,
+	anchor,
 	effect = /** @type {import('#client').Effect} */ (current_effect)
 ) {
 	var current_dom = effect.dom;
@@ -22,11 +24,23 @@ export function push_template_node(
 		if (!is_array(current_dom)) {
 			current_dom = effect.dom = [current_dom];
 		}
+		// If we have an existing anchor, then we should ensure that we insert the DOM contents
+		// before that anchor position. This ensures we match what is reflected on the document to
+		// as what is reflected in the effect.dom (we always insert before the anchor).
+		const anchor_index = anchor !== null ? current_dom.indexOf(anchor) : null;
 
 		if (is_array(dom)) {
-			current_dom.push(...dom);
+			if (anchor_index !== null) {
+				current_dom.splice(anchor_index, 0, ...dom);
+			} else {
+				current_dom.push(...dom);
+			}
 		} else {
-			current_dom.push(dom);
+			if (anchor_index !== null) {
+				current_dom.splice(anchor_index, 0, dom);
+			} else {
+				current_dom.push(dom);
+			}
 		}
 	}
 	return dom;
@@ -45,9 +59,9 @@ export function template(content, flags) {
 	/** @type {Node} */
 	var node;
 
-	return () => {
+	return (/** @type {Element | Comment | null} */ prev_anchor) => {
 		if (hydrating) {
-			push_template_node(is_fragment ? hydrate_nodes : hydrate_start);
+			push_template_node(is_fragment ? hydrate_nodes : hydrate_start, prev_anchor);
 			return hydrate_start;
 		}
 
@@ -61,7 +75,8 @@ export function template(content, flags) {
 		push_template_node(
 			is_fragment
 				? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
-				: /** @type {import('#client').TemplateNode} */ (clone)
+				: /** @type {import('#client').TemplateNode} */ (clone),
+			prev_anchor
 		);
 
 		return clone;
@@ -106,9 +121,9 @@ export function ns_template(content, flags, ns = 'svg') {
 	/** @type {Element | DocumentFragment} */
 	var node;
 
-	return () => {
+	return (/** @type {Element | Comment | null} */ prev_anchor) => {
 		if (hydrating) {
-			push_template_node(is_fragment ? hydrate_nodes : hydrate_start);
+			push_template_node(is_fragment ? hydrate_nodes : hydrate_start, prev_anchor);
 			return hydrate_start;
 		}
 
@@ -130,7 +145,8 @@ export function ns_template(content, flags, ns = 'svg') {
 		push_template_node(
 			is_fragment
 				? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes])
-				: /** @type {import('#client').TemplateNode} */ (clone)
+				: /** @type {import('#client').TemplateNode} */ (clone),
+			prev_anchor
 		);
 
 		return clone;
@@ -208,7 +224,7 @@ function run_scripts(node) {
  */
 /*#__NO_SIDE_EFFECTS__*/
 export function text(anchor) {
-	if (!hydrating) return push_template_node(empty());
+	if (!hydrating) return push_template_node(empty(), null);
 
 	var node = hydrate_start;
 
@@ -218,21 +234,24 @@ export function text(anchor) {
 		anchor.before((node = empty()));
 	}
 
-	push_template_node(node);
+	push_template_node(node, null);
 	return node;
 }
 
-export function comment() {
+/**
+ * @param {Element | Comment | null} prev_anchor
+ */
+export function comment(prev_anchor) {
 	// we're not delegating to `template` here for performance reasons
 	if (hydrating) {
-		push_template_node(hydrate_nodes);
+		push_template_node(hydrate_nodes, prev_anchor);
 		return hydrate_start;
 	}
 
 	var frag = document.createDocumentFragment();
 	var anchor = empty();
 	frag.append(anchor);
-	push_template_node([anchor]);
+	push_template_node([anchor], prev_anchor);
 
 	return frag;
 }

packages/svelte/tests/migrate/samples/svelte-element/output.svelte

@@ -3,4 +3,4 @@
 <svelte:element this={"div"} />
 
 <!-- we don't try to fix this bug, we just leave it as-is -->
-<svelte:element this="h{n}" />
+<svelte:element this="h{n}" />

packages/svelte/tests/parser-modern/samples/snippets/output.json

@@ -27,8 +27,8 @@
 				"parameters": [
 					{
 						"type": "Identifier",
-						"name": "msg",
 						"start": 43,
+						"end": 46,
 						"loc": {
 							"start": {
 								"line": 3,
@@ -39,7 +39,7 @@
 								"column": 25
 							}
 						},
-						"end": 46,
+						"name": "msg",
 						"typeAnnotation": {
 							"type": "TSTypeAnnotation",
 							"start": 46,

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>`
+		);
+	}
+});

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>

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

@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<ul><li>test (1)</li> <span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span><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)</li><span style="background-color: red; width: 20px; height: 20px; display: inline-block;"></span><li>test 2 (2)</li><li>test 3 (3)</li></ul><button>Swap items 1 &amp; 3</button>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/each-updates-7/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})
+	</li>
+	{#if item.color}<span style="background-color: {item.color}; width: 20px; height: 20px; display: inline-block;"></span>{/if}
+{/snippet}
+
+<ul>
+	{#each items as item (item.id)}
+		{@render renderItem(item)}
+	{/each}
+</ul>
+<button {onclick}>Swap items 1 & 3</button>

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

@@ -0,0 +1,42 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>Add new message</button><p>first</p><p>message 1</p>`,
+
+	async test({ assert, target }) {
+		/**
+		 * @type {{ click: () => void; }}
+		 */
+		let btn1;
+
+		[btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>`
+		);
+
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>`
+		);
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p><p>message 3</p>`
+		);
+	}
+});