tweak passive/nonpassive types to make them more compact and show up as deprecated

pull/13362/head
Rich Harris 2 years ago
parent a81a1d4ed6
commit 06c50aaf51

@ -776,7 +776,7 @@ function handle_events(element, state) {
state.legacy_imports.add('nonpassive');
}
explicit_passive_handlers.push({
handler: `use:${has_nonpassive ? state.legacy_imports_names.nonpassive : state.legacy_imports_names.passive}={{ handler: () => ${body}, event: '${node.name}' }}`,
handler: `use:${has_nonpassive ? state.legacy_imports_names.nonpassive : state.legacy_imports_names.passive}={['${node.name}', () => ${body}]}`,
indent,
needs_line_delete
});

@ -1,3 +1,4 @@
/** @import { ActionReturn } from 'svelte/action' */
import { noop } from '../../../shared/utils.js';
import { user_pre_effect } from '../../reactivity/effects.js';
import { on } from '../elements/events.js';
@ -99,11 +100,12 @@ export function preventDefault(fn) {
}
/**
* Substitute for the `passive` event modifier. It's an action.
* Substitute for the `passive` event modifier, implemented as an action
* @deprecated
* @type {import("svelte/action").Action<HTMLElement, { handler: () => EventListener, event: string }>}
* @param {HTMLElement} node
* @param {[event: string, handler: () => EventListener]} options
*/
export function passive(node, { handler, event }) {
export function passive(node, [event, handler]) {
user_pre_effect(() => {
return on(node, event, handler() ?? noop, {
passive: true
@ -112,11 +114,12 @@ export function passive(node, { handler, event }) {
}
/**
* Substitute for the `nonpassive` event modifier. It's an action.
* Substitute for the `nonpassive` event modifier, implemented as an action
* @deprecated
* @type {import("svelte/action").Action<HTMLElement, { handler: () => EventListener, event: string }>}
* @param {HTMLElement} node
* @param {[event: string, handler: () => EventListener]} options
*/
export function nonpassive(node, { handler, event }) {
export function nonpassive(node, [event, handler]) {
user_pre_effect(() => {
return on(node, event, handler() ?? noop, {
passive: false

@ -54,27 +54,27 @@
<button onclick={once_1(trusted_1(() => ''))}>click me</button>
<button onclick={once_1(preventDefault_1(() => ''))}>click me</button>
<button use:passive_1={{ handler: () => bubble_1('click'), event: 'click' }}>click me</button>
<button use:nonpassive_1={{ handler: () => bubble_1('click'), event: 'click' }}>click me</button>
<button use:passive_1={{ handler: () => ()=>'', event: 'click' }}>click me</button>
<button use:nonpassive_1={{ handler: () => ()=>'', event: 'click' }}>click me</button>
<button use:passive_1={{ handler: () => foo, event: 'click' }}>click me</button>
<button use:nonpassive_1={{ handler: () => foo, event: 'click' }}>click me</button>
<button use:passive_1={{ handler: () => stopPropagation_1(()=>''), event: 'click' }}>click me</button>
<button use:nonpassive_1={{ handler: () => trusted_1(()=>''), event: 'click' }}>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
onclick={handlers_1(
bubble_1('click'),
()=>'')}
use:passive_1={{ handler: () => ()=>'', event: 'click' }}
use:passive_1={['click', () => ()=>'']}
>click me</button>
<button
onclick={handlers_1(
bubble_1('click'),
()=>'')}
use:nonpassive_1={{ handler: () => ()=>'', event: 'click' }}
use:nonpassive_1={['click', () => ()=>'']}
>click me</button>
@ -106,4 +106,4 @@
})}>click me</button
>
<button onclick={preventDefault_1(() => (count += 1))}>click me</button>
</div>
</div>

@ -36,13 +36,13 @@
<button on:click|stopPropagation|passive={()=>''}>click me</button>
<button on:click|trusted|nonpassive={()=>''}>click me</button>
<button
<button
on:click|passive={()=>''}
on:click
on:click={()=>''}
>click me</button>
<button
<button
on:click|nonpassive={()=>''}
on:click
on:click={()=>''}

@ -43,27 +43,27 @@
<button onclick={once(trusted(() => ''))}>click me</button>
<button onclick={once(preventDefault(() => ''))}>click me</button>
<button use:passive={{ handler: () => bubble('click'), event: 'click' }}>click me</button>
<button use:nonpassive={{ handler: () => bubble('click'), event: 'click' }}>click me</button>
<button use:passive={{ handler: () => ()=>'', event: 'click' }}>click me</button>
<button use:nonpassive={{ handler: () => ()=>'', event: 'click' }}>click me</button>
<button use:passive={{ handler: () => foo, event: 'click' }}>click me</button>
<button use:nonpassive={{ handler: () => foo, event: 'click' }}>click me</button>
<button use:passive={{ handler: () => stopPropagation(()=>''), event: 'click' }}>click me</button>
<button use:nonpassive={{ handler: () => trusted(()=>''), event: 'click' }}>click me</button>
<button use:passive={['click', () => bubble('click')]}>click me</button>
<button use:nonpassive={['click', () => bubble('click')]}>click me</button>
<button use:passive={['click', () => ()=>'']}>click me</button>
<button use:nonpassive={['click', () => ()=>'']}>click me</button>
<button use:passive={['click', () => foo]}>click me</button>
<button use:nonpassive={['click', () => foo]}>click me</button>
<button use:passive={['click', () => stopPropagation(()=>'')]}>click me</button>
<button use:nonpassive={['click', () => trusted(()=>'')]}>click me</button>
<button
<button
onclick={handlers(
bubble('click'),
()=>'')}
use:passive={{ handler: () => ()=>'', event: 'click' }}
use:passive={['click', () => ()=>'']}
>click me</button>
<button
<button
onclick={handlers(
bubble('click'),
()=>'')}
use:nonpassive={{ handler: () => ()=>'', event: 'click' }}
use:nonpassive={['click', () => ()=>'']}
>click me</button>
@ -95,4 +95,4 @@
})}>click me</button
>
<button onclick={preventDefault(() => (count += 1))}>click me</button>
</div>
</div>

@ -1672,20 +1672,16 @@ declare module 'svelte/legacy' {
* @deprecated
* */
export function preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;
export function passive<Node extends HTMLElement>(node: Node, parameter: {
handler: () => EventListener;
event: string;
}): void | import("svelte/action").ActionReturn<{
handler: () => EventListener;
event: string;
}, any>;
export function nonpassive<Node extends HTMLElement>(node: Node, parameter: {
handler: () => EventListener;
event: string;
}): void | import("svelte/action").ActionReturn<{
handler: () => EventListener;
event: string;
}, any>;
/**
* Substitute for the `passive` event modifier, implemented as an action
* @deprecated
* */
export function passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;
/**
* Substitute for the `nonpassive` event modifier, implemented as an action
* @deprecated
* */
export function nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;
export {};
}

Loading…
Cancel
Save