diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js index 1cdc27c982..79bc5d7c33 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js @@ -255,16 +255,23 @@ export function client_component(source, analysis, options) { const key = binding.prop_alias ?? name; - properties.push( - b.get(key, [b.return(b.call(b.id(name)))]), - b.set( - key, - [b.stmt(b.call(b.id(name), b.id('$$value'))), b.stmt(b.call('$.flushSync'))], - analysis.runes && binding.initial - ? /** @type {import('estree').Expression} */ (binding.initial) - : undefined - ) - ); + const getter = b.get(key, [b.return(b.call(b.id(name)))]); + + const setter = b.set(key, [ + b.stmt(b.call(b.id(name), b.id('$$value'))), + b.stmt(b.call('$.flushSync')) + ]); + + if (binding.initial) { + // turn `set foo($$value)` into `set foo($$value = expression)` + setter.value.params[0] = { + type: 'AssignmentPattern', + left: b.id('$$value'), + right: /** @type {import('estree').Expression} */ (binding.initial) + }; + } + + properties.push(getter, setter); } } diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js index 2aaa82f2e0..0b837d5daf 100644 --- a/packages/svelte/src/compiler/utils/builders.js +++ b/packages/svelte/src/compiler/utils/builders.js @@ -210,7 +210,7 @@ export function function_declaration(id, params, body) { /** * @param {string} name * @param {import('estree').Statement[]} body - * @returns {import('estree').Property} + * @returns {import('estree').Property & { value: import('estree').FunctionExpression}}} */ export function get(name, body) { return prop('get', key(name), function_builder(null, [], block(body))); @@ -305,11 +305,12 @@ export function object_pattern(properties) { } /** + * @template {import('estree').Expression} Value * @param {'init' | 'get' | 'set'} kind * @param {import('estree').Expression} key - * @param {import('estree').Expression} value + * @param {Value} value * @param {boolean} computed - * @returns {import('estree').Property} + * @returns {import('estree').Property & { value: Value }} */ export function prop(kind, key, value, computed = false) { return { type: 'Property', kind, key, value, method: false, shorthand: false, computed }; @@ -355,23 +356,10 @@ export function sequence(expressions) { /** * @param {string} name * @param {import('estree').Statement[]} body - * @param {import('estree').Expression | null} [fallback] - * @returns {import('estree').Property} + * @returns {import('estree').Property & { value: import('estree').FunctionExpression}} */ -export function set(name, body, fallback) { - return prop( - 'set', - key(name), - function_builder( - null, - [ - fallback - ? { type: 'AssignmentPattern', left: id('$$value'), right: fallback } - : id('$$value') - ], - block(body) - ) - ); +export function set(name, body) { + return prop('set', key(name), function_builder(null, [id('$$value')], block(body))); } /**