fix: handle event hoisting props referencing (#9846)

* fix: handle event hoisting props referencing

.changeset/clever-rockets-burn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle event hoisting props referencing

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

@@ -316,6 +316,7 @@ function get_hoistable_params(node, context) {
 
 	/** @type {import('estree').Pattern[]} */
 	const params = [];
+	let added_props = false;
 
 	for (const [reference] of scope.references) {
 		const binding = scope.get(reference);
@@ -325,6 +326,19 @@ function get_hoistable_params(node, context) {
 				// We need both the subscription for getting the value and the store for updating
 				params.push(b.id(binding.node.name.slice(1)));
 				params.push(b.id(binding.node.name));
+			} else if (
+				// If we are referencing a simple $$props value, then we need to reference the object property instead
+				binding.kind === 'prop' &&
+				!binding.reassigned &&
+				binding.initial === null &&
+				!context.state.analysis.accessors &&
+				context.state.analysis.runes
+			) {
+				// Handle $$props.something use-cases
+				if (!added_props) {
+					added_props = true;
+					params.push(b.id('$$props'));
+				}
 			} else {
 				// create a copy to remove start/end tags which would mess up source maps
 				params.push(b.id(binding.node.name));

packages/svelte/tests/runtime-runes/samples/event-prop-reference/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	get props() {
+		return { item: { name: 'Dominic' } };
+	},
+
+	async test({ assert, target }) {
+		const [b1] = target.querySelectorAll('button');
+
+		b1?.click();
+		await Promise.resolve();
+
+		assert.deepEqual(log, ['Dominic']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-prop-reference/log.js

@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];

packages/svelte/tests/runtime-runes/samples/event-prop-reference/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { log } from './log.js';
+
+	let { item } = $props();
+
+	function onclick() {
+		log.push(item?.name);
+	}
+</script>
+
+<button {onclick}>
+	{item?.name}
+</button>