Skip to content

Use browser event names for top-level event types in React DOM #12629

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

Merged
gaearon merged 46 commits into from
May 15, 2018
Merged

Use browser event names for top-level event types in React DOM #12629

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
d02d86a
Add TopLevelEventTypes
philipp-spiess Apr 16, 2018
45713ce
Fix `ReactBrowserEventEmitter`
philipp-spiess Apr 16, 2018
5f11da0
Fix EventPluginUtils
philipp-spiess Apr 16, 2018
58a24ba
Fix TapEventPlugin
philipp-spiess Apr 16, 2018
390fb51
Fix ResponderEventPlugin
philipp-spiess Apr 16, 2018
3dcbf4d
Update ReactDOMFiberComponent
philipp-spiess Apr 16, 2018
1fb5cd8
Fix BeforeInputEventPlugin
philipp-spiess Apr 16, 2018
96ce3cd
Fix ChangeEventPlugin
philipp-spiess Apr 16, 2018
737626a
Fix EnterLeaveEventPlugin
philipp-spiess Apr 16, 2018
a03d896
Add missing non top event type used in ChangeEventPlugin
philipp-spiess Apr 16, 2018
d58cd30
Fix SelectEventPlugin
philipp-spiess Apr 16, 2018
e1b9166
Fix SimpleEventPlugin
philipp-spiess Apr 16, 2018
f07a64f
Fix outstanding Flow issues and move TopLevelEventTypes
philipp-spiess Apr 16, 2018
da64f27
Inline a list of all events in `ReactTestUtils`
philipp-spiess Apr 16, 2018
16c39e5
Fix tests
philipp-spiess Apr 17, 2018
4a7114e
Make it pretty
philipp-spiess Apr 17, 2018
2a87568
Fix completly unrelated typo
philipp-spiess Apr 17, 2018
0d864ca
Don’t use map constructor because of IE11
philipp-spiess Apr 17, 2018
586708e
Update typings, revert changes to native code
philipp-spiess Apr 21, 2018
12c9ac3
Make topLevelTypes in ResponderEventPlugin injectable and create DOM …
philipp-spiess Apr 21, 2018
9d684fc
Set proper dependencies for DOMResponderEventPlugin
philipp-spiess Apr 21, 2018
c27ab85
Prettify
philipp-spiess Apr 21, 2018
4043f87
Make some react dom tests no longer depend on internal API
philipp-spiess Apr 21, 2018
f029940
Use factories to create top level speific generic event modules
philipp-spiess Apr 21, 2018
0ace5a1
Remove unused dependency
philipp-spiess Apr 21, 2018
653492c
Revert exposed module renaming, hide store creation, and inline depen…
philipp-spiess Apr 23, 2018
7e8b34f
Add Flow types to createResponderEventPlugin and its consumers
philipp-spiess Apr 23, 2018
2d21c09
Remove unused dependency
philipp-spiess Apr 23, 2018
d1c390b
Use opaque flow type for TopLevelType
philipp-spiess Apr 24, 2018
ec0b881
Add missing semis
philipp-spiess Apr 24, 2018
352dfbf
Use raw event names as top level identifer
philipp-spiess Apr 24, 2018
ac6e3e2
Upgrade baylon
philipp-spiess Apr 24, 2018
4a7bf07
Clean up flow types
philipp-spiess Apr 24, 2018
3ebd359
Revert Map changes of ReactBrowserEventEmitter
philipp-spiess Apr 24, 2018
6095b0f
Upgrade babel-* packages
philipp-spiess Apr 24, 2018
bb057bc
Revert Map changes of SimpleEventPlugin
philipp-spiess Apr 24, 2018
6800d01
Clean up ReactTestUtils
philipp-spiess Apr 24, 2018
4d76b15
Add missing semi
philipp-spiess Apr 24, 2018
af02875
Fix Flow issue
philipp-spiess Apr 25, 2018
c1f6b38
Make TopLevelType clearer
philipp-spiess Apr 25, 2018
0cb8fad
Favor for loops
philipp-spiess Apr 25, 2018
df7f91d
Explain the new DOMTopLevelEventTypes concept
philipp-spiess Apr 25, 2018
15c2723
Use static injection for Responder plugin types
gaearon May 4, 2018
4b2ca6b
Remove null check and rely on flow checks
philipp-spiess May 7, 2018
e19f37b
Add missing ResponderEventPlugin dependencies
philipp-spiess May 11, 2018
0c6982d
Merge branch 'master' into no-top-level-events
gaearon May 15, 2018
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
Prev Previous commit
Next Next commit
Clean up flow types
  • Loading branch information
@philipp-spiess
philipp-spiess committed Apr 24, 2018
commit 4a7bf074b8b2d6f7fb5a12db44b9ca793ef0ab3f
15 changes: 13 additions & 2 deletions packages/events/TopLevelEventTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,16 @@
* @flow
*/

// eslint-disable-next-line no-undef
export opaque type TopLevelType = string;
import type {DOMTopLevelEventType} from 'react-dom/src/events/DOMTopLevelEventTypes';
Copy link
Contributor Author

@philipp-spiess philipp-spiess Apr 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By importing the type from the react-dom module, we can use an opaque type and avoid leaking the underlying type in any other module.

Defining the opaque type in DOMTopLevelEventTypes makes the types a lot easier but introduces this not-so-nice type dependency on react-dom.


export type TopLevelType =
| DOMTopLevelEventType
| 'topMouseDown'
Copy link
Collaborator

@gaearon gaearon Apr 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a comment clarifying these are RN types? Or even declare them separately as RNTopLevelEventType and use that in the union?

| 'topMouseMove'
| 'topMouseUp'
| 'topScroll'
| 'topSelectionChange'
| 'topTouchCancel'
| 'topTouchEnd'
| 'topTouchMove'
| 'topTouchStart'
228 changes: 151 additions & 77 deletions packages/react-dom/src/events/DOMTopLevelEventTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,87 +10,161 @@
import type {TopLevelType} from 'events/TopLevelEventTypes';
import getVendorPrefixedEventName from './getVendorPrefixedEventName';

export const TOP_ABORT = (('abort': any): TopLevelType);
export const TOP_ANIMATION_END = ((getVendorPrefixedEventName(
// eslint-disable-next-line no-undef
Copy link
Contributor Author

@philipp-spiess philipp-spiess Apr 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint is weird about the opaque type export 🤷‍♀️

export opaque type DOMTopLevelEventType =
| 'abort'
| 'animationend'
| 'animationiteration'
| 'animationstart'
| 'blur'
| 'canplay'
| 'canplaythrough'
| 'cancel'
| 'change'
| 'click'
| 'close'
| 'compositionend'
| 'compositionstart'
| 'compositionupdate'
| 'contextmenu'
| 'copy'
| 'cut'
| 'dblclick'
| 'drag'
| 'dragend'
| 'dragenter'
| 'dragexit'
| 'dragleave'
| 'dragover'
| 'dragstart'
| 'drop'
| 'durationchange'
| 'emptied'
| 'encrypted'
| 'ended'
| 'error'
| 'focus'
| 'input'
| 'invalid'
| 'keydown'
| 'keypress'
| 'keyup'
| 'load'
| 'loadstart'
| 'loadeddata'
| 'loadedmetadata'
| 'mousedown'
| 'mousemove'
| 'mouseout'
| 'mouseover'
| 'mouseup'
| 'paste'
| 'pause'
| 'play'
| 'playing'
| 'progress'
| 'ratechange'
| 'reset'
| 'scroll'
| 'seeked'
| 'seeking'
| 'selectionchange'
| 'stalled'
| 'submit'
| 'suspend'
| 'textInput'
| 'timeupdate'
| 'toggle'
| 'touchcancel'
| 'touchend'
| 'touchmove'
| 'touchstart'
| 'transitionend'
| 'volumechange'
| 'waiting'
| 'wheel';

export const TOP_ABORT: TopLevelType = 'abort';
export const TOP_ANIMATION_END: TopLevelType = getVendorPrefixedEventName(
'animationend',
): any): TopLevelType);
export const TOP_ANIMATION_ITERATION = ((getVendorPrefixedEventName(
);
export const TOP_ANIMATION_ITERATION: TopLevelType = getVendorPrefixedEventName(
'animationiteration',
): any): TopLevelType);
export const TOP_ANIMATION_START = ((getVendorPrefixedEventName(
);
export const TOP_ANIMATION_START: TopLevelType = getVendorPrefixedEventName(
'animationstart',
): any): TopLevelType);
export const TOP_BLUR = (('blur': any): TopLevelType);
export const TOP_CAN_PLAY = (('canplay': any): TopLevelType);
export const TOP_CAN_PLAY_THROUGH = (('canplaythrough': any): TopLevelType);
export const TOP_CANCEL = (('cancel': any): TopLevelType);
export const TOP_CHANGE = (('change': any): TopLevelType);
export const TOP_CLICK = (('click': any): TopLevelType);
export const TOP_CLOSE = (('close': any): TopLevelType);
export const TOP_COMPOSITION_END = (('compositionend': any): TopLevelType);
export const TOP_COMPOSITION_START = (('compositionstart': any): TopLevelType);
export const TOP_COMPOSITION_UPDATE = (('compositionupdate': any): TopLevelType);
export const TOP_CONTEXT_MENU = (('contextmenu': any): TopLevelType);
export const TOP_COPY = (('copy': any): TopLevelType);
export const TOP_CUT = (('cut': any): TopLevelType);
export const TOP_DOUBLE_CLICK = (('dblclick': any): TopLevelType);
export const TOP_DRAG = (('drag': any): TopLevelType);
export const TOP_DRAG_END = (('dragend': any): TopLevelType);
export const TOP_DRAG_ENTER = (('dragenter': any): TopLevelType);
export const TOP_DRAG_EXIT = (('dragexit': any): TopLevelType);
export const TOP_DRAG_LEAVE = (('dragleave': any): TopLevelType);
export const TOP_DRAG_OVER = (('dragover': any): TopLevelType);
export const TOP_DRAG_START = (('dragstart': any): TopLevelType);
export const TOP_DROP = (('drop': any): TopLevelType);
export const TOP_DURATION_CHANGE = (('durationchange': any): TopLevelType);
export const TOP_EMPTIED = (('emptied': any): TopLevelType);
export const TOP_ENCRYPTED = (('encrypted': any): TopLevelType);
export const TOP_ENDED = (('ended': any): TopLevelType);
export const TOP_ERROR = (('error': any): TopLevelType);
export const TOP_FOCUS = (('focus': any): TopLevelType);
export const TOP_INPUT = (('input': any): TopLevelType);
export const TOP_INVALID = (('invalid': any): TopLevelType);
export const TOP_KEY_DOWN = (('keydown': any): TopLevelType);
export const TOP_KEY_PRESS = (('keypress': any): TopLevelType);
export const TOP_KEY_UP = (('keyup': any): TopLevelType);
export const TOP_LOAD = (('load': any): TopLevelType);
export const TOP_LOAD_START = (('loadstart': any): TopLevelType);
export const TOP_LOADED_DATA = (('loadeddata': any): TopLevelType);
export const TOP_LOADED_METADATA = (('loadedmetadata': any): TopLevelType);
export const TOP_MOUSE_DOWN = (('mousedown': any): TopLevelType);
export const TOP_MOUSE_MOVE = (('mousemove': any): TopLevelType);
export const TOP_MOUSE_OUT = (('mouseout': any): TopLevelType);
export const TOP_MOUSE_OVER = (('mouseover': any): TopLevelType);
export const TOP_MOUSE_UP = (('mouseup': any): TopLevelType);
export const TOP_PASTE = (('paste': any): TopLevelType);
export const TOP_PAUSE = (('pause': any): TopLevelType);
export const TOP_PLAY = (('play': any): TopLevelType);
export const TOP_PLAYING = (('playing': any): TopLevelType);
export const TOP_PROGRESS = (('progress': any): TopLevelType);
export const TOP_RATE_CHANGE = (('ratechange': any): TopLevelType);
export const TOP_RESET = (('reset': any): TopLevelType);
export const TOP_SCROLL = (('scroll': any): TopLevelType);
export const TOP_SEEKED = (('seeked': any): TopLevelType);
export const TOP_SEEKING = (('seeking': any): TopLevelType);
export const TOP_SELECTION_CHANGE = (('selectionchange': any): TopLevelType);
export const TOP_STALLED = (('stalled': any): TopLevelType);
export const TOP_SUBMIT = (('submit': any): TopLevelType);
export const TOP_SUSPEND = (('suspend': any): TopLevelType);
export const TOP_TEXT_INPUT = (('textInput': any): TopLevelType);
export const TOP_TIME_UPDATE = (('timeupdate': any): TopLevelType);
export const TOP_TOGGLE = (('toggle': any): TopLevelType);
export const TOP_TOUCH_CANCEL = (('touchcancel': any): TopLevelType);
export const TOP_TOUCH_END = (('touchend': any): TopLevelType);
export const TOP_TOUCH_MOVE = (('touchmove': any): TopLevelType);
export const TOP_TOUCH_START = (('touchstart': any): TopLevelType);
export const TOP_TRANSITION_END = ((getVendorPrefixedEventName(
);
export const TOP_BLUR: TopLevelType = 'blur';
export const TOP_CAN_PLAY: TopLevelType = 'canplay';
export const TOP_CAN_PLAY_THROUGH: TopLevelType = 'canplaythrough';
export const TOP_CANCEL: TopLevelType = 'cancel';
export const TOP_CHANGE: TopLevelType = 'change';
export const TOP_CLICK: TopLevelType = 'click';
export const TOP_CLOSE: TopLevelType = 'close';
export const TOP_COMPOSITION_END: TopLevelType = 'compositionend';
export const TOP_COMPOSITION_START: TopLevelType = 'compositionstart';
export const TOP_COMPOSITION_UPDATE: TopLevelType = 'compositionupdate';
export const TOP_CONTEXT_MENU: TopLevelType = 'contextmenu';
export const TOP_COPY: TopLevelType = 'copy';
export const TOP_CUT: TopLevelType = 'cut';
export const TOP_DOUBLE_CLICK: TopLevelType = 'dblclick';
export const TOP_DRAG: TopLevelType = 'drag';
export const TOP_DRAG_END: TopLevelType = 'dragend';
export const TOP_DRAG_ENTER: TopLevelType = 'dragenter';
export const TOP_DRAG_EXIT: TopLevelType = 'dragexit';
export const TOP_DRAG_LEAVE: TopLevelType = 'dragleave';
export const TOP_DRAG_OVER: TopLevelType = 'dragover';
export const TOP_DRAG_START: TopLevelType = 'dragstart';
export const TOP_DROP: TopLevelType = 'drop';
export const TOP_DURATION_CHANGE: TopLevelType = 'durationchange';
export const TOP_EMPTIED: TopLevelType = 'emptied';
export const TOP_ENCRYPTED: TopLevelType = 'encrypted';
export const TOP_ENDED: TopLevelType = 'ended';
export const TOP_ERROR: TopLevelType = 'error';
export const TOP_FOCUS: TopLevelType = 'focus';
export const TOP_INPUT: TopLevelType = 'input';
export const TOP_INVALID: TopLevelType = 'invalid';
export const TOP_KEY_DOWN: TopLevelType = 'keydown';
export const TOP_KEY_PRESS: TopLevelType = 'keypress';
export const TOP_KEY_UP: TopLevelType = 'keyup';
export const TOP_LOAD: TopLevelType = 'load';
export const TOP_LOAD_START: TopLevelType = 'loadstart';
export const TOP_LOADED_DATA: TopLevelType = 'loadeddata';
export const TOP_LOADED_METADATA: TopLevelType = 'loadedmetadata';
export const TOP_MOUSE_DOWN: TopLevelType = 'mousedown';
export const TOP_MOUSE_MOVE: TopLevelType = 'mousemove';
export const TOP_MOUSE_OUT: TopLevelType = 'mouseout';
export const TOP_MOUSE_OVER: TopLevelType = 'mouseover';
export const TOP_MOUSE_UP: TopLevelType = 'mouseup';
export const TOP_PASTE: TopLevelType = 'paste';
export const TOP_PAUSE: TopLevelType = 'pause';
export const TOP_PLAY: TopLevelType = 'play';
export const TOP_PLAYING: TopLevelType = 'playing';
export const TOP_PROGRESS: TopLevelType = 'progress';
export const TOP_RATE_CHANGE: TopLevelType = 'ratechange';
export const TOP_RESET: TopLevelType = 'reset';
export const TOP_SCROLL: TopLevelType = 'scroll';
export const TOP_SEEKED: TopLevelType = 'seeked';
export const TOP_SEEKING: TopLevelType = 'seeking';
export const TOP_SELECTION_CHANGE: TopLevelType = 'selectionchange';
export const TOP_STALLED: TopLevelType = 'stalled';
export const TOP_SUBMIT: TopLevelType = 'submit';
export const TOP_SUSPEND: TopLevelType = 'suspend';
export const TOP_TEXT_INPUT: TopLevelType = 'textInput';
export const TOP_TIME_UPDATE: TopLevelType = 'timeupdate';
export const TOP_TOGGLE: TopLevelType = 'toggle';
export const TOP_TOUCH_CANCEL: TopLevelType = 'touchcancel';
export const TOP_TOUCH_END: TopLevelType = 'touchend';
export const TOP_TOUCH_MOVE: TopLevelType = 'touchmove';
export const TOP_TOUCH_START: TopLevelType = 'touchstart';
export const TOP_TRANSITION_END: TopLevelType = getVendorPrefixedEventName(
'transitionend',
): any): TopLevelType);
export const TOP_VOLUME_CHANGE = (('volumechange': any): TopLevelType);
export const TOP_WAITING = (('waiting': any): TopLevelType);
export const TOP_WHEEL = (('wheel': any): TopLevelType);
);
export const TOP_VOLUME_CHANGE: TopLevelType = 'volumechange';
export const TOP_WAITING: TopLevelType = 'waiting';
export const TOP_WHEEL: TopLevelType = 'wheel';

export const mediaEventTypes = [
export const mediaEventTypes: Array<TopLevelType> = [
TOP_ABORT,
TOP_CAN_PLAY,
TOP_CAN_PLAY_THROUGH,
Expand All @@ -117,5 +191,5 @@ export const mediaEventTypes = [
];

export function getRawEventName(topLevelType: TopLevelType): string {
Copy link
Contributor Author

@philipp-spiess philipp-spiess Apr 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might no be necessary but I figured it was a good idea especially since DOMTopLevelEventType are opaque and other modules don't know that they hold the raw event name and (as I verified) GCC eliminates this function.

return (topLevelType: any);
return topLevelType;
Copy link
Collaborator

@gaearon gaearon Apr 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be a note here explaining what's going on.
Specifically that these are opaque to the rest of the code but we do rely on them matching DOM names.

}
20 changes: 9 additions & 11 deletions packages/react-native-renderer/src/ReactNativeResponderEventPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,16 @@

import createResponderEventPlugin from 'events/createResponderEventPlugin';

import type {TopLevelType} from 'events/TopLevelEventTypes';

const TopLevelTypes = {
topMouseDown: (('topMouseDown': any): TopLevelType),
topMouseMove: (('topMouseMove': any): TopLevelType),
topMouseUp: (('topMouseUp': any): TopLevelType),
topScroll: (('topScroll': any): TopLevelType),
topSelectionChange: (('topSelectionChange': any): TopLevelType),
topTouchCancel: (('topTouchCancel': any): TopLevelType),
topTouchEnd: (('topTouchEnd': any): TopLevelType),
topTouchMove: (('topTouchMove': any): TopLevelType),
topTouchStart: (('topTouchStart': any): TopLevelType),
topMouseDown: 'topMouseDown',
topMouseMove: 'topMouseMove',
topMouseUp: 'topMouseUp',
topScroll: 'topScroll',
topSelectionChange: 'topSelectionChange',
topTouchCancel: 'topTouchCancel',
topTouchEnd: 'topTouchEnd',
topTouchMove: 'topTouchMove',
topTouchStart: 'topTouchStart',
};

const {ResponderEventPlugin} = createResponderEventPlugin(TopLevelTypes);
Expand Down