diff --git a/.changeset/strange-roses-brake.md b/.changeset/strange-roses-brake.md new file mode 100644 index 000000000000..b6e71da7a750 --- /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 63eec24151af..71bb8c658821 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 7e72626519ba..ffcde5c50437 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, ` - - + + ` );