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>
pull/9388/head
Rich Harris 11 months ago committed by GitHub
parent 51394a4834
commit 2aacfad9ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

@ -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);
}
}

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

@ -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>');
}
});

@ -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>
Loading…
Cancel
Save