fix: reset dependency read versions after reaction execution (#14964)

* fix: reset dependency read versions after reaction execution

* fix: reset dependency read versions after reaction execution

* fix: reset dependency read versions after reaction execution

* fix: reset dependency read versions after reaction execution

* fix: reset dependency read versions after reaction execution

* chore: add test

* changeset

---------

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

Author: 3 people

.changeset/fifty-chefs-invent.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reset dependency read versions after reaction execution

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

@@ -434,6 +434,14 @@ export function update_reaction(reaction) {
 			deps.length = skipped_deps;
 		}
 
+		// If we are returning to an previous reaction then
+		// we need to increment the read version to ensure that
+		// any dependencies in this reaction aren't marked with
+		// the same version
+		if (previous_reaction !== null) {
+			read_version++;
+		}
+
 		return result;
 	} finally {
 		new_deps = previous_deps;

packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/Component.svelte

@@ -0,0 +1,7 @@
+<script>
+	const { label = 0, size = 0 } = $props();
+
+	const title = $derived(size.toString());
+</script>
+
+<p {title}>{label}</p>

packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/_config.js

@@ -0,0 +1,19 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button></button><p title="0">0</p>`,
+
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '1');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '2');
+	}
+});

packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Component from "./Component.svelte";	
+	
+	let props = $state({
+		label: 0,
+		size: 0,
+	});
+	
+	let filteredProps = $state();
+	
+	$effect.pre(() => {
+		filteredProps = $state.snapshot(props);
+	});
+</script>
+
+<button onclick={()=>props.label++}></button>
+
+<Component {...filteredProps} />