sveltejs · Conduitry · Jan 14, 2020 · Jan 14, 2020 · Jan 14, 2020 · Jan 14, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Only attach SSR mode markers to a component's `<head>` elements when compiling with `hydratable: true` ([#4258](https://github.com/sveltejs/svelte/issues/4258))
+
 ## 3.17.0
 
 * Remove old `<head>` elements during hydration so they aren't duplicated ([#1607](https://github.com/sveltejs/svelte/issues/1607))

diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -124,7 +124,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		}
 	});
 
-	if (options.head_id) {
+	if (options.hydratable && options.head_id) {
 		renderer.add_string(` data-svelte="${options.head_id}"`);
 	}
 

diff --git a/src/compiler/compile/render_ssr/handlers/Title.ts b/src/compiler/compile/render_ssr/handlers/Title.ts
@@ -5,7 +5,11 @@ import { x } from 'code-red';
 export default function(node: Title, renderer: Renderer, options: RenderOptions) {
 	renderer.push();
 
-	renderer.add_string(`<title data-svelte="${options.head_id}">`);
+	renderer.add_string('<title');
+	if (options.hydratable && options.head_id) {
+		renderer.add_string(` data-svelte="${options.head_id}"`);
+	}
+	renderer.add_string('>');
 
 	renderer.render(node.children, options);
 

diff --git a/test/helpers.js b/test/helpers.js
@@ -45,6 +45,12 @@ export function tryToReadFile(file) {
 	}
 }
 
+export function cleanRequireCache() {
+	Object.keys(require.cache)
+		.filter(x => x.endsWith('.svelte'))
+		.forEach(file => delete require.cache[file]);
+}
+
 const virtualConsole = new jsdom.VirtualConsole();
 virtualConsole.sendTo(console);
 

diff --git a/test/runtime/index.js b/test/runtime/index.js
@@ -10,6 +10,7 @@ import {
 	showOutput,
 	loadConfig,
 	loadSvelte,
+	cleanRequireCache,
 	env,
 	setupHtmlEqual,
 	mkdirp
@@ -79,11 +80,7 @@ describe("runtime", () => {
 			compileOptions.immutable = config.immutable;
 			compileOptions.accessors = 'accessors' in config ? config.accessors : true;
 
-			Object.keys(require.cache)
-				.filter(x => x.endsWith('.svelte'))
-				.forEach(file => {
-					delete require.cache[file];
-				});
+			cleanRequireCache();
 
 			let mod;
 			let SvelteComponent;

diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
@@ -9,6 +9,7 @@ import {
 	loadSvelte,
 	setupHtmlEqual,
 	tryToLoadJson,
+	cleanRequireCache,
 	shouldUpdateExpected,
 	mkdirp
 } from "../helpers.js";
@@ -27,11 +28,6 @@ let compile = null;
 
 describe("ssr", () => {
 	before(() => {
-		require("../../register")({
-			extensions: ['.svelte', '.html'],
-			sveltePath
-		});
-
 		compile = loadSvelte(true).compile;
 
 		return setupHtmlEqual();
@@ -40,9 +36,11 @@ describe("ssr", () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
 		if (dir[0] === ".") return;
 
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+
 		// add .solo to a sample directory name to only run that test, or
 		// .show to always show the output. or both
-		const solo = /\.solo/.test(dir);
+		const solo = config.solo || /\.solo/.test(dir);
 		const show = /\.show/.test(dir);
 
 		if (solo && process.env.CI) {
@@ -51,6 +49,18 @@ describe("ssr", () => {
 
 		(solo ? it.only : it)(dir, () => {
 			dir = path.resolve(`${__dirname}/samples`, dir);
+
+			cleanRequireCache();
+
+			const compileOptions = {
+				sveltePath,
+				...config.compileOptions,
+				generate: 'ssr',
+				format: 'cjs'
+			};
+
+			require("../../register")(compileOptions);
+
 			try {
 				const Component = require(`${dir}/main.svelte`).default;
 
@@ -133,18 +143,16 @@ describe("ssr", () => {
 		(config.skip ? it.skip : solo ? it.only : it)(dir, () => {
 			const cwd = path.resolve("test/runtime/samples", dir);
 
-			Object.keys(require.cache)
-				.filter(x => x.endsWith('.svelte'))
-				.forEach(file => {
-					delete require.cache[file];
-				});
+			cleanRequireCache();
 
 			delete global.window;
 
-			const compileOptions = Object.assign({ sveltePath }, config.compileOptions, {
+			const compileOptions = {
+				sveltePath,
+				...config.compileOptions,
 				generate: 'ssr',
 				format: 'cjs'
-			});
+			};
 
 			require("../../register")(compileOptions);
 

diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		hydratable: true
+	}
+};
diff --git a/test/server-side-rendering/samples/head-multiple-title/_expected-head.html b/test/server-side-rendering/samples/head-multiple-title/_expected-head.html
@@ -1 +1 @@
-<title data-svelte="svelte-1csszk6">B</title>
+<title>B</title>
diff --git a/test/server-side-rendering/samples/head-title/_expected-head.html b/test/server-side-rendering/samples/head-title/_expected-head.html
@@ -1 +1 @@
-<title data-svelte="svelte-135agoq">a custom title</title>
+<title>a custom title</title>
-Original file line number
+Diff line change
@@ Expand Up @@
     		}
     	});
-    	if (options.head_id) {
+    	if (options.hydratable && options.head_id) {
     		renderer.add_string(` data-svelte="${options.head_id}"`);
     	}
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<title data-svelte="svelte-1csszk6">B</title>
		<title>B</title>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<title data-svelte="svelte-135agoq">a custom title</title>
		<title>a custom title</title>