fix: improve hydration of svelte head blocks

Author: trueadm

.changeset/proud-queens-sniff.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve hydration of svelte head blocks

packages/svelte/src/internal/client/dom/blocks/svelte-head.js

@@ -1,7 +1,16 @@
 import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrate_nodes } from '../hydration.js';
 import { empty } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
-import { HYDRATION_START } from '../../../../constants.js';
+import { HYDRATION_END, HYDRATION_START } from '../../../../constants.js';
+
+/**
+ * @type {Node | undefined}
+ */
+let head_anchor;
+
+export function reset_head_anchor() {
+	head_anchor = undefined;
+}
 
 /**
  * @param {(anchor: Node) => import('#client').Dom | void} render_fn
@@ -19,12 +28,31 @@ export function head(render_fn) {
 	if (hydrating) {
 		previous_hydrate_nodes = hydrate_nodes;
 
-		let anchor = /** @type {import('#client').TemplateNode} */ (document.head.firstChild);
-		while (anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START) {
-			anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
+		// There might be multiple head blocks in our app, so we need to account for each one needing independent hydration.
+		if (head_anchor === undefined) {
+			head_anchor = /** @type {import('#client').TemplateNode} */ (document.head.firstChild);
+		}
+
+		var depth = 0;
+
+		while (head_anchor !== null) {
+			if (head_anchor.nodeType === 8) {
+				var data = /** @type {Comment} */ (head_anchor).data;
+				if (data === HYDRATION_START) {
+					if (depth === 0) {
+						break;
+					}
+					depth++;
+				}
+				if (data === HYDRATION_END) {
+					depth--;
+				}
+			}
+			head_anchor = /** @type {import('#client').TemplateNode} */ (head_anchor.nextSibling);
 		}
 
-		anchor = /** @type {import('#client').TemplateNode} */ (hydrate_anchor(anchor));
+		head_anchor = /** @type {import('#client').TemplateNode} */ (hydrate_anchor(head_anchor));
+		head_anchor = /** @type {import('#client').TemplateNode} */ (head_anchor.nextSibling);
 	} else {
 		anchor = document.head.appendChild(empty());
 	}

packages/svelte/src/internal/client/render.js

@@ -18,6 +18,7 @@ import {
 } from './dom/hydration.js';
 import { array_from } from './utils.js';
 import { handle_event_propagation } from './dom/elements/events.js';
+import { reset_head_anchor } from './dom/blocks/svelte-head.js';
 
 /** @type {Set<string>} */
 export const all_registered_events = new Set();
@@ -175,6 +176,7 @@ export function hydrate(component, options) {
 	} finally {
 		set_hydrating(!!previous_hydrate_nodes);
 		set_hydrate_nodes(previous_hydrate_nodes);
+		reset_head_anchor();
 	}
 }
 

packages/svelte/src/internal/server/index.js

@@ -207,10 +207,7 @@ export function render(component, options) {
 	on_destroy = prev_on_destroy;
 
 	return {
-		head:
-			payload.head.out || payload.head.title
-				? payload.head.title + BLOCK_OPEN + payload.head.out + BLOCK_CLOSE
-				: '',
+		head: payload.head.out || payload.head.title ? payload.head.out + payload.head.title : '',
 		html: payload.out
 	};
 }
@@ -247,7 +244,9 @@ export function escape(value, is_attr = false) {
  */
 export function head(payload, fn) {
 	const head_payload = payload.head;
+	payload.head.out += BLOCK_OPEN;
 	fn(head_payload);
+	payload.head.out += BLOCK_CLOSE;
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/multiple-head/MetaTag.svelte

@@ -0,0 +1,9 @@
+<script>
+	let title = $state('Hello world');
+	let desc = $state('Some description');
+</script>
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={desc}>
+	<meta name="author" content="@svelteawesome">
+</svelte:head>

packages/svelte/tests/runtime-runes/samples/multiple-head/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<div>Hello</div>`,
+
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.ownerDocument.head.innerHTML,
+			`<script async="" src="https://www.googletagmanager.com/gtag/js?id=12345"></script><meta content="Some description" name="description"><meta content="@svelteawesome" name="author"><title>Hello world</title>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/multiple-head/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import MetaTag from './MetaTag.svelte'
+</script>
+<svelte:head>
+	<script async src="https://www.googletagmanager.com/gtag/js?id=12345"></script>
+</svelte:head>
+<MetaTag />
+
+<div>Hello</div>

packages/svelte/tests/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html

@@ -1,6 +1,6 @@
 <!ssr:0>
-<title>Some Title</title>
 <link rel="canonical" href="/">
 <meta name="description" content="some description">
 <meta name="keywords" content="some keywords">
+<title>Some Title</title>
 <!ssr:0>

playgrounds/demo/src/entry-client.ts

@@ -1,8 +1,8 @@
 // @ts-ignore
-import { mount, unmount } from 'svelte';
+import { hydrate, mount, unmount } from 'svelte';
 // @ts-ignore you need to create this file
 import App from './App.svelte';
-const component = mount(App, {
+const component = hydrate(App, {
 	target: document.getElementById('root')!
 });
 // @ts-ignore