fix: treat all spread attributes as reactive

The objects could contain getters with reactive values, so we play it safe and assume they're always reactive
fixes #10065

Author: dummdidumm

.changeset/sharp-kids-happen.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always treat spread attributes as reactive

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

@@ -314,7 +314,8 @@ function serialize_element_spread_attributes(attributes, context, element, eleme
 
 		is_reactive ||=
 			attribute.metadata.dynamic ||
-			(attribute.type === 'SpreadAttribute' && attribute.metadata.contains_call_expression);
+			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
+			attribute.type === 'SpreadAttribute';
 	}
 
 	const lowercase_attributes =
@@ -388,7 +389,10 @@ function serialize_dynamic_element_spread_attributes(attributes, context, elemen
 			values.push(/** @type {import('estree').Expression} */ (context.visit(attribute)));
 		}
 
-		is_reactive ||= attribute.metadata.dynamic;
+		is_reactive ||=
+			attribute.metadata.dynamic ||
+			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
+			attribute.type === 'SpreadAttribute';
 	}
 
 	if (is_reactive) {

packages/svelte/tests/runtime-runes/samples/event-attribute-call-expressions/_config.js

@@ -1,7 +1,11 @@
 import { test } from '../../test';
 
 export default test({
-	html: `<div style="color: red;"></div><div class="red"></div><button>toggle</button`,
+	html: `
+		<div style="color: red;"></div><div class="red"></div><div class="red"></div>
+		<div style="color: red;"></div><div class="red"></div><div class="red"></div>
+		<button>toggle</button
+	`,
 
 	async test({ assert, target }) {
 		const [b1] = target.querySelectorAll('button');
@@ -10,7 +14,11 @@ export default test({
 		await Promise.resolve();
 		assert.htmlEqual(
 			target.innerHTML,
-			'<div class="blue" style="color: blue;"></div><div class="blue"></div><button>toggle</button>'
+			`
+				<div class="blue" style="color: blue;"></div><div class="blue"></div><div class="blue"></div>
+				<div class="blue" style="color: blue;"></div><div class="blue"></div><div class="blue"></div>
+				<button>toggle</button
+		`
 		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/event-attribute-call-expressions/main.svelte

@@ -1,5 +1,6 @@
 <script>
 	let value = $state('red');
+	let tag = $state('div');
 
 	const getValue = () => {
 		return value;
@@ -10,9 +11,20 @@
 	const getSpread = () => {
 		return { class: value };
 	}
+	const props = {
+		get class() {
+			return value;
+		}
+	}
 </script>
 
 <div class:blue={getClass()} style:color={getValue()}></div>
 <div {...getSpread()}></div>
+<div {...props}></div>
+
+<svelte:element this={tag} class:blue={getClass()} style:color={getValue()}></svelte:element>
+<svelte:element this={tag} {...getSpread()}></svelte:element>
+<svelte:element this={tag} {...props}></svelte:element>
+
 <button on:click={() => value = 'blue'}>toggle</button>