fix: improve handling of unowned derived signal (#11712)

.changeset/tame-dots-battle.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve handling of unowned derived signal

packages/svelte/src/internal/client/runtime.js

@@ -420,8 +420,8 @@ function remove_reaction(signal, dependency) {
 		}
 	}
 	if (reactions_length === 0 && (dependency.f & UNOWNED) !== 0) {
-		// If the signal is unowned then we need to make sure to change it to dirty.
+		// If the signal is unowned then we need to make sure to change it to maybe dirty.
-		set_signal_status(dependency, DIRTY);
+		set_signal_status(dependency, MAYBE_DIRTY);
 		remove_reactions(/** @type {import('#client').Derived} **/ (dependency), 0);
 	}
 }

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

@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target, logs }) {
+		let [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.deepEqual(logs, ['recalculating']);
+	}
+});

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

@@ -0,0 +1,18 @@
+<script context="module">
+	let visible = $state(true);
+
+	function toggleVisibility() {
+		visible = !visible;
+	}
+
+	let unchangedState = $state("unchanged state");
+	let derived = $derived.by(() => {
+		console.log("recalculating");
+		return unchangedState;
+	});
+</script>
+
+<button onclick={toggleVisibility}>Toggle Visibility</button>
+{#if visible}
+	<p>{derived}</p>
+{/if}