fix: use non-destructive hydration for all @html tags (#8880)

dummdidumm · web-flow · commit d2ff04f9fe2f · 2023-07-03T14:22:00.000+02:00
html tags that could be optimized to use innerHTML in mount ignored any hydration code, which leads to everything getting unmounted and mounted again. This takes the non-optimized path for hydration, too. fixes sveltejs/kit#10245
diff --git a/.changeset/pretty-trees-prove.md b/.changeset/pretty-trees-prove.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use non-destructive hydration for all `@html` tags
diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js
@@ -26,7 +26,7 @@ export default class RawMustacheTagWrapper extends Tag {
 	render(block, parent_node, _parent_nodes) {
 		const in_head = is_head(parent_node);
 		const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
-		if (can_use_innerhtml) {
+		if (can_use_innerhtml && !this.renderer.options.hydratable) {
 			/** @param {import('estree').Node} content */
 			const insert = (content) => b`${parent_node}.innerHTML = ${content};`[0];
 			const { init } = this.rename_this_method(block, (content) => insert(content));
diff --git a/packages/svelte/test/runtime/samples/svg-html-tag3/_config.js b/packages/svelte/test/runtime/samples/svg-html-tag3/_config.js
@@ -1,9 +1,7 @@
 export default {
 	html: `
 			<svg>
-			  <foreignObject>
-				  <circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
-				</foreignObject>
+				<foreignObject><!-- HTML_TAG_START --><circle cx="25" cy="30" r="24" fill="#FFD166"></circle><!-- HTML_TAG_END --></foreignObject>
 			</svg>
 		`,
 	test({ assert, target, component }) {
diff --git a/packages/svelte/test/runtime/samples/svg-html-tag3/main.svelte b/packages/svelte/test/runtime/samples/svg-html-tag3/main.svelte
@@ -1,7 +1,7 @@
 <script>
-	export let width = 100
-	export let height = 60
-	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+	export let width = 100;
+	export let height = 60;
+	$: circle = `<circle cx="${width / 4}" cy="${height / 2}" r="24" fill="#FFD166"></circle>`;
 </script>
 
 <svg>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: use non-destructive hydration for all `@html` tags