[Svelte5] Unrelated state values are compiled into the same template effect when using class and the class:className directives.

[Jibbedi]

Describe the bug

I'm not sure if this is actually a bug or (most likely) this is the expected behavior, but it didn't match my expectation on how this would work so i felt I should report it, in case this is an actual issue :-)

I have an element that uses a function to get a static class string and a function to determine if a dark class should be applied.

<div class={getClass()} class:dark={isDarkColor()}>Hello</div>

I also have an input field which sets an unrelated state and another element where the state gets set.

<input bind:value={bar} />
<div>
   {bar}
</div>

I noticed when typing into the input field that theisDarkColor function is called for every change. The compiler seems to compile the class:dark and the {bar} binding into the same template_effect

The class={getClass()} binding is compiled into a separate effect.

$.template_effect(() => $.set_class(div, getClass()));

$.template_effect(() => {
	$.toggle_class(div, "dark", isDarkColor());
	$.set_text(text, $.get(bar));
});

I feel like this is might be an issue, because the isDarkColor function is invoked without the need to do it. I noticed that it does not seem to matter if the function uses a different state or no state at all, the calls will always be compiled together.

Interestingly the calls will be compiled into different effects, when i remove the function call from the class directive.

So:

<div class="flex" class:dark={isDarkColor()}>Hello</div>

will result in

$.template_effect(() => $.set_text(text, $.get(bar)));

$.template_effect(() => $.toggle_class(div, "dark", isDarkColor()))

which is what i would have expected :-)

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE11PXWuEMBD8K2EpqCC1z6l6lOtD_0PTh2jWI1wukWSVluB_L_EDSwl5mNnZmZ0IgzYYgH9GsPKBwOFtHKEE-hkTCDMaQighuMn3ialD7_VIrbCCDBKTPekZWcOeAknC_KV4PUad9CcvQECRJun3zgZiOrxLf78645IuL1jTsrhKVoEz-GzcLc90YEr6-yXb9skjTd4eyRdGfkLOBmkCJsEi7JlxQ7oaGcL_gN0jGwx-Z_tWXZ3d9lcrPbM-GTTxsMqLZaN4uqqJf2rkxdJ-oDGurpSeV59a23Ei1mmr-CzNhE3spF-qdjNvhV1xSk8QSng4pQeNCngqtnwtv0LNQ9alAQAA

Logs

No response

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 36.88 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.volta/tools/image/node/20.11.1/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.1/bin/npm
    bun: 0.4.0 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 119.1.60.118
    Chrome: 128.0.6613.120
    Chrome Canary: 130.0.6706.0
    Edge: 128.0.2739.67
    Safari: 17.4.1
  npmPackages:
    svelte: ^5.0.0-next.244 => 5.0.0-next.244

Severity

annoyance

[paoloricciuti]

Some UI updated are indeed bundled together because counter-intuitively this leads to more performant code. However i need to investigate this a bit because we should bail out from unifying them on function calls (because those could have side effects) and only do that with normal variable access.

[trueadm]

We should be memoising the isDarkColor() call into a derived like we do in other places.