Add tests for derived old values in teardown functions

packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js

@@ -0,0 +1,39 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs, target }) {
+		/** @type {HTMLButtonElement | null} */
+		const increment_btn = target.querySelector('#increment');
+		/** @type {HTMLButtonElement | null} */
+		const overwrite_btn = target.querySelector('#overwrite');
+
+		// Initial state: count=1, derived_value=1
+
+		// Click to increment count: count=2, derived_value=4
+		flushSync(() => {
+			increment_btn?.click();
+		});
+
+		// Click to increment count: count=3, derived_value=9
+		flushSync(() => {
+			increment_btn?.click();
+		});
+
+		// Click to overwrite derived_value: count=3, derived_value=7
+		flushSync(() => {
+			overwrite_btn?.click();
+		});
+
+		// Should log old value during cleanup (4) and new value during setup (9)
+		assert.deepEqual(logs, [
+			'$effect: 1',
+			'$effect teardown: 1',
+			'$effect: 4',
+			'$effect teardown: 4',
+			'$effect: 9',
+			'$effect teardown: 9',
+			'$effect: 7'
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	let count = $state(1);
+	let derived_value = $derived(count * count);
+
+	$effect(() => {
+		console.log(`$effect: ${derived_value}`);
+		return () => {
+			console.log(`$effect teardown: ${derived_value}`);
+		};
+	});
+</script>
+
+<button id="increment" onclick={() => count++}>Increment s</button>
+<button id="overwrite" onclick={() => (derived_value = 7)}>Overwrite derived_value</button>
+
+<p>count: {count}</p>
+<p>derived_value: {derived_value}</p>