state_unsafe_mutation when updating state inside outrostart event

[mattjennings]

Describe the bug

When updating state inside of an event handler for the outrostart event on a node, the following error occurs:

Uncaught Svelte error: state_unsafe_mutation
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`

This does not happen if using the onoutrostart callback prop, or other transition events/props

Reproduction

https://svelte.dev/playground/81e7a862e846456d9254886c17d18fbb?version=5.1.9

You'll see the error when toggling out

Logs

No response

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 157.22 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
    pnpm: 8.12.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.92
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.1.2 => 5.1.2

Severity

annoyance

[Ocean-OS]

Svelte usually doesn't recommend using the addEventListener function for DOM elements, it recommends using onevent attributes.
It'd probably be best if Svelte transformed addEventListener calls into event delegation in the compile step (which Svelte uses instead of addEventListener).
This would have to make sure that the event target is a DOM element though, probably using something like this:

//before
function handler(){
    count++;
}
button.addEventListener('click',handler);
//after
function handler(_,count){
    $.set(count, $.get(count)+1);
}
if(button instanceof Node){
    button.__click = [handler, count];
}

[mattjennings]

My use case here is hooking into transition events (which are documented, although not explicitly shown as possible through addEventListener) via an action for the purpose of a library. Otherwise, I'd have to ask the user to forward a number of custom onevent props, which is doable but more cumbersome.

<script>
const { onintrostart, onintroend, onoutrostart, onoutroend } = myApi

const { action } = myApi
</script>

<div {onintrostart} {onintroend} {onoutrostart} {onoutroend} />

vs

<div use:action />

Anyway, given this only happens for outrostart and not other events nor the onoutrostart callback, this seemed like a bug.

[Ocean-OS]

If you use node.onoutrostart instead of addEventListener, it seems to work

[mattjennings]

Ah, I see what you meant earlier now - I had tried them as attributes but they don't seem to be called (the state isn't logged to console in your example)

[trueadm]

You can also use on from svelte/events instead of addEventListener.

[mattjennings]

ah thanks @trueadm, using svelte/events works. i wasn't aware of that or that there was such a difference between them (perhaps worth considering adding as a compiler warning).