Deep transition using svelte:self is trigerring despite condition not changing

[TGlide]

Describe the bug

I have a Tree component that recursively calls itself. On the wrapper that contains <svelte:self />, I have a slide transition. When I click to close the parent, I expect only the parent to transition out. But the inner child triggers its in transition.

Reproduction

• Clone https://github.com/melt-ui/melt-ui
• Checkout branch repro/transition-tree
• Install deps and execute pnpm run dev
• Go to http://localhost:5173/docs/builders/tree
• Click on the lib folder in the example
• Check console logs

Logs

lib outro started tree.svelte:63:33
tree intro started tree.svelte:62:33
lib outro ended

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa) (This is false, as I'm using WSL on Windows 10 x64)
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400F @ 2.60GHz
    Memory: 9.05 GB / 15.57 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 8.6.7 - ~/.nvm/versions/node/v20.4.0/bin/pnpm
  npmPackages:
    svelte: ^4.0.0 => 4.0.0

Severity

annoyance

[robertadamsonsmith]

Looking at a simplified version of your code, I can see the same odd behaviour. It can occur without using svelte:self, but it is easier to set up this scenario using it. The conditions for this to occur seems to be:

• a parent component starts an outro
• a child component has a conditional in it, that displays an element with a transition, dependant upon the value of a store
• the store is updated at the same time the parent component starts an outro (even if the value of the store shouldn't have any effect on the truthiness of the child's conditional)
• the child component now starts playing its intro animation

I put together a simpler REPL that reproduces the issue:
https://svelte.dev/repl/490e14d45faa4a89a2a2befaa1db3dbe?version=4.2.0

It is easiest to see if you click on button 1 to show hide parts of the tree.

It is as if when the parent is removed (causing it's outro to trigger), it is given that the children must also be being removed (but not outroing, since their transition is local), but they receive a reactive update on an #if statement which indicates that they aren't being removed, and so it is assumed that the #if condition has just changed (even though it hasn't), and so it starts the intro.

[robertadamsonsmith]

A workaround is to not let the child component have direct access to the store. If the list of open ids is sent as a prop (rather than as a store), when a tree node is removed, because the children won't be sent prop updates they will have nothing to react to.

Another workaround, which allows a store to be used still, is to rearrange the component such that the conditional that could trigger an element transitioning is made to be not directly dependent on the store update, by using a separate simple variable as a sort of reactivity buffer.

Example here:

https://svelte.dev/repl/be149cf0f34547a8be9e3716b8c014b1?version=4.2.0

I've come across this issue before in another form, so I'll make a more minimal test case and then submit that as part of another issue linked to this one.