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'); state.legacy_imports.add('nonpassive');
} }
explicit_passive_handlers.push({ 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, indent,
needs_line_delete needs_line_delete
}); });

@ -1,3 +1,4 @@
/** @import { ActionReturn } from 'svelte/action' */
import { noop } from '../../../shared/utils.js'; import { noop } from '../../../shared/utils.js';
import { user_pre_effect } from '../../reactivity/effects.js'; import { user_pre_effect } from '../../reactivity/effects.js';
import { on } from '../elements/events.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 * @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(() => { user_pre_effect(() => {
return on(node, event, handler() ?? noop, { return on(node, event, handler() ?? noop, {
passive: true 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 * @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(() => { user_pre_effect(() => {
return on(node, event, handler() ?? noop, { return on(node, event, handler() ?? noop, {
passive: false passive: false

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

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

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

Loading…
Cancel
Save