From 68263c8615955acc9ddee79a54f4a03ca1fc7763 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 28 May 2024 16:40:56 +0200
Subject: [PATCH] fix: make prop fallback values deeply reactive if needed
(#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 #11425
---
.changeset/strange-roses-brake.md | 5 +++++
.../phases/3-transform/client/visitors/javascript-runes.js | 7 ++++++-
.../samples/props-default-reactivity/_config.js | 4 ++--
3 files changed, 13 insertions(+), 3 deletions(-)
create mode 100644 .changeset/strange-roses-brake.md
diff --git a/.changeset/strange-roses-brake.md b/.changeset/strange-roses-brake.md
new file mode 100644
index 0000000000..b6e71da7a7
--- /dev/null
+++ b/.changeset/strange-roses-brake.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: make prop fallback values deeply reactive if needed
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
index 63eec24151..71bb8c6588 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
+++ b/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)));
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-reactivity/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-reactivity/_config.js
index 7e72626519..ffcde5c504 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-default-reactivity/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-reactivity/_config.js
@@ -17,8 +17,8 @@ export default test({
assert.htmlEqual(
target.innerHTML,
`
-
-
+
+
`
);