fix: spread as a dependency for every prop

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

@@ -627,6 +627,9 @@ function serialize_inline_component(node, component_name, context) {
 	/** @type {Array<import('estree').Property[] | import('estree').Expression>} */
 	const props_and_spreads = [];
 
+	/** @type {(import('estree').Expression | null)[]} */
+	const spreads_keys = [];
+
 	/** @type {import('estree').ExpressionStatement[]} */
 	const lets = [];
 
@@ -660,6 +663,7 @@ function serialize_inline_component(node, component_name, context) {
 		props.push(prop);
 		if (!current_is_props) {
 			props_and_spreads.push(props);
+			spreads_keys.push(null);
 		}
 	}
 	for (const attribute of node.attributes) {
@@ -684,8 +688,19 @@ function serialize_inline_component(node, component_name, context) {
 				}
 
 				props_and_spreads.push(b.thunk(value));
+				const keys = b.call(
+					'$.derived',
+					b.thunk(
+						b.call(
+							b.member(b.call('Object.keys', b.logical('??', value, b.object([]))), b.id('join')),
+							b.literal(',')
+						)
+					)
+				);
+				spreads_keys.push(b.thunk(keys));
 			} else {
 				props_and_spreads.push(expression);
+				spreads_keys.push(null);
 			}
 		} else if (attribute.type === 'Attribute') {
 			if (attribute.name.startsWith('--')) {
@@ -842,7 +857,8 @@ function serialize_inline_component(node, component_name, context) {
 			? b.object(/** @type {import('estree').Property[]} */ (props_and_spreads[0]) || [])
 			: b.call(
 					'$.spread_props',
-					...props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p))
+					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p))),
+					b.array(spreads_keys)
 				);
 	/** @param {import('estree').Identifier} node_id */
 	let fn = (node_id) =>
@@ -2933,6 +2949,9 @@ export const template_visitors = {
 		/** @type {import('estree').Expression[]} */
 		const spreads = [];
 
+		/** @type {(import('estree').Expression | null)[]} */
+		const spreads_keys = [];
+
 		/** @type {import('estree').ExpressionStatement[]} */
 		const lets = [];
 
@@ -2943,9 +2962,18 @@ export const template_visitors = {
 
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'SpreadAttribute') {
-				spreads.push(
-					b.thunk(/** @type {import('estree').Expression} */ (context.visit(attribute)))
+				const value = /** @type {import('estree').Expression} */ (context.visit(attribute));
+				const keys = b.call(
+					'$.derived',
+					b.thunk(
+						b.call(
+							b.member(b.call('Object.keys', b.logical('??', value, b.object([]))), b.id('join')),
+							b.literal(',')
+						)
+					)
 				);
+				spreads.push(b.thunk(value));
+				spreads_keys.push(b.thunk(keys));
 			} else if (attribute.type === 'Attribute') {
 				const [, value] = serialize_attribute_value(attribute.value, context);
 				if (attribute.name === 'name') {
@@ -2954,8 +2982,10 @@ export const template_visitors = {
 				} else if (attribute.name !== 'slot') {
 					if (attribute.metadata.dynamic) {
 						props.push(b.get(attribute.name, [b.return(value)]));
+						spreads_keys.push(null);
 					} else {
 						props.push(b.init(attribute.name, value));
+						spreads_keys.push(null);
 					}
 				}
 			} else if (attribute.type === 'LetDirective') {
@@ -2969,7 +2999,7 @@ export const template_visitors = {
 		const props_expression =
 			spreads.length === 0
 				? b.object(props)
-				: b.call('$.spread_props', b.object(props), ...spreads);
+				: b.call('$.spread_props', b.array([b.object(props), ...spreads]), b.array(spreads_keys));
 		const fallback =
 			node.fragment.nodes.length === 0
 				? b.literal(null)

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

@@ -87,29 +87,55 @@ export function rest_props(props, exclude, name) {
  * that looks like `() => { dynamic: props }, { static: prop }, ..` and wraps
  * them so that the whole thing is passed to the component as the `$$props` argument.
  * @template {Record<string | symbol, unknown>} T
- * @type {ProxyHandler<{ props: Array<T | (() => T)> }>}}
+ * @type {ProxyHandler<{ props: (Array<T | (() => T)>), keys: (Array<(() => import('./types.js').Value<string>) | undefined>) }>}}
  */
 const spread_props_handler = {
 	get(target, key) {
 		let i = target.props.length;
 		while (i--) {
 			let p = target.props[i];
-			if (is_function(p)) p = p();
-			if (typeof p === 'object' && p !== null && key in p) return p[key];
+			let obj = p;
+			// in case the prop is the spread prop calling the function
+			// will track that state as a dep even if the requested key
+			// is not in it. to avoid that we call the function in untrack
+			// and check on the object. If it's there we call the function again
+			// to track and then access the key
+			untrack(() => {
+				if (is_function(p)) obj = p();
+			});
+			const keys_function = target.keys[i];
+			if (typeof obj === 'object' && obj !== null && key in obj) {
+				if (is_function(p)) p = p();
+				return p[key];
+			} else if (keys_function && is_function(keys_function)) get(keys_function());
 		}
 	},
 	getOwnPropertyDescriptor(target, key) {
 		let i = target.props.length;
 		while (i--) {
 			let p = target.props[i];
-			if (is_function(p)) p = p();
-			if (typeof p === 'object' && p !== null && key in p) return get_descriptor(p, key);
+			let obj = p;
+			// in case the prop is the spread prop calling the function
+			// will track that state as a dep even if the requested key
+			// is not in it. to avoid that we call the function in untrack
+			// and check on the object. If it's there we call the function again
+			// to track and then access the key
+			untrack(() => {
+				if (is_function(p)) obj = p();
+			});
+			const keys_function = target.keys[i];
+			if (typeof obj === 'object' && obj !== null && key in obj) {
+				if (is_function(p)) p = p();
+				return get_descriptor(p, key);
+			} else if (keys_function && is_function(keys_function)) get(keys_function());
 		}
 	},
 	has(target, key) {
 		for (let p of target.props) {
 			if (is_function(p)) p = p();
-			if (key in p) return true;
+			if (key in p) {
+				return true;
+			}
 		}
 
 		return false;
@@ -131,10 +157,11 @@ const spread_props_handler = {
 
 /**
  * @param {Array<Record<string, unknown> | (() => Record<string, unknown>)>} props
+ * @param {(Array<(() => import('./types.js').Value<string>) | undefined>)} keys
  * @returns {any}
  */
-export function spread_props(...props) {
-	return new Proxy({ props }, spread_props_handler);
+export function spread_props(props, keys) {
+	return new Proxy({ props, keys }, spread_props_handler);
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/fine-grained-spreading-dep/Test.svelte

@@ -0,0 +1,7 @@
+<script>
+  let { about, ...rest } = $props();
+
+  $effect(()=>{
+	console.log(about);
+  })
+</script>

packages/svelte/tests/runtime-runes/samples/fine-grained-spreading-dep/_config.js

@@ -0,0 +1,71 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// The component context class instance gets shared between tests, strangely, causing hydration to fail?
+
+	async test({ assert, target, logs }) {
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const no_keys_change = target.querySelector('#no-keys-change');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const keys_change = target.querySelector('#keys-change');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const no_keys_change_assign = target.querySelector('#no-keys-change-assign');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const keys_change_assign = target.querySelector('#keys-change-assign');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const keys_change_override = target.querySelector('#keys-change-override');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const change_override_assign = target.querySelector('#change-override-assign');
+
+		assert.deepEqual(logs, ['something']);
+
+		flushSync(() => {
+			no_keys_change?.click();
+		});
+
+		assert.deepEqual(logs, ['something']);
+
+		flushSync(() => {
+			keys_change?.click();
+		});
+
+		assert.deepEqual(logs, ['something', 'something']);
+
+		flushSync(() => {
+			no_keys_change_assign?.click();
+		});
+
+		assert.deepEqual(logs, ['something', 'something']);
+
+		flushSync(() => {
+			keys_change_assign?.click();
+		});
+
+		assert.deepEqual(logs, ['something', 'something', 'something']);
+
+		flushSync(() => {
+			keys_change_override?.click();
+		});
+
+		assert.deepEqual(logs, ['something', 'something', 'something', 'else']);
+
+		flushSync(() => {
+			change_override_assign?.click();
+		});
+
+		assert.deepEqual(logs, ['something', 'something', 'something', 'else', 'another']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/fine-grained-spreading-dep/main.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Test from "./Test.svelte";
+	let rest = $state({});
+</script>
+
+<button id="no-keys-change" onclick={()=>{
+rest = {};
+}}></button>
+
+<button id="keys-change" onclick={()=>{
+	rest = { foo: 1 };
+}}></button>
+
+<button id="no-keys-change-assign" onclick={()=>{
+	rest.foo = 1;
+}}></button>
+
+<button id="keys-change-assign" onclick={()=>{
+	rest.bar = 1;
+}}></button>
+
+<button id="keys-change-override" onclick={()=>{
+	rest = {about: "else"};
+}}></button>
+
+<button id="change-override-assign" onclick={()=>{
+	rest.about = "another";
+}}></button>
+
+
+<Test about="something" {...rest}></Test>