fix: repair invalid raw html content during hydration

When the HTML that is coming from raw html is invalid, the browser reshuffles things. Bail in that case to try to repair more often. Should help with https://github.com/withastro/astro/issues/7557

.changeset/spicy-ladybugs-return.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: repair invalid raw html content during hydration

packages/svelte/src/runtime/internal/dom.js

@@ -777,14 +777,14 @@ export function claim_comment(nodes, data) {
 	);
 }
 
-function find_comment(nodes, text, start) {
+function get_comment_idx(nodes, text, start) {
 	for (let i = start; i < nodes.length; i += 1) {
 		const node = nodes[i];
 		if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === text) {
 			return i;
 		}
 	}
-	return nodes.length;
+	return -1;
 }
 
 /**
@@ -793,11 +793,12 @@ function find_comment(nodes, text, start) {
  */
 export function claim_html_tag(nodes, is_svg) {
 	// find html opening tag
-	const start_index = find_comment(nodes, 'HTML_TAG_START', 0);
-	const end_index = find_comment(nodes, 'HTML_TAG_END', start_index);
-	if (start_index === end_index) {
+	const start_index = get_comment_idx(nodes, 'HTML_TAG_START', 0);
+	const end_index = get_comment_idx(nodes, 'HTML_TAG_END', start_index + 1);
+	if (start_index === -1 || end_index === -1) {
 		return new HtmlTagHydration(is_svg);
 	}
+
 	init_claim_info(nodes);
 	const html_tag_nodes = nodes.splice(start_index, end_index - start_index + 1);
 	detach(html_tag_nodes[0]);
@@ -1048,17 +1049,13 @@ export class HtmlTag {
 	 * @default false
 	 */
 	is_svg = false;
-	// parent for creating node
-	/** */
+	/** parent for creating node */
 	e = undefined;
-	// html tag nodes
-	/** */
+	/** html tag nodes */
 	n = undefined;
-	// target
-	/** */
+	/** target */
 	t = undefined;
-	// anchor
-	/** */
+	/** anchor */
 	a = undefined;
 	constructor(is_svg = false) {
 		this.is_svg = is_svg;

packages/svelte/test/hydration/samples/raw-repair/_after.html

@@ -0,0 +1,2 @@
+<p><p>invalid</p></p>
+<p><p>invalid</p></p>

packages/svelte/test/hydration/samples/raw-repair/_before.html

@@ -0,0 +1,8 @@
+<p><!-- HTML_TAG_START --></p>
+<p>invalid</p>
+<!-- HTML_TAG_END -->
+<p></p>
+<p><!-- HTML_TAG_START --></p>
+<p>invalid</p>
+<!-- HTML_TAG_END -->
+<p></p>

packages/svelte/test/hydration/samples/raw-repair/inner.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let content;
+</script>
+
+<p>{@html content}</p>

packages/svelte/test/hydration/samples/raw-repair/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Inner from './inner.svelte';
+</script>
+
+<Inner content="<p>invalid</p>" />
+
+<p>{@html '<p>invalid</p>'}</p>