fix: avoid hoisting error by using 'let' instead of 'var' (#11291)

Fixes #11284

Author: craig-jennings

.changeset/plenty-starfishes-dress.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: avoid hoisting error by using 'let' instead of 'var'

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -111,16 +111,17 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 	var events = [];
 
 	for (key in next) {
-		var value = next[key];
+		// let instead of var because referenced in a closure
+		let value = next[key];
 		if (value === prev?.[key]) continue;
 
 		var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
 		if (prefix === '$$') continue;
 
 		if (prefix === 'on') {
 			/** @type {{ capture?: true }} */
-			var opts = {};
-			var event_name = key.slice(2);
+			const opts = {};
+			let event_name = key.slice(2);
 			var delegated = DelegatedEvents.includes(event_name);
 
 			if (

packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const input = target.querySelector('input');
+
+		input?.dispatchEvent(new Event('input', { bubbles: true }));
+
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, 'true <input class="hello">');
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/main.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	const props = {};
+	let changed = $state(false);
+</script>
+
+{changed}
+<input {...props} oninput={() => (changed = true)} class="hello" />