chore: single-pass hydration

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

@@ -38,6 +38,7 @@ import { filename, locator } from '../../../state.js';
 
 export const block_open = t_string(`<!--${HYDRATION_START}-->`);
 export const block_close = t_string(`<!--${HYDRATION_END}-->`);
+export const block_anchor = t_string(`<!---->`);
 
 /**
  * @param {string} value
@@ -959,9 +960,12 @@ function serialize_element_spread_attributes(
  * @param {import('#compiler').Component | import('#compiler').SvelteComponent | import('#compiler').SvelteSelf} node
  * @param {string | import('estree').Expression} component_name
  * @param {import('./types').ComponentContext} context
- * @returns {import('estree').Statement}
+ * @returns {import('estree').Statement[]}
  */
 function serialize_inline_component(node, component_name, context) {
+	/** @type {import('./types').Template[]} */
+	const parts = [];
+
 	/** @type {Array<import('estree').Property[] | import('estree').Expression>} */
 	const props_and_spreads = [];
 
@@ -1123,37 +1127,43 @@ function serialize_inline_component(node, component_name, context) {
 					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
 				);
 
-	/** @type {import('estree').Statement} */
-	let statement = b.stmt(
-		(typeof component_name === 'string' ? b.call : b.maybe_call)(
-			context.state.options.dev
-				? b.call(
-						'$.validate_component',
-						typeof component_name === 'string' ? b.id(component_name) : component_name
-					)
-				: component_name,
-			b.id('$$payload'),
-			props_expression
-		)
-	);
+	/** @type {import('estree').Statement[]} */
+	let statements = [
+		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(block_open.value))),
+		b.stmt(
+			(typeof component_name === 'string' ? b.call : b.maybe_call)(
+				context.state.options.dev
+					? b.call(
+							'$.validate_component',
+							typeof component_name === 'string' ? b.id(component_name) : component_name
+						)
+					: component_name,
+				b.id('$$payload'),
+				props_expression
+			)
+		),
+		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(block_close.value)))
+	];
 
 	if (custom_css_props.length > 0) {
-		statement = b.stmt(
-			b.call(
-				'$.css_props',
-				b.id('$$payload'),
-				b.literal(context.state.metadata.namespace === 'svg' ? false : true),
-				b.object(custom_css_props),
-				b.thunk(b.block([statement]))
+		statements = [
+			b.stmt(
+				b.call(
+					'$.css_props',
+					b.id('$$payload'),
+					b.literal(context.state.metadata.namespace === 'svg' ? false : true),
+					b.object(custom_css_props),
+					b.thunk(b.block(statements))
+				)
 			)
-		);
+		];
 	}
 
 	if (snippet_declarations.length > 0) {
-		statement = b.block([...snippet_declarations, statement]);
+		statements = [b.block([...snippet_declarations, ...statements])];
 	}
 
-	return statement;
+	return statements;
 }
 
 /**
@@ -1470,8 +1480,6 @@ const template_visitors = {
 			}
 		};
 
-		context.state.template.push(block_open);
-
 		const main = create_block(node, node.fragment.nodes, {
 			...context,
 			state: { ...context.state, metadata }
@@ -1506,7 +1514,7 @@ const template_visitors = {
 					)
 				)
 			),
-			block_close
+			block_anchor
 		);
 		if (context.state.options.dev) {
 			context.state.template.push(t_statement(b.stmt(b.call('$.pop_element'))));
@@ -1654,29 +1662,27 @@ const template_visitors = {
 		}
 	},
 	Component(node, context) {
-		const state = context.state;
-		state.template.push(block_open);
-		const call = serialize_inline_component(node, node.name, context);
-		state.template.push(t_statement(call));
-		state.template.push(block_close);
+		context.state.template.push(
+			...serialize_inline_component(node, node.name, context).map((statement) =>
+				t_statement(statement)
+			)
+		);
 	},
 	SvelteSelf(node, context) {
-		const state = context.state;
-		state.template.push(block_open);
-		const call = serialize_inline_component(node, context.state.analysis.name, context);
-		state.template.push(t_statement(call));
-		state.template.push(block_close);
+		context.state.template.push(
+			...serialize_inline_component(node, context.state.analysis.name, context).map((statement) =>
+				t_statement(statement)
+			)
+		);
 	},
 	SvelteComponent(node, context) {
-		const state = context.state;
-		state.template.push(block_open);
-		const call = serialize_inline_component(
-			node,
-			/** @type {import('estree').Expression} */ (context.visit(node.expression)),
-			context
+		context.state.template.push(
+			...serialize_inline_component(
+				node,
+				/** @type {import('estree').Expression} */ (context.visit(node.expression)),
+				context
+			).map((statement) => t_statement(statement))
 		);
-		state.template.push(t_statement(call));
-		state.template.push(block_close);
 	},
 	LetDirective(node, { state }) {
 		if (node.expression && node.expression.type !== 'Identifier') {

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

@@ -1,16 +1,16 @@
 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_start, hydrating } from '../hydration.js';
+import { hydrate_anchor, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import { render_effect } from '../../reactivity/effects.js';
 
 /**
- * @param {Element | Text | Comment} anchor
+ * @param {HTMLElement | SVGElement | Comment} node
  * @param {boolean} is_html
  * @param {() => Record<string, string>} props
  * @param {(anchor: Element | Text | Comment) => any} component
  * @returns {void}
  */
-export function css_props(anchor, is_html, props, component) {
+export function css_props(node, is_html, props, component) {
 	/** @type {HTMLElement | SVGElement} */
 	let element;
 
@@ -19,7 +19,8 @@ export function css_props(anchor, is_html, props, component) {
 
 	if (hydrating) {
 		// Hydration: css props element is surrounded by a ssr comment ...
-		element = /** @type {HTMLElement | SVGElement} */ (hydrate_start);
+		element = /** @type {HTMLElement | SVGElement} */ (node);
+
 		// ... and the child(ren) of the css props element is also surround by a ssr comment
 		component_anchor = /** @type {Comment} */ (
 			hydrate_anchor(/** @type {Comment} */ (element.firstChild))
@@ -32,7 +33,7 @@ export function css_props(anchor, is_html, props, component) {
 			element = document.createElementNS(namespace_svg, 'g');
 		}
 
-		anchor.before(element);
+		node.before(element); // TODO do we even need an anchor? Can we just pass in the correct element directly from the template?
 		component_anchor = element.appendChild(empty());
 	}
 

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

@@ -10,13 +10,12 @@ import {
 } from '../../../../constants.js';
 import {
 	hydrate_anchor,
-	hydrate_nodes,
 	hydrate_start,
 	hydrating,
+	remove_hydrate_nodes,
 	set_hydrating
 } from '../hydration.js';
 import { clear_text_content, empty } from '../operations.js';
-import { remove } from '../reconciler.js';
 import { untrack } from '../../runtime.js';
 import {
 	block,
@@ -145,7 +144,7 @@ export function each(anchor, flags, get_collection, get_key, render_fn, fallback
 
 			if (is_else !== (length === 0)) {
 				// hydration mismatch — remove the server-rendered DOM and start over
-				remove(hydrate_nodes);
+				remove_hydrate_nodes();
 				set_hydrating(false);
 				mismatch = true;
 			}

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

@@ -1,29 +1,9 @@
 import { derived } from '../../reactivity/deriveds.js';
 import { render_effect } from '../../reactivity/effects.js';
-import { current_effect, get } from '../../runtime.js';
-import { is_array } from '../../utils.js';
-import { hydrate_nodes, hydrating } from '../hydration.js';
-import { create_fragment_from_html, remove } from '../reconciler.js';
-
-/**
- * @param {import('#client').Effect} effect
- * @param {(Element | Comment | Text)[]} to_remove
- * @returns {void}
- */
-function remove_from_parent_effect(effect, to_remove) {
-	const dom = effect.dom;
-
-	if (is_array(dom)) {
-		for (let i = dom.length - 1; i >= 0; i--) {
-			if (to_remove.includes(dom[i])) {
-				dom.splice(i, 1);
-				break;
-			}
-		}
-	} else if (dom !== null && to_remove.includes(dom)) {
-		effect.dom = null;
-	}
-}
+import { get } from '../../runtime.js';
+import { hydrate_start, hydrating } from '../hydration.js';
+import { remove_nodes } from '../operations.js';
+import { create_fragment_from_html } from '../reconciler.js';
 
 /**
  * @param {Element | Text | Comment} anchor
@@ -33,20 +13,14 @@ function remove_from_parent_effect(effect, to_remove) {
  * @returns {void}
  */
 export function html(anchor, get_value, svg, mathml) {
-	const parent_effect = anchor.parentNode !== current_effect?.dom ? current_effect : null;
 	let value = derived(get_value);
 
 	render_effect(() => {
-		var dom = html_to_dom(anchor, get(value), svg, mathml);
+		var [start, end] = html_to_dom(anchor, get(value), svg, mathml);
 
-		if (dom) {
-			return () => {
-				if (parent_effect !== null) {
-					remove_from_parent_effect(parent_effect, is_array(dom) ? dom : [dom]);
-				}
-				remove(dom);
-			};
-		}
+		return () => {
+			remove_nodes(start, end);
+		};
 	});
 }
 
@@ -58,10 +32,12 @@ export function html(anchor, get_value, svg, mathml) {
  * @param {V} value
  * @param {boolean} svg
  * @param {boolean} mathml
- * @returns {Element | Comment | (Element | Comment | Text)[]}
+ * @returns {[import('#client').TemplateNode, import('#client').TemplateNode]}
  */
 function html_to_dom(target, value, svg, mathml) {
-	if (hydrating) return hydrate_nodes;
+	if (hydrating) {
+		return [hydrate_start, hydrate_start];
+	}
 
 	var html = value + '';
 	if (svg) html = `<svg>${html}</svg>`;
@@ -79,10 +55,11 @@ function html_to_dom(target, value, svg, mathml) {
 	if (node.childNodes.length === 1) {
 		var child = /** @type {Text | Element | Comment} */ (node.firstChild);
 		target.before(child);
-		return child;
+		return [child, child];
 	}
 
-	var nodes = /** @type {Array<Text | Element | Comment>} */ ([...node.childNodes]);
+	var first = /** @type {import('#client').TemplateNode} */ (node.firstChild);
+	var last = /** @type {import('#client').TemplateNode} */ (node.lastChild);
 
 	if (svg || mathml) {
 		while (node.firstChild) {
@@ -92,5 +69,5 @@ function html_to_dom(target, value, svg, mathml) {
 		target.before(node);
 	}
 
-	return nodes;
+	return [first, last];
 }

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

@@ -1,6 +1,5 @@
 import { EFFECT_TRANSPARENT } from '../../constants.js';
-import { hydrate_nodes, hydrating, set_hydrating } from '../hydration.js';
-import { remove } from '../reconciler.js';
+import { hydrating, remove_hydrate_nodes, set_hydrating } from '../hydration.js';
 import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
 import { HYDRATION_END_ELSE } from '../../../../constants.js';
 
@@ -42,7 +41,7 @@ export function if_block(
 			if (condition === is_else) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
 				// This could happen with `{#if browser}...{/if}`, for example
-				remove(hydrate_nodes);
+				remove_hydrate_nodes();
 				set_hydrating(false);
 				mismatch = true;
 			}

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

@@ -1,5 +1,5 @@
 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_start, hydrating } from '../hydration.js';
+import { hydrate_anchor, hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import {
 	block,
@@ -14,15 +14,15 @@ import { current_component_context } from '../../runtime.js';
 import { DEV } from 'esm-env';
 
 /**
- * @param {Comment} anchor
+ * @param {Comment | Element} node
  * @param {() => string} get_tag
  * @param {boolean} is_svg
  * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,
  * @param {undefined | (() => string)} get_namespace
  * @param {undefined | [number, number]} location
  * @returns {void}
  */
-export function element(anchor, get_tag, is_svg, render_fn, get_namespace, location) {
+export function element(node, get_tag, is_svg, render_fn, get_namespace, location) {
 	const filename = DEV && location && current_component_context?.function.filename;
 
 	/** @type {string | null} */
@@ -32,7 +32,9 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace, locat
 	let current_tag;
 
 	/** @type {null | Element} */
-	let element = null;
+	let element = hydrating && node.nodeType === 1 ? /** @type {Element} */ (node) : null;
+
+	let anchor = /** @type {Comment} */ (hydrating && element ? element.nextSibling : node);
 
 	/** @type {import('#client').Effect | null} */
 	let effect;
@@ -51,6 +53,7 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace, locat
 			: is_svg || next_tag === 'svg'
 				? namespace_svg
 				: null;
+
 		// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
 		if (next_tag === tag) return;
 
@@ -79,7 +82,7 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace, locat
 		if (next_tag && next_tag !== current_tag) {
 			effect = branch(() => {
 				element = hydrating
-					? /** @type {Element} */ (hydrate_start)
+					? /** @type {Element} */ (element)
 					: ns
 						? document.createElementNS(ns, next_tag)
 						: document.createElement(next_tag);