Revert hydration optimisation (#6290)

Co-authored-by: haveyaseen <haveyaread@gmail.com>

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Revert hydration optimisation for the time being
+
 ## 3.38.1
 
 * Fix hydration regression ([#6274](https://github.com/sveltejs/svelte/issues/6274))

src/runtime/internal/Component.ts

@@ -1,7 +1,7 @@
 import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
 import { current_component, set_current_component } from './lifecycle';
 import { blank_object, is_empty, is_function, run, run_all, noop } from './utils';
-import { children, detach, start_hydrating, end_hydrating } from './dom';
+import { children, detach } from './dom';
 import { transition_in } from './transitions';
 
 interface Fragment {
@@ -150,7 +150,6 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 	if (options.target) {
 		if (options.hydrate) {
-			start_hydrating();
 			const nodes = children(options.target);
 			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			$$.fragment && $$.fragment!.l(nodes);
@@ -162,7 +161,6 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 		if (options.intro) transition_in(component.$$.fragment);
 		mount_component(component, options.target, options.anchor, options.customElement);
-		end_hydrating();
 		flush();
 	}
 

src/runtime/internal/dom.ts

@@ -1,47 +1,15 @@
 import { has_prop } from './utils';
 
-// Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
-// at the end of hydration without touching the remaining nodes.
-let is_hydrating = false;
-const nodes_to_detach = new Set<Node>();
-
-export function start_hydrating() {
-	is_hydrating = true;
-}
-export function end_hydrating() {
-	is_hydrating = false;
-
-	for (const node of nodes_to_detach) {
-		node.parentNode.removeChild(node);
-	}
-
-	nodes_to_detach.clear();
-}
-
 export function append(target: Node, node: Node) {
-	if (is_hydrating) {
-		nodes_to_detach.delete(node);
-	}
-	if (node.parentNode !== target) {
-		target.appendChild(node);
-	}
+	target.appendChild(node);
 }
 
 export function insert(target: Node, node: Node, anchor?: Node) {
-	if (is_hydrating) {
-		nodes_to_detach.delete(node);
-	}
-	if (node.parentNode !== target || (anchor && node.nextSibling !== anchor)) {
-		target.insertBefore(node, anchor || null);
-	}
+	target.insertBefore(node, anchor || null);
 }
 
 export function detach(node: Node) {
-	if (is_hydrating) {
-		nodes_to_detach.add(node);
-	} else if (node.parentNode) {
-		node.parentNode.removeChild(node);
-	}
+	node.parentNode.removeChild(node);
 }
 
 export function destroy_each(iterations, detaching) {
@@ -186,9 +154,8 @@ export function children(element) {
 }
 
 export function claim_element(nodes, name, attributes, svg) {
-	while (nodes.length > 0) {
-		const node = nodes.shift();
-
+	for (let i = 0; i < nodes.length; i += 1) {
+		const node = nodes[i];
 		if (node.nodeName === name) {
 			let j = 0;
 			const remove = [];
@@ -201,10 +168,7 @@ export function claim_element(nodes, name, attributes, svg) {
 			for (let k = 0; k < remove.length; k++) {
 				node.removeAttribute(remove[k]);
 			}
-
-			return node;
-		} else {
-			detach(node);
+			return nodes.splice(i, 1)[0];
 		}
 	}
 

test/hydration/samples/element-nested-sibling/_after.html

@@ -0,0 +1,4 @@
+<p>
+	<span>1</span>
+	<code>2</code>
+</p>

test/hydration/samples/element-nested-sibling/_before.html

@@ -0,0 +1,4 @@
+<p>
+	<span>1</span>
+	<code>2</code>
+</p>

test/hydration/samples/element-nested-sibling/_config.js

@@ -0,0 +1,19 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			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);
+	}
+};

test/hydration/samples/element-nested-sibling/main.svelte

@@ -0,0 +1,6 @@
+<p>
+    <span>1</span>
+    {#if true}
+        <code>2</code>
+    {/if}
+</p>

test/hydration/samples/expression-sibling/_after.html

@@ -0,0 +1 @@
+<p>1 2 <span>3</span></p>

test/hydration/samples/expression-sibling/_before.html

@@ -0,0 +1 @@
+<p>1 2 <span>3</span></p>

test/hydration/samples/expression-sibling/_config.js

@@ -0,0 +1,19 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			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);
+	}
+};

test/hydration/samples/expression-sibling/main.svelte

@@ -0,0 +1 @@
+<p>{1} 2 <span>3</span></p>