mirror of https://github.com/sveltejs/svelte
fix: migrate events to be more inline with svelte 4 (#13362)
* fix: migrate events to be more inline with svelte 4 * fix: use function instead of action * chore: generate types * re-export event modifier substitutes * chore: replace map with object * fix: handle nullish values * fix: use bubbler for delegated events * chore: generate types * chore: deprecate legacy stuff * chore: damn type generations * fix: implement bubble on props strategy * chore: revert bubble as prop init but keep fix for restProps * fix: use `passive` and `nonpassive` actions for `passive` and `nonpassive` modifiers * chore: i swear i will setup a commit hook for generating types * chore: update output * tweak passive/nonpassive types to make them more compact and show up as deprecated * make terminology more consistent with other places * eat local, shop local, declare local * unify name replacement stuff * remove errant newline * ensure modifier order is stable and matches svelte 4 * fix * compute indent once * joining without newlines seems to work better in common cases * replace passive/nonpassive handlers in situ * unused * simplify * simplify, remove errant spaces * only import handlers when necessary * changeset --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/13383/head
Paolo Ricciuti
3 months ago
committed by
GitHub
parent
4b7cb9aeae
commit
0f6cc2b1ed
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: higher fidelity event migration
|
||||
@ -0,0 +1,92 @@
|
||||
<script>
|
||||
let handlers;
|
||||
let stopPropagation;
|
||||
let preventDefault;
|
||||
let stopImmediatePropagation;
|
||||
let once;
|
||||
let trusted;
|
||||
let self;
|
||||
let createBubbler;
|
||||
let bubble;
|
||||
let passive;
|
||||
let nonpassive;
|
||||
</script>
|
||||
|
||||
<button on:click={() => console.log('hi')} on:click>click me</button>
|
||||
<button on:click={function(){ console.log('hi') }} on:click>click me</button>
|
||||
<button on:click={() => console.log('before')} on:click on:click={() => console.log('after')}
|
||||
>click me</button
|
||||
>
|
||||
<button on:click on:click={foo}>click me</button>
|
||||
<button on:click>click me</button>
|
||||
|
||||
<button on:dblclick={() => console.log('hi')}>click me</button>
|
||||
<button on:toggle>click me</button>
|
||||
<button on:custom-event={() => 'hi'}>click me</button>
|
||||
<button on:custom-event-bubble>click me</button>
|
||||
|
||||
<button on:click|preventDefault={() => (searching = true)}>click me</button>
|
||||
<button on:click|preventDefault={() => ''}>click me</button>
|
||||
<button on:click|stopPropagation={() => {}}>click me</button>
|
||||
<button on:click|stopImmediatePropagation={() => ''}>click me</button>
|
||||
<button on:click|capture={() => ''}>click me</button>
|
||||
<button on:click|self={() => ''}>click me</button>
|
||||
<button on:click|trusted={() => ''}>click me</button>
|
||||
<button on:click|once={() => ''}>click me</button>
|
||||
|
||||
<button on:click|preventDefault|stopPropagation={() => ''}>click me</button>
|
||||
<button on:click|stopPropagation|stopImmediatePropagation={() => {}}>click me</button>
|
||||
<button on:click|stopImmediatePropagation|self={() => ''}>click me</button>
|
||||
<button on:click|self|trusted={() => ''}>click me</button>
|
||||
<button on:click|trusted|once={() => ''}>click me</button>
|
||||
<button on:click|once|preventDefault={() => ''}>click me</button>
|
||||
|
||||
<button on:click|passive>click me</button>
|
||||
<button on:click|nonpassive>click me</button>
|
||||
<button on:click|passive={()=>''}>click me</button>
|
||||
<button on:click|nonpassive={()=>''}>click me</button>
|
||||
<button on:click|passive={foo}>click me</button>
|
||||
<button on:click|nonpassive={foo}>click me</button>
|
||||
<button on:click|stopPropagation|passive={()=>''}>click me</button>
|
||||
<button on:click|trusted|nonpassive={()=>''}>click me</button>
|
||||
|
||||
<button
|
||||
on:click|passive={()=>''}
|
||||
on:click
|
||||
on:click={()=>''}
|
||||
>click me</button>
|
||||
|
||||
<button
|
||||
on:click|nonpassive={()=>''}
|
||||
on:click
|
||||
on:click={()=>''}
|
||||
>click me</button>
|
||||
|
||||
|
||||
<button
|
||||
on:click
|
||||
on:click={foo}
|
||||
on:blur={foo}
|
||||
on:click={()=>''}
|
||||
on:click|trusted|preventDefault|once={()=>''}
|
||||
on:blur|trusted|preventDefault|once
|
||||
>
|
||||
click me
|
||||
</button>
|
||||
|
||||
|
||||
<Button on:click={() => 'leave untouched'} on:click>click me</Button>
|
||||
|
||||
<div>
|
||||
<button
|
||||
on:click={() => {
|
||||
console.log('hi');
|
||||
}}>click me</button
|
||||
>
|
||||
<button
|
||||
on:click|preventDefault={() => {
|
||||
console.log('hi');
|
||||
}}>click me</button
|
||||
>
|
||||
<button on:click|preventDefault={() => (count += 1)}>click me</button>
|
||||
</div>
|
||||
@ -0,0 +1,89 @@
|
||||
<script>
|
||||
import { createBubbler as createBubbler_1, handlers as handlers_1, preventDefault as preventDefault_1, stopPropagation as stopPropagation_1, stopImmediatePropagation as stopImmediatePropagation_1, self as self_1, trusted as trusted_1, once as once_1, passive as passive_1, nonpassive as nonpassive_1 } from 'svelte/legacy';
|
||||
const bubble_1 = createBubbler_1();
|
||||
|
||||
let handlers;
|
||||
let stopPropagation;
|
||||
let preventDefault;
|
||||
let stopImmediatePropagation;
|
||||
let once;
|
||||
let trusted;
|
||||
let self;
|
||||
let createBubbler;
|
||||
let bubble;
|
||||
let passive;
|
||||
let nonpassive;
|
||||
</script>
|
||||
|
||||
<button onclick={handlers_1(() => console.log('hi'), bubble_1('click'))}>click me</button>
|
||||
<button onclick={handlers_1(function(){ console.log('hi') }, bubble_1('click'))}>click me</button>
|
||||
<button onclick={handlers_1(() => console.log('before'), bubble_1('click'), () => console.log('after'))}
|
||||
>click me</button
|
||||
>
|
||||
<button onclick={handlers_1(bubble_1('click'), foo)}>click me</button>
|
||||
<button onclick={bubble_1('click')}>click me</button>
|
||||
|
||||
<button ondblclick={() => console.log('hi')}>click me</button>
|
||||
<button ontoggle={bubble_1('toggle')}>click me</button>
|
||||
<button oncustom-event={() => 'hi'}>click me</button>
|
||||
<button oncustom-event-bubble={bubble_1('custom-event-bubble')}>click me</button>
|
||||
|
||||
<button onclick={preventDefault_1(() => (searching = true))}>click me</button>
|
||||
<button onclick={preventDefault_1(() => '')}>click me</button>
|
||||
<button onclick={stopPropagation_1(() => {})}>click me</button>
|
||||
<button onclick={stopImmediatePropagation_1(() => '')}>click me</button>
|
||||
<button onclickcapture={() => ''}>click me</button>
|
||||
<button onclick={self_1(() => '')}>click me</button>
|
||||
<button onclick={trusted_1(() => '')}>click me</button>
|
||||
<button onclick={once_1(() => '')}>click me</button>
|
||||
|
||||
<button onclick={stopPropagation_1(preventDefault_1(() => ''))}>click me</button>
|
||||
<button onclick={stopImmediatePropagation_1(stopPropagation_1(() => {}))}>click me</button>
|
||||
<button onclick={self_1(stopImmediatePropagation_1(() => ''))}>click me</button>
|
||||
<button onclick={trusted_1(self_1(() => ''))}>click me</button>
|
||||
<button onclick={once_1(trusted_1(() => ''))}>click me</button>
|
||||
<button onclick={once_1(preventDefault_1(() => ''))}>click me</button>
|
||||
|
||||
<button use:passive_1={['click', () => bubble_1('click')]}>click me</button>
|
||||
<button use:nonpassive_1={['click', () => bubble_1('click')]}>click me</button>
|
||||
<button use:passive_1={['click', () => ()=>'']}>click me</button>
|
||||
<button use:nonpassive_1={['click', () => ()=>'']}>click me</button>
|
||||
<button use:passive_1={['click', () => foo]}>click me</button>
|
||||
<button use:nonpassive_1={['click', () => foo]}>click me</button>
|
||||
<button use:passive_1={['click', () => stopPropagation_1(()=>'')]}>click me</button>
|
||||
<button use:nonpassive_1={['click', () => trusted_1(()=>'')]}>click me</button>
|
||||
|
||||
<button
|
||||
use:passive_1={['click', () => ()=>'']}
|
||||
onclick={handlers_1(bubble_1('click'), ()=>'')}
|
||||
>click me</button>
|
||||
|
||||
<button
|
||||
use:nonpassive_1={['click', () => ()=>'']}
|
||||
onclick={handlers_1(bubble_1('click'), ()=>'')}
|
||||
>click me</button>
|
||||
|
||||
|
||||
<button
|
||||
onclick={handlers_1(bubble_1('click'), foo, ()=>'', once_1(trusted_1(preventDefault_1(()=>''))))}
|
||||
onblur={handlers_1(foo, once_1(trusted_1(preventDefault_1(bubble_1('blur')))))}
|
||||
>
|
||||
click me
|
||||
</button>
|
||||
|
||||
|
||||
<Button on:click={() => 'leave untouched'} on:click>click me</Button>
|
||||
|
||||
<div>
|
||||
<button
|
||||
onclick={() => {
|
||||
console.log('hi');
|
||||
}}>click me</button
|
||||
>
|
||||
<button
|
||||
onclick={preventDefault_1(() => {
|
||||
console.log('hi');
|
||||
})}>click me</button
|
||||
>
|
||||
<button onclick={preventDefault_1(() => (count += 1))}>click me</button>
|
||||
</div>
|
||||
Loading…
Reference in new issue