Svelte 5: Function calls in markup not being memoized when located in adjacent text nodes

[aradalvand]

Describe the bug

See this REPL.

A few months ago an important change was made to Svelte 5's reactivity system, which that every function call in the markup would be memoized and would yield separate render effects, so as to avoid needless re-triggering of the function, since the computation could potentially be expensive. This was 100% the right decision; and this behavior is still in effect today (no pun intended).

For example, in the REPL above, the JS output shows two render effects; now, if you remove the printFoo(...) and printBar(...) invocations, you'll see that the two render effects will be combined into one, as expected (see example).

However, if you bring back printFoo(...) and printBar(...), and then try removing the <br/> between the two text nodes, the render effects will now be combined into one as well, even though function invocations should yield separate render effects (see example).

This is likely because the compiler tries to optimize the output by combining adjacent text nodes into the same render effects, but the "function call => separate render effect" rule should take precedence over that optimization. I think this was subtly overlooked.

Reproduction

The REPL linked above -> then remove the <br/>.

Logs

No response

System Info

-

Severity

blocking an upgrade

[trueadm]

This is a tricky one. The reason why this is the case is because printFoo(...) and printBar(...) are being applied to the same DOM node – we'd combine them together, regardless of if they are a function call or not. When you add a <br> then you're making them apply to separate DOM nodes.

However, this doesn't seem right so let me look into how we can better treat this whilst keeping the heuristic of being a single text node (which is a fundamental design that we can't change without spending a long time refactoring SSR and hydration).