From 0363be1a6d5d966a8f047d31725f3609f2ee3c7a Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Thu, 7 Apr 2022 21:18:01 +0800
Subject: [PATCH 01/16] claim static html elements using innerHTML instead of
 deopt to creating the nodes

revert code

update test case
---
 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         | 33 ++++++++
 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  |  4 +
 src/compiler/compile/nodes/Slot.ts            |  3 +
 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/EachBlock.ts  |  2 -
 .../render_dom/wrappers/Element/Attribute.ts  |  3 -
 .../render_dom/wrappers/Element/index.ts      | 81 +++++++++----------
 .../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/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    | 11 +++
 .../utils/remove_whitespace_children.ts       |  1 +
 src/compiler/compile/utils/stringify.ts       |  3 +-
 src/runtime/internal/dom.ts                   |  4 +
 test/helpers.ts                               | 13 +--
 test/hydration/samples/basic/_after.html      |  2 +-
 test/hydration/samples/basic/_before.html     |  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 ++
 .../samples/component-in-element/_after.html  |  2 +-
 .../samples/component-in-element/_before.html |  2 +-
 test/hydration/samples/component/_after.html  |  2 +-
 test/hydration/samples/component/_before.html |  2 +-
 .../samples/element-nested/_after.html        |  2 +-
 .../samples/element-nested/_before.html       |  2 +-
 test/runtime/index.ts                         |  4 +-
 .../dynamic-element-action-update/_config.js  |  4 +-
 .../dynamic-element-action-update/main.svelte |  8 +-
 .../_expected.html                            |  2 +-
 .../samples/pre-tag/_expected.html            |  6 +-
 50 files changed, 222 insertions(+), 115 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

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index f7d8e8f5682..7dfd6c086c9 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -39,6 +39,7 @@ 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 is_dynamic from './render_dom/wrappers/shared/is_dynamic';
+import Tag from './nodes/shared/Tag';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -111,6 +112,8 @@ export default class Component {
 	slots: Map<string, Slot> = new Map();
 	slot_outlets: Set<string> = new Set();
 
+	tags: Tag[] = []
+
 	constructor(
 		ast: Ast,
 		source: string,
@@ -762,6 +765,7 @@ export default class Component {
 
 		this.hoist_instance_declarations();
 		this.extract_reactive_declarations();
+		this.check_if_tags_content_dynamic();
 	}
 
 	post_template_walk() {
@@ -1492,6 +1496,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 4a5ea19e377..69b21111722 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 416f1d7b316..a09bf881c86 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -14,6 +14,7 @@ import map_children from './shared/map_children';
 import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } 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';
@@ -438,6 +439,24 @@ 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.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() {
@@ -1140,6 +1159,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..c6307222a57 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.can_use_innerhtml = false;
+
 		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..998fdce3ad7 100644
--- a/src/compiler/compile/nodes/RawMustacheTag.ts
+++ b/src/compiler/compile/nodes/RawMustacheTag.ts
@@ -2,4 +2,8 @@ import Tag from './shared/Tag';
 
 export default class RawMustacheTag extends Tag {
 	type: 'RawMustacheTag';
+	constructor(component, parent, scope, info) {
+		super(component, parent, scope, info);
+		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/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..afb09d83ced 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.contextual_dependencies.size === 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 9c07267223f..e1965d9d928 100644
--- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -133,9 +133,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/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 1032f4c6e3f..1842cb9a7ae 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -79,8 +79,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 ca35ea84db4..4e66b5f55db 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 3472b0612cd..e7d67de15c4 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -262,24 +262,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);
 	}
 
@@ -417,6 +399,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;
 
@@ -430,13 +413,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};
 					`);
@@ -474,15 +459,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: {
@@ -491,25 +480,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;
+				const can_use_raw_text = !this.node.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);
+				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
 				);
 			});
@@ -537,7 +534,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);`
 			);
@@ -553,10 +550,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);
@@ -577,7 +570,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, can_optimise_to_html_string: boolean) {
 		const attributes = this.attributes
 			.filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
 			.map((attr) => p`${(attr as StyleAttributeWrapper | AttributeWrapper).name}: true`);
@@ -595,6 +588,10 @@ export default class ElementWrapper extends Wrapper {
 			reference = x`(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
 		}
 
+		if (can_optimise_to_html_string) {
+			attributes.push(p`["data-svelte"]: true`);
+		}
+
 		if (this.node.namespace === namespaces.svg) {
 			return x`@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;
 		} else {
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/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 4bf8c20bd87..b000478748a 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 99a2ee3d685..f8ead7cd460 100644
--- a/src/compiler/compile/render_ssr/Renderer.ts
+++ b/src/compiler/compile/render_ssr/Renderer.ts
@@ -47,6 +47,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 f1dd86dd2bb..bf4f6faeca1 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -160,6 +160,17 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 		}
 	});
 
+	if (options.hydratable) {
+		if (options.head_id) {
+			renderer.add_string(` data-svelte="${options.head_id}"`);
+		}
+
+		if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
+			renderer.add_string(` data-svelte="${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/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 942e742e349..7ee6ec8de47 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -348,6 +348,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.svelte;
+}
+
 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 1ea0b198807..4310032c49e 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -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="[^"]+")/g, removeDataSvelte ? '': '$1')
 			.replace(/>[\s\r\n]+</g, '><')
 			.trim();
 		cleanChildren(node);
@@ -154,22 +155,22 @@ export function normalizeHtml(window, html, preserveComments = false) {
 	}
 }
 
-export function setupHtmlEqual() {
+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.deepEqual(
-			normalizeHtml(window, actual, true),
-			normalizeHtml(window, expected, true),
+			normalizeHtml(window, actual, { ...options, preserveComments: true }),
+			normalizeHtml(window, expected, { ...options, preserveComments: true }),
 			message
 		);
 	};
diff --git a/test/hydration/samples/basic/_after.html b/test/hydration/samples/basic/_after.html
index efe5048cbcd..7c4ab6e7b99 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="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..7c4ab6e7b99 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="svelte-1vv3a6r">Hello world!</h1>
\ No newline at end of file
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..585c6b005dc
--- /dev/null
+++ b/test/hydration/samples/claim-static-incorrect-hash/_after.html
@@ -0,0 +1,8 @@
+<div data-svelte="xxx">hello</div>
+
+<div data-svelte="xxx"><div>bye</div></div>
+
+<div data-svelte="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..59acf4d46d1
--- /dev/null
+++ b/test/hydration/samples/claim-static-incorrect-hash/_before.html
@@ -0,0 +1,8 @@
+<div data-svelte="xxx">hello</div>
+
+<div data-svelte="xxx"><div data-svelte="yyy">bye</div></div>
+
+<div data-svelte="xxx">
+	<div data-svelte="yyy">aaa</div>
+	<div data-svelte="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/component-in-element/_after.html b/test/hydration/samples/component-in-element/_after.html
index b96db6ffc86..127e868d6bc 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="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..127e868d6bc 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="svelte-1x3hbnh">nested</p>
 </div>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_after.html b/test/hydration/samples/component/_after.html
index 70bf63ad9de..bd79430d0e8 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="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..bd79430d0e8 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="svelte-1x3hbnh">nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/element-nested/_after.html b/test/hydration/samples/element-nested/_after.html
index b96db6ffc86..0d1f4870914 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="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..0d1f4870914 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="svelte-1aqf5aj">
 	<p>nested</p>
 </div>
\ No newline at end of file
diff --git a/test/runtime/index.ts b/test/runtime/index.ts
index f3c962f1d9d..3e1033f1aa7 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));
 
@@ -159,10 +159,12 @@ describe('runtime', () => {
 						// 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;
 						delete compileOptions.generate;
+						if (config.after_test) config.after_test();
 					} else {
 						target.innerHTML = '';
 					}
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/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
index a469e618fa9..02d89d6d181 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,3 @@
 
 
-<div>Just a dummy page.</div>
\ No newline at end of file
+<div data-svelte="svelte-156ixv6">Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/pre-tag/_expected.html b/test/server-side-rendering/samples/pre-tag/_expected.html
index 54591027860..dbf3bb35c45 100644
--- a/test/server-side-rendering/samples/pre-tag/_expected.html
+++ b/test/server-side-rendering/samples/pre-tag/_expected.html
@@ -11,11 +11,9 @@
 <div>A
   B
   <span>C
-    D
-  </span>
+    D</span>
   E
-  F
-</div>
+  F</div>
 
 <div><pre>    A
     B

From ae898c20a45aa5c024e7ebdaf844ed357ed9a63a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 13 Apr 2022 17:35:20 +0200
Subject: [PATCH 02/16] Update test/helpers.ts

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 test/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/helpers.ts b/test/helpers.ts
index 4310032c49e..52d137dfd45 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -145,7 +145,7 @@ export function normalizeHtml(window, html, { removeDataSvelte = false, preserve
 		const node = window.document.createElement('div');
 		node.innerHTML = html
 			.replace(/(<!--.*?-->)/g, preserveComments ? '$1' : '')
-			.replace(/(data-svelte="[^"]+")/g, removeDataSvelte ? '': '$1')
+			.replace(/(data-svelte="[^"]+")/g, removeDataSvelte ? '' : '$1')
 			.replace(/>[\s\r\n]+</g, '><')
 			.trim();
 		cleanChildren(node);

From 64b2e16fbced012e114019dab026fcf62535b68f Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Fri, 15 Apr 2022 22:24:42 +0800
Subject: [PATCH 03/16] improve whitespace handling

---
 src/compiler/compile/nodes/Text.ts            |  8 +++
 .../render_dom/wrappers/Element/index.ts      |  6 ++-
 .../compile/render_dom/wrappers/Text.ts       | 19 ++++---
 .../compile/render_ssr/handlers/Text.ts       |  4 +-
 test/helpers.ts                               | 21 +++++---
 test/js/samples/debug-ssr-foo/expected.js     |  9 ++--
 .../samples/ssr-preserve-comments/expected.js |  6 +--
 test/runtime/index.ts                         |  4 +-
 test/runtime/samples/pre-tag/_config.js       | 52 ++++++-------------
 .../samples/preserve-whitespaces/_config.js   | 33 ++++--------
 .../samples/textarea-content/_config.js       | 17 ++++++
 test/server-side-rendering/index.ts           | 18 +++----
 .../samples/pre-tag/.editorconfig             |  2 -
 .../samples/pre-tag/_config.js                |  3 --
 .../samples/pre-tag/_expected.html            | 37 -------------
 .../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 --------------
 23 files changed, 103 insertions(+), 332 deletions(-)
 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/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/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index e7d67de15c4..1a10ec4434e 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1218,7 +1218,11 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 			// 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/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_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/test/helpers.ts b/test/helpers.ts
index 52d137dfd45..6498619e17a 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, expected, message?) => void, htmlEqualWithOptions: (actual, expected, options, message?) => void };
 
 // for coverage purposes, we need to test source files,
 // but for sanity purposes, we need to test dist files
@@ -140,7 +140,7 @@ function cleanChildren(node) {
 	}
 }
 
-export function normalizeHtml(window, html, { removeDataSvelte = false, preserveComments = false }: { removeDataSvelte?: boolean, preserveComments?: boolean} = {}) {
+export function normalizeHtml(window, html, { removeDataSvelte = false, preserveComments = false }: { removeDataSvelte?: boolean, preserveComments?: boolean }) {
 	try {
 		const node = window.document.createElement('div');
 		node.innerHTML = html
@@ -155,7 +155,12 @@ export function normalizeHtml(window, html, { removeDataSvelte = false, preserve
 	}
 }
 
-export function setupHtmlEqual(options?: { removeDataSvelte?: boolean }) {
+export function normalizeNewline(html: string) {
+	// return html.trim().replace(/\r\n/g, '\n')
+	return html.replace(/\r\n/g, '\n');
+}
+
+export function setupHtmlEqual(options: { removeDataSvelte?: boolean } = {}) {
 	const window = env();
 
 	// eslint-disable-next-line no-import-assign
@@ -167,10 +172,14 @@ export function setupHtmlEqual(options?: { removeDataSvelte?: boolean }) {
 		);
 	};
 	// eslint-disable-next-line no-import-assign
-	assert.htmlEqualWithComments = (actual, expected, message) => {
+	assert.htmlEqualWithOptions = (actual, expected, { preserveComments, withoutNormalizeHtml }, message) => {
 		assert.deepEqual(
-			normalizeHtml(window, actual, { ...options, preserveComments: true }),
-			normalizeHtml(window, expected, { ...options, preserveComments: true }),
+			withoutNormalizeHtml
+				? normalizeNewline(actual).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				: normalizeHtml(window, actual, { ...options, preserveComments }),
+			withoutNormalizeHtml
+				? normalizeNewline(expected).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				: normalizeHtml(window, expected, { ...options, preserveComments }),
 			message
 		);
 	};
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/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 3e1033f1aa7..0e445b7a711 100644
--- a/test/runtime/index.ts
+++ b/test/runtime/index.ts
@@ -201,7 +201,9 @@ describe('runtime', () => {
 					}
 
 					if (config.html) {
-						assert.htmlEqual(target.innerHTML, config.html);
+						assert.htmlEqualWithOptions(target.innerHTML, config.html, {
+							withoutNormalizeHtml: config.withoutNormalizeHtml
+						});
 					}
 
 					if (config.test) {
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/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..c4078a48856 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);
@@ -214,9 +208,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/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 dbf3bb35c45..00000000000
--- a/test/server-side-rendering/samples/pre-tag/_expected.html
+++ /dev/null
@@ -1,37 +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>

From 2aab40cc55dca8e47b0a4724c8bd032928d0982c Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Sat, 16 Apr 2022 01:04:56 +0800
Subject: [PATCH 04/16] better hydration for only html tag

---
 .../compile/render_dom/wrappers/Element/index.ts  | 12 +++++++-----
 .../compile/render_dom/wrappers/RawMustacheTag.ts |  3 ++-
 src/compiler/compile/render_ssr/Renderer.ts       |  1 +
 .../compile/render_ssr/handlers/Element.ts        |  8 +++++---
 .../compile/render_ssr/handlers/HtmlTag.ts        |  4 ++--
 test/runtime/index.ts                             |  7 +++++++
 .../raw-anchor-first-last-child/_config.js        | 15 ++++++++++++++-
 .../samples/raw-mustaches-preserved/_config.js    |  2 +-
 8 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 1a10ec4434e..a67fb0606d0 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -415,13 +415,15 @@ export default class ElementWrapper extends Wrapper {
 
 		const { can_use_textcontent, can_optimise_to_html_string } = this.node;
 
+		const to_optimise_hydration = can_optimise_to_html_string || (!is_head(parent_node) && this.node.children.length === 1 && this.node.children[0].type === 'RawMustacheTag');
+
 		if (hydratable) {
 			if (parent_nodes) {
 				block.chunks.claim.push(b`
-					${node} = ${this.get_claim_statement(block, parent_nodes, can_optimise_to_html_string)};
+					${node} = ${this.get_claim_statement(block, parent_nodes, to_optimise_hydration)};
 				`);
 
-				if (!can_optimise_to_html_string && !this.void && this.node.children.length > 0) {
+				if (!to_optimise_hydration && !this.void && this.node.children.length > 0) {
 					block.chunks.claim.push(b`
 						var ${nodes} = ${children};
 					`);
@@ -534,7 +536,7 @@ export default class ElementWrapper extends Wrapper {
 		this.add_styles(block);
 		this.add_manual_style_scoping(block);
 
-		if (nodes && hydratable && !this.void && !can_optimise_to_html_string) {
+		if (nodes && hydratable && !this.void && !to_optimise_hydration) {
 			block.chunks.claim.push(
 				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
 			);
@@ -570,7 +572,7 @@ export default class ElementWrapper extends Wrapper {
 		return x`@element(${reference})`;
 	}
 
-	get_claim_statement(block: Block, nodes: Identifier, can_optimise_to_html_string: boolean) {
+	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`);
@@ -588,7 +590,7 @@ export default class ElementWrapper extends Wrapper {
 			reference = x`(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
 		}
 
-		if (can_optimise_to_html_string) {
+		if (to_optimise_hydration) {
 			attributes.push(p`["data-svelte"]: true`);
 		}
 
diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index 5c831b9f38c..d3c502a9c68 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -9,6 +9,7 @@ import MustacheTag from '../../nodes/MustacheTag';
 import RawMustacheTag from '../../nodes/RawMustacheTag';
 import { is_head } from './shared/is_head';
 import { Identifier, Node } from 'estree';
+import hash from '../../utils/hash';
 
 export default class RawMustacheTagWrapper extends Tag {
 	var: Identifier = { type: 'Identifier', name: 'raw' };
@@ -35,7 +36,7 @@ export default class RawMustacheTagWrapper extends Tag {
 				content => insert(content)
 			);
 
-			block.chunks.mount.push(insert(init));
+			block.chunks.mount.push(b`if (@get_svelte_dataset(${parent_node}) !== "${hash(JSON.stringify(this.node.expression.node))}") ${insert(init)}`);
 		} else {
 			const needs_anchor = in_head || (this.next ? !this.next.is_dom_node() : (!this.parent || !this.parent.is_dom_node()));
 
diff --git a/src/compiler/compile/render_ssr/Renderer.ts b/src/compiler/compile/render_ssr/Renderer.ts
index f8ead7cd460..64ea7846b1b 100644
--- a/src/compiler/compile/render_ssr/Renderer.ts
+++ b/src/compiler/compile/render_ssr/Renderer.ts
@@ -48,6 +48,7 @@ export interface RenderOptions extends CompileOptions{
 	locate: (c: number) => { line: number; column: number };
 	head_id?: string;
 	has_added_svelte_hash?: boolean;
+	optimised_html_hydration?: 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 bf4f6faeca1..f9442f11f43 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -10,6 +10,7 @@ import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribut
 import { namespaces } from '../../../utils/namespaces';
 import { regex_starts_with_newline } from '../../../utils/patterns';
 import { Node, Expression as ESExpression } from 'estree';
+import hash from '../../utils/hash';
 
 export default function (node: Element, renderer: Renderer, options: RenderOptions) {
 
@@ -163,9 +164,10 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 	if (options.hydratable) {
 		if (options.head_id) {
 			renderer.add_string(` data-svelte="${options.head_id}"`);
-		}
-
-		if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
+		} else if (node.children.length === 1 && node.children[0].type === 'RawMustacheTag') {
+			renderer.add_string(` data-svelte="${hash(JSON.stringify(node.children[0].expression.node))}"`);
+			options = { ...options, optimised_html_hydration: true };
+		} else if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
 			renderer.add_string(` data-svelte="${node.hash()}"`);
 			options = { ...options, has_added_svelte_hash: true };
 		}
diff --git a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
index cd62b959818..89ec16df8cd 100644
--- a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
+++ b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
@@ -3,7 +3,7 @@ import RawMustacheTag from '../../nodes/RawMustacheTag';
 import { Expression } from 'estree';
 
 export default function(node: RawMustacheTag, renderer: Renderer, options: RenderOptions) {
-	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_START -->');
+	if (options.hydratable && !options.optimised_html_hydration) renderer.add_string('<!-- HTML_TAG_START -->');
 	renderer.add_expression(node.expression.node as Expression);
-	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_END -->');
+	if (options.hydratable && !options.optimised_html_hydration) renderer.add_string('<!-- HTML_TAG_END -->');
 }
diff --git a/test/runtime/index.ts b/test/runtime/index.ts
index 0e445b7a711..3b39fe54e03 100644
--- a/test/runtime/index.ts
+++ b/test/runtime/index.ts
@@ -154,6 +154,7 @@ describe('runtime', () => {
 					window.SvelteComponent = SvelteComponent;
 
 					const target = window.document.querySelector('main');
+					let snapshot = undefined;
 
 					if (hydrate && from_ssr_html) {
 						// ssr into target
@@ -163,6 +164,11 @@ describe('runtime', () => {
 						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 {
@@ -212,6 +218,7 @@ describe('runtime', () => {
 							component,
 							mod,
 							target,
+							snapshot,
 							window,
 							raf,
 							compileOptions
diff --git a/test/runtime/samples/raw-anchor-first-last-child/_config.js b/test/runtime/samples/raw-anchor-first-last-child/_config.js
index 30acfe4d0f2..3c7ada1998b 100644
--- a/test/runtime/samples/raw-anchor-first-last-child/_config.js
+++ b/test/runtime/samples/raw-anchor-first-last-child/_config.js
@@ -3,11 +3,24 @@ export default {
 		raw: '<span>foo</span>'
 	},
 
-	test({ assert, component, target }) {
+	snapshot(target) {
+		const span = target.querySelector('span');
+
+		return {
+			span
+		};
+	},
+
+	test({ assert, component, target, snapshot }) {
 		const span = target.querySelector('span');
 		assert.ok(!span.previousSibling);
 		assert.ok(!span.nextSibling);
 
+		if (snapshot) {
+			assert.equal(span, snapshot.span);
+		}
+
 		component.raw = '<span>bar</span>';
+		assert.htmlEqual(target.innerHTML, '<div><span>bar</span></div>');
 	}
 };
diff --git a/test/runtime/samples/raw-mustaches-preserved/_config.js b/test/runtime/samples/raw-mustaches-preserved/_config.js
index d4d57025d2a..184bb6fe4d0 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.htmlEqual(target.innerHTML, '<div><p>does not change</p></div>');
 		assert.strictEqual(target.querySelector('p'), p);
 	}
 };

From ff179a7b3dd00819dbc1d5683ea72bc2da921bc6 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Sat, 16 Apr 2022 08:27:10 +0800
Subject: [PATCH 05/16] improve static considertaion for contextual variable

---
 src/compiler/compile/nodes/shared/Expression.ts          | 9 +++++++++
 src/compiler/compile/nodes/shared/Tag.ts                 | 2 +-
 test/helpers.ts                                          | 4 ++--
 test/js/samples/each-block-changed-check/expected.js     | 4 +---
 .../samples/fragment-trailing-whitespace/_config.js      | 4 ++--
 test/runtime/samples/raw-mustaches-preserved/_config.js  | 2 +-
 6 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 1b1558ec17f..e7d581272ad 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/Tag.ts b/src/compiler/compile/nodes/shared/Tag.ts
index afb09d83ced..23d94ce01e0 100644
--- a/src/compiler/compile/nodes/shared/Tag.ts
+++ b/src/compiler/compile/nodes/shared/Tag.ts
@@ -19,7 +19,7 @@ export default class Tag extends Node {
 		);
 	}
 	is_dependencies_static() {
-		return this.expression.contextual_dependencies.size === 0 && this.expression.dynamic_dependencies().length === 0;
+		return this.expression.dynamic_contextual_dependencies().length === 0 && this.expression.dynamic_dependencies().length === 0;
 	}
 	check_if_content_dynamic() {
 		if (!this.is_dependencies_static()) {
diff --git a/test/helpers.ts b/test/helpers.ts
index 6498619e17a..ce357134475 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, htmlEqualWithOptions: (actual, expected, options, 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
@@ -172,7 +172,7 @@ export function setupHtmlEqual(options: { removeDataSvelte?: boolean } = {}) {
 		);
 	};
 	// eslint-disable-next-line no-import-assign
-	assert.htmlEqualWithOptions = (actual, expected, { preserveComments, withoutNormalizeHtml }, message) => {
+	assert.htmlEqualWithOptions = (actual: string, expected: string, { preserveComments, withoutNormalizeHtml }: { preserveComments?: boolean, withoutNormalizeHtml?: boolean }, message?: string) => {
 		assert.deepEqual(
 			withoutNormalizeHtml
 				? normalizeNewline(actual).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
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/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/raw-mustaches-preserved/_config.js b/test/runtime/samples/raw-mustaches-preserved/_config.js
index 184bb6fe4d0..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.htmlEqual(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);
 	}
 };

From c51ddcad18a4bdd5ef4abd73bc8e7756d2fb1b98 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sat, 16 Apr 2022 22:19:46 +0800
Subject: [PATCH 06/16] Update test/helpers.ts

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 test/helpers.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/helpers.ts b/test/helpers.ts
index ce357134475..8128f4ddf80 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -156,7 +156,6 @@ export function normalizeHtml(window, html, { removeDataSvelte = false, preserve
 }
 
 export function normalizeNewline(html: string) {
-	// return html.trim().replace(/\r\n/g, '\n')
 	return html.replace(/\r\n/g, '\n');
 }
 

From 1ff6bb93b46bfd5537879477f5459d8b4460dcf0 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Thu, 6 Oct 2022 01:26:50 +0800
Subject: [PATCH 07/16] feat: post rebase cleanup

---
 src/compiler/compile/Component.ts                   | 2 +-
 src/compiler/compile/nodes/Element.ts               | 1 +
 src/compiler/compile/render_ssr/handlers/Element.ts | 4 +---
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index 7dfd6c086c9..be8940ac92f 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -112,7 +112,7 @@ export default class Component {
 	slots: Map<string, Slot> = new Map();
 	slot_outlets: Set<string> = new Set();
 
-	tags: Tag[] = []
+	tags: Tag[] = [];
 
 	constructor(
 		ast: Ast,
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index a09bf881c86..5d638edd245 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -449,6 +449,7 @@ export default class Element extends Node {
 				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
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index f9442f11f43..6fb98debaa7 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -162,9 +162,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 	});
 
 	if (options.hydratable) {
-		if (options.head_id) {
-			renderer.add_string(` data-svelte="${options.head_id}"`);
-		} else if (node.children.length === 1 && node.children[0].type === 'RawMustacheTag') {
+		if (node.children.length === 1 && node.children[0].type === 'RawMustacheTag') {
 			renderer.add_string(` data-svelte="${hash(JSON.stringify(node.children[0].expression.node))}"`);
 			options = { ...options, optimised_html_hydration: true };
 		} else if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {

From 8ac4d68eda7cd7fcd642755c65b284cc86ed0f21 Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Fri, 3 Mar 2023 01:09:43 +0800
Subject: [PATCH 08/16] fix test

---
 src/compiler/compile/nodes/Head.ts                   |  2 +-
 test/js/samples/collapse-literal-ssr/expected.js     | 12 +-----------
 test/server-side-rendering/index.ts                  |  7 +++----
 .../head-meta-hydrate-duplicate/_expected.html       |  4 +---
 4 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/compiler/compile/nodes/Head.ts b/src/compiler/compile/nodes/Head.ts
index c6307222a57..83319092b3e 100644
--- a/src/compiler/compile/nodes/Head.ts
+++ b/src/compiler/compile/nodes/Head.ts
@@ -15,7 +15,7 @@ export default class Head extends Node {
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
-		this.can_use_innerhtml = false;
+		this.cannot_use_innerhtml();
 
 		if (info.attributes.length) {
 			component.error(info.attributes[0], compiler_errors.invalid_attribute_head);
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/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index c4078a48856..cbfcba8c21b 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -111,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()) {
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 02d89d6d181..0946c910dd3 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 data-svelte="svelte-156ixv6">Just a dummy page.</div>
\ No newline at end of file
+ <div data-svelte="svelte-156ixv6">Just a dummy page.</div>
\ No newline at end of file

From 8eddd050d47a6e205fb2663eaa67fc1ff437788f Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 14 Mar 2023 11:08:42 +0100
Subject: [PATCH 09/16] Update test/server-side-rendering/index.ts

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 test/server-side-rendering/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index cbfcba8c21b..fbbc1a22c5f 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -113,7 +113,7 @@ describe('ssr', () => {
 					try {
 						assert.htmlEqualWithOptions(
 							head,
-							fs.readFileSync(`${dir}/_expected-head.html`, "utf-8"),
+							fs.readFileSync(`${dir}/_expected-head.html`, 'utf-8'),
 							{ preserveComments: compileOptions.hydratable }
 						);
 					} catch (error) {

From f891995017204575edb0c39bc5927b26cd2cc4a6 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 3 Apr 2023 11:46:48 +0200
Subject: [PATCH 10/16] data-svelte -> data-svelte-h

---
 .../compile/render_dom/wrappers/Element/index.ts       |  2 +-
 src/compiler/compile/render_ssr/handlers/Element.ts    |  4 ++--
 src/runtime/internal/dom.ts                            |  2 +-
 test/helpers.ts                                        |  6 +++---
 test/hydration/samples/basic/_after.html               |  2 +-
 test/hydration/samples/basic/_before.html              |  2 +-
 .../samples/claim-static-incorrect-hash/_after.html    |  6 +++---
 .../samples/claim-static-incorrect-hash/_before.html   | 10 +++++-----
 .../hydration/samples/component-in-element/_after.html |  2 +-
 .../samples/component-in-element/_before.html          |  2 +-
 test/hydration/samples/component/_after.html           |  2 +-
 test/hydration/samples/component/_before.html          |  2 +-
 test/hydration/samples/element-nested/_after.html      |  2 +-
 test/hydration/samples/element-nested/_before.html     |  2 +-
 .../samples/head-meta-hydrate-duplicate/_expected.html |  2 +-
 15 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index b724b17a9d2..4687feaebf5 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -602,7 +602,7 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		if (to_optimise_hydration) {
-			attributes.push(p`["data-svelte"]: true`);
+			attributes.push(p`["data-svelte-h"]: true`);
 		}
 
 		if (this.node.namespace === namespaces.svg) {
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index e6d2117f002..485f5e9ee30 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -161,10 +161,10 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 
 	if (options.hydratable) {
 		if (node.children.length === 1 && node.children[0].type === 'RawMustacheTag') {
-			renderer.add_string(` data-svelte="${hash(JSON.stringify(node.children[0].expression.node))}"`);
+			renderer.add_string(` data-svelte-h="${hash(JSON.stringify(node.children[0].expression.node))}"`);
 			options = { ...options, optimised_html_hydration: true };
 		} else if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
-			renderer.add_string(` data-svelte="${node.hash()}"`);
+			renderer.add_string(` data-svelte-h="${node.hash()}"`);
 			options = { ...options, has_added_svelte_hash: true };
 		}
 	}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index a16bce8071b..a892f3f18fb 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -353,7 +353,7 @@ export function xlink_attr(node, attribute, value) {
 }
 
 export function get_svelte_dataset(node: HTMLElement) {
-	return node.dataset.svelte;
+	return node.dataset.svelteH;
 }
 
 export function get_binding_group_value(group, __value, checked) {
diff --git a/test/helpers.ts b/test/helpers.ts
index 8128f4ddf80..b08d069068c 100644
--- a/test/helpers.ts
+++ b/test/helpers.ts
@@ -145,7 +145,7 @@ export function normalizeHtml(window, html, { removeDataSvelte = false, preserve
 		const node = window.document.createElement('div');
 		node.innerHTML = html
 			.replace(/(<!--.*?-->)/g, preserveComments ? '$1' : '')
-			.replace(/(data-svelte="[^"]+")/g, removeDataSvelte ? '' : '$1')
+			.replace(/(data-svelte-h="[^"]+")/g, removeDataSvelte ? '' : '$1')
 			.replace(/>[\s\r\n]+</g, '><')
 			.trim();
 		cleanChildren(node);
@@ -174,10 +174,10 @@ export function setupHtmlEqual(options: { removeDataSvelte?: boolean } = {}) {
 	assert.htmlEqualWithOptions = (actual: string, expected: string, { preserveComments, withoutNormalizeHtml }: { preserveComments?: boolean, withoutNormalizeHtml?: boolean }, message?: string) => {
 		assert.deepEqual(
 			withoutNormalizeHtml
-				? normalizeNewline(actual).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				? normalizeNewline(actual).replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
 				: normalizeHtml(window, actual, { ...options, preserveComments }),
 			withoutNormalizeHtml
-				? normalizeNewline(expected).replace(/(\sdata-svelte="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+				? normalizeNewline(expected).replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
 				: normalizeHtml(window, expected, { ...options, preserveComments }),
 			message
 		);
diff --git a/test/hydration/samples/basic/_after.html b/test/hydration/samples/basic/_after.html
index 7c4ab6e7b99..6fd7fb9e47c 100644
--- a/test/hydration/samples/basic/_after.html
+++ b/test/hydration/samples/basic/_after.html
@@ -1 +1 @@
-<h1 data-svelte="svelte-1vv3a6r">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 7c4ab6e7b99..6fd7fb9e47c 100644
--- a/test/hydration/samples/basic/_before.html
+++ b/test/hydration/samples/basic/_before.html
@@ -1 +1 @@
-<h1 data-svelte="svelte-1vv3a6r">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/claim-static-incorrect-hash/_after.html b/test/hydration/samples/claim-static-incorrect-hash/_after.html
index 585c6b005dc..3956ffe88a6 100644
--- a/test/hydration/samples/claim-static-incorrect-hash/_after.html
+++ b/test/hydration/samples/claim-static-incorrect-hash/_after.html
@@ -1,8 +1,8 @@
-<div data-svelte="xxx">hello</div>
+<div data-svelte-h="xxx">hello</div>
 
-<div data-svelte="xxx"><div>bye</div></div>
+<div data-svelte-h="xxx"><div>bye</div></div>
 
-<div data-svelte="xxx">
+<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
index 59acf4d46d1..9dd22f8c4f8 100644
--- a/test/hydration/samples/claim-static-incorrect-hash/_before.html
+++ b/test/hydration/samples/claim-static-incorrect-hash/_before.html
@@ -1,8 +1,8 @@
-<div data-svelte="xxx">hello</div>
+<div data-svelte-h="xxx">hello</div>
 
-<div data-svelte="xxx"><div data-svelte="yyy">bye</div></div>
+<div data-svelte-h="xxx"><div data-svelte-h="yyy">bye</div></div>
 
-<div data-svelte="xxx">
-	<div data-svelte="yyy">aaa</div>
-	<div data-svelte="zzz">bbb</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/component-in-element/_after.html b/test/hydration/samples/component-in-element/_after.html
index 127e868d6bc..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 data-svelte="svelte-1x3hbnh">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 127e868d6bc..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 data-svelte="svelte-1x3hbnh">nested</p>
+	<p data-svelte-h="svelte-1x3hbnh">nested</p>
 </div>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_after.html b/test/hydration/samples/component/_after.html
index bd79430d0e8..1dd7a4ec7e2 100644
--- a/test/hydration/samples/component/_after.html
+++ b/test/hydration/samples/component/_after.html
@@ -1 +1 @@
-<p data-svelte="svelte-1x3hbnh">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 bd79430d0e8..1dd7a4ec7e2 100644
--- a/test/hydration/samples/component/_before.html
+++ b/test/hydration/samples/component/_before.html
@@ -1 +1 @@
-<p data-svelte="svelte-1x3hbnh">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/element-nested/_after.html b/test/hydration/samples/element-nested/_after.html
index 0d1f4870914..cfc87f4d37a 100644
--- a/test/hydration/samples/element-nested/_after.html
+++ b/test/hydration/samples/element-nested/_after.html
@@ -1,3 +1,3 @@
-<div data-svelte="svelte-1aqf5aj">
+<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 0d1f4870914..cfc87f4d37a 100644
--- a/test/hydration/samples/element-nested/_before.html
+++ b/test/hydration/samples/element-nested/_before.html
@@ -1,3 +1,3 @@
-<div data-svelte="svelte-1aqf5aj">
+<div data-svelte-h="svelte-1aqf5aj">
 	<p>nested</p>
 </div>
\ No newline at end of file
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 0946c910dd3..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 +1 @@
- <div data-svelte="svelte-156ixv6">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

From 0f137aca77defdd37fefbd4da697459df223919b Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 3 Apr 2023 11:59:00 +0200
Subject: [PATCH 11/16] don't hash @html because it's not guranteed that input
 is the same on the server and client

---
 src/compiler/compile/nodes/RawMustacheTag.ts               | 1 +
 src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts | 2 +-
 src/compiler/compile/render_ssr/Renderer.ts                | 1 -
 src/compiler/compile/render_ssr/handlers/Element.ts        | 5 +----
 src/compiler/compile/render_ssr/handlers/HtmlTag.ts        | 4 ++--
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/compiler/compile/nodes/RawMustacheTag.ts b/src/compiler/compile/nodes/RawMustacheTag.ts
index 998fdce3ad7..99aeba26238 100644
--- a/src/compiler/compile/nodes/RawMustacheTag.ts
+++ b/src/compiler/compile/nodes/RawMustacheTag.ts
@@ -4,6 +4,7 @@ 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/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index d3c502a9c68..acecb2e076f 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -36,7 +36,7 @@ export default class RawMustacheTagWrapper extends Tag {
 				content => insert(content)
 			);
 
-			block.chunks.mount.push(b`if (@get_svelte_dataset(${parent_node}) !== "${hash(JSON.stringify(this.node.expression.node))}") ${insert(init)}`);
+			block.chunks.mount.push(insert(init));
 		} else {
 			const needs_anchor = in_head || (this.next ? !this.next.is_dom_node() : (!this.parent || !this.parent.is_dom_node()));
 
diff --git a/src/compiler/compile/render_ssr/Renderer.ts b/src/compiler/compile/render_ssr/Renderer.ts
index b40e5cb4bdd..5fd473a9cff 100644
--- a/src/compiler/compile/render_ssr/Renderer.ts
+++ b/src/compiler/compile/render_ssr/Renderer.ts
@@ -49,7 +49,6 @@ export interface RenderOptions extends CompileOptions{
 	locate: (c: number) => { line: number; column: number };
 	head_id?: string;
 	has_added_svelte_hash?: boolean;
-	optimised_html_hydration?: 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 485f5e9ee30..4fe28cdb9fe 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -160,10 +160,7 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 	});
 
 	if (options.hydratable) {
-		if (node.children.length === 1 && node.children[0].type === 'RawMustacheTag') {
-			renderer.add_string(` data-svelte-h="${hash(JSON.stringify(node.children[0].expression.node))}"`);
-			options = { ...options, optimised_html_hydration: true };
-		} else if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
+		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 };
 		}
diff --git a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
index 89ec16df8cd..cd62b959818 100644
--- a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
+++ b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
@@ -3,7 +3,7 @@ import RawMustacheTag from '../../nodes/RawMustacheTag';
 import { Expression } from 'estree';
 
 export default function(node: RawMustacheTag, renderer: Renderer, options: RenderOptions) {
-	if (options.hydratable && !options.optimised_html_hydration) renderer.add_string('<!-- HTML_TAG_START -->');
+	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_START -->');
 	renderer.add_expression(node.expression.node as Expression);
-	if (options.hydratable && !options.optimised_html_hydration) renderer.add_string('<!-- HTML_TAG_END -->');
+	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_END -->');
 }

From 56ce621009746214495e0942300c3a0ac7fd0d3c Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 3 Apr 2023 12:08:48 +0200
Subject: [PATCH 12/16] lint

---
 src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts | 1 -
 src/compiler/compile/render_ssr/handlers/Element.ts        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index acecb2e076f..5c831b9f38c 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -9,7 +9,6 @@ import MustacheTag from '../../nodes/MustacheTag';
 import RawMustacheTag from '../../nodes/RawMustacheTag';
 import { is_head } from './shared/is_head';
 import { Identifier, Node } from 'estree';
-import hash from '../../utils/hash';
 
 export default class RawMustacheTagWrapper extends Tag {
 	var: Identifier = { type: 'Identifier', name: 'raw' };
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 4fe28cdb9fe..96e0afb3589 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -12,7 +12,6 @@ import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribut
 import { namespaces } from '../../../utils/namespaces';
 import { regex_starts_with_newline } from '../../../utils/patterns';
 import { Node, Expression as ESExpression } from 'estree';
-import hash from '../../utils/hash';
 
 export default function (node: Element, renderer: Renderer, options: RenderOptions) {
 

From 718a25b53cfc073b523d7521cb48d89a8ecfbd99 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 3 Apr 2023 14:51:03 +0200
Subject: [PATCH 13/16] fix tests, handle Comment

---
 .../compile/render_dom/wrappers/Comment.ts        |  6 ++++++
 .../compile/render_dom/wrappers/Element/index.ts  |  9 ++++++---
 test/hydration/samples/claim-comment/_config.js   | 15 ---------------
 .../raw-anchor-first-last-child/_config.js        | 15 +--------------
 4 files changed, 13 insertions(+), 32 deletions(-)

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/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 4687feaebf5..ebda5b4d37d 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[];
@@ -499,7 +500,7 @@ export default class ElementWrapper extends Wrapper {
 				};
 
 				const can_use_raw_text = !this.node.can_use_innerhtml && can_use_textcontent;
-				to_html((this.fragment.nodes as unknown as Array<ElementWrapper | TextWrapper>), block, literal, state, can_use_raw_text);
+				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);
 
 				if (hydratable) {
@@ -1250,9 +1251,11 @@ 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
 
diff --git a/test/hydration/samples/claim-comment/_config.js b/test/hydration/samples/claim-comment/_config.js
index 0f69bd48f62..bef333510f8 100644
--- a/test/hydration/samples/claim-comment/_config.js
+++ b/test/hydration/samples/claim-comment/_config.js
@@ -1,20 +1,5 @@
 export default {
 	compileOptions: {
 		preserveComments:true
-	},
-	snapshot(target) {
-		const div = target.querySelector('div');
-
-		return {
-			div,
-			comment: div.childNodes[0]
-		};
-	},
-
-	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/runtime/samples/raw-anchor-first-last-child/_config.js b/test/runtime/samples/raw-anchor-first-last-child/_config.js
index 3c7ada1998b..30acfe4d0f2 100644
--- a/test/runtime/samples/raw-anchor-first-last-child/_config.js
+++ b/test/runtime/samples/raw-anchor-first-last-child/_config.js
@@ -3,24 +3,11 @@ export default {
 		raw: '<span>foo</span>'
 	},
 
-	snapshot(target) {
-		const span = target.querySelector('span');
-
-		return {
-			span
-		};
-	},
-
-	test({ assert, component, target, snapshot }) {
+	test({ assert, component, target }) {
 		const span = target.querySelector('span');
 		assert.ok(!span.previousSibling);
 		assert.ok(!span.nextSibling);
 
-		if (snapshot) {
-			assert.equal(span, snapshot.span);
-		}
-
 		component.raw = '<span>bar</span>';
-		assert.htmlEqual(target.innerHTML, '<div><span>bar</span></div>');
 	}
 };

From 4ee6f7814d5a47a92cdccea4a028e55c00fde8f9 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 11 Apr 2023 13:48:12 +0200
Subject: [PATCH 14/16] simplify snapshot comparison, add some more

---
 test/hydration/index.ts                            |  7 +++++++
 test/hydration/samples/basic/_config.js            |  7 -------
 test/hydration/samples/binding-input/_config.js    |  7 +------
 test/hydration/samples/claim-comment/_after.html   |  2 ++
 test/hydration/samples/claim-comment/_before.html  |  2 ++
 test/hydration/samples/claim-comment/_config.js    |  5 +++++
 test/hydration/samples/claim-comment/main.svelte   |  2 ++
 test/hydration/samples/claim-text/_config.js       |  8 ++++++++
 .../samples/component-in-element/_config.js        |  9 ---------
 test/hydration/samples/component/_config.js        |  7 -------
 .../samples/dynamic-text-changed/_config.js        |  7 -------
 test/hydration/samples/dynamic-text-nil/_config.js |  8 --------
 test/hydration/samples/dynamic-text/_config.js     |  7 -------
 .../samples/each-block-arg-clash/_config.js        | 14 +++-----------
 test/hydration/samples/each-block/_config.js       | 14 +++-----------
 .../samples/element-attribute-added/_config.js     |  6 ------
 .../samples/element-attribute-changed/_config.js   |  6 ------
 .../samples/element-attribute-removed/_config.js   |  6 ------
 .../samples/element-attribute-unchanged/_config.js |  6 ------
 .../samples/element-nested-sibling/_config.js      |  8 --------
 test/hydration/samples/element-nested/_config.js   |  7 -------
 test/hydration/samples/element-ref/_config.js      |  4 +---
 test/hydration/samples/event-handler/_config.js    |  4 +---
 .../samples/expression-sibling/_config.js          |  8 --------
 test/hydration/samples/if-block-anchor/_config.js  |  9 ---------
 test/hydration/samples/if-block-false/_config.js   |  6 ------
 test/hydration/samples/if-block-update/_config.js  |  4 +---
 test/hydration/samples/if-block/_config.js         |  6 ------
 test/hydration/samples/raw/_config.js              |  9 ---------
 29 files changed, 36 insertions(+), 159 deletions(-)
 create mode 100644 test/hydration/samples/claim-text/_config.js

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/_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 bef333510f8..305fac9bd96 100644
--- a/test/hydration/samples/claim-comment/_config.js
+++ b/test/hydration/samples/claim-comment/_config.js
@@ -1,5 +1,10 @@
 export default {
 	compileOptions: {
 		preserveComments:true
+	},
+	snapshot(target) {
+		return {
+			div: target.querySelectorAll('div')[1]
+		}
 	}
 };
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-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/_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/_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/_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..0f8ed286bb1 100644
--- a/test/hydration/samples/if-block-update/_config.js
+++ b/test/hydration/samples/if-block-update/_config.js
@@ -12,11 +12,9 @@ export default {
 		};
 	},
 
-	test(assert, target, snapshot, component) {
+	test(assert, target, _, component) {
 		const p = target.querySelector('p');
 
-		assert.equal(p, snapshot.p);
-
 		component.foo = false;
 		component.bar = true;
 		assert.htmlEqual(target.innerHTML, '<p>bar!</p>');
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);
 	}
 };

From 58af0508a01ce10fe8a64218645462d2ba12d498 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 19 Apr 2023 15:57:45 +0200
Subject: [PATCH 15/16] Apply suggestions from code review

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 test/hydration/samples/claim-comment/_config.js   | 2 +-
 test/hydration/samples/if-block-update/_config.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/hydration/samples/claim-comment/_config.js b/test/hydration/samples/claim-comment/_config.js
index 305fac9bd96..047f1db855f 100644
--- a/test/hydration/samples/claim-comment/_config.js
+++ b/test/hydration/samples/claim-comment/_config.js
@@ -5,6 +5,6 @@ export default {
 	snapshot(target) {
 		return {
 			div: target.querySelectorAll('div')[1]
-		}
+		};
 	}
 };
diff --git a/test/hydration/samples/if-block-update/_config.js b/test/hydration/samples/if-block-update/_config.js
index 0f8ed286bb1..aa9ba7798ca 100644
--- a/test/hydration/samples/if-block-update/_config.js
+++ b/test/hydration/samples/if-block-update/_config.js
@@ -13,7 +13,6 @@ export default {
 	},
 
 	test(assert, target, _, component) {
-		const p = target.querySelector('p');
 
 		component.foo = false;
 		component.bar = true;

From bbc8553bfed12ff9adb24dbff8cce615083b8ceb Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 19 Apr 2023 16:33:34 +0200
Subject: [PATCH 16/16] remove html tag handling

---
 src/compiler/compile/render_dom/wrappers/Element/index.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 1be8d6d21ff..9906c29e391 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -444,15 +444,13 @@ export default class ElementWrapper extends Wrapper {
 
 		const { can_use_textcontent, can_optimise_to_html_string } = this.node;
 
-		const to_optimise_hydration = can_optimise_to_html_string || (!is_head(parent_node) && this.node.children.length === 1 && this.node.children[0].type === 'RawMustacheTag');
-
 		if (hydratable) {
 			if (parent_nodes) {
 				block.chunks.claim.push(b`
-					${node} = ${this.get_claim_statement(block, parent_nodes, to_optimise_hydration)};
+					${node} = ${this.get_claim_statement(block, parent_nodes, can_optimise_to_html_string)};
 				`);
 
-				if (!to_optimise_hydration && !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};
 					`);
@@ -566,7 +564,7 @@ export default class ElementWrapper extends Wrapper {
 		this.add_styles(block);
 		this.add_manual_style_scoping(block);
 
-		if (nodes && hydratable && !this.void && !to_optimise_hydration) {
+		if (nodes && hydratable && !this.void && !can_optimise_to_html_string) {
 			block.chunks.claim.push(
 				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
 			);