mirror of https://github.com/sveltejs/svelte
fix: tighten up event attributes and hoisting logic (#9433)
- add event delegation to spread_attributes - add event attributes to spread - don't delegate when bindings/actions on the same element in order to preserve backwards compatibility of ordering - don't hoist identifiers when one of them is used in an event that is not delegateable --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>baseballyama-docs/string-event
Dominic Gannaway
1 year ago
committed by
GitHub
parent
3f56baf760
commit
73ae5ef5bc
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: handle event attribute spreading with event delegation
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
// Checks that event handlers are not hoisted when one of them is not delegateable
|
||||||
|
export default test({
|
||||||
|
html: `<button>0</button>`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [button] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
button.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
assert.htmlEqual(target.innerHTML, '<button>1</button>');
|
||||||
|
|
||||||
|
button.dispatchEvent(new MouseEvent('mouseenter'));
|
||||||
|
await Promise.resolve();
|
||||||
|
assert.htmlEqual(target.innerHTML, '<button>2</button>');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let count = $state(0)
|
||||||
|
|
||||||
|
function increment() {
|
||||||
|
count += 1
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={increment} onmouseenter={increment}>
|
||||||
|
{count}
|
||||||
|
</button>
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<button>click me</button>
|
||||||
|
<button>click me</button>
|
||||||
|
<button>click me</button>
|
||||||
|
<button>click me</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [b1, b2, b3, b4] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
b1?.click();
|
||||||
|
});
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>click spread</button>
|
||||||
|
<button>click spread</button>
|
||||||
|
<button>click spread</button>
|
||||||
|
<button>click spread</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
b2?.click();
|
||||||
|
});
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>click onclick</button>
|
||||||
|
<button>click onclick</button>
|
||||||
|
<button>click onclick</button>
|
||||||
|
<button>click onclick</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
b3?.click();
|
||||||
|
});
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>click spread</button>
|
||||||
|
<button>click spread</button>
|
||||||
|
<button>click spread!</button>
|
||||||
|
<button>click spread!</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
b4?.click();
|
||||||
|
});
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>click onclick</button>
|
||||||
|
<button>click onclick</button>
|
||||||
|
<button>click onclick?</button>
|
||||||
|
<button>click onclick?</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
let text = $state('click me');
|
||||||
|
let text2 = $state('');
|
||||||
|
let spread = { onclick: () => text = 'click spread' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => text = 'click onclick'} {...spread}>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button {...spread} onclick={() => text = 'click onclick'}>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button onclick={() => text = 'click onclick'} {...spread} on:click={() => text2 = '!'}>
|
||||||
|
{text}{text2}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button on:click={() => text2 = '?'} {...spread} onclick={() => text = 'click onclick'}>
|
||||||
|
{text}{text2}
|
||||||
|
</button>
|
||||||
Loading…
Reference in new issue