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 9fb41b6108c..b9d78ae7bd3 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 ebed483288a..9e14a3233eb 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 4a669b6365b..b61beab478b 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 4659a53d73c..b78f7033765 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 ee62d3e7e8b..d38c299d36d 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 1ebe0c053aa..83319092b3e 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 8351f1e0e27..4c337ac0cee 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 e9ac86a55cf..5fc7c89ae44 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 5261e14e0a0..cd0ea56f8ea 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 816ef8d7c57..99aeba26238 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 c21a48f5d66..9a0b1ea815f 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 ac6cd9b8287..d750477c8a7 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 65b10d04c82..900e78efc1f 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 3c39f6d9d34..9eeb110d201 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 bc826458d9a..23d94ce01e0 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 534595f4a9d..e6807621d27 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 a8c63b4227b..9c4e2ffdfb6 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 9c1af7ce44d..36f733caef9 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 61311fd83ce..4b77c808e4e 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 cefebfcff35..9906c29e391 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 7915604f98e..da0eb6b3fcf 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 9c4798c69cf..44744a060b6 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 ab140a75c50..58bfaa292a4 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 6a67f73c629..0a81d021265 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 6cd8820b875..5c831b9f38c 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 0a589e33948..cb617aa5b73 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 7d02735d9a5..1928ea4a7db 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 8d73b0329d1..1a8ed65da5d 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 53847d88707..ea3b85d4fa1 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 ac78d032ead..5fd473a9cff 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 d9254a7b860..96e0afb3589 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 b86b79bdb9c..44bef7c2a7c 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 10ccaefa929..b173077ff42 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 84073c6469e..5dfd37d7a66 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 c025313c157..9125eb0b982 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 bc9138326fe..fe78276a254 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 f3e2c9ea0a6..6071f254346 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 efe5048cbcd..6fd7fb9e47c 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 efe5048cbcd..6fd7fb9e47c 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 81d01322e41..2eda07648cf 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 ac3a6be43a3..7656417cf09 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 3029a9dd646..246decf2367 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 736fb4602d5..729e1409b7b 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 0f69bd48f62..047f1db855f 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 3029a9dd646..773ad0d1f1b 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 00000000000..3956ffe88a6
--- /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 00000000000..9dd22f8c4f8
--- /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 00000000000..95a4a9aa724
--- /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 00000000000..95a4a9aa724
--- /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 00000000000..5c34926f256
--- /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 00000000000..95a4a9aa724
--- /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 00000000000..d15bd2bda78
--- /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 b96db6ffc86..7e610c29461 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 b96db6ffc86..7e610c29461 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 557fe068c4c..ea0321a15d3 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 70bf63ad9de..1dd7a4ec7e2 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 70bf63ad9de..1dd7a4ec7e2 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 4435b2f86ee..50b7651d229 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 c42e2514645..b5bac12a654 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 b4d013b7771..35583f7fca5 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 47e095d4ca2..58dcbaeefc7 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 1b04393629f..5723b452e83 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 81f0a75831e..2352cd8ace5 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 a662743c2cf..ab0dd986b92 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 d402e35d7b6..561343e19cf 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 d402e35d7b6..561343e19cf 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 d9d220b6e54..e9ec881acbf 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 8410fc189d9..d62e04a4fbb 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 b96db6ffc86..cfc87f4d37a 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 b96db6ffc86..cfc87f4d37a 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 cd34008c045..d9f1077796e 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 80d681f7c5f..7e5e7363001 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 027b2bd15b7..6338e54aee6 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 c6d3ef3f2f7..a46d49e0d25 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 ab519c913bf..68bf6ac431c 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 a11d800e455..1559837feb1 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 fb4a723145a..aa9ba7798ca 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 bd89748dc07..11f705e7a97 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 f4fb2889cd3..14ba7b12c1e 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 8440a10082b..a5102337fcc 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 a57060d528e..250898fe762 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 9e69dffd544..5451f369906 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 4f3326cec56..9f58cc6e6aa 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 f3c962f1d9d..3b39fe54e03 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 ebbe6f05a93..e1e0bc7ed1d 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 da269e115ed..f6ffe49ec30 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 549cb1be68e..f9ba16207cd 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 c65b9df5247..56becee95d3 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 ffd6423911d..24cfb952f33 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 d4d57025d2a..3bb61208b93 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 336c03fada2..26989340995 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 a5458be1099..fbbc1a22c5f 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 a469e618fa9..8edc2860a88 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 d53d6a3faf3..00000000000
--- 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 39b31839f50..00000000000
--- 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 54591027860..00000000000
--- 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 be3bf9e7ffc..00000000000
--- 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 41eb78446c0..00000000000
--- 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 c712354f6ab..00000000000
--- 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 fb240817f7a..00000000000
--- 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 d53d6a3faf3..00000000000
--- 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 39b31839f50..00000000000
--- 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 5ca4604bb61..00000000000
--- 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 e2e052ca7a3..00000000000
--- 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>