fix: ensure effect_tracking correctly handles tracking reactions (#14005

)

* fix: ensure effect_tracking correctly handles tracking reactions

* fix: ensure effect_tracking correctly handles tracking reactions

.changeset/clean-badgers-battle.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure effect_tracking correctly handles tracking reactions

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,
+	skip_reaction
 } from '../runtime.js';
 import {
 	DIRTY,
@@ -167,7 +168,9 @@ export function effect_tracking() {
 		return false;
 	}
 
-	return (active_reaction.f & UNOWNED) === 0;
+	// If it's skipped, that's because we're inside an unowned
+	// that is not being tracked by another reaction
+	return !skip_reaction;
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/derived-unowned-10/_config.js

@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		let btn1 = target.querySelector('button');
+
+		btn1?.click();
+		flushSync();
+
+		btn1?.click();
+		flushSync();
+
+		btn1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['light', 'dark', 'light']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/derived-unowned-10/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { store, themeState } from './theme.svelte.js';
+
+	let i = 0;
+
+	const increment = () => {
+		store.update(() => ({ theme: ++i % 2 == 0 ? 'dark' : 'light' }));
+	}
+</script>
+
+<button onclick={increment}>+</button>
+
+{themeState.value.theme}

packages/svelte/tests/runtime-runes/samples/derived-unowned-10/theme.svelte.js

@@ -0,0 +1,18 @@
+import { fromStore, writable } from 'svelte/store';
+
+export const store = writable({ theme: 'dark' });
+
+class ThemeState {
+	#storeState = fromStore(store);
+	value = $derived(this.#storeState.current);
+
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				console.log(this.value.theme);
+			});
+		});
+	}
+}
+
+export const themeState = new ThemeState();