Fix hydration duplicate `svelte:head` tag issue with `@html` and nested components #7444 #6463

src/compiler/compile/render_dom/wrappers/Head.ts

@@ -36,7 +36,7 @@ export default class HeadWrapper extends Wrapper {
 		let nodes;
 		if (this.renderer.options.hydratable && this.fragment.nodes.length) {
 			nodes = block.get_unique_name('head_nodes');
-			block.chunks.claim.push(b`const ${nodes} = @query_selector_all('[data-svelte="${this.node.id}"]', @_document.head);`);
+			block.chunks.claim.push(b`const ${nodes} = @head_selector('${this.node.id}', @_document.head);`);
 		}
 
 		this.fragment.render(block, x`@_document.head` as unknown as Identifier, nodes);

src/compiler/compile/render_ssr/handlers/Element.ts

@@ -157,10 +157,6 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		}
 	});
 
-	if (options.hydratable && options.head_id) {
-		renderer.add_string(` data-svelte="${options.head_id}"`);
-	}
-
 	renderer.add_string('>');
 
 	if (node_contents !== undefined) {

src/compiler/compile/render_ssr/handlers/Head.ts

@@ -12,5 +12,5 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
 
-	renderer.add_expression(x`$$result.head += ${result}, ""`);
+	renderer.add_expression(x`$$result.head += '<!-- HEAD_START data-svelte="${node.id}" -->' + ${result} + '<!-- HEAD_END data-svelte="${node.id}" -->', ""`);
 }

src/runtime/internal/dom.ts

@@ -640,6 +640,24 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum
 	return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray;
 }
 
+export function head_selector(nodeId: string, head: HTMLElement) {
+	const result = [];
+	let started = 0;
+
+	for (const node of head.childNodes) {
+		if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === `HEAD_END data-svelte="${nodeId}"`) {
+			started -= 1;
+			result.push(node);
+		} else if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === `HEAD_START data-svelte="${nodeId}"`) {
+			started += 1;
+			result.push(node);
+		} else if (started > 0) {
+			result.push(node);
+		}
+	}
+	return result;
+}
+
 export class HtmlTag {
 	private is_svg = false;
 	// parent for creating node

test/hydration/samples/head-html-and-component/HeadNested.svelte

@@ -0,0 +1,2 @@
+{@html '<meta name="head_nested_html" content="head_nested_html">'}
+<meta name="head_nested" content="head_nested">

test/hydration/samples/head-html-and-component/Nested.svelte

@@ -0,0 +1,5 @@
+
+<svelte:head>
+	{@html '<meta name="nested_html" content="nested_html">'}
+	<meta name="nested" content="nested">
+</svelte:head>

test/hydration/samples/head-html-and-component/_after_head.html

@@ -0,0 +1,12 @@
+<!-- HEAD_START data-svelte="svelte-17ibcve" -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_END data-svelte="svelte-17ibcve" -->
+
+<!-- HEAD_START data-svelte="svelte-1gqzvnn" -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_END data-svelte="svelte-1gqzvnn" -->
+

test/hydration/samples/head-html-and-component/_before_head.html

@@ -0,0 +1,11 @@
+<!-- HEAD_START data-svelte="svelte-17ibcve" -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_END data-svelte="svelte-17ibcve" -->
+
+<!-- HEAD_START data-svelte="svelte-1gqzvnn" -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_END data-svelte="svelte-1gqzvnn" -->

test/hydration/samples/head-html-and-component/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:head>
+	{@html '<meta name="main_html" content="main_html">'}
+	<meta name="main" content="main">
+	<HeadNested />
+</svelte:head>
+
+<Nested/>

test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html

@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link href="/" rel="canonical">
+<!-- HEAD_START data-svelte="svelte-1s8aodm" -->
-<meta content="some description" name="description">
+<link rel="canonical" href="/">
-<meta content="some keywords" name="keywords">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_END data-svelte="svelte-1s8aodm" -->

test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html

@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
+<!-- HEAD_START data-svelte="svelte-1s8aodm" -->
-<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
+<link rel="canonical" href="/">
-<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_END data-svelte="svelte-1s8aodm" -->

test/server-side-rendering/samples/head-html-and-component/HeadNested.svelte

@@ -0,0 +1,2 @@
+{@html '<meta name="head_nested_html" content="head_nested_html">'}
+<meta name="head_nested" content="head_nested">

test/server-side-rendering/samples/head-html-and-component/Nested.svelte

@@ -0,0 +1,5 @@
+
+<svelte:head>
+	{@html '<meta name="nested_html" content="nested_html">'}
+	<meta name="nested" content="nested">
+</svelte:head>

test/server-side-rendering/samples/head-html-and-component/_expected_head.html

@@ -0,0 +1,12 @@
+<!-- HEAD_START data-svelte="svelte-17ibcve" -->
+<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
+<meta name="main" content="main">
+<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
+<meta name="head_nested" content="head_nested">
+<!-- HEAD_END data-svelte="svelte-17ibcve" -->
+
+<!-- HEAD_START data-svelte="svelte-1gqzvnn" -->
+<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
+<meta name="nested" content="nested">
+<!-- HEAD_END data-svelte="svelte-1gqzvnn" -->
+

test/server-side-rendering/samples/head-html-and-component/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:head>
+	{@html '<meta name="main_html" content="main_html">'}
+	<meta name="main" content="main">
+	<HeadNested />
+</svelte:head>
+
+<Nested/>

test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html

@@ -1,4 +1,6 @@
 <title>Some Title</title>
-<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
+<!-- HEAD_START data="svelte-1s8aodm" -->
-<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
+<link rel="canonical" href="/">
-<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
+<meta name="description" content="some description">
+<meta name="keywords" content="some keywords">
+<!-- HEAD_END data="svelte-1s8aodm" -->