fix: treat spread elements the same as call expressions (#14488)

.changeset/silly-readers-double.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat spread elements the same as call expressions

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -51,6 +51,7 @@ import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
 import { SnippetBlock } from './visitors/SnippetBlock.js';
 import { SpreadAttribute } from './visitors/SpreadAttribute.js';
+import { SpreadElement } from './visitors/SpreadElement.js';
 import { StyleDirective } from './visitors/StyleDirective.js';
 import { SvelteBody } from './visitors/SvelteBody.js';
 import { SvelteComponent } from './visitors/SvelteComponent.js';
@@ -163,6 +164,7 @@ const visitors = {
 	SlotElement,
 	SnippetBlock,
 	SpreadAttribute,
+	SpreadElement,
 	StyleDirective,
 	SvelteBody,
 	SvelteComponent,

packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadElement.js

@@ -0,0 +1,16 @@
+/** @import { SpreadElement } from 'estree' */
+/** @import { Context } from '../types' */
+
+/**
+ * @param {SpreadElement} node
+ * @param {Context} context
+ */
+export function SpreadElement(node, context) {
+	if (context.state.expression) {
+		// treat e.g. `[...x]` the same as `[...x.values()]`
+		context.state.expression.has_call = true;
+		context.state.expression.has_state = true;
+	}
+
+	context.next();
+}

packages/svelte/tests/runtime-runes/samples/props-spread-operator/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { numbers } = $props();
+</script>
+
+{numbers.join(', ')}

packages/svelte/tests/runtime-runes/samples/props-spread-operator/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>+1</button> 0, 1, 2',
+
+	test({ target, assert }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, '<button>+1</button> 0, 1, 2, 3');
+	}
+});

packages/svelte/tests/runtime-runes/samples/props-spread-operator/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { SvelteSet } from 'svelte/reactivity';
+	import Child from './Child.svelte';
+
+	const numbers = new SvelteSet([0, 1, 2]);
+</script>
+
+<button onclick={() => numbers.add(numbers.size)}>+1</button>
+
+<Child numbers={[...numbers]} />