Allow reactivity in outroing elements

[7nik]

Describe the problem

During outro, the reactivity in the transitioning elements stops. I guess it is to prevent errors in a case like the following

{#if user}
  <h1 transition:fly>{user.name}</h1>
{/if

But in some other cases it is desired to have working reactivity.

Describe the proposed solution

Allow to opt out of this guarding.

Importance

would make my life easier

[rChaoz]

Maybe somehow related, bug where this would happen #16148

[Theo-Steiner]

slightly cursed, but I wrote a composable that let's you work around this:

// useDelayedUnmount.svelte.ts
export const useDelayedUnmount = (
  mountCondition: MaybeGetter<boolean>,
): {
  shouldMount: boolean;
  propagateMountConditionChange: Attachment;
} => {
  const currentMountCondition = $derived(getValue(mountCondition));
  let shouldMount = $state(getValue(mountCondition));
  $effect(() => {
    if (currentMountCondition) {
      shouldMount = true;
    }
  });
  return {
    get shouldMount() {
      return shouldMount;
    },
    propagateMountConditionChange: () => {
      shouldMount = currentMountCondition;
    },
  };
};

then use it like

<script lang="ts">
  import { slide } from 'svelte/transition'
  import { useDelayedUnmount } from './useDelayedUnmount'
  const { someCondition }: { someCondition: boolean } = $props()
  const delayedUnmount = useDelayedUnmount(() => someCondition)
</script>
{#if delayedUnmount.shouldMount}
  <div {@attach delayedUnmount.propagateMountConditionChange transition:slide>
    {someCondition}
  </div>
{/if}