From 2aacfad9ae620a61547605af6716ffca79e01858 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 10 Nov 2023 17:50:44 -0500
Subject: [PATCH] fix: exclude internal props from spread attributes (#9384)

* exclude internal props from spread attributes

* changeset

* tighten up

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/moody-owls-cry.md                      |  5 +++++
 packages/svelte/src/internal/client/render.js     | 15 +++++++++------
 .../samples/event-listener-spread/Button.svelte   |  7 +++++++
 .../samples/event-listener-spread/_config.js      | 13 +++++++++++++
 .../samples/event-listener-spread/main.svelte     | 13 +++++++++++++
 5 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/moody-owls-cry.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-listener-spread/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-listener-spread/main.svelte

diff --git a/.changeset/moody-owls-cry.md b/.changeset/moody-owls-cry.md
new file mode 100644
index 0000000000..0d94131ee9
--- /dev/null
+++ b/.changeset/moody-owls-cry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: exclude internal props from spread attributes
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index dd959cf39a..2ef1033638 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/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);
 		}
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/Button.svelte
new file mode 100644
index 0000000000..db525426e4
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-runes/samples/event-listener-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/_config.js
new file mode 100644
index 0000000000..43084e6809
--- /dev/null
+++ b/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>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-listener-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-listener-spread/main.svelte
new file mode 100644
index 0000000000..093c863407
--- /dev/null
+++ b/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>