[fix] duplicate meta tags during hydration (#7941)

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

@@ -1,6 +1,7 @@
 import Renderer, { RenderOptions } from '../Renderer';
 import Head from '../../nodes/Head';
 import { x } from 'code-red';
+import { Node } from 'estree';
 
 export default function(node: Head, renderer: Renderer, options: RenderOptions) {
 	const head_options = {
@@ -11,6 +12,12 @@ export default function(node: Head, renderer: Renderer, options: RenderOptions)
 	renderer.push();
 	renderer.render(node.children, head_options);
 	const result = renderer.pop();
+	let expression: Node = result;
+	if (options.hydratable) {
+		const start_comment = `HEAD_${node.id}_START`;
+		const end_comment = `HEAD_${node.id}_END`;
+		expression = x`'<!-- ${start_comment} -->' + ${expression} + '<!-- ${end_comment} -->'`;
+	}
 
-	renderer.add_expression(x`$$result.head += '<!-- HEAD_${node.id}_START -->' + ${result} + '<!-- HEAD_${node.id}_END -->', ""`);
+	renderer.add_expression(x`$$result.head += ${expression}, ""`);
 }

test/server-side-rendering/index.ts

@@ -117,7 +117,9 @@ describe('ssr', () => {
 					fs.writeFileSync(`${dir}/_actual-head.html`, head);
 
 					try {
-						assert.htmlEqual(
+						(compileOptions.hydratable
+							? assert.htmlEqualWithComments
+							: assert.htmlEqual)(
 							head,
 							fs.readFileSync(`${dir}/_expected-head.html`, 'utf-8')
 						);

test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js

@@ -1,5 +1,6 @@
 export default {
 	compileOptions: {
 		hydratable: true
-	}
+	},
+	withoutNormalizeHtml: true
 };