fix: ensure snippets after empty text correctly hydrate (#13870)

Author: trueadm

.changeset/plenty-plums-sparkle.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure snippets after empty text correctly hydrate

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

@@ -384,7 +384,7 @@ export function RegularElement(node, context) {
 			arg = b.member(arg, 'content');
 		}
 
-		process_children(trimmed, () => b.call('$.child', arg), true, {
+		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), true, {
 			...context,
 			state: child_state
 		});

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

@@ -91,9 +91,10 @@ export function get_next_sibling(node) {
  * Don't mark this as side-effect-free, hydration needs to walk all nodes
  * @template {Node} N
  * @param {N} node
+ * @param {boolean} is_text
  * @returns {Node | null}
  */
-export function child(node) {
+export function child(node, is_text) {
 	if (!hydrating) {
 		return get_first_child(node);
 	}
@@ -103,6 +104,11 @@ export function child(node) {
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
 	if (child === null) {
 		child = hydrate_node.appendChild(create_text());
+	} else if (is_text && child.nodeType !== 3) {
+		var text = create_text();
+		child?.before(text);
+		set_hydrate_node(text);
+		return text;
 	}
 
 	set_hydrate_node(child);

packages/svelte/tests/runtime-runes/samples/snippet-after-text/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	let {prop = '', children} = $props()
+</script>
+
+<div>{prop}{@render children()}</div>

packages/svelte/tests/runtime-runes/samples/snippet-after-text/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true // Render in dev mode to check that the validation error is not thrown
+	},
+	html: `<div>123</div`
+});

packages/svelte/tests/runtime-runes/samples/snippet-after-text/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>123</Child>

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js

@@ -7,7 +7,7 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
 	var main = $.sibling($.first_child(fragment), 2);
 	var h1 = $.child(main);
-	var text = $.child(h1);
+	var text = $.child(h1, true);
 
 	$.reset(h1);