mirror of https://github.com/sveltejs/svelte
fix: disallow mixing event-handling syntaxes (#11295)
Closes #11262 --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>pull/11369/head
parent
bda32edb1a
commit
68071f7c06
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: disallow mixing on:click and onclick syntax
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
const { children, ...props } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {...props} on:click>
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
@ -1,12 +1,13 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import Component from "./Component.svelte";
|
||||||
import Sub from "./sub.svelte";
|
import Sub from "./sub.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window onclick="{() => console.log('window main')}" />
|
<svelte:window onclick="{() => console.log('window main')}" />
|
||||||
<svelte:document onclick="{() => console.log('document main')}" />
|
<svelte:document onclick="{() => console.log('document main')}" />
|
||||||
|
|
||||||
<div on:click={() => console.log('div main 1')} on:click={() => console.log('div main 2')}>
|
<Component on:click={() => console.log('div main 1')} on:click={() => console.log('div main 2')}>
|
||||||
<button onclick={() => console.log('button main')}>main</button>
|
<button onclick={() => console.log('button main')}>main</button>
|
||||||
</div>
|
</Component>
|
||||||
|
|
||||||
<Sub />
|
<Sub />
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
const { children, ...props } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button {...props} on:click>
|
||||||
|
{@render children()}
|
||||||
|
</button>
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
const { children, ...props } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {...props} on:click>
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
@ -1,5 +1,10 @@
|
|||||||
<div onclick={() => console.log('outer div onclick')}>
|
<script>
|
||||||
<div on:click={() => console.log('inner div on:click')}>
|
import Component from "./Component.svelte";
|
||||||
<button onclick={() => console.log('button onclick')} on:click={() => console.log('button on:click')}>main</button>
|
import Button from "./Button.svelte";
|
||||||
</div>
|
</script>
|
||||||
</div>
|
|
||||||
|
<Component onclick={() => console.log('outer div onclick')}>
|
||||||
|
<Component on:click={() => console.log('inner div on:click')}>
|
||||||
|
<Button onclick={() => console.log('button onclick')} on:click={() => console.log('button on:click')}>main</Button>
|
||||||
|
</Component>
|
||||||
|
</Component>
|
||||||
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
const { children, ...props } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button {...props} on:click>
|
||||||
|
{@render children()}
|
||||||
|
</button>
|
@ -1,21 +1,22 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import Button from './Button.svelte';
|
||||||
let text = $state('click me');
|
let text = $state('click me');
|
||||||
let text2 = $state('');
|
let text2 = $state('');
|
||||||
let spread = { onclick: () => text = 'click spread' };
|
let spread = { onclick: () => text = 'click spread' };
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button onclick={() => text = 'click onclick'} {...spread}>
|
<Button onclick={() => text = 'click onclick'} {...spread}>
|
||||||
{text}
|
{text}
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
<button {...spread} onclick={() => text = 'click onclick'}>
|
<Button {...spread} onclick={() => text = 'click onclick'}>
|
||||||
{text}
|
{text}
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
<button onclick={() => text = 'click onclick'} {...spread} on:click={() => text2 = '!'}>
|
<Button onclick={() => text = 'click onclick'} {...spread} on:click={() => text2 = '!'}>
|
||||||
{text}{text2}
|
{text}{text2}
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
<button on:click={() => text2 = '?'} {...spread} onclick={() => text = 'click onclick'}>
|
<Button on:click={() => text2 = '?'} {...spread} onclick={() => text = 'click onclick'}>
|
||||||
{text}{text2}
|
{text}{text2}
|
||||||
</button>
|
</Button>
|
||||||
|
@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "mixed_event_handler_syntaxes",
|
||||||
|
"message": "Mixing old (on:click) and new syntaxes for event handling is not allowed. Use only the onclick syntax.",
|
||||||
|
"start": {
|
||||||
|
"line": 11,
|
||||||
|
"column": 8
|
||||||
|
},
|
||||||
|
"end": {
|
||||||
|
"line": 11,
|
||||||
|
"column": 22
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let { foo } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ok -->
|
||||||
|
<button onclick={foo}>click me</button>
|
||||||
|
<Button on:click={foo}>click me</Button>
|
||||||
|
<Button on:click={foo}>click me</Button>
|
||||||
|
|
||||||
|
<!-- error -->
|
||||||
|
<button on:click={foo}>click me</button>
|
Loading…
Reference in new issue