From bc9907aa1c3a3be983f03654572256361438019d Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 17 Jul 2024 16:08:27 +0200
Subject: [PATCH] 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
---
 .changeset/clever-toys-laugh.md                       |  5 +++++
 .../src/internal/client/dom/blocks/svelte-head.js     |  1 +
 .../samples/head-html-and-component/HeadNested.svelte |  2 +-
 .../samples/head-html-and-component/Nested.svelte     |  6 +++++-
 .../samples/head-html-and-component/main.svelte       | 11 +++++++----
 5 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/clever-toys-laugh.md

diff --git a/.changeset/clever-toys-laugh.md b/.changeset/clever-toys-laugh.md
new file mode 100644
index 0000000000..d1f72545bd
--- /dev/null
+++ 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
index bfd4291728..0fc2efa1eb 100644
--- 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
index 33bbdd1fd1..e9872ad897 100644
--- 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
index 28f5371910..308f44de38 100644
--- 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
index 188ecace6b..f11f24e42d 100644
--- 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 />