fix: dynamic event delegation for stateful call expressions (#12549)

.changeset/chilled-ladybugs-invite.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: dynamic event delegation for stateful call expressions

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

@@ -1169,7 +1169,11 @@ function serialize_event_handler(node, { state, visit }) {
 			} else {
 				handler = /** @type {Expression} */ (visit(handler));
 			}
-		} else if (handler.type === 'ConditionalExpression' || handler.type === 'LogicalExpression') {
+		} else if (
+			handler.type === 'CallExpression' ||
+			handler.type === 'ConditionalExpression' ||
+			handler.type === 'LogicalExpression'
+		) {
 			handler = dynamic_handler();
 		} else {
 			handler = /** @type {Expression} */ (visit(handler));

packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/_config.js

@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test, ok } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target, logs }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+		});
+
+		assert.deepEqual(logs, ['AA', 'AB']);
+
+		flushSync(() => {
+			btn3.click();
+			btn1.click();
+			btn2.click();
+		});
+
+		assert.deepEqual(logs, ['AA', 'AB', 'BA', 'BB']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	let hof = $state((name) => () => console.log('A' + name));
+	const member = $derived({
+		hof
+	});
+	function change() {
+		hof = (name) => () => console.log('B' + name);
+	}
+</script>
+
+<button onclick={hof('A')}>A</button>
+<button onclick={member.hof('B')}>B</button>
+
+<br />
+<button onclick={change}>change</button>