fix: claim svg tags in raw mustache tags correctly (#8910)

fixes #8904

Author: dummdidumm

.changeset/curvy-lobsters-decide.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: claim svg tags in raw mustache tags correctly

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

@@ -796,7 +796,7 @@ export function claim_html_tag(nodes, is_svg) {
 	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) {
-		return new HtmlTagHydration(undefined, is_svg);
+		return new HtmlTagHydration(is_svg);
 	}
 	init_claim_info(nodes);
 	const html_tag_nodes = nodes.splice(start_index, end_index - start_index + 1);
@@ -807,7 +807,7 @@ export function claim_html_tag(nodes, is_svg) {
 		n.claim_order = nodes.claim_info.total_claimed;
 		nodes.claim_info.total_claimed += 1;
 	}
-	return new HtmlTagHydration(claimed_nodes, is_svg);
+	return new HtmlTagHydration(is_svg, claimed_nodes);
 }
 
 /**
@@ -1134,13 +1134,11 @@ export class HtmlTag {
 	}
 }
 
-/**
- * @extends HtmlTag */
 export class HtmlTagHydration extends HtmlTag {
-	// hydration claimed nodes
-	/** */
+	/** @type {Element[]} hydration claimed nodes */
 	l = undefined;
-	constructor(claimed_nodes, is_svg = false) {
+
+	constructor(is_svg = false, claimed_nodes) {
 		super(is_svg);
 		this.e = this.n = null;
 		this.l = claimed_nodes;

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

@@ -0,0 +1,3 @@
+<svg>
+	<circle cx="200" cy="500" r="200"></circle>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg>
+	<!-- HTML_TAG_START -->
+	<circle cx="200" cy="500" r="200"></circle>
+	<!-- HTML_TAG_END -->
+</svg>

packages/svelte/test/hydration/samples/raw-svg/_config.js

@@ -0,0 +1,14 @@
+export default {
+	snapshot(target) {
+		const svg = target.querySelector('svg');
+
+		return {
+			svg,
+			circle: svg.querySelector('circle')
+		};
+	},
+	test(assert, _, snapshot) {
+		assert.instanceOf(snapshot.svg, SVGElement);
+		assert.instanceOf(snapshot.circle, SVGElement);
+	}
+};

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

@@ -0,0 +1 @@
+<svg>{@html '<circle cx="200" cy="500" r="200"></circle>'}</svg>

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

@@ -1,4 +1,2 @@
-<noscript></noscript>
 <p>this is some html</p>
 <p>and so is this</p>
-<noscript></noscript>

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

@@ -1,2 +1,4 @@
+<!-- HTML_TAG_START -->
 <p>this is some html</p>
 <p>and so is this</p>
+<!-- HTML_TAG_END -->

packages/svelte/test/hydration/samples/raw/_config.js

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // existing nodes are blown away
-
 	props: {
 		raw: '<p>this is some html</p> <p>and so is this</p>'
 	},

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

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

packages/svelte/test/runtime/samples/raw-svg/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: '',
+
+	test({ assert, component, target }) {
+		component.show = true;
+		assert.equal(target.innerHTML, '<svg><circle cx="200" cy="500" r="200"></circle></svg>');
+		assert.instanceOf(target.querySelector('svg'), SVGElement);
+		assert.instanceOf(target.querySelector('circle'), SVGElement);
+	}
+};

packages/svelte/test/runtime/samples/raw-svg/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let show = false;
+</script>
+
+{#if show}
+	<svg>{@html '<circle cx="200" cy="500" r="200"></circle>'}</svg>
+{/if}