fix: hydrate multiple <svelte:head> elements correctly (#12475)

The head hydration anchor didn't update after hydrating the contents of one `<svelte:head>` element, which meant subsequent `<svelte:head>` elements would always start at the beginning of the head. This PR fixes that. The test was updated such that the shape of each `<svelte:head>` content is sufficiently different to throw an error if this wasn't fixed. fixes #12458
sveltejs · Jul 17, 2024 · bc9907a · bc9907a
1 parent 4fd6d29
commit bc9907a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git a/.changeset/clever-toys-laugh.md b/.changeset/clever-toys-laugh.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: hydrate multiple `<svelte:head>` elements correctly
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -51,6 +51,7 @@ export function head(render_fn) {
 		block(() => render_fn(anchor), HEAD_EFFECT);
 	} finally {
 		if (was_hydrating) {
+			head_anchor = hydrate_node; // so that next head block starts from the correct node
 			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
 		}
 	}

diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/HeadNested.svelte b/packages/svelte/tests/hydration/samples/head-html-and-component/HeadNested.svelte
@@ -1,2 +1,2 @@
 {@html '<meta name="head_nested_html" content="head_nested_html">'}
-<meta name="head_nested" content="head_nested">
+<meta name="head_nested" content="head_nested" />
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/Nested.svelte b/packages/svelte/tests/hydration/samples/head-html-and-component/Nested.svelte
@@ -1,5 +1,9 @@
+<script>
+	let text = $state('foo');
+</script>
 
 <svelte:head>
 	{@html '<meta name="nested_html" content="nested_html">'}
-	<meta name="nested" content="nested">
+	<meta name="nested" content="nested" />
+	<meta name="foo" content={text} />
 </svelte:head>
diff --git a/packages/svelte/tests/hydration/samples/head-html-and-component/main.svelte b/packages/svelte/tests/hydration/samples/head-html-and-component/main.svelte
@@ -4,9 +4,12 @@
 </script>
 
 <svelte:head>
-	{@html '<meta name="main_html" content="main_html">'}
-	<meta name="main" content="main">
-	<HeadNested />
+	<!-- the if block forces a comment node; tests that the nested head starts at the correct node -->
+	{#if true}
+		{@html '<meta name="main_html" content="main_html">'}
+		<meta name="main" content="main" />
+		<HeadNested />
+	{/if}
 </svelte:head>
 
-<Nested/>
+<Nested />