From df2f656557999b0912171b4513986f8526da7a5b Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 20 Apr 2023 15:47:38 +0800
Subject: [PATCH] feat: improve hydration, claim static html elements using
 innerHTML instead of deopt to claiming every nodes (#7426)

Related: #7341, #7226

For purely static HTML, instead of walking the node tree and claiming every node/text etc, hydration now uses the same innerHTML optimization technique for hydration compared to normal create. It uses a new data-svelte-h attribute which is added upon server side rendering containing a hash (computed at build time), and then comparing that hash in the client to ensure it's the same node. If the hash is the same, the whole child content is expected to be the same. If the hash is different, the whole child content is replaced with innerHTML.

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 src/compiler/compile/Component.ts             | 10 ++
 src/compiler/compile/nodes/Attribute.ts       |  5 +
 src/compiler/compile/nodes/AwaitBlock.ts      |  2 +
 src/compiler/compile/nodes/EachBlock.ts       |  2 +
 src/compiler/compile/nodes/Element.ts         | 34 +++++++
 src/compiler/compile/nodes/Head.ts            |  2 +
 src/compiler/compile/nodes/IfBlock.ts         |  2 +
 src/compiler/compile/nodes/InlineComponent.ts |  3 +
 src/compiler/compile/nodes/KeyBlock.ts        |  2 +
 src/compiler/compile/nodes/RawMustacheTag.ts  |  5 +
 src/compiler/compile/nodes/Slot.ts            |  3 +
 src/compiler/compile/nodes/Text.ts            |  8 ++
 .../compile/nodes/shared/Expression.ts        |  9 ++
 src/compiler/compile/nodes/shared/Node.ts     |  9 ++
 src/compiler/compile/nodes/shared/Tag.ts      | 11 +++
 .../compile/render_dom/wrappers/AwaitBlock.ts |  3 -
 .../compile/render_dom/wrappers/Comment.ts    |  6 ++
 .../compile/render_dom/wrappers/EachBlock.ts  |  2 -
 .../render_dom/wrappers/Element/Attribute.ts  |  3 -
 .../render_dom/wrappers/Element/index.ts      | 96 ++++++++++---------
 .../compile/render_dom/wrappers/Head.ts       |  2 -
 .../compile/render_dom/wrappers/IfBlock.ts    |  3 -
 .../wrappers/InlineComponent/index.ts         |  3 -
 .../compile/render_dom/wrappers/KeyBlock.ts   |  3 -
 .../render_dom/wrappers/RawMustacheTag.ts     |  2 -
 .../compile/render_dom/wrappers/Slot.ts       |  2 -
 .../compile/render_dom/wrappers/Text.ts       | 19 ++--
 .../compile/render_dom/wrappers/shared/Tag.ts |  9 --
 .../render_dom/wrappers/shared/Wrapper.ts     | 15 ---
 src/compiler/compile/render_ssr/Renderer.ts   |  1 +
 .../compile/render_ssr/handlers/Element.ts    |  7 ++
 .../compile/render_ssr/handlers/Text.ts       |  4 +-
 .../utils/remove_whitespace_children.ts       |  1 +
 src/compiler/compile/utils/stringify.ts       |  3 +-
 src/runtime/internal/dom.ts                   |  4 +
 test/helpers.ts                               | 25 +++--
 test/hydration/index.ts                       |  7 ++
 test/hydration/samples/basic/_after.html      |  2 +-
 test/hydration/samples/basic/_before.html     |  2 +-
 test/hydration/samples/basic/_config.js       |  7 --
 .../samples/binding-input/_config.js          |  7 +-
 .../samples/claim-comment/_after.html         |  2 +
 .../samples/claim-comment/_before.html        |  2 +
 .../samples/claim-comment/_config.js          | 12 +--
 .../samples/claim-comment/main.svelte         |  2 +
 .../claim-static-incorrect-hash/_after.html   |  8 ++
 .../claim-static-incorrect-hash/_before.html  |  8 ++
 .../claim-static-incorrect-hash/main.svelte   |  8 ++
 .../samples/claim-static-no-hash/_after.html  |  8 ++
 .../samples/claim-static-no-hash/_before.html |  8 ++
 .../samples/claim-static-no-hash/main.svelte  |  8 ++
 test/hydration/samples/claim-text/_config.js  |  8 ++
 .../samples/component-in-element/_after.html  |  2 +-
 .../samples/component-in-element/_before.html |  2 +-
 .../samples/component-in-element/_config.js   |  9 --
 test/hydration/samples/component/_after.html  |  2 +-
 test/hydration/samples/component/_before.html |  2 +-
 test/hydration/samples/component/_config.js   |  7 --
 .../samples/dynamic-text-changed/_config.js   |  7 --
 .../samples/dynamic-text-nil/_config.js       |  8 --
 .../hydration/samples/dynamic-text/_config.js |  7 --
 .../samples/each-block-arg-clash/_config.js   | 14 +--
 test/hydration/samples/each-block/_config.js  | 14 +--
 .../element-attribute-added/_config.js        |  6 --
 .../element-attribute-changed/_config.js      |  6 --
 .../element-attribute-removed/_config.js      |  6 --
 .../element-attribute-unchanged/_config.js    |  6 --
 .../samples/element-nested-sibling/_config.js |  8 --
 .../samples/element-nested/_after.html        |  2 +-
 .../samples/element-nested/_before.html       |  2 +-
 .../samples/element-nested/_config.js         |  7 --
 test/hydration/samples/element-ref/_config.js |  4 +-
 .../samples/event-handler/_config.js          |  4 +-
 .../samples/expression-sibling/_config.js     |  8 --
 .../samples/if-block-anchor/_config.js        |  9 --
 .../samples/if-block-false/_config.js         |  6 --
 .../samples/if-block-update/_config.js        |  5 +-
 test/hydration/samples/if-block/_config.js    |  6 --
 test/hydration/samples/raw/_config.js         |  9 --
 .../samples/collapse-literal-ssr/expected.js  | 12 +--
 test/js/samples/debug-ssr-foo/expected.js     |  9 +-
 .../each-block-changed-check/expected.js      |  4 +-
 .../samples/ssr-preserve-comments/expected.js |  6 +-
 test/runtime/index.ts                         | 15 ++-
 .../dynamic-element-action-update/_config.js  |  4 +-
 .../dynamic-element-action-update/main.svelte |  8 +-
 .../fragment-trailing-whitespace/_config.js   |  4 +-
 test/runtime/samples/pre-tag/_config.js       | 52 ++++------
 .../samples/preserve-whitespaces/_config.js   | 33 ++-----
 .../raw-mustaches-preserved/_config.js        |  2 +-
 .../samples/textarea-content/_config.js       | 17 ++++
 test/server-side-rendering/index.ts           | 25 +++--
 .../_expected.html                            |  4 +-
 .../samples/pre-tag/.editorconfig             |  2 -
 .../samples/pre-tag/_config.js                |  3 -
 .../samples/pre-tag/_expected.html            | 39 --------
 .../samples/pre-tag/main.svelte               | 51 ----------
 .../samples/preserve-whitespaces/_config.js   |  6 --
 .../preserve-whitespaces/_expected.html       | 32 -------
 .../samples/preserve-whitespaces/main.svelte  | 34 -------
 .../samples/textarea-content/.editorconfig    |  2 -
 .../samples/textarea-content/_config.js       |  3 -
 .../samples/textarea-content/_expected.html   | 28 ------
 .../samples/textarea-content/main.svelte      | 40 --------
 104 files changed, 384 insertions(+), 638 deletions(-)
 create mode 100644 test/hydration/samples/claim-static-incorrect-hash/_after.html
 create mode 100644 test/hydration/samples/claim-static-incorrect-hash/_before.html
 create mode 100644 test/hydration/samples/claim-static-incorrect-hash/main.svelte
 create mode 100644 test/hydration/samples/claim-static-no-hash/_after.html
 create mode 100644 test/hydration/samples/claim-static-no-hash/_before.html
 create mode 100644 test/hydration/samples/claim-static-no-hash/main.svelte
 create mode 100644 test/hydration/samples/claim-text/_config.js
 delete mode 100644 test/server-side-rendering/samples/pre-tag/.editorconfig
 delete mode 100644 test/server-side-rendering/samples/pre-tag/_config.js
 delete mode 100644 test/server-side-rendering/samples/pre-tag/_expected.html
 delete mode 100644 test/server-side-rendering/samples/pre-tag/main.svelte
 delete mode 100644 test/server-side-rendering/samples/preserve-whitespaces/_config.js
 delete mode 100644 test/server-side-rendering/samples/preserve-whitespaces/_expected.html
 delete mode 100644 test/server-side-rendering/samples/preserve-whitespaces/main.svelte
 delete mode 100644 test/server-side-rendering/samples/textarea-content/.editorconfig
 delete mode 100644 test/server-side-rendering/samples/textarea-content/_config.js
 delete mode 100644 test/server-side-rendering/samples/textarea-content/_expected.html
 delete mode 100644 test/server-side-rendering/samples/textarea-content/main.svelte

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 9fb41b6108cc..b9d78ae7bd30 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -38,6 +38,7 @@ import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';
 import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
 import check_enable_sourcemap from './utils/check_enable_sourcemap';
+import Tag from './nodes/shared/Tag';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -110,6 +111,8 @@ export default class Component {
 	slots: Map<string, Slot> = new Map();
 	slot_outlets: Set<string> = new Set();
 
+	tags: Tag[] = [];
+
 	constructor(
 		ast: Ast,
 		source: string,
@@ -761,6 +764,7 @@ export default class Component {
 
 		this.hoist_instance_declarations();
 		this.extract_reactive_declarations();
+		this.check_if_tags_content_dynamic();
 	}
 
 	post_template_walk() {
@@ -1479,6 +1483,12 @@ export default class Component {
 		unsorted_reactive_declarations.forEach(add_declaration);
 	}
 
+	check_if_tags_content_dynamic() {
+		this.tags.forEach(tag => {
+			tag.check_if_content_dynamic();
+		});
+	}
+
 	warn_if_undefined(name: string, node, template_scope: TemplateScope) {
 		if (name[0] === '$') {
 			if (name === '$' || name[1] === '$' && !is_reserved_keyword(name)) {
diff --git a/src/compiler/compile/nodes/Attribute.ts b/src/compiler/compile/nodes/Attribute.ts
index ebed483288a6..9e14a3233ebf 100644
--- a/src/compiler/compile/nodes/Attribute.ts
+++ b/src/compiler/compile/nodes/Attribute.ts
@@ -59,6 +59,11 @@ export default class Attribute extends Node {
 					return expression;
 				});
 		}
+
+		if (this.dependencies.size > 0) {
+			parent.cannot_use_innerhtml();
+			parent.not_static_content();
+		}
 	}
 
 	get_dependencies() {
diff --git a/src/compiler/compile/nodes/AwaitBlock.ts b/src/compiler/compile/nodes/AwaitBlock.ts
index 4a669b6365b5..b61beab478bc 100644
--- a/src/compiler/compile/nodes/AwaitBlock.ts
+++ b/src/compiler/compile/nodes/AwaitBlock.ts
@@ -27,6 +27,8 @@ export default class AwaitBlock extends Node {
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
 
 		this.expression = new Expression(component, this, scope, info.expression);
 
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
index 4659a53d73c7..b78f70337654 100644
--- a/src/compiler/compile/nodes/EachBlock.ts
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -33,6 +33,8 @@ export default class EachBlock extends AbstractBlock {
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
 
 		this.expression = new Expression(component, this, scope, info.expression);
 		this.context = info.context.name || 'each'; // TODO this is used to facilitate binding; currently fails with destructuring
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index ee62d3e7e8be..d38c299d36d3 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -15,6 +15,7 @@ import { is_name_contenteditable, get_contenteditable_attr, has_contenteditable_
 import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character, regex_box_size } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
+import hash from '../utils/hash';
 import Let from './Let';
 import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
@@ -503,6 +504,25 @@ export default class Element extends Node {
 		this.optimise();
 
 		component.apply_stylesheet(this);
+
+		if (this.parent) {
+			if (this.actions.length > 0 ||
+				this.animation ||
+				this.bindings.length > 0 ||
+				this.classes.length > 0 ||
+				this.intro || this.outro ||
+				this.handlers.length > 0 ||
+				this.styles.length > 0 ||
+				this.name === 'option' ||
+				this.is_dynamic_element ||
+				this.tag_expr.dynamic_dependencies().length ||
+				this.is_dynamic_element ||
+				component.compile_options.dev
+			) {
+				this.parent.cannot_use_innerhtml(); // need to use add_location
+				this.parent.not_static_content();
+			}
+		}
 	}
 
 	validate() {
@@ -1262,6 +1282,20 @@ export default class Element extends Node {
 			}
 		});
 	}
+
+	get can_use_textcontent() {
+		return this.is_static_content && this.children.every(node => node.type === 'Text' || node.type === 'MustacheTag');
+	}
+
+	get can_optimise_to_html_string() {
+		const can_use_textcontent = this.can_use_textcontent;
+		const is_template_with_text_content = this.name === 'template' && can_use_textcontent;
+		return !is_template_with_text_content && !this.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.children.length > 0;
+	}
+
+	hash() {
+		return `svelte-${hash(this.component.source.slice(this.start, this.end))}`;
+	}
 }
 
 const regex_starts_with_vowel = /^[aeiou]/;
diff --git a/src/compiler/compile/nodes/Head.ts b/src/compiler/compile/nodes/Head.ts
index 1ebe0c053aa7..83319092b3e1 100644
--- a/src/compiler/compile/nodes/Head.ts
+++ b/src/compiler/compile/nodes/Head.ts
@@ -15,6 +15,8 @@ export default class Head extends Node {
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
+		this.cannot_use_innerhtml();
+
 		if (info.attributes.length) {
 			component.error(info.attributes[0], compiler_errors.invalid_attribute_head);
 			return;
diff --git a/src/compiler/compile/nodes/IfBlock.ts b/src/compiler/compile/nodes/IfBlock.ts
index 8351f1e0e271..4c337ac0cee8 100644
--- a/src/compiler/compile/nodes/IfBlock.ts
+++ b/src/compiler/compile/nodes/IfBlock.ts
@@ -18,6 +18,8 @@ export default class IfBlock extends AbstractBlock {
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 		this.scope = scope.child();
+		this.cannot_use_innerhtml();
+		this.not_static_content();
 
 		this.expression = new Expression(component, this, this.scope, info.expression);
 		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index e9ac86a55cf5..5fc7c89ae440 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -28,6 +28,9 @@ export default class InlineComponent extends Node {
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
 		if (info.name !== 'svelte:component' && info.name !== 'svelte:self') {
 			const name = info.name.split('.')[0]; // accommodate namespaces
 			component.warn_if_undefined(name, info, scope);
diff --git a/src/compiler/compile/nodes/KeyBlock.ts b/src/compiler/compile/nodes/KeyBlock.ts
index 5261e14e0a0e..cd0ea56f8ea7 100644
--- a/src/compiler/compile/nodes/KeyBlock.ts
+++ b/src/compiler/compile/nodes/KeyBlock.ts
@@ -13,6 +13,8 @@ export default class KeyBlock extends AbstractBlock {
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
 
 		this.expression = new Expression(component, this, scope, info.expression);
 
diff --git a/src/compiler/compile/nodes/RawMustacheTag.ts b/src/compiler/compile/nodes/RawMustacheTag.ts
index 816ef8d7c579..99aeba26238e 100644
--- a/src/compiler/compile/nodes/RawMustacheTag.ts
+++ b/src/compiler/compile/nodes/RawMustacheTag.ts
@@ -2,4 +2,9 @@ import Tag from './shared/Tag';
 
 export default class RawMustacheTag extends Tag {
 	type: 'RawMustacheTag';
+	constructor(component, parent, scope, info) {
+		super(component, parent, scope, info);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+	}
 }
diff --git a/src/compiler/compile/nodes/Slot.ts b/src/compiler/compile/nodes/Slot.ts
index c21a48f5d665..9a0b1ea815f5 100644
--- a/src/compiler/compile/nodes/Slot.ts
+++ b/src/compiler/compile/nodes/Slot.ts
@@ -60,5 +60,8 @@ export default class Slot extends Element {
 		}
 
 		component.slots.set(this.slot_name, this);
+
+		this.cannot_use_innerhtml();
+		this.not_static_content();
 	}
 }
diff --git a/src/compiler/compile/nodes/Text.ts b/src/compiler/compile/nodes/Text.ts
index ac6cd9b82871..d750477c8a7f 100644
--- a/src/compiler/compile/nodes/Text.ts
+++ b/src/compiler/compile/nodes/Text.ts
@@ -18,6 +18,7 @@ const elements_without_text = new Set([
 ]);
 
 const regex_ends_with_svg = /svg$/;
+const regex_non_whitespace_characters = /[\S\u00A0]/;
 
 export default class Text extends Node {
 	type: 'Text';
@@ -63,4 +64,11 @@ export default class Text extends Node {
 
 		return false;
 	}
+
+	use_space(): boolean {
+		if (this.component.compile_options.preserveWhitespace) return false;
+		if (regex_non_whitespace_characters.test(this.data)) return false;
+
+		return !this.within_pre();
+	}
 }
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 65b10d04c820..900e78efc1fc 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -197,6 +197,15 @@ export default class Expression {
 		});
 	}
 
+	dynamic_contextual_dependencies() {
+		return Array.from(this.contextual_dependencies).filter(name => {
+			return Array.from(this.template_scope.dependencies_for_name.get(name)).some(variable_name => {
+				const variable = this.component.var_lookup.get(variable_name);
+				return is_dynamic(variable);
+			});
+		});
+	}
+
 	// TODO move this into a render-dom wrapper?
 	manipulate(block?: Block, ctx?: string | void) {
 		// TODO ideally we wouldn't end up calling this method
diff --git a/src/compiler/compile/nodes/shared/Node.ts b/src/compiler/compile/nodes/shared/Node.ts
index 3c39f6d9d34b..9eeb110d201d 100644
--- a/src/compiler/compile/nodes/shared/Node.ts
+++ b/src/compiler/compile/nodes/shared/Node.ts
@@ -15,6 +15,7 @@ export default class Node {
 	next?: INode;
 
 	can_use_innerhtml: boolean;
+	is_static_content: boolean;
 	var: string;
 	attributes: Attribute[];
 
@@ -33,6 +34,9 @@ export default class Node {
 				value: parent
 			}
 		});
+
+		this.can_use_innerhtml = true;
+		this.is_static_content = true;
 	}
 
 	cannot_use_innerhtml() {
@@ -42,6 +46,11 @@ export default class Node {
 		}
 	}
 
+	not_static_content() {
+		this.is_static_content = false;
+		if (this.parent) this.parent.not_static_content();
+	}
+
 	find_nearest(selector: RegExp) {
 		if (selector.test(this.type)) return this;
 		if (this.parent) return this.parent.find_nearest(selector);
diff --git a/src/compiler/compile/nodes/shared/Tag.ts b/src/compiler/compile/nodes/shared/Tag.ts
index bc826458d9a7..23d94ce01e02 100644
--- a/src/compiler/compile/nodes/shared/Tag.ts
+++ b/src/compiler/compile/nodes/shared/Tag.ts
@@ -8,6 +8,9 @@ export default class Tag extends Node {
 
 	constructor(component, parent, scope, info) {
 		super(component, parent, scope, info);
+		component.tags.push(this);
+		this.cannot_use_innerhtml();
+
 		this.expression = new Expression(component, this, scope, info.expression);
 
 		this.should_cache = (
@@ -15,4 +18,12 @@ export default class Tag extends Node {
 			(this.expression.dependencies.size && scope.names.has(info.expression.name))
 		);
 	}
+	is_dependencies_static() {
+		return this.expression.dynamic_contextual_dependencies().length === 0 && this.expression.dynamic_dependencies().length === 0;
+	}
+	check_if_content_dynamic() {
+		if (!this.is_dependencies_static()) {
+			this.not_static_content();
+		}
+	}
 }
diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
index 534595f4a9d9..e6807621d272 100644
--- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -143,9 +143,6 @@ export default class AwaitBlockWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
-		this.cannot_use_innerhtml();
-		this.not_static_content();
-
 		block.add_dependencies(this.node.expression.dependencies);
 
 		let is_dynamic = false;
diff --git a/src/compiler/compile/render_dom/wrappers/Comment.ts b/src/compiler/compile/render_dom/wrappers/Comment.ts
index a8c63b4227bf..9c4e2ffdfb6b 100644
--- a/src/compiler/compile/render_dom/wrappers/Comment.ts
+++ b/src/compiler/compile/render_dom/wrappers/Comment.ts
@@ -38,4 +38,10 @@ export default class CommentWrapper extends Wrapper {
 			parent_node
 		);
 	}
+
+	text() {
+	    if (!this.renderer.options.preserveComments) return '';
+
+		return `<!--${this.node.data}-->`;
+	}
 }
diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 9c1af7ce44d4..36f733caef95 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -80,8 +80,6 @@ export default class EachBlockWrapper extends Wrapper {
 		next_sibling: Wrapper
 	) {
 		super(renderer, block, parent, node);
-		this.cannot_use_innerhtml();
-		this.not_static_content();
 
 		const { dependencies } = node.expression;
 		block.add_dependencies(dependencies);
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 61311fd83ced..4b77c808e4ec 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -36,9 +36,6 @@ export class BaseAttributeWrapper {
 		this.parent = parent;
 
 		if (node.dependencies.size > 0) {
-			parent.cannot_use_innerhtml();
-			parent.not_static_content();
-
 			block.add_dependencies(node.dependencies);
 		}
 	}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index cefebfcff35f..9906c29e3918 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -29,6 +29,7 @@ import is_dynamic from '../shared/is_dynamic';
 import { is_name_contenteditable, has_contenteditable_attr } from '../../../utils/contenteditable';
 import create_debugging_comment from '../shared/create_debugging_comment';
 import { push_array } from '../../../../utils/push_array';
+import CommentWrapper from '../Comment';
 
 interface BindingGroup {
 	events: string[];
@@ -288,24 +289,6 @@ export default class ElementWrapper extends Wrapper {
 			}
 		});
 
-		if (this.parent) {
-			if (node.actions.length > 0 ||
-				node.animation ||
-				node.bindings.length > 0 ||
-				node.classes.length > 0 ||
-				node.intro || node.outro ||
-				node.handlers.length > 0 ||
-				node.styles.length > 0 ||
-				this.node.name === 'option' ||
-				node.tag_expr.dynamic_dependencies().length ||
-				node.is_dynamic_element ||
-				renderer.options.dev
-			) {
-				this.parent.cannot_use_innerhtml(); // need to use add_location
-				this.parent.not_static_content();
-			}
-		}
-
 		this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
 
 		this.element_data_name = block.get_unique_name(`${this.var.name}_data`);
@@ -445,6 +428,7 @@ export default class ElementWrapper extends Wrapper {
 	render_element(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
 
 		const { renderer } = this;
+		const hydratable = renderer.options.hydratable;
 
 		if (this.node.name === 'noscript') return;
 
@@ -458,13 +442,15 @@ export default class ElementWrapper extends Wrapper {
 			b`${node} = ${render_statement};`
 		);
 
-		if (renderer.options.hydratable) {
+		const { can_use_textcontent, can_optimise_to_html_string } = this.node;
+
+		if (hydratable) {
 			if (parent_nodes) {
 				block.chunks.claim.push(b`
-					${node} = ${this.get_claim_statement(block, parent_nodes)};
+					${node} = ${this.get_claim_statement(block, parent_nodes, can_optimise_to_html_string)};
 				`);
 
-				if (!this.void && this.node.children.length > 0) {
+				if (!can_optimise_to_html_string && !this.void && this.node.children.length > 0) {
 					block.chunks.claim.push(b`
 						var ${nodes} = ${children};
 					`);
@@ -502,15 +488,19 @@ export default class ElementWrapper extends Wrapper {
 
 		// insert static children with textContent or innerHTML
 		// skip textcontent for <template>.  append nodes to TemplateElement.content instead
-		const can_use_textcontent = this.can_use_textcontent();
-		const is_template = this.node.name === 'template';
-		const is_template_with_text_content = is_template && can_use_textcontent;
-
-		if (!is_template_with_text_content && !this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) {
+		if (can_optimise_to_html_string) {
 			if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
-				block.chunks.create.push(
-					b`${node}.textContent = ${string_literal((this.fragment.nodes[0] as TextWrapper).data)};`
-				);
+				let text: Node = string_literal((this.fragment.nodes[0] as TextWrapper).data);
+				if (hydratable) {
+					const variable = block.get_unique_name('textContent');
+					block.add_variable(variable, text);
+					text = variable;
+				}
+
+				block.chunks.create.push(b`${node}.textContent = ${text};`);
+				if (hydratable) {
+					block.chunks.claim.push(b`if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.textContent = ${text};`);
+				}
 			} else {
 				const state = {
 					quasi: {
@@ -519,25 +509,33 @@ export default class ElementWrapper extends Wrapper {
 					}
 				};
 
-				const literal = {
+				let literal: Node = {
 					type: 'TemplateLiteral',
 					expressions: [],
 					quasis: []
 				};
 
-				const can_use_raw_text = !this.can_use_innerhtml && can_use_textcontent;
-				to_html((this.fragment.nodes as unknown as Array<ElementWrapper | TextWrapper>), block, literal, state, can_use_raw_text);
-				literal.quasis.push(state.quasi);
+				const can_use_raw_text = !this.node.can_use_innerhtml && can_use_textcontent;
+				to_html((this.fragment.nodes as unknown as Array<ElementWrapper | CommentWrapper | TextWrapper>), block, literal, state, can_use_raw_text);
+				literal.quasis.push(state.quasi as any);
 
-				block.chunks.create.push(
-					b`${node}.${this.can_use_innerhtml ? 'innerHTML' : 'textContent'} = ${literal};`
-				);
+				if (hydratable) {
+					const variable = block.get_unique_name('textContent');
+					block.add_variable(variable, literal);
+					literal = variable;
+				}
+				const property = this.node.can_use_innerhtml ? 'innerHTML' : 'textContent';
+
+				block.chunks.create.push(b`${node}.${property} = ${literal};`);
+				if (hydratable) {
+					block.chunks.claim.push(b`if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.${property} = ${literal};`);
+				}
 			}
 		} else {
 			this.fragment.nodes.forEach((child: Wrapper) => {
 				child.render(
 					block,
-					is_template ? x`${node}.content` : node,
+					this.node.name === 'template' ? x`${node}.content` : node,
 					nodes,
 					{ element_data_name: this.element_data_name }
 				);
@@ -566,7 +564,7 @@ export default class ElementWrapper extends Wrapper {
 		this.add_styles(block);
 		this.add_manual_style_scoping(block);
 
-		if (nodes && this.renderer.options.hydratable && !this.void) {
+		if (nodes && hydratable && !this.void && !can_optimise_to_html_string) {
 			block.chunks.claim.push(
 				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
 			);
@@ -582,10 +580,6 @@ export default class ElementWrapper extends Wrapper {
 		block.renderer.dirty(this.node.tag_expr.dynamic_dependencies());
 	}
 
-	can_use_textcontent() {
-		return this.is_static_content && this.fragment.nodes.every(node => node.node.type === 'Text' || node.node.type === 'MustacheTag');
-	}
-
 	get_render_statement(block: Block) {
 		const { name, namespace, tag_expr } = this.node;
 		const reference = tag_expr.manipulate(block);
@@ -606,7 +600,7 @@ export default class ElementWrapper extends Wrapper {
 		return x`@element(${reference})`;
 	}
 
-	get_claim_statement(block: Block, nodes: Identifier) {
+	get_claim_statement(block: Block, nodes: Identifier, to_optimise_hydration: boolean) {
 		const attributes = this.attributes
 			.filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
 			.map((attr) => p`${(attr as StyleAttributeWrapper | AttributeWrapper).name}: true`);
@@ -624,6 +618,10 @@ export default class ElementWrapper extends Wrapper {
 			reference = x`(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
 		}
 
+		if (to_optimise_hydration) {
+			attributes.push(p`["data-svelte-h"]: true`);
+		}
+
 		if (this.node.namespace === namespaces.svg) {
 			return x`@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;
 		} else {
@@ -1288,13 +1286,19 @@ export default class ElementWrapper extends Wrapper {
 const regex_backticks = /`/g;
 const regex_dollar_signs = /\$/g;
 
-function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapper | RawMustacheTagWrapper>, block: Block, literal: any, state: any, can_use_raw_text?: boolean) {
+function to_html(wrappers: Array<CommentWrapper | ElementWrapper | TextWrapper | MustacheTagWrapper | RawMustacheTagWrapper>, block: Block, literal: any, state: any, can_use_raw_text?: boolean) {
 	wrappers.forEach(wrapper => {
-		if (wrapper instanceof TextWrapper) {
+		if (wrapper instanceof CommentWrapper) {
+			state.quasi.value.raw += wrapper.text();
+		} else if (wrapper instanceof TextWrapper) {
 			// Don't add the <pre>/<textarea> newline logic here because pre/textarea.innerHTML
 			// would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
 
-			if ((wrapper as TextWrapper).use_space()) state.quasi.value.raw += ' ';
+			if (wrapper.use_space()) {
+				// use space instead of the text content
+				state.quasi.value.raw += ' ';
+				return;
+			}
 
 			const parent = wrapper.node.parent as Element;
 
diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts
index 7915604f98ef..da0eb6b3fcf7 100644
--- a/src/compiler/compile/render_dom/wrappers/Head.ts
+++ b/src/compiler/compile/render_dom/wrappers/Head.ts
@@ -20,8 +20,6 @@ export default class HeadWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
-		this.can_use_innerhtml = false;
-
 		this.fragment = new FragmentWrapper(
 			renderer,
 			block,
diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
index 9c4798c69cfa..44744a060b6c 100644
--- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
@@ -105,9 +105,6 @@ export default class IfBlockWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
-		this.cannot_use_innerhtml();
-		this.not_static_content();
-
 		this.branches = [];
 
 		const blocks: Block[] = [];
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index ab140a75c500..58bfaa292a47 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -44,9 +44,6 @@ export default class InlineComponentWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
-		this.cannot_use_innerhtml();
-		this.not_static_content();
-
 		if (this.node.expression) {
 			block.add_dependencies(this.node.expression.dependencies);
 		}
diff --git a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
index 6a67f73c629b..0a81d0212652 100644
--- a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
@@ -24,9 +24,6 @@ export default class KeyBlockWrapper extends Wrapper {
 	) {
 		super(renderer, block, parent, node);
 
-		this.cannot_use_innerhtml();
-		this.not_static_content();
-
 		this.dependencies = node.expression.dynamic_dependencies();
 
 		if (this.dependencies.length) {
diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index 6cd8820b875f..5c831b9f38cb 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -20,8 +20,6 @@ export default class RawMustacheTagWrapper extends Tag {
 		node: MustacheTag | RawMustacheTag
 	) {
 		super(renderer, block, parent, node);
-		this.cannot_use_innerhtml();
-		this.not_static_content();
 	}
 
 	render(block: Block, parent_node: Identifier, _parent_nodes: Identifier) {
diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
index 0a589e339489..cb617aa5b734 100644
--- a/src/compiler/compile/render_dom/wrappers/Slot.ts
+++ b/src/compiler/compile/render_dom/wrappers/Slot.ts
@@ -30,8 +30,6 @@ export default class SlotWrapper extends Wrapper {
 		next_sibling: Wrapper
 	) {
 		super(renderer, block, parent, node);
-		this.cannot_use_innerhtml();
-		this.not_static_content();
 
 		if (this.node.children.length) {
 			this.fallback = block.child({
diff --git a/src/compiler/compile/render_dom/wrappers/Text.ts b/src/compiler/compile/render_dom/wrappers/Text.ts
index 7d02735d9a51..1928ea4a7db1 100644
--- a/src/compiler/compile/render_dom/wrappers/Text.ts
+++ b/src/compiler/compile/render_dom/wrappers/Text.ts
@@ -5,11 +5,9 @@ import Wrapper from './shared/Wrapper';
 import { x } from 'code-red';
 import { Identifier } from 'estree';
 
-const regex_non_whitespace_characters = /[\S\u00A0]/;
-
 export default class TextWrapper extends Wrapper {
 	node: Text;
-	data: string;
+	_data: string;
 	skip: boolean;
 	var: Identifier;
 
@@ -23,15 +21,22 @@ export default class TextWrapper extends Wrapper {
 		super(renderer, block, parent, node);
 
 		this.skip = this.node.should_skip();
-		this.data = data;
+		this._data = data;
 		this.var = (this.skip ? null : x`t`) as unknown as Identifier;
 	}
 
 	use_space() {
-		if (this.renderer.component.component_options.preserveWhitespace) return false;
-		if (regex_non_whitespace_characters.test(this.data)) return false;
+		return this.node.use_space();
+	}
 
-		return !this.node.within_pre();
+	set data(value: string) {
+		// when updating `this.data` during optimisation
+		// propagate the changes over to the underlying node
+		// so that the node.use_space reflects on the latest `data` value
+		this.node.data = this._data = value;
+	}
+	get data() {
+		return this._data;
 	}
 
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
diff --git a/src/compiler/compile/render_dom/wrappers/shared/Tag.ts b/src/compiler/compile/render_dom/wrappers/shared/Tag.ts
index 8d73b0329d11..1a8ed65da5d9 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/Tag.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/Tag.ts
@@ -12,18 +12,9 @@ export default class Tag extends Wrapper {
 	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: MustacheTag | RawMustacheTag) {
 		super(renderer, block, parent, node);
 
-		this.cannot_use_innerhtml();
-		if (!this.is_dependencies_static()) {
-			this.not_static_content();
-		}
-
 		block.add_dependencies(node.expression.dependencies);
 	}
 
-	is_dependencies_static() {
-		return this.node.expression.contextual_dependencies.size === 0 && this.node.expression.dynamic_dependencies().length === 0;
-	}
-
 	rename_this_method(
 		block: Block,
 		update: ((value: Node) => (Node | Node[]))
diff --git a/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts b/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts
index 53847d887071..ea3b85d4fa1a 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts
@@ -13,8 +13,6 @@ export default class Wrapper {
 	next: Wrapper | null;
 
 	var: Identifier;
-	can_use_innerhtml: boolean;
-	is_static_content: boolean;
 
 	constructor(
 		renderer: Renderer,
@@ -35,22 +33,9 @@ export default class Wrapper {
 			}
 		});
 
-		this.can_use_innerhtml = !renderer.options.hydratable;
-		this.is_static_content = !renderer.options.hydratable;
-
 		block.wrappers.push(this);
 	}
 
-	cannot_use_innerhtml() {
-		this.can_use_innerhtml = false;
-		if (this.parent) this.parent.cannot_use_innerhtml();
-	}
-
-	not_static_content() {
-		this.is_static_content = false;
-		if (this.parent) this.parent.not_static_content();
-	}
-
 	get_or_create_anchor(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
 		// TODO use this in EachBlock and IfBlock — tricky because
 		// children need to be created first
diff --git a/src/compiler/compile/render_ssr/Renderer.ts b/src/compiler/compile/render_ssr/Renderer.ts
index ac78d032ead8..5fd473a9cffe 100644
--- a/src/compiler/compile/render_ssr/Renderer.ts
+++ b/src/compiler/compile/render_ssr/Renderer.ts
@@ -48,6 +48,7 @@ const handlers: Record<string, Handler> = {
 export interface RenderOptions extends CompileOptions{
 	locate: (c: number) => { line: number; column: number };
 	head_id?: string;
+	has_added_svelte_hash?: boolean;
 }
 
 export default class Renderer {
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index d9254a7b860b..96e0afb3589f 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -158,6 +158,13 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		}
 	});
 
+	if (options.hydratable) {
+		if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
+			renderer.add_string(` data-svelte-h="${node.hash()}"`);
+			options = { ...options, has_added_svelte_hash: true };
+		}
+	}
+
 	renderer.add_string('>');
 
 	if (node_contents !== undefined) {
diff --git a/src/compiler/compile/render_ssr/handlers/Text.ts b/src/compiler/compile/render_ssr/handlers/Text.ts
index b86b79bdb9c8..44bef7c2a7cf 100644
--- a/src/compiler/compile/render_ssr/handlers/Text.ts
+++ b/src/compiler/compile/render_ssr/handlers/Text.ts
@@ -5,7 +5,9 @@ import Element from '../../nodes/Element';
 
 export default function(node: Text, renderer: Renderer, _options: RenderOptions) {
 	let text = node.data;
-	if (
+	if (node.use_space()) {
+		text = ' ';
+	} else if (
 		!node.parent ||
 		node.parent.type !== 'Element' ||
 		((node.parent as Element).name !== 'script' && (node.parent as Element).name !== 'style')
diff --git a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
index 10ccaefa9299..b173077ff422 100644
--- a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
+++ b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
@@ -39,6 +39,7 @@ export default function remove_whitespace_children(children: INode[], next?: INo
 				continue;
 			}
 
+			child.data = data;
 			nodes.unshift(child);
 			link(last_child, last_child = child);
 		} else {
diff --git a/src/compiler/compile/utils/stringify.ts b/src/compiler/compile/utils/stringify.ts
index 84073c6469ef..5dfd37d7a665 100644
--- a/src/compiler/compile/utils/stringify.ts
+++ b/src/compiler/compile/utils/stringify.ts
@@ -1,4 +1,5 @@
-export function string_literal(data: string) {
+import { Literal } from 'estree';
+export function string_literal(data: string): Literal {
 	return {
 		type: 'Literal',
 		value: data
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index c025313c157d..9125eb0b9829 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -362,6 +362,10 @@ export function xlink_attr(node, attribute, value) {
 	node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
 }
 
+export function get_svelte_dataset(node: HTMLElement) {
+	return node.dataset.svelteH;
+}
+
 export function get_binding_group_value(group, __value, checked) {
 	const value = new Set();
 	for (let i = 0; i < group.length; i += 1) {
diff --git a/test/helpers.ts b/test/helpers.ts
index bc9138326fe4..fe78276a2546 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -4,7 +4,7 @@ import glob from 'tiny-glob/sync';
 import * as path from 'path';
 import * as fs from 'fs';
 import * as colors from 'kleur';
-export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (actual, expected, message?) => void, htmlEqualWithComments: (actual, expected, message?) => void };
+export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (actual: string, expected: string, message?: string) => void, htmlEqualWithOptions: (actual: string, expected: string, options: { preserveComments?: boolean, withoutNormalizeHtml?: boolean }, message?: string) => void };
 
 // for coverage purposes, we need to test source files,
 // but for sanity purposes, we need to test dist files
@@ -140,11 +140,12 @@ function cleanChildren(node) {
 	}
 }
 
-export function normalizeHtml(window, html, preserveComments = false) {
+export function normalizeHtml(window, html, { removeDataSvelte = false, preserveComments = false }: { removeDataSvelte?: boolean, preserveComments?: boolean }) {
 	try {
 		const node = window.document.createElement('div');
 		node.innerHTML = html
 			.replace(/(<!--.*?-->)/g, preserveComments ? '$1' : '')
+			.replace(/(data-svelte-h="[^"]+")/g, removeDataSvelte ? '' : '$1')
 			.replace(/>[ \t\n\r\f]+</g, '><')
 			.trim();
 		cleanChildren(node);
@@ -154,22 +155,30 @@ export function normalizeHtml(window, html, preserveComments = false) {
 	}
 }
 
-export function setupHtmlEqual() {
+export function normalizeNewline(html: string) {
+	return html.replace(/\r\n/g, '\n');
+}
+
+export function setupHtmlEqual(options: { removeDataSvelte?: boolean } = {}) {
 	const window = env();
 
 	// eslint-disable-next-line no-import-assign
 	assert.htmlEqual = (actual, expected, message) => {
 		assert.deepEqual(
-			normalizeHtml(window, actual),
-			normalizeHtml(window, expected),
+			normalizeHtml(window, actual, options),
+			normalizeHtml(window, expected, options),
 			message
 		);
 	};
 	// eslint-disable-next-line no-import-assign
-	assert.htmlEqualWithComments = (actual, expected, message) => {
+	assert.htmlEqualWithOptions = (actual: string, expected: string, { preserveComments, withoutNormalizeHtml }: { preserveComments?: boolean, withoutNormalizeHtml?: boolean }, message?: string) => {
 		assert.deepEqual(
-			normalizeHtml(window, actual, true),
-			normalizeHtml(window, expected, true),
+			withoutNormalizeHtml
+				? normalizeNewline(actual).replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				: normalizeHtml(window, actual, { ...options, preserveComments }),
+			withoutNormalizeHtml
+				? normalizeNewline(expected).replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				: normalizeHtml(window, expected, { ...options, preserveComments }),
 			message
 		);
 	};
diff --git a/test/hydration/index.ts b/test/hydration/index.ts
index f3e2c9ea0a6d..6071f2543466 100644
--- a/test/hydration/index.ts
+++ b/test/hydration/index.ts
@@ -106,6 +106,13 @@ describe('hydration', () => {
 					}
 				}
 
+				if (config.snapshot) {
+					const snapshot_after = config.snapshot(target);
+					for (const s in snapshot_after) {
+						assert.equal(snapshot_after[s], snapshot[s], `Expected snapshot key "${s}" to have same value/reference`);
+					}
+				}
+
 				if (config.test) {
 					config.test(assert, target, snapshot, component, window);
 				} else {
diff --git a/test/hydration/samples/basic/_after.html b/test/hydration/samples/basic/_after.html
index efe5048cbcd5..6fd7fb9e47c5 100644
--- a/test/hydration/samples/basic/_after.html
+++ b/test/hydration/samples/basic/_after.html
@@ -1 +1 @@
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1 data-svelte-h="svelte-1vv3a6r">Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/basic/_before.html b/test/hydration/samples/basic/_before.html
index efe5048cbcd5..6fd7fb9e47c5 100644
--- a/test/hydration/samples/basic/_before.html
+++ b/test/hydration/samples/basic/_before.html
@@ -1 +1 @@
-<h1>Hello world!</h1>
\ No newline at end of file
+<h1 data-svelte-h="svelte-1vv3a6r">Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/basic/_config.js b/test/hydration/samples/basic/_config.js
index 81d01322e418..2eda07648cff 100644
--- a/test/hydration/samples/basic/_config.js
+++ b/test/hydration/samples/basic/_config.js
@@ -6,12 +6,5 @@ export default {
 			h1,
 			text: h1.childNodes[0]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const h1 = target.querySelector('h1');
-
-		assert.equal(h1, snapshot.h1);
-		assert.equal(h1.childNodes[0], snapshot.text);
 	}
 };
diff --git a/test/hydration/samples/binding-input/_config.js b/test/hydration/samples/binding-input/_config.js
index ac3a6be43a3d..7656417cf095 100644
--- a/test/hydration/samples/binding-input/_config.js
+++ b/test/hydration/samples/binding-input/_config.js
@@ -10,13 +10,8 @@ export default {
 		};
 	},
 
-	async test(assert, target, snapshot, component, window) {
+	async test(assert, target, _, component, window) {
 		const input = target.querySelector('input');
-		const p = target.querySelector('p');
-
-		assert.equal(input, snapshot.input);
-		assert.equal(p, snapshot.p);
-
 		input.value = 'everybody';
 		await input.dispatchEvent(new window.Event('input'));
 
diff --git a/test/hydration/samples/claim-comment/_after.html b/test/hydration/samples/claim-comment/_after.html
index 3029a9dd6468..246decf2367d 100644
--- a/test/hydration/samples/claim-comment/_after.html
+++ b/test/hydration/samples/claim-comment/_after.html
@@ -1 +1,3 @@
 <div><!-- test1 --><!-- test2 --></div>
+p
+<div><!-- test1 --><!-- test2 --></div>
diff --git a/test/hydration/samples/claim-comment/_before.html b/test/hydration/samples/claim-comment/_before.html
index 736fb4602d54..729e1409b7bd 100644
--- a/test/hydration/samples/claim-comment/_before.html
+++ b/test/hydration/samples/claim-comment/_before.html
@@ -1 +1,3 @@
 <div><!-- test1 --></div>
+p
+<div><!-- test1 --><!-- test2 --></div>
diff --git a/test/hydration/samples/claim-comment/_config.js b/test/hydration/samples/claim-comment/_config.js
index 0f69bd48f624..047f1db855f6 100644
--- a/test/hydration/samples/claim-comment/_config.js
+++ b/test/hydration/samples/claim-comment/_config.js
@@ -3,18 +3,8 @@ export default {
 		preserveComments:true
 	},
 	snapshot(target) {
-		const div = target.querySelector('div');
-
 		return {
-			div,
-			comment: div.childNodes[0]
+			div: target.querySelectorAll('div')[1]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-		assert.equal(div, snapshot.div);
-		assert.equal(div.childNodes[0], snapshot.comment);
-		assert.equal(div.childNodes[1].nodeType, 8);
 	}
 };
diff --git a/test/hydration/samples/claim-comment/main.svelte b/test/hydration/samples/claim-comment/main.svelte
index 3029a9dd6468..773ad0d1f1b9 100644
--- a/test/hydration/samples/claim-comment/main.svelte
+++ b/test/hydration/samples/claim-comment/main.svelte
@@ -1 +1,3 @@
 <div><!-- test1 --><!-- test2 --></div>
+{"p"}
+<div><!-- test1 --><!-- test2 --></div>
diff --git a/test/hydration/samples/claim-static-incorrect-hash/_after.html b/test/hydration/samples/claim-static-incorrect-hash/_after.html
new file mode 100644
index 000000000000..3956ffe88a60
--- /dev/null
+++ b/test/hydration/samples/claim-static-incorrect-hash/_after.html
@@ -0,0 +1,8 @@
+<div data-svelte-h="xxx">hello</div>
+
+<div data-svelte-h="xxx"><div>bye</div></div>
+
+<div data-svelte-h="xxx">
+	<div>aaa</div>
+	<div>bbb</div>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-static-incorrect-hash/_before.html b/test/hydration/samples/claim-static-incorrect-hash/_before.html
new file mode 100644
index 000000000000..9dd22f8c4f82
--- /dev/null
+++ b/test/hydration/samples/claim-static-incorrect-hash/_before.html
@@ -0,0 +1,8 @@
+<div data-svelte-h="xxx">hello</div>
+
+<div data-svelte-h="xxx"><div data-svelte-h="yyy">bye</div></div>
+
+<div data-svelte-h="xxx">
+	<div data-svelte-h="yyy">aaa</div>
+	<div data-svelte-h="zzz">bbb</div>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-static-incorrect-hash/main.svelte b/test/hydration/samples/claim-static-incorrect-hash/main.svelte
new file mode 100644
index 000000000000..95a4a9aa7248
--- /dev/null
+++ b/test/hydration/samples/claim-static-incorrect-hash/main.svelte
@@ -0,0 +1,8 @@
+<div>hello</div>
+
+<div><div>bye</div></div>
+
+<div>
+	<div>aaa</div>
+	<div>bbb</div>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-static-no-hash/_after.html b/test/hydration/samples/claim-static-no-hash/_after.html
new file mode 100644
index 000000000000..95a4a9aa7248
--- /dev/null
+++ b/test/hydration/samples/claim-static-no-hash/_after.html
@@ -0,0 +1,8 @@
+<div>hello</div>
+
+<div><div>bye</div></div>
+
+<div>
+	<div>aaa</div>
+	<div>bbb</div>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-static-no-hash/_before.html b/test/hydration/samples/claim-static-no-hash/_before.html
new file mode 100644
index 000000000000..5c34926f2561
--- /dev/null
+++ b/test/hydration/samples/claim-static-no-hash/_before.html
@@ -0,0 +1,8 @@
+<div>hello</div>
+
+<div><div>bye</div></div>
+
+<div>
+	<div>aaa</div>
+	<div>bbb</div>
+</div>
diff --git a/test/hydration/samples/claim-static-no-hash/main.svelte b/test/hydration/samples/claim-static-no-hash/main.svelte
new file mode 100644
index 000000000000..95a4a9aa7248
--- /dev/null
+++ b/test/hydration/samples/claim-static-no-hash/main.svelte
@@ -0,0 +1,8 @@
+<div>hello</div>
+
+<div><div>bye</div></div>
+
+<div>
+	<div>aaa</div>
+	<div>bbb</div>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-text/_config.js b/test/hydration/samples/claim-text/_config.js
new file mode 100644
index 000000000000..d15bd2bda786
--- /dev/null
+++ b/test/hydration/samples/claim-text/_config.js
@@ -0,0 +1,8 @@
+export default {
+	snapshot(target) {
+		return {
+			main: target.querySelector('main'),
+			p: target.querySelector('p')
+		};
+	}
+};
diff --git a/test/hydration/samples/component-in-element/_after.html b/test/hydration/samples/component-in-element/_after.html
index b96db6ffc862..7e610c29461d 100644
--- a/test/hydration/samples/component-in-element/_after.html
+++ b/test/hydration/samples/component-in-element/_after.html
@@ -1,3 +1,3 @@
 <div>
-	<p>nested</p>
+	<p data-svelte-h="svelte-1x3hbnh">nested</p>
 </div>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_before.html b/test/hydration/samples/component-in-element/_before.html
index b96db6ffc862..7e610c29461d 100644
--- a/test/hydration/samples/component-in-element/_before.html
+++ b/test/hydration/samples/component-in-element/_before.html
@@ -1,3 +1,3 @@
 <div>
-	<p>nested</p>
+	<p data-svelte-h="svelte-1x3hbnh">nested</p>
 </div>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_config.js b/test/hydration/samples/component-in-element/_config.js
index 557fe068c4ce..ea0321a15d37 100644
--- a/test/hydration/samples/component-in-element/_config.js
+++ b/test/hydration/samples/component-in-element/_config.js
@@ -8,14 +8,5 @@ export default {
 			p,
 			text: p.childNodes[0]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-		const p = target.querySelector('p');
-
-		assert.equal(div, snapshot.div);
-		assert.equal(p, snapshot.p);
-		assert.equal(p.childNodes[0], snapshot.text);
 	}
 };
diff --git a/test/hydration/samples/component/_after.html b/test/hydration/samples/component/_after.html
index 70bf63ad9de2..1dd7a4ec7e27 100644
--- a/test/hydration/samples/component/_after.html
+++ b/test/hydration/samples/component/_after.html
@@ -1 +1 @@
-<p>nested</p>
\ No newline at end of file
+<p data-svelte-h="svelte-1x3hbnh">nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_before.html b/test/hydration/samples/component/_before.html
index 70bf63ad9de2..1dd7a4ec7e27 100644
--- a/test/hydration/samples/component/_before.html
+++ b/test/hydration/samples/component/_before.html
@@ -1 +1 @@
-<p>nested</p>
\ No newline at end of file
+<p data-svelte-h="svelte-1x3hbnh">nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_config.js b/test/hydration/samples/component/_config.js
index 4435b2f86ee1..50b7651d229a 100644
--- a/test/hydration/samples/component/_config.js
+++ b/test/hydration/samples/component/_config.js
@@ -6,12 +6,5 @@ export default {
 			p,
 			text: p.childNodes[0]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const p = target.querySelector('p');
-
-		assert.equal(p, snapshot.p);
-		assert.equal(p.childNodes[0], snapshot.text);
 	}
 };
diff --git a/test/hydration/samples/dynamic-text-changed/_config.js b/test/hydration/samples/dynamic-text-changed/_config.js
index c42e2514645e..b5bac12a6549 100644
--- a/test/hydration/samples/dynamic-text-changed/_config.js
+++ b/test/hydration/samples/dynamic-text-changed/_config.js
@@ -10,12 +10,5 @@ export default {
 			h1,
 			text: h1.childNodes[0]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const h1 = target.querySelector('h1');
-
-		assert.equal(h1, snapshot.h1);
-		assert.equal(h1.childNodes[0], snapshot.text);
 	}
 };
diff --git a/test/hydration/samples/dynamic-text-nil/_config.js b/test/hydration/samples/dynamic-text-nil/_config.js
index b4d013b7771d..35583f7fca53 100644
--- a/test/hydration/samples/dynamic-text-nil/_config.js
+++ b/test/hydration/samples/dynamic-text-nil/_config.js
@@ -9,13 +9,5 @@ export default {
 			nullText,
 			undefinedText
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const nullText = target.querySelectorAll('p')[0].textContent;
-		const undefinedText = target.querySelectorAll('p')[1].textContent;
-
-		assert.equal(nullText, snapshot.nullText);
-		assert.equal(undefinedText, snapshot.undefinedText);
 	}
 };
diff --git a/test/hydration/samples/dynamic-text/_config.js b/test/hydration/samples/dynamic-text/_config.js
index 47e095d4ca22..58dcbaeefc72 100644
--- a/test/hydration/samples/dynamic-text/_config.js
+++ b/test/hydration/samples/dynamic-text/_config.js
@@ -10,12 +10,5 @@ export default {
 			h1,
 			text: h1.childNodes[0]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const h1 = target.querySelector('h1');
-
-		assert.equal(h1, snapshot.h1);
-		assert.equal(h1.childNodes[0], snapshot.text);
 	}
 };
diff --git a/test/hydration/samples/each-block-arg-clash/_config.js b/test/hydration/samples/each-block-arg-clash/_config.js
index 1b04393629f5..5723b452e839 100644
--- a/test/hydration/samples/each-block-arg-clash/_config.js
+++ b/test/hydration/samples/each-block-arg-clash/_config.js
@@ -15,17 +15,9 @@ export default {
 
 		return {
 			ul,
-			lis
+			lis0: lis[0],
+			lis1: lis[1],
+			lis2: lis[2]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const ul = target.querySelector('ul');
-		const lis = ul.querySelectorAll('li');
-
-		assert.equal(ul, snapshot.ul);
-		assert.equal(lis[0], snapshot.lis[0]);
-		assert.equal(lis[1], snapshot.lis[1]);
-		assert.equal(lis[2], snapshot.lis[2]);
 	}
 };
diff --git a/test/hydration/samples/each-block/_config.js b/test/hydration/samples/each-block/_config.js
index 81f0a75831e7..2352cd8ace58 100644
--- a/test/hydration/samples/each-block/_config.js
+++ b/test/hydration/samples/each-block/_config.js
@@ -13,17 +13,9 @@ export default {
 
 		return {
 			ul,
-			lis
+			lis0: lis[0],
+			lis1: lis[1],
+			lis2: lis[2]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const ul = target.querySelector('ul');
-		const lis = ul.querySelectorAll('li');
-
-		assert.equal(ul, snapshot.ul);
-		assert.equal(lis[0], snapshot.lis[0]);
-		assert.equal(lis[1], snapshot.lis[1]);
-		assert.equal(lis[2], snapshot.lis[2]);
 	}
 };
diff --git a/test/hydration/samples/element-attribute-added/_config.js b/test/hydration/samples/element-attribute-added/_config.js
index a662743c2cfc..ab0dd986b929 100644
--- a/test/hydration/samples/element-attribute-added/_config.js
+++ b/test/hydration/samples/element-attribute-added/_config.js
@@ -9,11 +9,5 @@ export default {
 		return {
 			div
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-
-		assert.equal(div, snapshot.div);
 	}
 };
diff --git a/test/hydration/samples/element-attribute-changed/_config.js b/test/hydration/samples/element-attribute-changed/_config.js
index d402e35d7b6b..561343e19cfc 100644
--- a/test/hydration/samples/element-attribute-changed/_config.js
+++ b/test/hydration/samples/element-attribute-changed/_config.js
@@ -9,11 +9,5 @@ export default {
 		return {
 			div
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-
-		assert.equal(div, snapshot.div);
 	}
 };
diff --git a/test/hydration/samples/element-attribute-removed/_config.js b/test/hydration/samples/element-attribute-removed/_config.js
index d402e35d7b6b..561343e19cfc 100644
--- a/test/hydration/samples/element-attribute-removed/_config.js
+++ b/test/hydration/samples/element-attribute-removed/_config.js
@@ -9,11 +9,5 @@ export default {
 		return {
 			div
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-
-		assert.equal(div, snapshot.div);
 	}
 };
diff --git a/test/hydration/samples/element-attribute-unchanged/_config.js b/test/hydration/samples/element-attribute-unchanged/_config.js
index d9d220b6e549..e9ec881acbf3 100644
--- a/test/hydration/samples/element-attribute-unchanged/_config.js
+++ b/test/hydration/samples/element-attribute-unchanged/_config.js
@@ -5,11 +5,5 @@ export default {
 		return {
 			div
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-
-		assert.equal(div, snapshot.div);
 	}
 };
diff --git a/test/hydration/samples/element-nested-sibling/_config.js b/test/hydration/samples/element-nested-sibling/_config.js
index 8410fc189d95..d62e04a4fbb8 100644
--- a/test/hydration/samples/element-nested-sibling/_config.js
+++ b/test/hydration/samples/element-nested-sibling/_config.js
@@ -7,13 +7,5 @@ export default {
 			span: p.querySelector('span'),
 			code: p.querySelector('code')
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const p = target.querySelector('p');
-
-		assert.equal(p, snapshot.p);
-		assert.equal(p.querySelector('span'), snapshot.span);
-		assert.equal(p.querySelector('code'), snapshot.code);
 	}
 };
diff --git a/test/hydration/samples/element-nested/_after.html b/test/hydration/samples/element-nested/_after.html
index b96db6ffc862..cfc87f4d37a9 100644
--- a/test/hydration/samples/element-nested/_after.html
+++ b/test/hydration/samples/element-nested/_after.html
@@ -1,3 +1,3 @@
-<div>
+<div data-svelte-h="svelte-1aqf5aj">
 	<p>nested</p>
 </div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-nested/_before.html b/test/hydration/samples/element-nested/_before.html
index b96db6ffc862..cfc87f4d37a9 100644
--- a/test/hydration/samples/element-nested/_before.html
+++ b/test/hydration/samples/element-nested/_before.html
@@ -1,3 +1,3 @@
-<div>
+<div data-svelte-h="svelte-1aqf5aj">
 	<p>nested</p>
 </div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-nested/_config.js b/test/hydration/samples/element-nested/_config.js
index cd34008c045f..d9f1077796e3 100644
--- a/test/hydration/samples/element-nested/_config.js
+++ b/test/hydration/samples/element-nested/_config.js
@@ -6,12 +6,5 @@ export default {
 			div,
 			p: div.querySelector('p')
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-
-		assert.equal(div, snapshot.div);
-		assert.equal(div.querySelector('p'), snapshot.p);
 	}
 };
diff --git a/test/hydration/samples/element-ref/_config.js b/test/hydration/samples/element-ref/_config.js
index 80d681f7c5ff..7e5e73630011 100644
--- a/test/hydration/samples/element-ref/_config.js
+++ b/test/hydration/samples/element-ref/_config.js
@@ -7,10 +7,8 @@ export default {
 		};
 	},
 
-	test(assert, target, snapshot, component) {
+	test(assert, target, _, component) {
 		const h1 = target.querySelector('h1');
-
-		assert.equal(h1, snapshot.h1);
 		assert.equal(component.h1, h1);
 	}
 };
diff --git a/test/hydration/samples/event-handler/_config.js b/test/hydration/samples/event-handler/_config.js
index 027b2bd15b73..6338e54aee6e 100644
--- a/test/hydration/samples/event-handler/_config.js
+++ b/test/hydration/samples/event-handler/_config.js
@@ -11,10 +11,8 @@ export default {
 		};
 	},
 
-	async test(assert, target, snapshot, component, window) {
+	async test(assert, target, _, component, window) {
 		const button = target.querySelector('button');
-		assert.equal(button, snapshot.button);
-
 		await button.dispatchEvent(new window.MouseEvent('click'));
 
 		assert.ok(component.clicked);
diff --git a/test/hydration/samples/expression-sibling/_config.js b/test/hydration/samples/expression-sibling/_config.js
index c6d3ef3f2f76..a46d49e0d257 100644
--- a/test/hydration/samples/expression-sibling/_config.js
+++ b/test/hydration/samples/expression-sibling/_config.js
@@ -7,13 +7,5 @@ export default {
 			text: p.childNodes[0],
 			span: p.querySelector('span')
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const p = target.querySelector('p');
-
-		assert.equal(p, snapshot.p);
-		assert.equal(p.childNodes[0], snapshot.text);
-		assert.equal(p.querySelector('span'), snapshot.span);
 	}
 };
diff --git a/test/hydration/samples/if-block-anchor/_config.js b/test/hydration/samples/if-block-anchor/_config.js
index ab519c913bff..68bf6ac431c0 100644
--- a/test/hydration/samples/if-block-anchor/_config.js
+++ b/test/hydration/samples/if-block-anchor/_config.js
@@ -13,14 +13,5 @@ export default {
 			p0: ps[0],
 			p1: ps[1]
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const div = target.querySelector('div');
-		const ps = target.querySelectorAll('p');
-
-		assert.equal(div, snapshot.div);
-		assert.equal(ps[0], snapshot.p0);
-		assert.equal(ps[1], snapshot.p1);
 	}
 };
diff --git a/test/hydration/samples/if-block-false/_config.js b/test/hydration/samples/if-block-false/_config.js
index a11d800e4550..1559837feb1c 100644
--- a/test/hydration/samples/if-block-false/_config.js
+++ b/test/hydration/samples/if-block-false/_config.js
@@ -9,11 +9,5 @@ export default {
 		return {
 			p
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const p = target.querySelector('p');
-
-		assert.equal(p, snapshot.p);
 	}
 };
diff --git a/test/hydration/samples/if-block-update/_config.js b/test/hydration/samples/if-block-update/_config.js
index fb4a723145a4..aa9ba7798ca2 100644
--- a/test/hydration/samples/if-block-update/_config.js
+++ b/test/hydration/samples/if-block-update/_config.js
@@ -12,10 +12,7 @@ export default {
 		};
 	},
 
-	test(assert, target, snapshot, component) {
-		const p = target.querySelector('p');
-
-		assert.equal(p, snapshot.p);
+	test(assert, target, _, component) {
 
 		component.foo = false;
 		component.bar = true;
diff --git a/test/hydration/samples/if-block/_config.js b/test/hydration/samples/if-block/_config.js
index bd89748dc07f..11f705e7a972 100644
--- a/test/hydration/samples/if-block/_config.js
+++ b/test/hydration/samples/if-block/_config.js
@@ -9,11 +9,5 @@ export default {
 		return {
 			p
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const p = target.querySelector('p');
-
-		assert.equal(p, snapshot.p);
 	}
 };
diff --git a/test/hydration/samples/raw/_config.js b/test/hydration/samples/raw/_config.js
index f4fb2889cd3a..14ba7b12c1eb 100644
--- a/test/hydration/samples/raw/_config.js
+++ b/test/hydration/samples/raw/_config.js
@@ -14,14 +14,5 @@ export default {
 			p1: ps[1],
 			text1: ps[1].firstChild
 		};
-	},
-
-	test(assert, target, snapshot) {
-		const ps = target.querySelectorAll('p');
-
-		assert.equal(ps[0], snapshot.p0);
-		assert.equal(ps[0].firstChild, snapshot.text0);
-		assert.equal(ps[1], snapshot.p1);
-		assert.equal(ps[1].firstChild, snapshot.text1);
 	}
 };
diff --git a/test/js/samples/collapse-literal-ssr/expected.js b/test/js/samples/collapse-literal-ssr/expected.js
index 8440a10082bb..a5102337fcca 100644
--- a/test/js/samples/collapse-literal-ssr/expected.js
+++ b/test/js/samples/collapse-literal-ssr/expected.js
@@ -9,17 +9,7 @@ function foo() {
 }
 
 const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-	return `
-<div class="class1 class2" style="color:red;">-</div>
-
-
-<div${add_attribute("class", const1, 0)}>-</div>
-<div${add_attribute("class", const1, 0)}>-</div>
-
-
-<div class="${"class1 " + escape('class2', true)}">-</div>
-<div class="${"class1 " + escape(const2, true)}">-</div>
-<div class="${"class1 " + escape(const2, true)}"${add_attribute("style", foo(), 0)}>-</div>`;
+	return ` <div class="class1 class2" style="color:red;">-</div>  <div${add_attribute("class", const1, 0)}>-</div> <div${add_attribute("class", const1, 0)}>-</div>  <div class="${"class1 " + escape('class2', true)}">-</div> <div class="${"class1 " + escape(const2, true)}">-</div> <div class="${"class1 " + escape(const2, true)}"${add_attribute("style", foo(), 0)}>-</div>`;
 });
 
 export default Component;
\ No newline at end of file
diff --git a/test/js/samples/debug-ssr-foo/expected.js b/test/js/samples/debug-ssr-foo/expected.js
index a57060d528ea..250898fe7625 100644
--- a/test/js/samples/debug-ssr-foo/expected.js
+++ b/test/js/samples/debug-ssr-foo/expected.js
@@ -8,11 +8,8 @@ const Component = create_ssr_component(($$result, $$props, $$bindings, slots) =>
 	if ($$props.foo === void 0 && $$bindings.foo && foo !== void 0) $$bindings.foo(foo);
 
 	return `${each(things, thing => {
-		return `<span>${escape(thing.name)}</span>
-	${debug(null, 7, 2, { foo })}`;
-	})}
-
-<p>foo: ${escape(foo)}</p>`;
+		return `<span>${escape(thing.name)}</span> ${debug(null, 7, 2, { foo })}`;
+	})} <p>foo: ${escape(foo)}</p>`;
 });
 
-export default Component;
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
index 9e69dffd5441..5451f3699067 100644
--- a/test/js/samples/each-block-changed-check/expected.js
+++ b/test/js/samples/each-block-changed-check/expected.js
@@ -27,7 +27,6 @@ function get_each_context(ctx, list, i) {
 function create_each_block(ctx) {
 	let div;
 	let strong;
-	let t0;
 	let t1;
 	let span;
 	let t2_value = /*comment*/ ctx[4].author + "";
@@ -44,7 +43,7 @@ function create_each_block(ctx) {
 		c() {
 			div = element("div");
 			strong = element("strong");
-			t0 = text(/*i*/ ctx[6]);
+			strong.textContent = `${/*i*/ ctx[6]}`;
 			t1 = space();
 			span = element("span");
 			t2 = text(t2_value);
@@ -60,7 +59,6 @@ function create_each_block(ctx) {
 		m(target, anchor) {
 			insert(target, div, anchor);
 			append(div, strong);
-			append(strong, t0);
 			append(div, t1);
 			append(div, span);
 			append(span, t2);
diff --git a/test/js/samples/ssr-preserve-comments/expected.js b/test/js/samples/ssr-preserve-comments/expected.js
index 4f3326cec569..9f58cc6e6aa2 100644
--- a/test/js/samples/ssr-preserve-comments/expected.js
+++ b/test/js/samples/ssr-preserve-comments/expected.js
@@ -2,9 +2,7 @@
 import { create_ssr_component } from "svelte/internal";
 
 const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
-	return `<div>content</div>
-<!-- comment -->
-<div>more content</div>`;
+	return `<div>content</div> <!-- comment --> <div>more content</div>`;
 });
 
-export default Component;
+export default Component;
\ No newline at end of file
diff --git a/test/runtime/index.ts b/test/runtime/index.ts
index f3c962f1d9d5..3b39fe54e033 100644
--- a/test/runtime/index.ts
+++ b/test/runtime/index.ts
@@ -45,7 +45,7 @@ describe('runtime', () => {
 			return module._compile(code, filename);
 		};
 
-		return setupHtmlEqual();
+		return setupHtmlEqual({ removeDataSvelte: true });
 	});
 	after(() => process.removeListener('unhandledRejection', unhandledRejection_handler));
 
@@ -154,15 +154,23 @@ describe('runtime', () => {
 					window.SvelteComponent = SvelteComponent;
 
 					const target = window.document.querySelector('main');
+					let snapshot = undefined;
 
 					if (hydrate && from_ssr_html) {
 						// ssr into target
 						compileOptions.generate = 'ssr';
 						cleanRequireCache();
+						if (config.before_test) config.before_test();
 						const SsrSvelteComponent = require(`./samples/${dir}/main.svelte`).default;
 						const { html } = SsrSvelteComponent.render(config.props);
 						target.innerHTML = html;
+
+						if (config.snapshot) {
+							snapshot = config.snapshot(target);
+						}
+
 						delete compileOptions.generate;
+						if (config.after_test) config.after_test();
 					} else {
 						target.innerHTML = '';
 					}
@@ -199,7 +207,9 @@ describe('runtime', () => {
 					}
 
 					if (config.html) {
-						assert.htmlEqual(target.innerHTML, config.html);
+						assert.htmlEqualWithOptions(target.innerHTML, config.html, {
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					}
 
 					if (config.test) {
@@ -208,6 +218,7 @@ describe('runtime', () => {
 							component,
 							mod,
 							target,
+							snapshot,
 							window,
 							raf,
 							compileOptions
diff --git a/test/runtime/samples/dynamic-element-action-update/_config.js b/test/runtime/samples/dynamic-element-action-update/_config.js
index ebbe6f05a939..e1e0bc7ed1d5 100644
--- a/test/runtime/samples/dynamic-element-action-update/_config.js
+++ b/test/runtime/samples/dynamic-element-action-update/_config.js
@@ -5,7 +5,9 @@ export default {
 		<h1>tag is h1.</h1>
 	`,
 	props: {
-		logs
+		pushLogs(log) {
+			logs.push(log);
+		}
 	},
 	after_test() {
 		logs = [];
diff --git a/test/runtime/samples/dynamic-element-action-update/main.svelte b/test/runtime/samples/dynamic-element-action-update/main.svelte
index da269e115ed7..f6ffe49ec306 100644
--- a/test/runtime/samples/dynamic-element-action-update/main.svelte
+++ b/test/runtime/samples/dynamic-element-action-update/main.svelte
@@ -1,12 +1,12 @@
 <script>
-  export let logs = [];
+  export let pushLogs;
 	export let tag = "h1";
   export let opt = "opt1";
   function foo(node, {tag, opt}) {
-    logs.push(`create: ${tag},${opt}`);
+    pushLogs(`create: ${tag},${opt}`);
     return {
-      update: ({tag, opt}) => logs.push(`update: ${tag},${opt}`),
-      destroy: () => logs.push('destroy'),
+      update: ({tag, opt}) => pushLogs(`update: ${tag},${opt}`),
+      destroy: () => pushLogs('destroy'),
     };
   }
 </script>
diff --git a/test/runtime/samples/fragment-trailing-whitespace/_config.js b/test/runtime/samples/fragment-trailing-whitespace/_config.js
index 549cb1be68ea..f9ba16207cde 100644
--- a/test/runtime/samples/fragment-trailing-whitespace/_config.js
+++ b/test/runtime/samples/fragment-trailing-whitespace/_config.js
@@ -8,9 +8,9 @@ export default {
 
 	async test({ assert, target }) {
 		const firstSpanList = target.children[0];
-		assert.equal(firstSpanList.innerHTML, expected);
+		assert.htmlEqualWithOptions(firstSpanList.innerHTML, expected, { withoutNormalizeHtml: true });
 
 		const secondSpanList = target.children[1];
-		assert.equal(secondSpanList.innerHTML, expected);
+		assert.htmlEqualWithOptions(secondSpanList.innerHTML, expected, { withoutNormalizeHtml: true });
 	}
 };
diff --git a/test/runtime/samples/pre-tag/_config.js b/test/runtime/samples/pre-tag/_config.js
index c65b9df52470..56becee95d3a 100644
--- a/test/runtime/samples/pre-tag/_config.js
+++ b/test/runtime/samples/pre-tag/_config.js
@@ -1,19 +1,14 @@
 export default {
-	test({ assert, target }) {
-		// Test for <pre> tag
-		const elementPre = target.querySelector('#pre');
-		// Test for non <pre> tag
-		const elementDiv = target.querySelector('#div');
-		// Test for <pre> tag in non <pre> tag
-		const elementDivWithPre = target.querySelector('#div-with-pre');
-		// Test for <pre> tag with leading newline
-		const elementPreWithLeadingNewline = target.querySelector('#pre-with-leading-newline');
-		const elementPreWithoutLeadingNewline = target.querySelector('#pre-without-leading-newline');
-		const elementPreWithMultipleLeadingNewline = target.querySelector('#pre-with-multiple-leading-newlines');
+	withoutNormalizeHtml: true,
+	html: get_html(false),
+	ssrHtml: get_html(true)
+};
 
-		assert.equal(
-			elementPre.innerHTML,
-			`  A
+function get_html(ssr) {
+	// ssr rendered HTML has an extra newline prefixed within `<pre>` tag,
+	// if the <pre> tag starts with `\n`
+	// because when browser parses the SSR rendered HTML, it will ignore the 1st '\n' character
+	return `<pre id="pre">  A
   B
   <span>
     C
@@ -21,20 +16,12 @@ export default {
   </span>
   E
   F
-`
-		);
-		assert.equal(
-			elementDiv.innerHTML,
-			`A
+</pre> <div id="div">A
   B
   <span>C
     D</span>
   E
-  F`
-		);
-		assert.equal(
-			elementDivWithPre.innerHTML,
-			`<pre>    A
+  F</div> <div id="div-with-pre"><pre>    A
     B
     <span>
       C
@@ -42,14 +29,9 @@ export default {
     </span>
     E
     F
-  </pre>`
-		);
-		assert.equal(elementPreWithLeadingNewline.children[0].innerHTML, 'leading newline');
-		assert.equal(elementPreWithLeadingNewline.children[1].innerHTML, '  leading newline and spaces');
-		assert.equal(elementPreWithLeadingNewline.children[2].innerHTML, '\nleading newlines');
-		assert.equal(elementPreWithoutLeadingNewline.children[0].innerHTML, 'without spaces');
-		assert.equal(elementPreWithoutLeadingNewline.children[1].innerHTML, '  with spaces  ');
-		assert.equal(elementPreWithoutLeadingNewline.children[2].innerHTML, ' \nnewline after leading space');
-		assert.equal(elementPreWithMultipleLeadingNewline.innerHTML, '\n\nmultiple leading newlines');
-	}
-};
+  </pre></div> <div id="pre-with-leading-newline"><pre>leading newline</pre> <pre>  leading newline and spaces</pre> <pre>${ssr ? '\n' : ''}
+leading newlines</pre></div> <div id="pre-without-leading-newline"><pre>without spaces</pre> <pre>  with spaces  </pre> <pre> 
+newline after leading space</pre></div> <pre id="pre-with-multiple-leading-newlines">${ssr ? '\n' : ''}
+
+multiple leading newlines</pre>`;
+}
diff --git a/test/runtime/samples/preserve-whitespaces/_config.js b/test/runtime/samples/preserve-whitespaces/_config.js
index ffd6423911d5..24cfb952f33c 100644
--- a/test/runtime/samples/preserve-whitespaces/_config.js
+++ b/test/runtime/samples/preserve-whitespaces/_config.js
@@ -1,18 +1,9 @@
 export default {
 	compileOptions: {
 		preserveWhitespace: true
-	},
-	test({ assert, target }) {
-		// Test for <pre> tag
-		const elementPre = target.querySelector('#pre');
-		// Test for non <pre> tag
-		const elementDiv = target.querySelector('#div');
-		// Test for <pre> tag in non <pre> tag
-		const elementDivWithPre = target.querySelector('#div-with-pre');
+  },
 
-		assert.equal(
-			elementPre.innerHTML,
-			`  A
+  html: `<pre id="pre">  A
   B
   <span>
     C
@@ -20,11 +11,9 @@ export default {
   </span>
   E
   F
-`
-		);
-		assert.equal(
-			elementDiv.innerHTML,
-			`
+</pre>
+
+<div id="div">
   A
   B
   <span>
@@ -33,11 +22,9 @@ export default {
   </span>
   E
   F
-`
-		);
-		assert.equal(
-			elementDivWithPre.innerHTML,
-			`
+</div>
+
+<div id="div-with-pre">
   <pre>    A
     B
     <span>
@@ -47,7 +34,5 @@ export default {
     E
     F
   </pre>
-`
-		);
-	}
+</div>`
 };
diff --git a/test/runtime/samples/raw-mustaches-preserved/_config.js b/test/runtime/samples/raw-mustaches-preserved/_config.js
index d4d57025d2ac..3bb61208b938 100644
--- a/test/runtime/samples/raw-mustaches-preserved/_config.js
+++ b/test/runtime/samples/raw-mustaches-preserved/_config.js
@@ -11,7 +11,7 @@ export default {
 		const p = target.querySelector('p');
 
 		component.raw = '<p>does not change</p>';
-		assert.equal(target.innerHTML, '<div><p>does not change</p></div>');
+		assert.htmlEqualWithOptions(target.innerHTML, '<div><p>does not change</p></div>', { withoutNormalizeHtml: true });
 		assert.strictEqual(target.querySelector('p'), p);
 	}
 };
diff --git a/test/runtime/samples/textarea-content/_config.js b/test/runtime/samples/textarea-content/_config.js
index 336c03fada22..26989340995c 100644
--- a/test/runtime/samples/textarea-content/_config.js
+++ b/test/runtime/samples/textarea-content/_config.js
@@ -1,4 +1,21 @@
 export default {
+	withoutNormalizeHtml: true,
+	// Unable to test `html` with `<textarea>` content
+	// as the textarea#value will not show within `innerHtml`
+	ssrHtml: `<textarea id="textarea">  A
+  B
+</textarea> <div id="div-with-textarea"><textarea>    A
+    B
+  </textarea></div> <div id="textarea-with-leading-newline"><textarea>leading newline</textarea> <textarea>  leading newline and spaces</textarea> <textarea>
+
+leading newlines</textarea></div> <div id="textarea-without-leading-newline"><textarea>without spaces</textarea> <textarea>  with spaces  </textarea> <textarea> 
+newline after leading space</textarea></div> <textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea> <div id="div-with-textarea-with-multiple-leading-newlines"><textarea>
+
+
+multiple leading newlines</textarea></div>`,
 	test({ assert, target }) {
 		// Test for <textarea> tag
 		const elementTextarea = target.querySelector('#textarea');
diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index a5458be10992..fbbc1a22c5fd 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -83,13 +83,7 @@ describe('ssr', () => {
 				if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code);
 
 				try {
-					if (config.withoutNormalizeHtml) {
-						assert.strictEqual(html.trim().replace(/\r\n/g, '\n'), expectedHtml.trim().replace(/\r\n/g, '\n'));
-					} else {
-						(compileOptions.preserveComments
-							? assert.htmlEqualWithComments
-							: assert.htmlEqual)(html, expectedHtml);
-					}
+					assert.htmlEqualWithOptions(html, expectedHtml, { preserveComments: compileOptions.preserveComments, withoutNormalizeHtml: config.withoutNormalizeHtml });
 				} catch (error) {
 					if (shouldUpdateExpected()) {
 						fs.writeFileSync(`${dir}/_expected.html`, html);
@@ -117,11 +111,10 @@ describe('ssr', () => {
 					fs.writeFileSync(`${dir}/_actual-head.html`, head);
 
 					try {
-						(compileOptions.hydratable
-							? assert.htmlEqualWithComments
-							: assert.htmlEqual)(
+						assert.htmlEqualWithOptions(
 							head,
-							fs.readFileSync(`${dir}/_expected-head.html`, 'utf-8')
+							fs.readFileSync(`${dir}/_expected-head.html`, 'utf-8'),
+							{ preserveComments: compileOptions.hydratable }
 						);
 					} catch (error) {
 						if (shouldUpdateExpected()) {
@@ -214,9 +207,15 @@ describe('ssr', () => {
 					});
 
 					if (config.ssrHtml) {
-						assert.htmlEqual(html, config.ssrHtml);
+						assert.htmlEqualWithOptions(html, config.ssrHtml, {
+							preserveComments: compileOptions.preserveComments, 
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					} else if (config.html) {
-						assert.htmlEqual(html, config.html);
+						assert.htmlEqualWithOptions(html, config.html, {
+							preserveComments: compileOptions.preserveComments, 
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					}
 
 					if (config.test_ssr) {
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
index a469e618fa94..8edc2860a888 100644
--- a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
@@ -1,3 +1 @@
-
-
-<div>Just a dummy page.</div>
\ No newline at end of file
+ <div data-svelte-h="svelte-156ixv6">Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/pre-tag/.editorconfig b/test/server-side-rendering/samples/pre-tag/.editorconfig
deleted file mode 100644
index d53d6a3faf33..000000000000
--- a/test/server-side-rendering/samples/pre-tag/.editorconfig
+++ /dev/null
@@ -1,2 +0,0 @@
-[{main.svelte,_expected.html}]
-trim_trailing_whitespace = unset
diff --git a/test/server-side-rendering/samples/pre-tag/_config.js b/test/server-side-rendering/samples/pre-tag/_config.js
deleted file mode 100644
index 39b31839f50d..000000000000
--- a/test/server-side-rendering/samples/pre-tag/_config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-	withoutNormalizeHtml: true
-};
diff --git a/test/server-side-rendering/samples/pre-tag/_expected.html b/test/server-side-rendering/samples/pre-tag/_expected.html
deleted file mode 100644
index 545910278606..000000000000
--- a/test/server-side-rendering/samples/pre-tag/_expected.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<pre>  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>A
-  B
-  <span>C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div><pre>    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre></div>
-
-<div id="pre-with-leading-newline"><pre>leading newline</pre>
-  <pre>  leading newline and spaces</pre>
-  <pre>
-
-leading newlines</pre></div>
-
-<div id="pre-without-leading-newline"><pre>without spaces</pre>
-  <pre>  with spaces  </pre>
-  <pre> 
-newline after leading space</pre></div>
diff --git a/test/server-side-rendering/samples/pre-tag/main.svelte b/test/server-side-rendering/samples/pre-tag/main.svelte
deleted file mode 100644
index be3bf9e7ffcf..000000000000
--- a/test/server-side-rendering/samples/pre-tag/main.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<pre>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div>
-  <pre>
-    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre>
-</div>
-
-<div id="pre-with-leading-newline">
-  <pre>
-leading newline</pre>
-  <pre>
-  leading newline and spaces</pre>
-  <pre>
-
-leading newlines</pre>
-</div>
-
-<div id="pre-without-leading-newline">
-  <pre>without spaces</pre>
-  <pre>  with spaces  </pre>
-  <pre> 
-newline after leading space</pre>
-</div>
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/_config.js b/test/server-side-rendering/samples/preserve-whitespaces/_config.js
deleted file mode 100644
index 41eb78446c0d..000000000000
--- a/test/server-side-rendering/samples/preserve-whitespaces/_config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-	withoutNormalizeHtml: true,
-	compileOptions: {
-		preserveWhitespace: true
-	}
-};
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/_expected.html b/test/server-side-rendering/samples/preserve-whitespaces/_expected.html
deleted file mode 100644
index c712354f6ab8..000000000000
--- a/test/server-side-rendering/samples/preserve-whitespaces/_expected.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<pre>  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div>
-  <pre>    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre>
-</div>
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/main.svelte b/test/server-side-rendering/samples/preserve-whitespaces/main.svelte
deleted file mode 100644
index fb240817f7a9..000000000000
--- a/test/server-side-rendering/samples/preserve-whitespaces/main.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<pre>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</pre>
-
-<div>
-  A
-  B
-  <span>
-    C
-    D
-  </span>
-  E
-  F
-</div>
-
-<div>
-  <pre>
-    A
-    B
-    <span>
-      C
-      D
-    </span>
-    E
-    F
-  </pre>
-</div>
diff --git a/test/server-side-rendering/samples/textarea-content/.editorconfig b/test/server-side-rendering/samples/textarea-content/.editorconfig
deleted file mode 100644
index d53d6a3faf33..000000000000
--- a/test/server-side-rendering/samples/textarea-content/.editorconfig
+++ /dev/null
@@ -1,2 +0,0 @@
-[{main.svelte,_expected.html}]
-trim_trailing_whitespace = unset
diff --git a/test/server-side-rendering/samples/textarea-content/_config.js b/test/server-side-rendering/samples/textarea-content/_config.js
deleted file mode 100644
index 39b31839f50d..000000000000
--- a/test/server-side-rendering/samples/textarea-content/_config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-	withoutNormalizeHtml: true
-};
diff --git a/test/server-side-rendering/samples/textarea-content/_expected.html b/test/server-side-rendering/samples/textarea-content/_expected.html
deleted file mode 100644
index 5ca4604bb61a..000000000000
--- a/test/server-side-rendering/samples/textarea-content/_expected.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<textarea id="textarea">  A
-  B
-</textarea>
-
-<div id="div-with-textarea"><textarea>    A
-    B
-  </textarea></div>
-
-<div id="textarea-with-leading-newline"><textarea>leading newline</textarea>
-  <textarea>  leading newline and spaces</textarea>
-  <textarea>
-
-leading newlines</textarea></div>
-
-<div id="textarea-without-leading-newline"><textarea>without spaces</textarea>
-  <textarea>  with spaces  </textarea>
-  <textarea> 
-newline after leading space</textarea></div>
-
-<textarea id="textarea-with-multiple-leading-newlines">
-
-
-multiple leading newlines</textarea>
-
-<div id="div-with-textarea-with-multiple-leading-newlines"><textarea>
-
-
-multiple leading newlines</textarea></div>
diff --git a/test/server-side-rendering/samples/textarea-content/main.svelte b/test/server-side-rendering/samples/textarea-content/main.svelte
deleted file mode 100644
index e2e052ca7a32..000000000000
--- a/test/server-side-rendering/samples/textarea-content/main.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<textarea id="textarea">
-  A
-  B
-</textarea>
-
-<div id="div-with-textarea">
-  <textarea>
-    A
-    B
-  </textarea>
-</div>
-
-<div id="textarea-with-leading-newline">
-  <textarea>
-leading newline</textarea>
-  <textarea>
-  leading newline and spaces</textarea>
-  <textarea>
-
-leading newlines</textarea>
-</div>
-
-<div id="textarea-without-leading-newline">
-  <textarea>without spaces</textarea>
-  <textarea>  with spaces  </textarea>
-  <textarea> 
-newline after leading space</textarea>
-</div>
-
-<textarea id="textarea-with-multiple-leading-newlines">
-
-
-multiple leading newlines</textarea>
-
-<div id="div-with-textarea-with-multiple-leading-newlines">
-  <textarea>
-
-
-multiple leading newlines</textarea>
-</div>