fix: ensure reactions of non-updating deriveds have their version synced

.changeset/rich-turtles-learn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure derived reactions have their version kept in sync with the reactive graph

packages/svelte/src/internal/client/reactivity/deriveds.js

@@ -1,4 +1,4 @@
-/** @import { Derived, Effect } from '#client' */
+/** @import { Derived, Effect, Value } from '#client' */
 import { DEV } from 'esm-env';
 import { CLEAN, DERIVED, DIRTY, EFFECT_HAS_DERIVED, MAYBE_DIRTY, UNOWNED } from '../constants.js';
 import {
@@ -151,6 +151,25 @@ function execute_derived(derived) {
 	return value;
 }
 
+/**
+ * @param {Value} value
+ */
+function sync_reaction_versions(value) {
+	var reactions = value.reactions;
+
+	if (reactions !== null) {
+		for (var i = 0; i < reactions.length; i++) {
+			var reaction = reactions[i];
+			if ((value.f & UNOWNED) === 0 && value.wv > reaction.wv) {
+				reaction.wv = value.wv;
+			}
+			if ((reaction.f & DERIVED) !== 0) {
+				sync_reaction_versions(/** @type {Derived} */ (reaction));
+			}
+		}
+	}
+}
+
 /**
  * @param {Derived} derived
  * @returns {void}
@@ -165,5 +184,7 @@ export function update_derived(derived) {
 	if (!derived.equals(value)) {
 		derived.v = value;
 		derived.wv = increment_write_version();
+	} else {
+		sync_reaction_versions(derived);
 	}
 }

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

@@ -206,7 +206,7 @@ export function check_dirtiness(reaction) {
 					update_derived(/** @type {Derived} */ (dependency));
 				}
 
-				if (dependency.wv > reaction.wv) {
+				if (dependency.wv > reaction.wv || (reaction.f & DIRTY) !== 0) {
 					return true;
 				}
 			}

packages/svelte/tests/runtime-runes/samples/derived-version-sync/_config.js

@@ -0,0 +1,28 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		let [btn1] = target.querySelectorAll('button');
+
+		btn1?.click();
+		flushSync();
+
+		btn1?.click();
+		flushSync();
+
+		logs.length = 0;
+
+		btn1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['a', { value: 1 }]);
+
+		logs.length = 0;
+
+		btn1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['a', { value: 2 }, 'b', { a: 2 }, 'c', { b: 2 }]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/derived-version-sync/main.svelte

@@ -0,0 +1,28 @@
+<script>
+	let trigger = $state(false)
+	let index = 0;
+
+	let a = $derived.by(() => {
+		trigger;
+		const value = [1,2,1][index++%3];
+		console.log("a", { value });
+		return value
+	})
+
+	let b = $derived.by(() => {
+		console.log("b", { a });
+		return a;
+	});
+
+	let c = $derived.by(() => {
+		console.log("c", { b });
+		return undefined;
+	});
+
+	$effect(() => {
+		c;
+		console.log('effect')
+	});
+</script>
+
+<button onclick={() => trigger = !trigger}>invalidate</button>

packages/svelte/tests/runtime-runes/samples/derived-write-read-write-read/main.svelte

@@ -10,4 +10,4 @@
 	// resulting in the same value should not prevent pending render effects from updating
 	z;
 	y = 0;
-}}>{z}</button>
+}}>{z}</button>