fix: ensure last empty text node correctly hydrates (#14425)

* fix: ensure last empty text node correctly hydrates

* fix: ensure last empty text node correctly hydrates

Author: trueadm

.changeset/short-chicken-compare.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure last empty text node correctly hydrates

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

@@ -154,22 +154,31 @@ export function first_child(fragment, is_text) {
  */
 export function sibling(node, count = 1, is_text = false) {
 	let next_sibling = hydrating ? hydrate_node : node;
+	var last_sibling;
 
 	while (count--) {
+		last_sibling = next_sibling;
 		next_sibling = /** @type {TemplateNode} */ (get_next_sibling(next_sibling));
 	}
 
 	if (!hydrating) {
 		return next_sibling;
 	}
 
-	var type = next_sibling.nodeType;
+	var type = next_sibling?.nodeType;
 
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
 	if (is_text && type !== 3) {
 		var text = create_text();
-		next_sibling?.before(text);
+		// If the next sibling is `null` and we're handling text then it's because
+		// the SSR content was empty for the text, so we need to generate a new text
+		// node and insert it after the last sibling
+		if (next_sibling === null) {
+			last_sibling?.after(text);
+		} else {
+			next_sibling.before(text);
+		}
 		set_hydrate_node(text);
 		return text;
 	}

packages/svelte/tests/hydration/samples/text-empty-2/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/hydration/samples/text-empty-2/_expected.html

@@ -0,0 +1 @@
+<!--[--><span><span></span></span><!--]-->

packages/svelte/tests/hydration/samples/text-empty-2/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { name, remaining } = $props();
+</script>
+
+<span>
+	<span>{name}</span>{remaining >= 2 ? ',' : ''}
+</span>