fix: improve unowned derived signal behaviour (#11408)

.changeset/wise-ties-clap.md

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

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

@@ -160,14 +160,17 @@ export function batch_inspect(target, prop, receiver) {
  */
 export function check_dirtiness(reaction) {
 	var flags = reaction.f;
+	var is_dirty = (flags & DIRTY) !== 0;
+	var is_unowned = (flags & UNOWNED) !== 0;
 
-	if ((flags & DIRTY) !== 0) {
+	// If we are unowned, we still need to ensure that we update our version to that
+	// of our dependencies.
+	if (is_dirty && !is_unowned) {
 		return true;
 	}
 
-	if ((flags & MAYBE_DIRTY) !== 0) {
+	if ((flags & MAYBE_DIRTY) !== 0 || (is_dirty && is_unowned)) {
 		var dependencies = reaction.deps;
-		var is_unowned = (flags & UNOWNED) !== 0;
 
 		if (dependencies !== null) {
 			var length = dependencies.length;
@@ -175,7 +178,7 @@ export function check_dirtiness(reaction) {
 			for (var i = 0; i < length; i++) {
 				var dependency = dependencies[i];
 
-				if (check_dirtiness(/** @type {import('#client').Derived} */ (dependency))) {
+				if (!is_dirty && check_dirtiness(/** @type {import('#client').Derived} */ (dependency))) {
 					update_derived(/** @type {import('#client').Derived} **/ (dependency), true);
 
 					// `signal` might now be dirty, as a result of calling `update_derived`
@@ -217,7 +220,7 @@ export function check_dirtiness(reaction) {
 		}
 	}
 
-	return false;
+	return is_dirty;
 }
 
 /**

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

@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		let [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.deepEqual(logs, ['computing', 'a', 'a', 'computing', 'bb', 'bb']);
+	}
+});

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

@@ -0,0 +1,21 @@
+<script>
+	function run(){
+		let cond = $state(true);
+		let a = $state("a");
+		let b = $state("b");
+		let c = $derived.by(() => {
+			console.log('computing')
+			return cond ? a : b
+		});
+
+		console.log(c);
+		b = "bb";
+		console.log(c)
+		cond = false;
+		console.log(c)
+		a = "aaa";
+		console.log(c)
+	}
+</script>
+
+<button onclick={run}>RUN THE THING</button>