fix: make prop fallback values deeply reactive if needed (sveltejs#11804

)

If a property is mutated, the assumption is that it is deeply reactive. In those cases, the fallback value should be proxified so that it also is deeply reactive.
fixes sveltejs#11425

.changeset/strange-roses-brake.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: make prop fallback values deeply reactive if needed

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

@@ -246,9 +246,14 @@ export const javascript_visitors_runes = {
 							property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
 						assert.equal(id.type, 'Identifier');
 						const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(id.name));
-						const initial =
+						let initial =
 							binding.initial &&
 							/** @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)) {
+							initial = b.call('$.proxy', initial);
+						}
 
 						if (binding.reassigned || state.analysis.accessors || initial) {
 							declarations.push(b.declarator(id, get_prop_source(binding, state, name, initial)));

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

@@ -17,8 +17,8 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-				<button>mutate: 0</button>
-				<button>reassign: 0</button>
+				<button>mutate: 1</button>
+				<button>reassign: 1</button>
 			`
 		);