diff --git a/.changeset/rare-apes-dream.md b/.changeset/rare-apes-dream.md new file mode 100644 index 0000000000..04e076098f --- /dev/null +++ b/.changeset/rare-apes-dream.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: make `$effect.tracking` consistent between in and out transitions diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js index 2050c142c5..14b5f9e6ff 100644 --- a/packages/svelte/src/internal/client/reactivity/effects.js +++ b/packages/svelte/src/internal/client/reactivity/effects.js @@ -15,7 +15,8 @@ import { set_is_destroying_effect, set_is_flushing_effect, set_signal_status, - untrack + untrack, + set_active_effect } from '../runtime.js'; import { DIRTY, @@ -518,14 +519,23 @@ export function pause_effect(effect, callback) { * @param {() => void} fn */ export function run_out_transitions(transitions, fn) { - var remaining = transitions.length; - if (remaining > 0) { - var check = () => --remaining || fn(); - for (var transition of transitions) { - transition.out(check); + let prev_active_effect = active_effect; + let prev_active_reaction = active_reaction; + set_active_reaction(null); + set_active_effect(null); + try { + var remaining = transitions.length; + if (remaining > 0) { + var check = () => --remaining || fn(); + for (var transition of transitions) { + transition.out(check); + } + } else { + fn(); } - } else { - fn(); + } finally { + set_active_effect(prev_active_effect); + set_active_reaction(prev_active_reaction); } } diff --git a/packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/_config.js new file mode 100644 index 0000000000..23d4e11276 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/_config.js @@ -0,0 +1,16 @@ +import { flushSync } from '../../../../src/index-client.js'; +import { test } from '../../test'; + +export default test({ + test({ assert, target, logs }) { + const btn = target.querySelector('button'); + flushSync(() => { + btn?.click(); + }); + assert.deepEqual(logs, [false]); + flushSync(() => { + btn?.click(); + }); + assert.deepEqual(logs, [false, false]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/main.svelte new file mode 100644 index 0000000000..01e66421d6 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/main.svelte @@ -0,0 +1,13 @@ + + + + +{#if visible} +
+{/if} \ No newline at end of file