fix: exclude internal props from spread attributes (#9384)

* exclude internal props from spread attributes

* changeset

* tighten up

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

.changeset/moody-owls-cry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: exclude internal props from spread attributes

packages/svelte/src/internal/client/render.js

@@ -2844,14 +2844,12 @@ export function spread_attributes(dom, prev, attrs, css_hash) {
 
 	for (const key in next) {
 		let value = next[key];
-		if (has_hash && key === 'class') {
-			if (value) value += ' ';
-			value += css_hash;
-		}
-
 		if (value === prev?.[key]) continue;
 
-		if (key.startsWith('on')) {
+		const prefix = key.slice(0, 2);
+		if (prefix === '$$') continue;
+
+		if (prefix === 'on') {
 			// TODO delegate?
 			/** @type {{ capture?: true }} */
 			const opts = {};
@@ -2893,6 +2891,11 @@ export function spread_attributes(dom, prev, attrs, css_hash) {
 				dom[key] = value;
 			}
 		} else if (typeof value !== 'function') {
+			if (has_hash && key === 'class') {
+				if (value) value += ' ';
+				value += css_hash;
+			}
+
 			attr(dom, key, value);
 		}
 	}

packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte

@@ -0,0 +1,7 @@
+<script>
+	let { ...stuff } = $props();
+</script>
+
+<button {...stuff} on:click>
+	<slot></slot>
+</button>

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

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>clicks: 0</button>`,
+
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<button>clicks: 1</button>');
+	}
+});

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

@@ -0,0 +1,13 @@
+<script>
+	import Button from './Button.svelte';
+
+	let count = $state(0);
+
+	function increment() {
+		count += 1;
+	}
+</script>
+
+<Button on:click={increment}>
+	clicks: {count}
+</Button>