fix: better interop of $state with actions/$: statements

Ensure update methods of actions and reactive statements work with fine-grained `$state` by deep-reading them. This is necessary because mutations to `$state` objects don't notify listeners to only the object as a whole, it only notifies the listeners of the property that changed.
fixes #10460
fixes simeydotme/svelte-range-slider-pips#130

Author: dummdidumm

.changeset/light-days-clean.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure update methods of actions and reactive statements work with fine-grained `$state`

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-legacy.js

@@ -167,8 +167,10 @@ export const javascript_visitors_legacy = {
 			const name = binding.node.name;
 			let serialized = serialize_get_binding(b.id(name), state);
 
-			if (name === '$$props' || name === '$$restProps') {
-				serialized = b.call('$.access_props', serialized);
+			// If the binding is a prop, we need to deep read it because it could be fine-grained $state
+			// from a runes-component, where mutations don't trigger an update on the prop as a whole.
+			if (name === '$$props' || name === '$$restProps' || binding.kind === 'prop') {
+				serialized = b.call('$.deep_read', serialized);
 			}
 
 			sequence.push(serialized);

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

@@ -49,7 +49,8 @@ import {
 	managed_effect,
 	push,
 	current_component_context,
-	pop
+	pop,
+	deep_read
 } from './runtime.js';
 import {
 	current_hydration_fragment,
@@ -2312,16 +2313,24 @@ export function action(dom, action, value_fn) {
 	effect(() => {
 		if (value_fn) {
 			const value = value_fn();
+			let needs_deep_read = false;
 			untrack(() => {
 				if (payload === undefined) {
 					payload = action(dom, value) || {};
 				} else {
 					const update = payload.update;
 					if (typeof update === 'function') {
+						needs_deep_read = true;
 						update(value);
 					}
 				}
 			});
+			// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.
+			// This works in legacy mode because of mutable_source being updated as a whole, but when using $state
+			// together with actions and mutation, it wouldn't notice the change without a deep read.
+			if (needs_deep_read) {
+				deep_read(value);
+			}
 		} else {
 			untrack(() => (payload = action(dom)));
 		}
@@ -3048,8 +3057,16 @@ export function unmount(component) {
  */
 export function access_props(props) {
 	for (const prop in props) {
-		// eslint-disable-next-line no-unused-expressions
-		props[prop];
+		deep_read(props[prop]);
+	}
+}
+
+/**
+ * @param {any[]} values
+ */
+export function deep_read_all(...values) {
+	for (const value of values) {
+		deep_read(value);
 	}
 }
 

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

@@ -1985,11 +1985,13 @@ export function init() {
 }
 
 /**
+ * Deeply traverse an object and read all its properties
+ * so that they're all reactive in case this is `$state`
  * @param {any} value
  * @param {Set<any>} visited
  * @returns {void}
  */
-function deep_read(value, visited = new Set()) {
+export function deep_read(value, visited = new Set()) {
 	if (typeof value === 'object' && value !== null && !visited.has(value)) {
 		visited.add(value);
 		for (let key in value) {

packages/svelte/src/internal/index.js

@@ -38,7 +38,8 @@ export {
 	inspect,
 	unwrap,
 	freeze,
-	init
+	init,
+	deep_read
 } from './client/runtime.js';
 export * from './client/each.js';
 export * from './client/render.js';

packages/svelte/tests/runtime-runes/samples/action-state-arg/_config.js

@@ -0,0 +1,24 @@
+import { test } from '../../test';
+import { tick } from 'svelte';
+
+export default test({
+	html: `<button>reassign</button><button>mutate</button><div>0</div>`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>reassign</button><button>mutate</button><div>1</div>`
+		);
+
+		btn2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>reassign</button><button>mutate</button><div>2</div>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/action-state-arg/main.svelte

@@ -0,0 +1,16 @@
+<script>
+    let foo = $state({ count: 0 });
+    let count = $state(0);
+
+    function action() {
+        return {
+            update(foo) {
+                count = foo.count;
+            }
+        }
+    }
+</script>
+
+<button onclick={() => foo = {...foo, count: foo.count + 1 }}>reassign</button>
+<button onclick={() => foo.count++}>mutate</button>
+<div use:action={foo}>{count}</div>

packages/svelte/tests/runtime-runes/samples/fine-grained-prop-reactive-statement/_config.js

@@ -0,0 +1,24 @@
+import { test } from '../../test';
+import { tick } from 'svelte';
+
+export default test({
+	html: `<button>reassign</button><button>mutate</button><p>0 / 0</p>`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>reassign</button><button>mutate</button><p>1 / 1</p>`
+		);
+
+		btn2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>reassign</button><button>mutate</button><p>2 / 2</p>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/fine-grained-prop-reactive-statement/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Old from './old.svelte';
+
+	let prop = $state({ count: 0 });
+</script>
+
+<button onclick={() => prop = {...prop, count: prop.count + 1 }}>reassign</button>
+<button onclick={() => prop.count++}>mutate</button>
+<Old {prop}></Old>

packages/svelte/tests/runtime-runes/samples/fine-grained-prop-reactive-statement/old.svelte

@@ -0,0 +1,11 @@
+<svelte:options runes={false} />
+<script>
+	export let prop;
+    let count_1 = prop.count;
+	$: {
+        count_1 = prop.count;
+    }
+    $: count_2 = prop.count;
+</script>
+
+<p>{count_1} / {count_2}</p>