another optimisation

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

@@ -27,7 +27,12 @@ import {
 	build_style_directives
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
-import { build_render_statement, build_update, build_update_assignment } from './shared/utils.js';
+import {
+	build_render_statement,
+	build_template_literal,
+	build_update,
+	build_update_assignment
+} from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
 
 /**
@@ -320,28 +325,43 @@ export function RegularElement(node, context) {
 		context.visit(node, child_state);
 	}
 
-	/** @type {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');
+	// special case — if an element that only contains text, we don't need
+	// to descend into it if the text is non-reactive
+	const text_content =
+		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
+		trimmed.some((node) => node.type === 'ExpressionTag') &&
+		build_template_literal(trimmed, context.visit, child_state);
 
-	// 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;
-		child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
-		arg = b.member(arg, b.id('content'));
-	}
+	if (text_content && !text_content.has_state) {
+		child_state.init.push(
+			b.stmt(
+				b.assignment('=', b.member(context.state.node, b.id('textContent')), text_content.value)
+			)
+		);
+	} else {
+		/** @type {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;
+			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
+			arg = b.member(arg, b.id('content'));
+		}
 
-	process_children(trimmed, () => b.call('$.child', arg), true, {
-		...context,
-		state: child_state
-	});
+		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 (needs_reset) {
+			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+		}
 	}
 
 	if (has_declaration) {

packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js

@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<p> </p> <p> </p> <!>`, 1);
+var root = $.template(`<p></p> <p></p> <!>`, 1);
 
 export default function Purity($$anchor) {
 	let min = 0;
@@ -10,16 +10,12 @@ export default function Purity($$anchor) {
 	let value = 'hello';
 	var fragment = root();
 	var p = $.first_child(fragment);
-	var text = $.child(p);
 
-	text.nodeValue = `${Math.max(min, Math.min(max, number)) ?? ""}`;
-	$.reset(p);
+	p.textContent = `${Math.max(min, Math.min(max, number)) ?? ""}`;
 
 	var p_1 = $.sibling($.sibling(p, true));
-	var text_1 = $.child(p_1);
 
-	text_1.nodeValue = `${location.href ?? ""}`;
-	$.reset(p_1);
+	p_1.textContent = `${location.href ?? ""}`;
 
 	var node = $.sibling($.sibling(p_1, true));
 

playgrounds/sandbox/run.js

@@ -57,7 +57,7 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		}
 
 		const compiled = compile(source, {
-			dev: true,
+			dev: false,
 			filename: input,
 			generate,
 			runes: argv.values.runes