breaking: remove deep reactivity from non-bindable props (#12484)

* breaking: remove deep reactivity from non-bindable props

* breaking: remove deep reactivity from non-bindable props

* lint

Author: trueadm

.changeset/heavy-feet-attend.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove deep reactivity from non-bindable props

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

@@ -336,7 +336,8 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 						left,
 						context.state.analysis.runes &&
 							!options?.skip_proxy_and_freeze &&
-							should_proxy_or_freeze(value, context.state.scope)
+							should_proxy_or_freeze(value, context.state.scope) &&
+							binding.kind === 'bindable_prop'
 							? serialize_proxy_reassignment(value, left_name, state)
 							: value
 					);

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

@@ -276,7 +276,11 @@ export const javascript_visitors_runes = {
 								/** @type {import('estree').Expression} */ (visit(binding.initial));
 							// We're adding proxy here on demand and not within the prop runtime function so that
 							// people not using proxied state anywhere in their code don't have to pay the additional bundle size cost
-							if (initial && binding.mutated && should_proxy_or_freeze(initial, state.scope)) {
+							if (
+								initial &&
+								binding.kind === 'bindable_prop' &&
+								should_proxy_or_freeze(initial, state.scope)
+							) {
 								initial = b.call('$.proxy', initial);
 							}
 

packages/svelte/tests/runtime-runes/samples/props-default-reactivity/_config.js

@@ -63,8 +63,8 @@ export default test({
 			`
 				<button>mutate: 3</button>
 				<button>reassign: 3</button>
-				<button>mutate: 1</button>
-				<button>reassign: 1</button>
+				<button>mutate: 0</button>
+				<button>reassign: 0</button>
 			`
 		);
 
@@ -91,8 +91,8 @@ export default test({
 			`
 				<button>mutate: 3</button>
 				<button>reassign: 3</button>
-				<button>mutate: 3</button>
-				<button>reassign: 3</button>
+				<button>mutate: 2</button>
+				<button>reassign: 2</button>
 			`
 		);
 	}