chore: simplify hydration (#10943)

* WIP

* unused

* unused

* fix head hydration

* working

* simplify

* tighten up

* css props

* fix treeshaking

* add a comment

Author: Rich-Harris

packages/svelte/scripts/check-treeshakeability.js

@@ -109,7 +109,7 @@ const bundle = await bundle_code(
 	).js.code
 );
 
-if (!bundle.includes('hydrate_nodes')) {
+if (!bundle.includes('hydrate_nodes') && !bundle.includes('hydrate_anchor')) {
 	// eslint-disable-next-line no-console
 	console.error(`✅ Hydration code treeshakeable`);
 } else {

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1045,7 +1045,7 @@ function create_block(parent, name, nodes, context) {
 		);
 
 		/** @type {import('estree').Expression[]} */
-		const args = [b.id('$$anchor'), template_name];
+		const args = [template_name];
 
 		if (state.metadata.context.template_needs_import_node) {
 			args.push(b.false);
@@ -1089,7 +1089,7 @@ function create_block(parent, name, nodes, context) {
 
 			if (use_comment_template) {
 				// special case — we can use `$.comment` instead of creating a unique template
-				body.push(b.var(id, b.call('$.comment', b.id('$$anchor'))));
+				body.push(b.var(id, b.call('$.comment')));
 			} else {
 				state.hoisted.push(
 					b.var(
@@ -1103,7 +1103,7 @@ function create_block(parent, name, nodes, context) {
 				);
 
 				/** @type {import('estree').Expression[]} */
-				const args = [b.id('$$anchor'), template_name];
+				const args = [template_name];
 
 				if (state.metadata.context.template_needs_import_node) {
 					args.push(b.false);

packages/svelte/src/internal/client/dom/blocks/await.js

@@ -1,5 +1,4 @@
 import { is_promise } from '../../../common.js';
-import { hydrate_block_anchor } from '../hydration.js';
 import { remove } from '../reconciler.js';
 import {
 	current_component_context,
@@ -23,8 +22,6 @@ import { INERT } from '../../constants.js';
 export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) {
 	const component_context = current_component_context;
 
-	hydrate_block_anchor(anchor);
-
 	/** @type {any} */
 	let input;
 

packages/svelte/src/internal/client/dom/blocks/css-props.js

@@ -1,5 +1,5 @@
 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_nodes, hydrate_block_anchor, hydrating } from '../hydration.js';
+import { hydrate_anchor, hydrate_nodes, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
@@ -12,8 +12,6 @@ import { remove } from '../reconciler.js';
  * @returns {void}
  */
 export function css_props(anchor, is_html, props, component) {
-	hydrate_block_anchor(anchor);
-
 	/** @type {HTMLElement | SVGElement} */
 	let element;
 
@@ -24,7 +22,9 @@ export function css_props(anchor, is_html, props, component) {
 		// Hydration: css props element is surrounded by a ssr comment ...
 		element = /** @type {HTMLElement | SVGElement} */ (hydrate_nodes[0]);
 		// ... and the child(ren) of the css props element is also surround by a ssr comment
-		component_anchor = /** @type {Comment} */ (element.firstChild);
+		component_anchor = /** @type {Comment} */ (
+			hydrate_anchor(/** @type {Comment} */ (element.firstChild))
+		);
 	} else {
 		if (is_html) {
 			element = document.createElement('div');

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -6,13 +6,7 @@ import {
 	EACH_ITEM_REACTIVE,
 	EACH_KEYED
 } from '../../../../constants.js';
-import {
-	hydrate_nodes,
-	hydrate_block_anchor,
-	hydrating,
-	set_hydrating,
-	update_hydrate_nodes
-} from '../hydration.js';
+import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import { insert, remove } from '../reconciler.js';
 import { untrack } from '../../runtime.js';
@@ -59,11 +53,15 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
 	var state = { flags, items: [] };
 
 	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
-	hydrate_block_anchor(is_controlled ? /** @type {Node} */ (anchor.firstChild) : anchor);
 
 	if (is_controlled) {
 		var parent_node = /** @type {Element} */ (anchor);
-		parent_node.append((anchor = empty()));
+
+		anchor = hydrating
+			? /** @type {Comment | Text} */ (
+					hydrate_anchor(/** @type {Comment | Text} */ (parent_node.firstChild))
+				)
+			: parent_node.appendChild(empty());
 	}
 
 	/** @type {import('#client').Effect | null} */
@@ -115,32 +113,31 @@ function each(anchor, flags, get_collection, get_key, render_fn, fallback_fn, re
 		if (hydrating) {
 			var b_items = [];
 
-			// Hydrate block
-			var hydration_list = /** @type {import('#client').TemplateNode[]} */ (hydrate_nodes);
-			var hydrating_node = hydration_list[0];
+			/** @type {Node} */
+			var child_anchor = hydrate_nodes[0];
 
 			for (var i = 0; i < length; i++) {
-				var nodes = update_hydrate_nodes(hydrating_node);
-
-				if (nodes === null) {
+				if (child_anchor.nodeType !== 8 || /** @type {Comment} */ (child_anchor).data !== '[') {
 					// If `nodes` is null, then that means that the server rendered fewer items than what
 					// expected, so break out and continue appending non-hydrated items
 					mismatch = true;
 					set_hydrating(false);
 					break;
 				}
 
+				child_anchor = hydrate_anchor(child_anchor);
 				b_items[i] = create_item(array[i], keys?.[i], i, render_fn, flags);
-
-				// TODO helperise this
-				hydrating_node = /** @type {import('#client').TemplateNode} */ (
-					/** @type {Node} */ (
-						/** @type {Node} */ (nodes[nodes.length - 1] || hydrating_node).nextSibling
-					).nextSibling
-				);
+				child_anchor = /** @type {Comment} */ (child_anchor.nextSibling);
 			}
 
-			remove_excess_hydration_nodes(hydration_list, hydrating_node);
+			// remove excess nodes
+			if (length > 0) {
+				while (child_anchor !== anchor) {
+					var next = /** @type {import('#client').TemplateNode} */ (child_anchor.nextSibling);
+					/** @type {import('#client').TemplateNode} */ (child_anchor).remove();
+					child_anchor = next;
+				}
+			}
 
 			state.items = b_items;
 		}
@@ -440,20 +437,6 @@ function reconcile_tracked_array(array, state, anchor, render_fn, flags, keys) {
 	});
 }
 
-/**
- * The server could have rendered more list items than the client specifies.
- * In that case, we need to remove the remaining server-rendered nodes.
- * @param {import('#client').TemplateNode[]} hydration_list
- * @param {import('#client').TemplateNode | null} next_node
- */
-function remove_excess_hydration_nodes(hydration_list, next_node) {
-	if (next_node === null) return;
-	var idx = hydration_list.indexOf(next_node);
-	if (idx !== -1 && hydration_list.length > idx + 1) {
-		remove(hydration_list.slice(idx));
-	}
-}
-
 /**
  * Longest Increased Subsequence algorithm
  * @param {Int32Array} a

packages/svelte/src/internal/client/dom/blocks/if.js

@@ -1,5 +1,5 @@
 import { IS_ELSEIF } from '../../constants.js';
-import { hydrate_nodes, hydrate_block_anchor, hydrating, set_hydrating } from '../hydration.js';
+import { hydrate_nodes, hydrating, set_hydrating } from '../hydration.js';
 import { remove } from '../reconciler.js';
 import {
 	destroy_effect,
@@ -23,8 +23,6 @@ export function if_block(
 	alternate_fn = null,
 	elseif = false
 ) {
-	hydrate_block_anchor(anchor);
-
 	/** @type {import('#client').Effect | null} */
 	let consequent_effect = null;
 

packages/svelte/src/internal/client/dom/blocks/key.js

@@ -1,5 +1,4 @@
 import { UNINITIALIZED } from '../../constants.js';
-import { hydrate_block_anchor } from '../hydration.js';
 import { remove } from '../reconciler.js';
 import { pause_effect, render_effect } from '../../reactivity/effects.js';
 import { safe_not_equal } from '../../reactivity/equality.js';
@@ -12,8 +11,6 @@ import { safe_not_equal } from '../../reactivity/equality.js';
  * @returns {void}
  */
 export function key_block(anchor, get_key, render_fn) {
-	hydrate_block_anchor(anchor);
-
 	/** @type {V | typeof UNINITIALIZED} */
 	let key = UNINITIALIZED;
 

packages/svelte/src/internal/client/dom/blocks/svelte-component.js

@@ -1,4 +1,3 @@
-import { hydrate_block_anchor } from '../hydration.js';
 import { pause_effect, render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
 import { current_effect } from '../../runtime.js';
@@ -14,8 +13,6 @@ import { current_effect } from '../../runtime.js';
  * @returns {void}
  */
 export function component(anchor, get_component, render_fn) {
-	hydrate_block_anchor(anchor);
-
 	/** @type {C} */
 	let component;
 

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -1,5 +1,5 @@
 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_nodes, hydrate_block_anchor, hydrating } from '../hydration.js';
+import { hydrate_anchor, hydrate_nodes, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import {
 	destroy_effect,
@@ -44,8 +44,6 @@ function swap_block_dom(effect, from, to) {
 export function element(anchor, get_tag, is_svg, render_fn) {
 	const parent_effect = /** @type {import('#client').Effect} */ (current_effect);
 
-	hydrate_block_anchor(anchor);
-
 	/** @type {string | null} */
 	let tag;
 
@@ -114,7 +112,7 @@ export function element(anchor, get_tag, is_svg, render_fn) {
 					// If hydrating, use the existing ssr comment as the anchor so that the
 					// inner open and close methods can pick up the existing nodes correctly
 					var child_anchor = hydrating
-						? /** @type {Comment} */ (element.firstChild)
+						? element.firstChild && hydrate_anchor(/** @type {Comment} */ (element.firstChild))
 						: element.appendChild(empty());
 
 					if (child_anchor) {

packages/svelte/src/internal/client/dom/blocks/svelte-head.js

@@ -1,4 +1,4 @@
-import { hydrate_nodes, hydrating, set_hydrate_nodes, update_hydrate_nodes } from '../hydration.js';
+import { hydrate_anchor, hydrate_nodes, hydrating, set_hydrate_nodes } from '../hydration.js';
 import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 import { remove } from '../reconciler.js';
@@ -15,7 +15,13 @@ export function head(render_fn) {
 
 	if (hydrating) {
 		previous_hydrate_nodes = hydrate_nodes;
-		update_hydrate_nodes(document.head.firstChild);
+
+		let anchor = /** @type {import('#client').TemplateNode} */ (document.head.firstChild);
+		while (anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== '[') {
+			anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling);
+		}
+
+		anchor = /** @type {import('#client').TemplateNode} */ (hydrate_anchor(anchor));
 	}
 
 	var anchor = document.head.appendChild(empty());

packages/svelte/src/internal/client/dom/elements/custom-element.js

@@ -98,7 +98,7 @@ if (typeof HTMLElement === 'function') {
 					 * @param {Element} anchor
 					 */
 					return (anchor) => {
-						const node = open(anchor, () => {
+						const node = open(() => {
 							const slot = document.createElement('slot');
 							if (name !== 'default') {
 								slot.name = name;