Template effects are combined into one for different signals

[leonidaz]

Describe the bug

Not necessarily a bug but noticed that signals used in the template code get combined into one template effect vs separate ones. If a function / "classic" signal is used then a separate template effect is created.

Which means that every variable in the template block subscribes to the same effect and if any of the signals change, the whole template effect is rerun.

Inside the template effect, the comparison for each text node should typically be very fast but why run all of them if only one of them changes?

Ideally, it would seem that only same signals / functions get combined into the template effect.

Reproduction

Repro

E.g. for signals a, b, c

<script>
	let a = $state(2);
	let b = $state(3);

	let c = $state({ count: 1 });

	let _d = $state(1);
	let d = () => _d;
	d.set = (v) => _d = v;
</script>
<h3>a {a}</h3>
<button onclick={() => a++}>Increment {a}</button>

<h3>b {b}</h3>
<button onclick={() => b++}>Increment {b.count}</button>

<h3>c {c.count}</h3>
<button onclick={() => c.count++}>Increment {c.count}</button>

produces one template effect
JS Output:

	$.template_effect(() => {
		$.set_text(text, `a ${$.get(a) ?? ""}`);
		$.set_text(text_1, `Increment ${$.get(a) ?? ""}`);
		$.set_text(text_2, `b ${$.get(b) ?? ""}`);
		$.set_text(text_3, `Increment ${$.get(b).count ?? ""}`);
		$.set_text(text_4, `c ${c.count ?? ""}`);
		$.set_text(text_5, `Increment ${c.count ?? ""}`);
	});

Whereas if using a function or a "classic" signal, a separate template effect is always created. In fact for each usage of the function (which I think makes sense as it's not known what the function is doing, e.g. changing underlying data).

<h3>d {d()}</h3>
<button onclick={() => d.set(d() + 1)}>Increment {d()}</button>

JS Output:

$.template_effect(() => $.set_text(text_6, `d ${d() ?? ""}`));

$.template_effect(() => $.set_text(text_7, `Increment ${d() ?? ""}`));

Logs

No response

System Info

Playground

Severity

annoyance

[brunnerh]

Should be a duplicate of:

• svelte 5 bug: class getters rerun when non-dependent state updates #11218

(See in particular this and following comments for explanations.)

[leonidaz]

Should be a duplicate of:

• svelte 5 bug: class getters rerun when non-dependent state updates #11218

(See in particular this and following comments for explanations.)

gotcha.... If it's much more efficient to batch updates in one effect given they don't produce side effects, it'd be cool to be able to mark functions as pure in Svelte somehow especially if using classic signals. Looks like it's better to stick to objects for signals.

[paoloricciuti]

Yup as @brunnerh mentioned this is expected, but thanks for keeping an eye on the output 😁