fix: unwrap args in case of spread

Author: paoloricciuti

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

@@ -1,4 +1,4 @@
-/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition } from 'estree' */
+/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition, SpreadElement } from 'estree' */
 /** @import {  } from '#compiler' */
 /** @import { Context, StateField } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
@@ -113,23 +113,37 @@ export function ClassBody(node, context) {
 				let value = null;
 
 				if (definition.value.arguments.length > 0) {
-					const init = /** @type {Expression} **/ (
+					let init = /** @type {Expression | SpreadElement} **/ (
 						context.visit(definition.value.arguments[0], child_state)
 					);
 
 					if (field.kind === 'state' || field.kind === 'raw_state') {
-						const onchange = get_onchange(
-							/** @type {Expression} */ (definition.value.arguments[1]),
-							// @ts-ignore mismatch between Context and ComponentContext. TODO look into
-							context
-						);
+						let onchange;
+						if (
+							/** @type {Expression | SpreadElement} */ (/** @type {unknown} */ (init)).type ===
+							'SpreadElement'
+						) {
+							const argument = init.argument;
+							init = b.member(argument, '0', true);
+							onchange = b.member(b.member(argument, '1', true), 'onchange', false, true);
+						}
+						if (!onchange) {
+							onchange = get_onchange(
+								/** @type {Expression} */ (definition.value.arguments[1]),
+								// @ts-ignore mismatch between Context and ComponentContext. TODO look into
+								context
+							);
+						}
 
 						value =
 							field.kind === 'state' && should_proxy(init, context.state.scope)
 								? b.call('$.assignable_proxy', init, onchange)
 								: b.call('$.state', init, onchange);
 					} else {
-						value = b.call('$.derived', field.kind === 'derived_by' ? init : b.thunk(init));
+						value = b.call(
+							'$.derived',
+							field.kind === 'derived_by' ? init : b.thunk(/** @type {Expression} */ (init))
+						);
 					}
 				} else {
 					// if no arguments, we know it's state as `$derived()` is a compile error

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

@@ -1,4 +1,4 @@
-/** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
+/** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator, SpreadElement } from 'estree' */
 /** @import { Binding } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
@@ -117,9 +117,20 @@ export function VariableDeclaration(node, context) {
 			}
 
 			const args = /** @type {CallExpression} */ (init).arguments;
-			const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
-
-			const onchange = get_onchange(/** @type {Expression} */ (args[1]), context);
+			let value =
+				args.length > 0
+					? /** @type {Expression | SpreadElement} */ (context.visit(args[0]))
+					: b.void0;
+			let onchange;
+
+			if (value.type === 'SpreadElement') {
+				const argument = value.argument;
+				value = b.member(argument, '0', true);
+				onchange = b.member(b.member(argument, '1', true), 'onchange', false, true);
+			}
+			if (!onchange) {
+				onchange = get_onchange(/** @type {Expression} */ (args[1]), context);
+			}
 
 			if (rune === '$state' || rune === '$state.raw') {
 				/**

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/state.js

@@ -1,10 +1,10 @@
-/** @import { Expression, Property } from 'estree' */
+/** @import { Expression, Property, SpreadElement } from 'estree' */
 /** @import { ComponentContext } from '../../types' */
 import * as b from '../../../../../utils/builders.js';
 
 /**
  * Extract the `onchange` callback from the options passed to `$state`
- * @param {Expression} options
+ * @param {Expression | SpreadElement} options
  * @param {ComponentContext} context
  * @returns {Expression | undefined}
  */
@@ -27,5 +27,9 @@ export function get_onchange(options, context) {
 		return /** @type {Expression} */ (context.visit(onchange.value));
 	}
 
+	if (options.type === 'SpreadElement') {
+		return b.member(b.member(options.argument, '0', true), 'onchange');
+	}
+
 	return b.member(/** @type {Expression} */ (context.visit(options)), 'onchange');
 }