feat: single-pass hydration

.changeset/spotty-shrimps-hug.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: single-pass hydration

packages/svelte/scripts/check-treeshakeability.js

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

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

@@ -980,7 +980,8 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 
 		statements.push(
 			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
-			b.stmt(fn(b.member(anchor, b.id('lastChild'))))
+			b.stmt(fn(b.member(anchor, b.id('lastChild')))),
+			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
 		context.state.template.push('<!>');
@@ -1441,6 +1442,12 @@ function process_children(nodes, expression, is_element, { visit, state }) {
 	}
 
 	if (sequence.length > 0) {
+		// if the final item in a fragment is static text,
+		// we need to force `hydrate_node` to advance
+		if (sequence.length === 1 && sequence[0].type === 'Text' && nodes.length > 1) {
+			state.init.push(b.stmt(b.call('$.next')));
+		}
+
 		flush_sequence(sequence);
 	}
 }
@@ -1569,7 +1576,7 @@ export const template_visitors = {
 
 		const namespace = infer_namespace(context.state.metadata.namespace, parent, node.nodes);
 
-		const { hoisted, trimmed, is_standalone } = clean_nodes(
+		const { hoisted, trimmed, is_standalone, is_text_first } = clean_nodes(
 			parent,
 			node.nodes,
 			context.path,
@@ -1619,6 +1626,11 @@ export const template_visitors = {
 			context.visit(node, state);
 		}
 
+		if (is_text_first) {
+			// skip over inserted comment
+			body.push(b.stmt(b.call('$.next')));
+		}
+
 		/**
 		 * @param {import('estree').Identifier} template_name
 		 * @param {import('estree').Expression[]} args
@@ -1677,20 +1689,15 @@ export const template_visitors = {
 					state
 				});
 
-				body.push(
-					b.var(id, b.call('$.text', b.id('$$anchor'))),
-					...state.before_init,
-					...state.init
-				);
+				body.push(b.var(id, b.call('$.text')), ...state.before_init, ...state.init);
 				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 			} else {
 				if (is_standalone) {
 					// no need to create a template, we can just use the existing block's anchor
 					process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
 				} else {
 					/** @type {(is_text: boolean) => import('estree').Expression} */
-					const expression = (is_text) =>
-						is_text ? b.call('$.first_child', id, b.true) : b.call('$.first_child', id);
+					const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
 					process_children(trimmed, expression, false, { ...context, state });
 
@@ -2180,18 +2187,30 @@ export const template_visitors = {
 			context.visit(node, child_state);
 		}
 
-		process_children(
-			trimmed,
-			() =>
-				b.call(
-					'$.child',
-					node.name === 'template'
-						? b.member(context.state.node, b.id('content'))
-						: context.state.node
-				),
-			true,
-			{ ...context, state: child_state }
-		);
+		/** @type {import('estree').Expression} */
+		let arg = context.state.node;
+
+		// If `hydrate_node` is set inside the element, we need to reset it
+		// after the element has been hydrated
+		let needs_reset = trimmed.some((node) => node.type !== 'Text');
+
+		// The same applies if it's a `<template>` element, since we need to
+		// set the value of `hydrate_node` to `node.content`
+		if (node.name === 'template') {
+			needs_reset = true;
+
+			arg = b.member(arg, b.id('content'));
+			child_state.init.push(b.stmt(b.call('$.reset', arg)));
+		}
+
+		process_children(trimmed, () => b.call('$.child', arg), true, {
+			...context,
+			state: child_state
+		});
+
+		if (needs_reset) {
+			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+		}
 
 		if (has_declaration) {
 			context.state.init.push(

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -33,16 +33,21 @@ import {
 import { escape_html } from '../../../../escaping.js';
 import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
 import {
-	BLOCK_ANCHOR,
+	EMPTY_COMMENT,
 	BLOCK_CLOSE,
-	BLOCK_CLOSE_ELSE,
-	BLOCK_OPEN
+	BLOCK_OPEN,
+	BLOCK_OPEN_ELSE
 } from '../../../../internal/server/hydration.js';
 import { filename, locator } from '../../../state.js';
 
-export const block_open = b.literal(BLOCK_OPEN);
-export const block_close = b.literal(BLOCK_CLOSE);
-export const block_anchor = b.literal(BLOCK_ANCHOR);
+/** Opens an if/each block, so that we can remove nodes in the case of a mismatch */
+const block_open = b.literal(BLOCK_OPEN);
+
+/** Closes an if/each block, so that we can remove nodes in the case of a mismatch. Also serves as an anchor for these blocks */
+const block_close = b.literal(BLOCK_CLOSE);
+
+/** Empty comment to keep text nodes separate, or provide an anchor node for blocks */
+const empty_comment = b.literal(EMPTY_COMMENT);
 
 /**
  * @param {import('estree').Node} node
@@ -996,22 +1001,32 @@ function serialize_inline_component(node, expression, context) {
 		statement = b.block([...snippet_declarations, statement]);
 	}
 
+	const dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
 	if (custom_css_props.length > 0) {
-		statement = b.stmt(
-			b.call(
-				'$.css_props',
-				b.id('$$payload'),
-				b.literal(context.state.namespace === 'svg' ? false : true),
-				b.object(custom_css_props),
-				b.thunk(b.block([statement]))
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.css_props',
+					b.id('$$payload'),
+					b.literal(context.state.namespace === 'svg' ? false : true),
+					b.object(custom_css_props),
+					b.thunk(b.block([statement])),
+					dynamic && b.true
+				)
 			)
 		);
+	} else {
+		if (dynamic) {
+			context.state.template.push(empty_comment);
+		}
 
 		context.state.template.push(statement);
-	} else if (context.state.skip_hydration_boundaries) {
-		context.state.template.push(statement);
-	} else {
-		context.state.template.push(block_open, statement, block_close);
+
+		if (!context.state.skip_hydration_boundaries) {
+			context.state.template.push(empty_comment);
+		}
 	}
 }
 
@@ -1119,7 +1134,7 @@ const template_visitors = {
 		const parent = context.path.at(-1) ?? node;
 		const namespace = infer_namespace(context.state.namespace, parent, node.nodes);
 
-		const { hoisted, trimmed, is_standalone } = clean_nodes(
+		const { hoisted, trimmed, is_standalone, is_text_first } = clean_nodes(
 			parent,
 			node.nodes,
 			context.path,
@@ -1142,13 +1157,18 @@ const template_visitors = {
 			context.visit(node, state);
 		}
 
+		if (is_text_first) {
+			// insert `<!---->` to prevent this from being glued to the previous fragment
+			state.template.push(empty_comment);
+		}
+
 		process_children(trimmed, { ...context, state });
 
 		return b.block([...state.init, ...serialize_template(state.template)]);
 	},
 	HtmlTag(node, context) {
 		const expression = /** @type {import('estree').Expression} */ (context.visit(node.expression));
-		context.state.template.push(block_open, expression, block_close);
+		context.state.template.push(empty_comment, expression, empty_comment);
 	},
 	ConstTag(node, { state, visit }) {
 		const declaration = node.declaration.declarations[0];
@@ -1188,10 +1208,6 @@ const template_visitors = {
 			return /** @type {import('estree').Expression} */ (context.visit(arg));
 		});
 
-		if (!context.state.skip_hydration_boundaries) {
-			context.state.template.push(block_open);
-		}
-
 		context.state.template.push(
 			b.stmt(
 				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
@@ -1203,7 +1219,7 @@ const template_visitors = {
 		);
 
 		if (!context.state.skip_hydration_boundaries) {
-			context.state.template.push(block_close);
+			context.state.template.push(empty_comment);
 		}
 	},
 	ClassDirective() {
@@ -1353,7 +1369,6 @@ const template_visitors = {
 	},
 	EachBlock(node, context) {
 		const state = context.state;
-		state.template.push(block_open);
 
 		const each_node_meta = node.metadata;
 		const collection = /** @type {import('estree').Expression} */ (context.visit(node.expression));
@@ -1376,39 +1391,36 @@ const template_visitors = {
 			each.push(b.let(node.index, index));
 		}
 
-		each.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN))));
-
 		each.push(.../** @type {import('estree').BlockStatement} */ (context.visit(node.body)).body);
 
-		each.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE))));
-
 		const for_loop = b.for(
 			b.let(index, b.literal(0)),
 			b.binary('<', index, b.member(array_id, b.id('length'))),
 			b.update('++', index, false),
 			b.block(each)
 		);
 
-		const close = b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE)));
-
 		if (node.fallback) {
+			const open = b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open));
+
 			const fallback = /** @type {import('estree').BlockStatement} */ (
 				context.visit(node.fallback)
 			);
 
-			fallback.body.push(
-				b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE_ELSE)))
+			fallback.body.unshift(
+				b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
 			);
 
 			state.template.push(
 				b.if(
 					b.binary('!==', b.member(array_id, b.id('length')), b.literal(0)),
-					b.block([for_loop, close]),
+					b.block([open, for_loop]),
 					fallback
-				)
+				),
+				block_close
 			);
 		} else {
-			state.template.push(for_loop, close);
+			state.template.push(block_open, for_loop, block_close);
 		}
 	},
 	IfBlock(node, context) {
@@ -1422,16 +1434,17 @@ const template_visitors = {
 			? /** @type {import('estree').BlockStatement} */ (context.visit(node.alternate))
 			: b.block([]);
 
-		consequent.body.push(b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE))));
-		alternate.body.push(
-			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_CLOSE_ELSE)))
+		consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
+
+		alternate.body.unshift(
+			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
 		);
 
-		context.state.template.push(block_open, b.if(test, consequent, alternate));
+		context.state.template.push(b.if(test, consequent, alternate), block_close);
 	},
 	AwaitBlock(node, context) {
 		context.state.template.push(
-			block_open,
+			empty_comment,
 			b.stmt(
 				b.call(
 					'$.await',
@@ -1455,12 +1468,12 @@ const template_visitors = {
 					)
 				)
 			),
-			block_close
+			empty_comment
 		);
 	},
 	KeyBlock(node, context) {
 		const block = /** @type {import('estree').BlockStatement} */ (context.visit(node.fragment));
-		context.state.template.push(block_open, block, block_close);
+		context.state.template.push(empty_comment, block, empty_comment);
 	},
 	SnippetBlock(node, context) {
 		const fn = b.function_declaration(
@@ -1594,7 +1607,7 @@ const template_visitors = {
 
 		const slot = b.call('$.slot', b.id('$$payload'), expression, props_expression, fallback);
 
-		context.state.template.push(block_open, b.stmt(slot), block_close);
+		context.state.template.push(empty_comment, b.stmt(slot), empty_comment);
 	},
 	SvelteHead(node, context) {
 		const block = /** @type {import('estree').BlockStatement} */ (context.visit(node.fragment));

packages/svelte/src/compiler/phases/3-transform/utils.js

@@ -270,21 +270,28 @@ export function clean_nodes(
 
 	var first = trimmed[0];
 
-	/**
-	 * In a case like `{#if x}<Foo />{/if}`, we don't need to wrap the child in
-	 * comments — we can just use the parent block's anchor for the component.
-	 * TODO extend this optimisation to other cases
-	 */
-	const is_standalone =
-		trimmed.length === 1 &&
-		((first.type === 'RenderTag' && !first.metadata.dynamic) ||
-			(first.type === 'Component' &&
-				!state.options.hmr &&
-				!first.attributes.some(
-					(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
-				)));
-
-	return { hoisted, trimmed, is_standalone };
+	return {
+		hoisted,
+		trimmed,
+		/**
+		 * In a case like `{#if x}<Foo />{/if}`, we don't need to wrap the child in
+		 * comments — we can just use the parent block's anchor for the component.
+		 * TODO extend this optimisation to other cases
+		 */
+		is_standalone:
+			trimmed.length === 1 &&
+			((first.type === 'RenderTag' && !first.metadata.dynamic) ||
+				(first.type === 'Component' &&
+					!state.options.hmr &&
+					!first.attributes.some(
+						(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
+					))),
+		/** if a component or snippet starts with text, we need to add an anchor comment so that its text node doesn't get fused with its surroundings */
+		is_text_first:
+			(parent.type === 'Fragment' || parent.type === 'SnippetBlock') &&
+			first &&
+			(first?.type === 'Text' || first?.type === 'ExpressionTag')
+	};
 }
 
 /**