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

fixes sveltejs#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}