Opting for a smaller bundle size by treating dynamic strings as one unit

[carpben]

Describe the solution you'd like
Currently, for dynamic strings in an element, Svelte breaks the string into it's atomic parts (be it a static string or a variable), and treats each part separately. For a textual element (without other embeded elements in it), changing a part of a string in the element doesn't provide much performance value over changing the entire string. Therefor, perhaps it would be better to opt for bundle size, by treating such a string as one unit.

I'll try to demonstrate the idea with the reactive assignment example from the homepage.

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Lets take a look at the create_fragment function in the compiled JS output.

   function create_fragment(ctx) {
	var button, t0, t1, t2, t3_value = ctx.count === 1 ? 'time' : 'times' + "", t3, dispose;

	return {
		c() {
			button = element("button");
			t0 = text("Clicked ");
			t1 = text(ctx.count);
			t2 = space();
			t3 = text(t3_value);
			dispose = listen(button, "click", ctx.handleClick);
		},

		m(target, anchor) {
			insert(target, button, anchor);
			append(button, t0);
			append(button, t1);
			append(button, t2);
			append(button, t3);
		},

		p(changed, ctx) {
			if (changed.count) {
				set_data(t1, ctx.count);
			}

  // ...
}

It creates various variables, and various operations, just to insert one dynamic string. The basic idea is to treat this string as one unit. Here is a draft of what this could look like.

function create_fragment(ctx) {
   	var button, dispose,
	d1 = (ctx)=>`count ${ctx.count} ${ctx.count === 1 ? 'time' : 'times' + ""}`

	return {
		c() {
			button = element("button");
			t0 = text(d1(ctx));
			dispose = listen(button, "click", ctx.handleClick);
		},

		m(target, anchor) {
			insert(target, button, anchor);
			append(button, t0);
		},

		p(changed, ctx) {
			if (changed.count) {
				set_data(t0, d1(ctx));
			}
		},
   //...
}

This reduces the js output of this component by 20% (from 1418 chars to 1144. )

How important is this feature to you?
I'm excited about Svelte, but new to the framework. I don't currently use it in production.

[benmccann]

This is pretty similar to #3898 in a lot of ways though a slightly different solution that could be combined with it. I'd be curious to see some benchmark results to see if this still has value after #3898

[Rich-Harris]

Svelte 5 takes this approach — closing