Skip to content

feat: Forward all events (on:*) #8356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 25 commits into from
Closed

feat: Forward all events (on:*) #8356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
a816f02
svelte-display implementation
adiguba Oct 12, 2022
d983d63
Merge branch 'master' into master
adiguba Oct 14, 2022
70ec60c
Merge branch 'master' into master
adiguba Oct 18, 2022
0ddf94b
first version
adiguba Mar 2, 2023
9e9b135
Merge remote-tracking branch 'upstream/master'
adiguba Mar 2, 2023
aa46239
Merge remote-tracking branch 'upstream/master' into on-any
adiguba Mar 2, 2023
719f3a6
stopImmediatePropagation
adiguba Mar 2, 2023
617b911
fix: bubble alias
adiguba Mar 3, 2023
492dd82
fix ssr
adiguba Mar 3, 2023
d368f67
false event
adiguba Mar 3, 2023
301dbc3
rewrite
adiguba Mar 3, 2023
1460949
optimize
adiguba Mar 3, 2023
c18e372
warnings/errors
adiguba Mar 3, 2023
e078be2
Merge remote-tracking branch 'upstream/master' into on-any
adiguba Mar 4, 2023
8c422a4
Merge branch 'master' of https://github.com/adiguba/svelte
adiguba Mar 4, 2023
fdd7226
Merge remote-tracking branch 'upstream/master'
adiguba Mar 4, 2023
4e0ba4f
Merge branch 'master' of https://github.com/adiguba/svelte
adiguba Mar 4, 2023
ae57475
rollback to upstream/master
adiguba Mar 4, 2023
e9fa4fc
Merge remote-tracking branch 'origin/master' into on-any
adiguba Mar 4, 2023
402ef4d
rewrite
adiguba Mar 4, 2023
c2d9113
fix HMR
adiguba Mar 4, 2023
e98490a
Merge branch 'on-any' of https://github.com/adiguba/svelte into on-any
adiguba Mar 4, 2023
b7950e3
errors
adiguba Mar 4, 2023
ae1b3b4
error for on:*={handler}
adiguba Mar 4, 2023
6ce3d2f
fix lint
adiguba Mar 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 107 additions & 103 deletions elements/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,148 +63,152 @@ export type MessageEventHandler<T extends EventTarget> = EventHandler<MessageEve
// ----------------------------------------------------------------------

export interface DOMAttributes<T extends EventTarget> {

// forward any event
'on:*'?: never;

// Clipboard Events
'on:copy'?: ClipboardEventHandler<T> | undefined | null;
'on:cut'?: ClipboardEventHandler<T> | undefined | null;
'on:paste'?: ClipboardEventHandler<T> | undefined | null;
'on:copy'?: ClipboardEventHandler<T> | undefined | null | false;
'on:cut'?: ClipboardEventHandler<T> | undefined | null | false;
'on:paste'?: ClipboardEventHandler<T> | undefined | null | false;

// Composition Events
'on:compositionend'?: CompositionEventHandler<T> | undefined | null;
'on:compositionstart'?: CompositionEventHandler<T> | undefined | null;
'on:compositionupdate'?: CompositionEventHandler<T> | undefined | null;
'on:compositionend'?: CompositionEventHandler<T> | undefined | null | false;
'on:compositionstart'?: CompositionEventHandler<T> | undefined | null | false;
'on:compositionupdate'?: CompositionEventHandler<T> | undefined | null | false;

// Focus Events
'on:focus'?: FocusEventHandler<T> | undefined | null;
'on:focusin'?: FocusEventHandler<T> | undefined | null;
'on:focusout'?: FocusEventHandler<T> | undefined | null;
'on:blur'?: FocusEventHandler<T> | undefined | null;
'on:focus'?: FocusEventHandler<T> | undefined | null | false;
'on:focusin'?: FocusEventHandler<T> | undefined | null | false;
'on:focusout'?: FocusEventHandler<T> | undefined | null | false;
'on:blur'?: FocusEventHandler<T> | undefined | null | false;

// Form Events
'on:change'?: FormEventHandler<T> | undefined | null;
'on:beforeinput'?: EventHandler<InputEvent, T> | undefined | null;
'on:input'?: FormEventHandler<T> | undefined | null;
'on:reset'?: FormEventHandler<T> | undefined | null;
'on:submit'?: EventHandler<Event & { readonly submitter: HTMLElement | null; }, T> | undefined | null; // TODO make this SubmitEvent once we require TS>=4.4
'on:invalid'?: EventHandler<Event, T> | undefined | null;
'on:formdata'?: EventHandler<Event & { readonly formData: FormData; }, T> | undefined | null; // TODO make this FormDataEvent once we require TS>=4.4
'on:change'?: FormEventHandler<T> | undefined | null | false;
'on:beforeinput'?: EventHandler<InputEvent, T> | undefined | null | false;
'on:input'?: FormEventHandler<T> | undefined | null | false;
'on:reset'?: FormEventHandler<T> | undefined | null | false;
'on:submit'?: EventHandler<Event & { readonly submitter: HTMLElement | null | false; }, T> | undefined | null | false; // TODO make this SubmitEvent once we require TS>=4.4
'on:invalid'?: EventHandler<Event, T> | undefined | null | false;
'on:formdata'?: EventHandler<Event & { readonly formData: FormData; }, T> | undefined | null | false; // TODO make this FormDataEvent once we require TS>=4.4

// Image Events
'on:load'?: EventHandler | undefined | null;
'on:error'?: EventHandler | undefined | null; // also a Media Event
'on:load'?: EventHandler | undefined | null | false;
'on:error'?: EventHandler | undefined | null | false; // also a Media Event

// Detail Events
'on:toggle'?: EventHandler<Event, T> | undefined | null;
'on:toggle'?: EventHandler<Event, T> | undefined | null | false;

// Keyboard Events
'on:keydown'?: KeyboardEventHandler<T> | undefined | null;
'on:keypress'?: KeyboardEventHandler<T> | undefined | null;
'on:keyup'?: KeyboardEventHandler<T> | undefined | null;
'on:keydown'?: KeyboardEventHandler<T> | undefined | null | false;
'on:keypress'?: KeyboardEventHandler<T> | undefined | null | false;
'on:keyup'?: KeyboardEventHandler<T> | undefined | null | false;

// Media Events
'on:abort'?: EventHandler<Event, T> | undefined | null;
'on:canplay'?: EventHandler<Event, T> | undefined | null;
'on:canplaythrough'?: EventHandler<Event, T> | undefined | null;
'on:cuechange'?: EventHandler<Event, T> | undefined | null;
'on:durationchange'?: EventHandler<Event, T> | undefined | null;
'on:emptied'?: EventHandler<Event, T> | undefined | null;
'on:encrypted'?: EventHandler<Event, T> | undefined | null;
'on:ended'?: EventHandler<Event, T> | undefined | null;
'on:loadeddata'?: EventHandler<Event, T> | undefined | null;
'on:loadedmetadata'?: EventHandler<Event, T> | undefined | null;
'on:loadstart'?: EventHandler<Event, T> | undefined | null;
'on:pause'?: EventHandler<Event, T> | undefined | null;
'on:play'?: EventHandler<Event, T> | undefined | null;
'on:playing'?: EventHandler<Event, T> | undefined | null;
'on:progress'?: EventHandler<Event, T> | undefined | null;
'on:ratechange'?: EventHandler<Event, T> | undefined | null;
'on:seeked'?: EventHandler<Event, T> | undefined | null;
'on:seeking'?: EventHandler<Event, T> | undefined | null;
'on:stalled'?: EventHandler<Event, T> | undefined | null;
'on:suspend'?: EventHandler<Event, T> | undefined | null;
'on:timeupdate'?: EventHandler<Event, T> | undefined | null;
'on:volumechange'?: EventHandler<Event, T> | undefined | null;
'on:waiting'?: EventHandler<Event, T> | undefined | null;
'on:abort'?: EventHandler<Event, T> | undefined | null | false;
'on:canplay'?: EventHandler<Event, T> | undefined | null | false;
'on:canplaythrough'?: EventHandler<Event, T> | undefined | null | false;
'on:cuechange'?: EventHandler<Event, T> | undefined | null | false;
'on:durationchange'?: EventHandler<Event, T> | undefined | null | false;
'on:emptied'?: EventHandler<Event, T> | undefined | null | false;
'on:encrypted'?: EventHandler<Event, T> | undefined | null | false;
'on:ended'?: EventHandler<Event, T> | undefined | null | false;
'on:loadeddata'?: EventHandler<Event, T> | undefined | null | false;
'on:loadedmetadata'?: EventHandler<Event, T> | undefined | null | false;
'on:loadstart'?: EventHandler<Event, T> | undefined | null | false;
'on:pause'?: EventHandler<Event, T> | undefined | null | false;
'on:play'?: EventHandler<Event, T> | undefined | null | false;
'on:playing'?: EventHandler<Event, T> | undefined | null | false;
'on:progress'?: EventHandler<Event, T> | undefined | null | false;
'on:ratechange'?: EventHandler<Event, T> | undefined | null | false;
'on:seeked'?: EventHandler<Event, T> | undefined | null | false;
'on:seeking'?: EventHandler<Event, T> | undefined | null | false;
'on:stalled'?: EventHandler<Event, T> | undefined | null | false;
'on:suspend'?: EventHandler<Event, T> | undefined | null | false;
'on:timeupdate'?: EventHandler<Event, T> | undefined | null | false;
'on:volumechange'?: EventHandler<Event, T> | undefined | null | false;
'on:waiting'?: EventHandler<Event, T> | undefined | null | false;

// MouseEvents
'on:auxclick'?: MouseEventHandler<T> | undefined | null;
'on:click'?: MouseEventHandler<T> | undefined | null;
'on:contextmenu'?: MouseEventHandler<T> | undefined | null;
'on:dblclick'?: MouseEventHandler<T> | undefined | null;
'on:drag'?: DragEventHandler<T> | undefined | null;
'on:dragend'?: DragEventHandler<T> | undefined | null;
'on:dragenter'?: DragEventHandler<T> | undefined | null;
'on:dragexit'?: DragEventHandler<T> | undefined | null;
'on:dragleave'?: DragEventHandler<T> | undefined | null;
'on:dragover'?: DragEventHandler<T> | undefined | null;
'on:dragstart'?: DragEventHandler<T> | undefined | null;
'on:drop'?: DragEventHandler<T> | undefined | null;
'on:mousedown'?: MouseEventHandler<T> | undefined | null;
'on:mouseenter'?: MouseEventHandler<T> | undefined | null;
'on:mouseleave'?: MouseEventHandler<T> | undefined | null;
'on:mousemove'?: MouseEventHandler<T> | undefined | null;
'on:mouseout'?: MouseEventHandler<T> | undefined | null;
'on:mouseover'?: MouseEventHandler<T> | undefined | null;
'on:mouseup'?: MouseEventHandler<T> | undefined | null;
'on:auxclick'?: MouseEventHandler<T> | undefined | null | false;
'on:click'?: MouseEventHandler<T> | undefined | null | false;
'on:contextmenu'?: MouseEventHandler<T> | undefined | null | false;
'on:dblclick'?: MouseEventHandler<T> | undefined | null | false;
'on:drag'?: DragEventHandler<T> | undefined | null | false;
'on:dragend'?: DragEventHandler<T> | undefined | null | false;
'on:dragenter'?: DragEventHandler<T> | undefined | null | false;
'on:dragexit'?: DragEventHandler<T> | undefined | null | false;
'on:dragleave'?: DragEventHandler<T> | undefined | null | false;
'on:dragover'?: DragEventHandler<T> | undefined | null | false;
'on:dragstart'?: DragEventHandler<T> | undefined | null | false;
'on:drop'?: DragEventHandler<T> | undefined | null | false;
'on:mousedown'?: MouseEventHandler<T> | undefined | null | false;
'on:mouseenter'?: MouseEventHandler<T> | undefined | null | false;
'on:mouseleave'?: MouseEventHandler<T> | undefined | null | false;
'on:mousemove'?: MouseEventHandler<T> | undefined | null | false;
'on:mouseout'?: MouseEventHandler<T> | undefined | null | false;
'on:mouseover'?: MouseEventHandler<T> | undefined | null | false;
'on:mouseup'?: MouseEventHandler<T> | undefined | null | false;

// Selection Events
'on:select'?: EventHandler<Event, T> | undefined | null;
'on:selectionchange'?: EventHandler<Event, T> | undefined | null;
'on:selectstart'?: EventHandler<Event, T> | undefined | null;
'on:select'?: EventHandler<Event, T> | undefined | null | false;
'on:selectionchange'?: EventHandler<Event, T> | undefined | null | false;
'on:selectstart'?: EventHandler<Event, T> | undefined | null | false;

// Touch Events
'on:touchcancel'?: TouchEventHandler<T> | undefined | null;
'on:touchend'?: TouchEventHandler<T> | undefined | null;
'on:touchmove'?: TouchEventHandler<T> | undefined | null;
'on:touchstart'?: TouchEventHandler<T> | undefined | null;
'on:touchcancel'?: TouchEventHandler<T> | undefined | null | false;
'on:touchend'?: TouchEventHandler<T> | undefined | null | false;
'on:touchmove'?: TouchEventHandler<T> | undefined | null | false;
'on:touchstart'?: TouchEventHandler<T> | undefined | null | false;

// Pointer Events
'on:gotpointercapture'?: PointerEventHandler<T> | undefined | null;
'on:pointercancel'?: PointerEventHandler<T> | undefined | null;
'on:pointerdown'?: PointerEventHandler<T> | undefined | null;
'on:pointerenter'?: PointerEventHandler<T> | undefined | null;
'on:pointerleave'?: PointerEventHandler<T> | undefined | null;
'on:pointermove'?: PointerEventHandler<T> | undefined | null;
'on:pointerout'?: PointerEventHandler<T> | undefined | null;
'on:pointerover'?: PointerEventHandler<T> | undefined | null;
'on:pointerup'?: PointerEventHandler<T> | undefined | null;
'on:lostpointercapture'?: PointerEventHandler<T> | undefined | null;
'on:gotpointercapture'?: PointerEventHandler<T> | undefined | null | false;
'on:pointercancel'?: PointerEventHandler<T> | undefined | null | false;
'on:pointerdown'?: PointerEventHandler<T> | undefined | null | false;
'on:pointerenter'?: PointerEventHandler<T> | undefined | null | false;
'on:pointerleave'?: PointerEventHandler<T> | undefined | null | false;
'on:pointermove'?: PointerEventHandler<T> | undefined | null | false;
'on:pointerout'?: PointerEventHandler<T> | undefined | null | false;
'on:pointerover'?: PointerEventHandler<T> | undefined | null | false;
'on:pointerup'?: PointerEventHandler<T> | undefined | null | false;
'on:lostpointercapture'?: PointerEventHandler<T> | undefined | null | false;

// UI Events
'on:scroll'?: UIEventHandler<T> | undefined | null;
'on:resize'?: UIEventHandler<T> | undefined | null;
'on:scroll'?: UIEventHandler<T> | undefined | null | false;
'on:resize'?: UIEventHandler<T> | undefined | null | false;

// Wheel Events
'on:wheel'?: WheelEventHandler<T> | undefined | null;
'on:wheel'?: WheelEventHandler<T> | undefined | null | false;

// Animation Events
'on:animationstart'?: AnimationEventHandler<T> | undefined | null;
'on:animationend'?: AnimationEventHandler<T> | undefined | null;
'on:animationiteration'?: AnimationEventHandler<T> | undefined | null;
'on:animationstart'?: AnimationEventHandler<T> | undefined | null | false;
'on:animationend'?: AnimationEventHandler<T> | undefined | null | false;
'on:animationiteration'?: AnimationEventHandler<T> | undefined | null | false;

// Transition Events
'on:transitionstart'?: TransitionEventHandler<T> | undefined | null;
'on:transitionrun'?: TransitionEventHandler<T> | undefined | null;
'on:transitionend'?: TransitionEventHandler<T> | undefined | null;
'on:transitioncancel'?: TransitionEventHandler<T> | undefined | null;
'on:transitionstart'?: TransitionEventHandler<T> | undefined | null | false;
'on:transitionrun'?: TransitionEventHandler<T> | undefined | null | false;
'on:transitionend'?: TransitionEventHandler<T> | undefined | null | false;
'on:transitioncancel'?: TransitionEventHandler<T> | undefined | null | false;

// Svelte Transition Events
'on:outrostart'?: EventHandler<CustomEvent<null>, T> | undefined | null;
'on:outroend'?: EventHandler<CustomEvent<null>, T> | undefined | null;
'on:introstart'?: EventHandler<CustomEvent<null>, T> | undefined | null;
'on:introend'?: EventHandler<CustomEvent<null>, T> | undefined | null;
'on:outrostart'?: EventHandler<CustomEvent<null>, T> | undefined | null | false;
'on:outroend'?: EventHandler<CustomEvent<null>, T> | undefined | null | false;
'on:introstart'?: EventHandler<CustomEvent<null>, T> | undefined | null | false;
'on:introend'?: EventHandler<CustomEvent<null>, T> | undefined | null | false;

// Message Events
'on:message'?: MessageEventHandler<T> | undefined | null;
'on:messageerror'?: MessageEventHandler<T> | undefined | null;
'on:message'?: MessageEventHandler<T> | undefined | null | false;
'on:messageerror'?: MessageEventHandler<T> | undefined | null | false;

// Document Events
'on:visibilitychange'?: EventHandler<Event, T> | undefined | null;
'on:visibilitychange'?: EventHandler<Event, T> | undefined | null | false;

// Global Events
'on:cancel'?: EventHandler<Event, T> | undefined | null;
'on:close'?: EventHandler<Event, T> | undefined | null;
'on:fullscreenchange'?: EventHandler<Event, T> | undefined | null;
'on:fullscreenerror'?: EventHandler<Event, T> | undefined | null;
'on:cancel'?: EventHandler<Event, T> | undefined | null | false;
'on:close'?: EventHandler<Event, T> | undefined | null | false;
'on:fullscreenchange'?: EventHandler<Event, T> | undefined | null | false;
'on:fullscreenerror'?: EventHandler<Event, T> | undefined | null | false;
}

// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
Expand Down
14 changes: 13 additions & 1 deletion src/compiler/compile/compiler_errors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,5 +289,17 @@ export default {
invalid_style_directive_modifier: (valid: string) => ({
code: 'invalid-style-directive-modifier',
message: `Valid modifiers for style directives are: ${valid}`
})
}),
invalid_forward_event_alias_count: {
code: 'invalid-forward-event-alias-count',
message: 'The on: forward directive accept only one modifier (the forward alias)'
},
invalid_forward_event_alias_any: {
code: 'invalid-forward-event-alias-any',
message: 'The alias for on:* must be of the following form : "prefix*" or "*suffix"'
},
invalid_foward_event_any: {
code: 'invalid-forward-event-any',
message: 'The directive on:* cannot be used with an handler'
}
};
8 changes: 6 additions & 2 deletions src/compiler/compile/compiler_warnings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,10 @@ export default {
},
invalid_rest_eachblock_binding: (rest_element_name: string) => ({
code: 'invalid-rest-eachblock-binding',
message: `...${rest_element_name} operator will create a new object and binding propagation with original object will not work`
})
message: `...${rest_element_name} operator will create a new object and binding propogation with original object will not work`
}),
invalid_forward_event_alias: {
code: 'invalid-forward-event-alias',
message: 'Forward-event accept only one modifier : the event alias name'
}
};
59 changes: 1 addition & 58 deletions src/compiler/compile/nodes/Element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { namespaces } from '../../utils/namespaces';
import map_children from './shared/map_children';
import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } from '../../utils/patterns';
import fuzzymatch from '../../utils/fuzzymatch';
import list from '../../utils/list';
import Let from './Let';
import TemplateScope from './shared/TemplateScope';
import { INode } from './interfaces';
Expand Down Expand Up @@ -180,25 +179,6 @@ function get_implicit_role(name: string, attribute_map: Map<string, Attribute>)

const invisible_elements = new Set(['meta', 'html', 'script', 'style']);

const valid_modifiers = new Set([
'preventDefault',
'stopPropagation',
'stopImmediatePropagation',
'capture',
'once',
'passive',
'nonpassive',
'self',
'trusted'
]);

const passive_events = new Set([
'wheel',
'touchstart',
'touchmove',
'touchend',
'touchcancel'
]);

const react_attributes = new Map([
['className', 'class'],
Expand Down Expand Up @@ -1041,44 +1021,7 @@ export default class Element extends Node {
}

validate_event_handlers() {
const { component } = this;

this.handlers.forEach(handler => {
if (handler.modifiers.has('passive') && handler.modifiers.has('preventDefault')) {
return component.error(handler, compiler_errors.invalid_event_modifier_combination('passive', 'preventDefault'));
}

if (handler.modifiers.has('passive') && handler.modifiers.has('nonpassive')) {
return component.error(handler, compiler_errors.invalid_event_modifier_combination('passive', 'nonpassive'));
}

handler.modifiers.forEach(modifier => {
if (!valid_modifiers.has(modifier)) {
return component.error(handler, compiler_errors.invalid_event_modifier(list(Array.from(valid_modifiers))));
}

if (modifier === 'passive') {
if (passive_events.has(handler.name)) {
if (handler.can_make_passive) {
component.warn(handler, compiler_warnings.redundant_event_modifier_for_touch);
}
} else {
component.warn(handler, compiler_warnings.redundant_event_modifier_passive);
}
}

if (component.compile_options.legacy && (modifier === 'once' || modifier === 'passive')) {
// TODO this could be supported, but it would need a few changes to
// how event listeners work
return component.error(handler, compiler_errors.invalid_event_modifier_legacy(modifier));
}
});

if (passive_events.has(handler.name) && handler.can_make_passive && !handler.modifiers.has('preventDefault') && !handler.modifiers.has('nonpassive')) {
// touch/wheel events should be passive by default
handler.modifiers.add('passive');
}
});
this.handlers.forEach(h => h.validate());
}

is_media_node() {
Expand Down
Loading