fix: top-most derived in a chain of deriveds marked as MAYBE_DIRTY when executed from a snippet $.fallback

.changeset/fresh-walls-wave.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+Fix top-most derived in a chain of deriveds marked as MAYBE_DIRTY when executed from a snippet $.fallback

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

@@ -183,8 +183,14 @@ export function update_derived(derived) {
 	// cleanup function, or it will cache a stale value
 	if (is_destroying_effect) return;
 
-	var status =
-		(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
+	// only mark unowned deriveds as MAYBE_DIRTY if they have dependencies, otherwise they
+	// must be clean regardless of the value of the skip_reaction flag value set for the previous_reaction
+	// because not marking a regular derived as CLEAN will cause incosistent state when chaining
+	// multiple derivides in which the top-most derived is marked MAYBE_DIRTY and all the ones that depends
+	// on it are instead marked as CLEAN causing issues with properly updating the UI when the source state
+	// is updated because the MAYBE_DIRTY derived is skipped and as a consequence also
+	// the other deriveds (aka its reactions) are skipped as well.
+	var status = (derived.f & UNOWNED) !== 0 && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
 
 	set_signal_status(derived, status);
 }

packages/svelte/tests/runtime-runes/samples/devides-chain-with-snippet-fallback-trigger/_config.js

@@ -0,0 +1,58 @@
+import { test } from '../../test';
+import { flushSync, tick } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button id="step1">step1</button>
+			<button id="step2">step2</button>
+			<button id="step3">step3</button>
+			<p>0</p>
+		`
+		);
+
+		const step1 = /** @type {HTMLButtonElement | null} */ (target.querySelector('#step1'));
+		const step2 = /** @type {HTMLButtonElement | null} */ (target.querySelector('#step2'));
+		const step3 = /** @type {HTMLButtonElement | null} */ (target.querySelector('#step3'));
+
+		// Step 1: hide and reset data
+		step1?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button id="step1">step1</button>
+			<button id="step2">step2</button>
+			<button id="step3">step3</button>
+		`
+		);
+
+		// Step 2: show again
+		step2?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button id="step1">step1</button>
+			<button id="step2">step2</button>
+			<button id="step3">step3</button>
+			<p>0</p>
+		`
+		);
+
+		// Step 3: update override - this should show 2, not 0 (the bug)
+		step3?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button id="step1">step1</button>
+			<button id="step2">step2</button>
+			<button id="step3">step3</button>
+			<p>2</p>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/devides-chain-with-snippet-fallback-trigger/main.svelte

@@ -0,0 +1,33 @@
+<script>
+	let show = $state(true);
+	let data = $state({ value: 0 });
+	let override = $state(null);
+
+	let derived1 = $derived(override ?? data.value);
+	let derived2 = $derived(derived1);
+
+	function step1() {
+		show = false;
+		data = { value: 0 };
+	}
+
+	function step2() {
+		show = true;
+	}
+
+	function step3() {
+		override = 1;
+		override = 2;
+	}
+</script>
+
+<button id="step1" onclick={step1}>step1</button>
+<button id="step2" onclick={step2}>step2</button>
+<button id="step3" onclick={step3}>step3</button>
+
+{#snippet dummy(value = 0)}{/snippet}
+
+{#if show}
+	<p>{derived2}</p>
+	{@render dummy(derived2 ? 0 : 0)}
+{/if}