fix: make $effect.tracking consistent between in and out transitions

Author: paoloricciuti

.changeset/rare-apes-dream.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: make `$effect.tracking` consistent between in and out transitions

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);
 	}
 }
 

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]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/transition-effect-tracking/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	let visible = $state(0);
+	
+	function in_and_out() {
+		console.log($effect.tracking()); 
+	}
+</script>
+
+<button onclick={() => visible = !visible}></button>
+
+{#if visible}
+	<div transition:in_and_out></div>
+{/if}