fix extracting names from ThisExpression (#5036)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033))
+
 ## 3.23.2
 
 * Fix `bind:group` inside `{#each}` ([#3243](https://github.com/sveltejs/svelte/issues/3243))

src/compiler/compile/nodes/shared/Expression.ts

@@ -120,12 +120,9 @@ export default class Expression {
 				if (function_expression) {
 					if (node.type === 'AssignmentExpression') {
 						deep = node.left.type === 'MemberExpression';
-						names = deep
-							? [get_object(node.left).name]
-							: extract_names(node.left);
+						names = extract_names(deep ? get_object(node.left) : node.left);
 					} else if (node.type === 'UpdateExpression') {
-						const { name } = get_object(node.argument);
-						names = [name];
+						names = extract_names(get_object(node.argument));
 					}
 				}
 

test/runtime/samples/this-in-function-expressions/_config.js

@@ -0,0 +1,10 @@
+export default {
+	async test({ assert, component, target, window, raf }) {
+		const [_, btn] = target.querySelectorAll("button");
+		const clickEvent = new window.MouseEvent("click");
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.equal(btn.x, 1);
+	},
+};

test/runtime/samples/this-in-function-expressions/main.svelte

@@ -0,0 +1,2 @@
+<button on:click="{() => { this.x = 1; }}" />
+<button on:click="{function () { this.x = 1; }}" />