breaking: adjust template string concat strategy

Author: trueadm

.changeset/little-needles-itch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: adjust template string concat strategy

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

@@ -74,8 +74,23 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 		// no text node was created because the expression was empty during SSR
 		const is_text = sequence.length === 1;
 		const id = flush_node(is_text, 'text');
+		const parts = [];
+
+		if (state.analysis.runes && value.type === 'TemplateLiteral') {
+			for (let i = 0; i < value.quasis.length; i++) {
+				const quasi = value.quasis[i];
+				parts.push(b.literal(/** @type {string} */ (quasi.value.cooked)));
+				if (i !== value.quasis.length - 1) {
+					const expression = value.expressions[i];
+					parts.push(expression);
+				}
+			}
+		}
 
-		const update = b.stmt(b.call('$.set_text', id, value));
+		const update =
+			parts.length > 0
+				? b.stmt(b.call('$.set_text_parts', id, ...parts))
+				: b.stmt(b.call('$.set_text', id, value));
 
 		if (has_call && !within_bound_contenteditable) {
 			state.init.push(build_update(update));

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

@@ -48,6 +48,8 @@ export function init_operations() {
 
 	// @ts-expect-error
 	Text.prototype.__t = undefined;
+	// @ts-expect-error
+	Text.prototype.__p = undefined;
 
 	if (DEV) {
 		// @ts-expect-error

packages/svelte/src/internal/client/index.js

@@ -123,7 +123,7 @@ export {
 	update_pre_store,
 	update_store
 } from './reactivity/store.js';
-export { set_text } from './render.js';
+export { set_text, set_text_parts } from './render.js';
 export {
 	get,
 	safe_get,

packages/svelte/src/internal/client/render.js

@@ -9,7 +9,7 @@ import {
 	init_operations
 } from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
-import { push, pop, component_context, active_effect } from './runtime.js';
+import { push, pop, component_context, active_effect, untrack } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
 import {
 	hydrate_next,
@@ -56,6 +56,31 @@ export function set_text(text, value) {
 	}
 }
 
+/**
+ * @param {Element} text
+ * @param {any[]} parts
+ * @returns {void}
+ */
+export function set_text_parts(text, ...parts) {
+	var value = '';
+	// @ts-expect-error
+	var prev_parts = text.__p || [];
+	var changed = false;
+	for (var i = 0; i < parts.length; i++) {
+		var prev = prev_parts[i];
+		var next = parts[i];
+		if (prev !== next) {
+			changed = true;
+		}
+		value += next;
+	}
+	// @ts-expect-error
+	text.__p = parts;
+	if (changed) {
+		set_text(text, value);
+	}
+}
+
 /**
  * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
  * Transitions will play during the initial render unless the `intro` option is set to `false`.

packages/svelte/tests/migrate/samples/self-closing-elements/output.svelte

@@ -2,4 +2,4 @@
 <div title="preserve"></div>
 <input type="text" />
 <hr />
-<f:table></f:table>
+<f:table></f:table>

packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte

@@ -18,4 +18,4 @@
 </script>
 
 <button onclick={() => (state.data.list.push(1))}>update</button>
-{state.data.list}
+{state.data.list.toString()}

packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte

@@ -26,4 +26,4 @@
 </script>
 
 <p>props: {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7}</p>
-<p>log: {log}</p>
+<p>log: {log.toString()}</p>

packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte

@@ -26,4 +26,4 @@
 </script>
 
 <p>props: {p0} {p1} {p2} {p3} {p4} {p5} {p6} {p7}</p>
-<p>log: {log}</p>
+<p>log: {log.toString()}</p>

packages/svelte/tests/runtime-runes/samples/proxy-to-primitive/_config.js

@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>add</button><ul><li>1,2,3</li><li>1,2,3</li><li>text
+		1,2,3</li><li>1,2,3</li><li>1,2,3</li><li title="1,2,3"></li><li title="1,2,3"></li><li><input readonly="" type="text"></li><li><input readonly="" type="text"></li></ul>
+	`,
+
+	ssrHtml: `
+		<button>add</button><ul><li>1,2,3</li><li>1,2,3</li><li>text
+		1,2,3</li><li>1,2,3</li><li>1,2,3</li><li title="1,2,3"></li><li title="1,2,3"></li><li><input readonly="" type="text" value="1,2,3"></li><li><input readonly="" type="text" value="1,2,3"></li></ul>
+	`,
+
+	test({ assert, target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button><ul><li>1,2,3</li><li>1,2,3,4</li><li>text
+				1,2,3</li><li>1,2,3</li><li>1,2,3,4</li><li title="1,2,3"></li><li title="1,2,3,4"></li><li><input readonly="" type="text"></li><li><input readonly="" type="text"></li></ul>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/proxy-to-primitive/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let array = $state([1,2,3]);
+
+	function addToArray() {
+		array.push(array.length+1);
+	}
+</script>
+
+<button onclick={addToArray}>add</button>
+
+<ul>
+	<li>{@html array}</li>
+	<li>{@html array?.toString()}</li>
+	<li>text {array}</li>
+	<li>{array}</li>
+	<li>{array?.toString()}</li>
+	<li title={array}></li>
+	<li title={array?.toString()}></li>
+	<li><input type="text" value={array} readonly/> </li>
+	<li><input type="text" value={array?.toString()} readonly/> </li>
+</ul>

packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js

@@ -29,6 +29,6 @@ export default function Bind_component_snippet($$anchor) {
 
 	var text_1 = $.sibling(node);
 
-	$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ""}`));
+	$.template_effect(() => $.set_text_parts(text_1, " value: ", $.get(value) ?? "", ""));
 	$.append($$anchor, fragment);
 }

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -15,4 +15,4 @@ export default function Each_string_template($$anchor) {
 	});
 
 	$.append($$anchor, fragment);
-}
+}

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -19,7 +19,7 @@ export default function Function_prop_no_getter($$anchor) {
 
 			var text = $.text();
 
-			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ""}`));
+			$.template_effect(() => $.set_text_parts(text, "clicks: ", $.get(count) ?? "", ""));
 			$.append($$anchor, text);
 		},
 		$$slots: { default: true }

packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js

@@ -20,7 +20,7 @@ export default function Text_nodes_deriveds($$anchor) {
 	const stringified_text_1 = $.derived(() => text2() ?? "");
 	var text = $.child(p);
 
-	$.template_effect(() => $.set_text(text, `${$.get(stringified_text)}${$.get(stringified_text_1)}`));
+	$.template_effect(() => $.set_text_parts(text, "", $.get(stringified_text), "", $.get(stringified_text_1), ""));
 	$.reset(p);
 	$.append($$anchor, p);
 }