fix: don't eagerly execute deriveds on resume (#16150)

* Add failing test

* Add {@const} test case

* Fix the bug

* Add yet another test case

* Better fix

* Changeset

* simplify

* this appears to be unnecessary

---------

Co-authored-by: Rich Harris <[email protected]>

Author: rChaoz

.changeset/poor-pumpkins-exercise.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: don't eagerly execute deriveds on resume

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

@@ -329,6 +329,7 @@ export function render_effect(fn) {
 /**
  * @param {(...expressions: any) => void | (() => void)} fn
  * @param {Array<() => any>} thunks
+ * @param {<T>(fn: () => T) => Derived<T>} d
  * @returns {Effect}
  */
 export function template_effect(fn, thunks = [], d = derived) {
@@ -598,15 +599,11 @@ function resume_children(effect, local) {
 	if ((effect.f & INERT) === 0) return;
 	effect.f ^= INERT;
 
-	// Ensure the effect is marked as clean again so that any dirty child
-	// effects can schedule themselves for execution
-	if ((effect.f & CLEAN) === 0) {
-		effect.f ^= CLEAN;
-	}
-
 	// If a dependency of this effect changed while it was paused,
-	// schedule the effect to update
-	if (check_dirtiness(effect)) {
+	// schedule the effect to update. we don't use `check_dirtiness`
+	// here because we don't want to eagerly recompute a derived like
+	// `{#if foo}{foo.bar()}{/if}` if `foo` is now `undefined
+	if ((effect.f & CLEAN) !== 0) {
 		set_signal_status(effect, DIRTY);
 		schedule_effect(effect);
 	}

packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { value } = $props()
+
+	const text = $derived(value.toString())
+
+	$effect(() => console.log(text))
+</script>

packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js

@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const [div] = target.querySelectorAll('div');
+
+		flushSync(() => btn1?.click());
+		assert.htmlEqual(div.innerHTML, '123 123');
+		assert.equal(div.inert, true);
+
+		flushSync(() => btn2?.click());
+		assert.htmlEqual(div.innerHTML, '');
+		assert.deepEqual(logs, ['123']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	import Component from './Component.svelte';
+
+	let outer = $state(true);
+	let inner = $state(123);
+
+	function outro() {
+		return { duration: 100 };
+	}
+</script>
+
+{#if outer}
+	<div out:outro>
+		{#if inner}
+			{@const text = inner.toString()}
+			{text} {inner.toString()}
+			<Component value={inner} />
+		{/if}
+	</div>
+{/if}
+
+<button onclick={() => { outer = false; inner = undefined; }}>Set both to falsy</button>
+<button onclick={() => { outer = true }}>Set outer to truthy</button>