fix: correctly handle action member expression keys

Author: trueadm

.changeset/grumpy-students-drop.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly handle action member expression keys

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

@@ -2413,12 +2413,17 @@ export const template_visitors = {
 		if (node.expression) {
 			params.push(b.id('$$props'));
 		}
+		let callee;
+		if (node.name.includes('.')) {
+			const parts = node.name.split('.');
+			const key = b.key(parts[1]);
+			callee = b.member(serialize_get_binding(b.id(parts[0]), state), key, key.type === 'Literal');
+		} else {
+			callee = serialize_get_binding(b.id(node.name), state);
+		}
 
 		/** @type {import('estree').Expression[]} */
-		const args = [
-			state.node,
-			b.arrow(params, b.call(serialize_get_binding(b.id(node.name), state), ...params))
-		];
+		const args = [state.node, b.arrow(params, b.call(callee, ...params))];
 
 		if (node.expression) {
 			args.push(b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression))));

packages/svelte/tests/runtime-legacy/samples/action-object-key/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<span style="color: red;">Text</span>
+	`,
+	ssrHtml: `
+		<span>Text</span>
+	`
+});

packages/svelte/tests/runtime-legacy/samples/action-object-key/main.svelte

@@ -0,0 +1,4 @@
+<script>
+	const a = { 'set-color': (node, c) => node.style.color = c };
+</script>
+<span use:a.set-color={'red'}>Text</span>