feat: only traverse trailing static nodes during hydration (#12935)

Author: Rich-Harris

.changeset/quick-paws-wash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: only traverse trailing static nodes during hydration

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

@@ -118,7 +118,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	// traverse to the last (n - 1) one when hydrating
 	if (skipped > 1) {
 		skipped -= 1;
-		state.init.push(b.stmt(get_node(false)));
+		state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
 	}
 }
 

packages/svelte/src/internal/client/dom/hydration.js

@@ -66,9 +66,16 @@ export function hydrate_template(template) {
 	}
 }
 
-export function next() {
+export function next(count = 1) {
 	if (hydrating) {
-		hydrate_next();
+		var i = count;
+		var node = hydrate_node;
+
+		while (i--) {
+			node = /** @type {TemplateNode} */ (get_next_sibling(node));
+		}
+
+		hydrate_node = node;
 	}
 }
 

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js

@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -14,6 +14,7 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	var node = $.sibling(h1, 10);
 
 	$.html(node, () => $$props.content, false, false);
+	$.next(14);
 	$.reset(main);
 
 	var cant_skip = $.sibling(main, 2);

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js

@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
 }

packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte

@@ -18,6 +18,13 @@
 	<p>these</p>
 	<p>ones</p>
 	{@html content}
+	<p>these</p>
+	<p>trailing</p>
+	<p>nodes</p>
+	<p>can</p>
+	<p>be</p>
+	<p>completely</p>
+	<p>ignored</p>
 </main>
 
 <cant-skip>