@samitouri / QOS-React / commits / 73265fc478

Simplify SyntheticEvent declarations (#11837)

Dan Abramov committed Dec 12, 2017 at 16:45 UTC 73265fc478695cd80fefd035517b9ceef43d5f1d
15 files changed +47 -351
packages/events/ResponderSyntheticEvent.js
+2 -25
@@ -12,33 +12,10 @@ import SyntheticEvent from './SyntheticEvent';
12 * interface will ensure that it is cleaned up when pooled/destroyed. The
13 * `ResponderEventPlugin` will populate it appropriately.
14 */
15 -const ResponderEventInterface = {
15 +const ResponderSyntheticEvent = SyntheticEvent.extend({
16 touchHistory: function(nativeEvent) {
17 return null; // Actually doesn't even look at the native event.
18 },
19 -};
20 -
21 -/**
22 - * @param {object} dispatchConfig Configuration used to dispatch this event.
23 - * @param {string} dispatchMarker Marker identifying the event target.
24 - * @param {object} nativeEvent Native event.
25 - * @extends {SyntheticEvent}
26 - */
27 -function ResponderSyntheticEvent(
28 - dispatchConfig,
29 - dispatchMarker,
30 - nativeEvent,
31 - nativeEventTarget,
32 -) {
33 - return SyntheticEvent.call(
34 - this,
35 - dispatchConfig,
36 - dispatchMarker,
37 - nativeEvent,
38 - nativeEventTarget,
39 - );
40 -}
41 -
42 -SyntheticEvent.augmentClass(ResponderSyntheticEvent, ResponderEventInterface);
19 +});
20
21 export default ResponderSyntheticEvent;
packages/events/SyntheticEvent.js
+7 -5
@@ -207,24 +207,26 @@ SyntheticEvent.Interface = EventInterface;
207
208 /**
209 * Helper to reduce boilerplate when creating subclasses.
210 - *
211 - * @param {function} Class
212 - * @param {?object} Interface
210 */
214 -SyntheticEvent.augmentClass = function(Class, Interface) {
211 +SyntheticEvent.extend = function(Interface) {
212 const Super = this;
213
214 const E = function() {};
215 E.prototype = Super.prototype;
216 const prototype = new E();
217
218 + function Class() {
219 + return Super.apply(this, arguments);
220 + }
221 Object.assign(prototype, Class.prototype);
222 Class.prototype = prototype;
223 Class.prototype.constructor = Class;
224
225 Class.Interface = Object.assign({}, Super.Interface, Interface);
226 - Class.augmentClass = Super.augmentClass;
226 + Class.extend = Super.extend;
227 addEventPoolingTo(Class);
228 +
229 + return Class;
230 };
231
232 /** Proxying after everything set on SyntheticEvent
packages/react-dom/src/events/SyntheticAnimationEvent.js
+2 -25
@@ -12,33 +12,10 @@ import SyntheticEvent from 'events/SyntheticEvent';
12 * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
13 * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
14 */
15 -const AnimationEventInterface = {
15 +const SyntheticAnimationEvent = SyntheticEvent.extend({
16 animationName: null,
17 elapsedTime: null,
18 pseudoElement: null,
19 -};
20 -
21 -/**
22 - * @param {object} dispatchConfig Configuration used to dispatch this event.
23 - * @param {string} dispatchMarker Marker identifying the event target.
24 - * @param {object} nativeEvent Native browser event.
25 - * @extends {SyntheticEvent}
26 - */
27 -function SyntheticAnimationEvent(
28 - dispatchConfig,
29 - dispatchMarker,
30 - nativeEvent,
31 - nativeEventTarget,
32 -) {
33 - return SyntheticEvent.call(
34 - this,
35 - dispatchConfig,
36 - dispatchMarker,
37 - nativeEvent,
38 - nativeEventTarget,
39 - );
40 -}
41 -
42 -SyntheticEvent.augmentClass(SyntheticAnimationEvent, AnimationEventInterface);
19 +});
20
21 export default SyntheticAnimationEvent;
packages/react-dom/src/events/SyntheticClipboardEvent.js
+2 -25
@@ -11,35 +11,12 @@ import SyntheticEvent from 'events/SyntheticEvent';
11 * @interface Event
12 * @see http://www.w3.org/TR/clipboard-apis/
13 */
14 -const ClipboardEventInterface = {
14 +const SyntheticClipboardEvent = SyntheticEvent.extend({
15 clipboardData: function(event) {
16 return 'clipboardData' in event
17 ? event.clipboardData
18 : window.clipboardData;
19 },
20 -};
21 -
22 -/**
23 - * @param {object} dispatchConfig Configuration used to dispatch this event.
24 - * @param {string} dispatchMarker Marker identifying the event target.
25 - * @param {object} nativeEvent Native browser event.
26 - * @extends {SyntheticEvent}
27 - */
28 -function SyntheticClipboardEvent(
29 - dispatchConfig,
30 - dispatchMarker,
31 - nativeEvent,
32 - nativeEventTarget,
33 -) {
34 - return SyntheticEvent.call(
35 - this,
36 - dispatchConfig,
37 - dispatchMarker,
38 - nativeEvent,
39 - nativeEventTarget,
40 - );
41 -}
42 -
43 -SyntheticEvent.augmentClass(SyntheticClipboardEvent, ClipboardEventInterface);
20 +});
21
22 export default SyntheticClipboardEvent;
packages/react-dom/src/events/SyntheticCompositionEvent.js
+2 -28
@@ -11,34 +11,8 @@ import SyntheticEvent from 'events/SyntheticEvent';
11 * @interface Event
12 * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
13 */
14 -const CompositionEventInterface = {
14 +const SyntheticCompositionEvent = SyntheticEvent.extend({
15 data: null,
16 -};
17 -
18 -/**
19 - * @param {object} dispatchConfig Configuration used to dispatch this event.
20 - * @param {string} dispatchMarker Marker identifying the event target.
21 - * @param {object} nativeEvent Native browser event.
22 - * @extends {SyntheticEvent}
23 - */
24 -function SyntheticCompositionEvent(
25 - dispatchConfig,
26 - dispatchMarker,
27 - nativeEvent,
28 - nativeEventTarget,
29 -) {
30 - return SyntheticEvent.call(
31 - this,
32 - dispatchConfig,
33 - dispatchMarker,
34 - nativeEvent,
35 - nativeEventTarget,
36 - );
37 -}
38 -
39 -SyntheticEvent.augmentClass(
40 - SyntheticCompositionEvent,
41 - CompositionEventInterface,
42 -);
16 +});
17
18 export default SyntheticCompositionEvent;
packages/react-dom/src/events/SyntheticDragEvent.js
+2 -25
@@ -11,31 +11,8 @@ import SyntheticMouseEvent from './SyntheticMouseEvent';
11 * @interface DragEvent
12 * @see http://www.w3.org/TR/DOM-Level-3-Events/
13 */
14 -const DragEventInterface = {
14 +const SyntheticDragEvent = SyntheticMouseEvent.extend({
15 dataTransfer: null,
16 -};
17 -
18 -/**
19 - * @param {object} dispatchConfig Configuration used to dispatch this event.
20 - * @param {string} dispatchMarker Marker identifying the event target.
21 - * @param {object} nativeEvent Native browser event.
22 - * @extends {SyntheticMouseEvent}
23 - */
24 -function SyntheticDragEvent(
25 - dispatchConfig,
26 - dispatchMarker,
27 - nativeEvent,
28 - nativeEventTarget,
29 -) {
30 - return SyntheticMouseEvent.call(
31 - this,
32 - dispatchConfig,
33 - dispatchMarker,
34 - nativeEvent,
35 - nativeEventTarget,
36 - );
37 -}
38 -
39 -SyntheticMouseEvent.augmentClass(SyntheticDragEvent, DragEventInterface);
16 +});
17
18 export default SyntheticDragEvent;
packages/react-dom/src/events/SyntheticFocusEvent.js
+2 -25
@@ -11,31 +11,8 @@ import SyntheticUIEvent from './SyntheticUIEvent';
11 * @interface FocusEvent
12 * @see http://www.w3.org/TR/DOM-Level-3-Events/
13 */
14 -const FocusEventInterface = {
14 +const SyntheticFocusEvent = SyntheticUIEvent.extend({
15 relatedTarget: null,
16 -};
17 -
18 -/**
19 - * @param {object} dispatchConfig Configuration used to dispatch this event.
20 - * @param {string} dispatchMarker Marker identifying the event target.
21 - * @param {object} nativeEvent Native browser event.
22 - * @extends {SyntheticUIEvent}
23 - */
24 -function SyntheticFocusEvent(
25 - dispatchConfig,
26 - dispatchMarker,
27 - nativeEvent,
28 - nativeEventTarget,
29 -) {
30 - return SyntheticUIEvent.call(
31 - this,
32 - dispatchConfig,
33 - dispatchMarker,
34 - nativeEvent,
35 - nativeEventTarget,
36 - );
37 -}
38 -
39 -SyntheticUIEvent.augmentClass(SyntheticFocusEvent, FocusEventInterface);
16 +});
17
18 export default SyntheticFocusEvent;
packages/react-dom/src/events/SyntheticInputEvent.js
+2 -25
@@ -12,31 +12,8 @@ import SyntheticEvent from 'events/SyntheticEvent';
12 * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
13 * /#events-inputevents
14 */
15 -const InputEventInterface = {
15 +const SyntheticInputEvent = SyntheticEvent.extend({
16 data: null,
17 -};
18 -
19 -/**
20 - * @param {object} dispatchConfig Configuration used to dispatch this event.
21 - * @param {string} dispatchMarker Marker identifying the event target.
22 - * @param {object} nativeEvent Native browser event.
23 - * @extends {SyntheticEvent}
24 - */
25 -function SyntheticInputEvent(
26 - dispatchConfig,
27 - dispatchMarker,
28 - nativeEvent,
29 - nativeEventTarget,
30 -) {
31 - return SyntheticEvent.call(
32 - this,
33 - dispatchConfig,
34 - dispatchMarker,
35 - nativeEvent,
36 - nativeEventTarget,
37 - );
38 -}
39 -
40 -SyntheticEvent.augmentClass(SyntheticInputEvent, InputEventInterface);
17 +});
18
19 export default SyntheticInputEvent;
packages/react-dom/src/events/SyntheticKeyboardEvent.js
+2 -25
@@ -14,7 +14,7 @@ import getEventModifierState from './getEventModifierState';
14 * @interface KeyboardEvent
15 * @see http://www.w3.org/TR/DOM-Level-3-Events/
16 */
17 -const KeyboardEventInterface = {
17 +const SyntheticKeyboardEvent = SyntheticUIEvent.extend({
18 key: getEventKey,
19 location: null,
20 ctrlKey: null,
@@ -60,29 +60,6 @@ const KeyboardEventInterface = {
60 }
61 return 0;
62 },
63 -};
64 -
65 -/**
66 - * @param {object} dispatchConfig Configuration used to dispatch this event.
67 - * @param {string} dispatchMarker Marker identifying the event target.
68 - * @param {object} nativeEvent Native browser event.
69 - * @extends {SyntheticUIEvent}
70 - */
71 -function SyntheticKeyboardEvent(
72 - dispatchConfig,
73 - dispatchMarker,
74 - nativeEvent,
75 - nativeEventTarget,
76 -) {
77 - return SyntheticUIEvent.call(
78 - this,
79 - dispatchConfig,
80 - dispatchMarker,
81 - nativeEvent,
82 - nativeEventTarget,
83 - );
84 -}
85 -
86 -SyntheticUIEvent.augmentClass(SyntheticKeyboardEvent, KeyboardEventInterface);
63 +});
64
65 export default SyntheticKeyboardEvent;
packages/react-dom/src/events/SyntheticMouseEvent.js
+2 -25
@@ -12,7 +12,7 @@ import getEventModifierState from './getEventModifierState';
12 * @interface MouseEvent
13 * @see http://www.w3.org/TR/DOM-Level-3-Events/
14 */
15 -const MouseEventInterface = {
15 +const SyntheticMouseEvent = SyntheticUIEvent.extend({
16 screenX: null,
17 screenY: null,
18 clientX: null,
@@ -34,29 +34,6 @@ const MouseEventInterface = {
34 : event.fromElement)
35 );
36 },
37 -};
38 -
39 -/**
40 - * @param {object} dispatchConfig Configuration used to dispatch this event.
41 - * @param {string} dispatchMarker Marker identifying the event target.
42 - * @param {object} nativeEvent Native browser event.
43 - * @extends {SyntheticUIEvent}
44 - */
45 -function SyntheticMouseEvent(
46 - dispatchConfig,
47 - dispatchMarker,
48 - nativeEvent,
49 - nativeEventTarget,
50 -) {
51 - return SyntheticUIEvent.call(
52 - this,
53 - dispatchConfig,
54 - dispatchMarker,
55 - nativeEvent,
56 - nativeEventTarget,
57 - );
58 -}
59 -
60 -SyntheticUIEvent.augmentClass(SyntheticMouseEvent, MouseEventInterface);
37 +});
38
39 export default SyntheticMouseEvent;
packages/react-dom/src/events/SyntheticTouchEvent.js
+2 -25
@@ -12,7 +12,7 @@ import getEventModifierState from './getEventModifierState';
12 * @interface TouchEvent
13 * @see http://www.w3.org/TR/touch-events/
14 */
15 -const TouchEventInterface = {
15 +const SyntheticTouchEvent = SyntheticUIEvent.extend({
16 touches: null,
17 targetTouches: null,
18 changedTouches: null,
@@ -21,29 +21,6 @@ const TouchEventInterface = {
21 ctrlKey: null,
22 shiftKey: null,
23 getModifierState: getEventModifierState,
24 -};
25 -
26 -/**
27 - * @param {object} dispatchConfig Configuration used to dispatch this event.
28 - * @param {string} dispatchMarker Marker identifying the event target.
29 - * @param {object} nativeEvent Native browser event.
30 - * @extends {SyntheticUIEvent}
31 - */
32 -function SyntheticTouchEvent(
33 - dispatchConfig,
34 - dispatchMarker,
35 - nativeEvent,
36 - nativeEventTarget,
37 -) {
38 - return SyntheticUIEvent.call(
39 - this,
40 - dispatchConfig,
41 - dispatchMarker,
42 - nativeEvent,
43 - nativeEventTarget,
44 - );
45 -}
46 -
47 -SyntheticUIEvent.augmentClass(SyntheticTouchEvent, TouchEventInterface);
24 +});
25
26 export default SyntheticTouchEvent;
packages/react-dom/src/events/SyntheticTransitionEvent.js
+2 -25
@@ -12,33 +12,10 @@ import SyntheticEvent from 'events/SyntheticEvent';
12 * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
13 * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
14 */
15 -const TransitionEventInterface = {
15 +const SyntheticTransitionEvent = SyntheticEvent.extend({
16 propertyName: null,
17 elapsedTime: null,
18 pseudoElement: null,
19 -};
20 -
21 -/**
22 - * @param {object} dispatchConfig Configuration used to dispatch this event.
23 - * @param {string} dispatchMarker Marker identifying the event target.
24 - * @param {object} nativeEvent Native browser event.
25 - * @extends {SyntheticEvent}
26 - */
27 -function SyntheticTransitionEvent(
28 - dispatchConfig,
29 - dispatchMarker,
30 - nativeEvent,
31 - nativeEventTarget,
32 -) {
33 - return SyntheticEvent.call(
34 - this,
35 - dispatchConfig,
36 - dispatchMarker,
37 - nativeEvent,
38 - nativeEventTarget,
39 - );
40 -}
41 -
42 -SyntheticEvent.augmentClass(SyntheticTransitionEvent, TransitionEventInterface);
19 +});
20
21 export default SyntheticTransitionEvent;
packages/react-dom/src/events/SyntheticUIEvent.js
+2 -29
@@ -7,36 +7,9 @@
7
8 import SyntheticEvent from 'events/SyntheticEvent';
9
10 -/**
11 - * @interface UIEvent
12 - * @see http://www.w3.org/TR/DOM-Level-3-Events/
13 - */
14 -const UIEventInterface = {
10 +const SyntheticUIEvent = SyntheticEvent.extend({
11 view: null,
12 detail: null,
17 -};
18 -
19 -/**
20 - * @param {object} dispatchConfig Configuration used to dispatch this event.
21 - * @param {string} dispatchMarker Marker identifying the event target.
22 - * @param {object} nativeEvent Native browser event.
23 - * @extends {SyntheticEvent}
24 - */
25 -function SyntheticUIEvent(
26 - dispatchConfig,
27 - dispatchMarker,
28 - nativeEvent,
29 - nativeEventTarget,
30 -) {
31 - return SyntheticEvent.call(
32 - this,
33 - dispatchConfig,
34 - dispatchMarker,
35 - nativeEvent,
36 - nativeEventTarget,
37 - );
38 -}
39 -
40 -SyntheticEvent.augmentClass(SyntheticUIEvent, UIEventInterface);
13 +});
14
15 export default SyntheticUIEvent;
packages/react-dom/src/events/SyntheticWheelEvent.js
+4 -27
@@ -11,14 +11,14 @@ import SyntheticMouseEvent from './SyntheticMouseEvent';
11 * @interface WheelEvent
12 * @see http://www.w3.org/TR/DOM-Level-3-Events/
13 */
14 -const WheelEventInterface = {
15 - deltaX: function(event) {
14 +const SyntheticWheelEvent = SyntheticMouseEvent.extend({
15 + deltaX(event) {
16 return 'deltaX' in event
17 ? event.deltaX
18 : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
19 'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
20 },
21 - deltaY: function(event) {
21 + deltaY(event) {
22 return 'deltaY' in event
23 ? event.deltaY
24 : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
@@ -34,29 +34,6 @@ const WheelEventInterface = {
34 // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
35 // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
36 deltaMode: null,
37 -};
38 -
39 -/**
40 - * @param {object} dispatchConfig Configuration used to dispatch this event.
41 - * @param {string} dispatchMarker Marker identifying the event target.
42 - * @param {object} nativeEvent Native browser event.
43 - * @extends {SyntheticMouseEvent}
44 - */
45 -function SyntheticWheelEvent(
46 - dispatchConfig,
47 - dispatchMarker,
48 - nativeEvent,
49 - nativeEventTarget,
50 -) {
51 - return SyntheticMouseEvent.call(
52 - this,
53 - dispatchConfig,
54 - dispatchMarker,
55 - nativeEvent,
56 - nativeEventTarget,
57 - );
58 -}
59 -
60 -SyntheticMouseEvent.augmentClass(SyntheticWheelEvent, WheelEventInterface);
37 +});
38
39 export default SyntheticWheelEvent;
scripts/rollup/results.json
+12 -12
@@ -25,28 +25,28 @@
25 "gzip": 3454
26 },
27 "react-dom.development.js (UMD_DEV)": {
28 - "size": 571169,
29 - "gzip": 133781
28 + "size": 565167,
29 + "gzip": 133142
30 },
31 "react-dom.production.min.js (UMD_PROD)": {
32 - "size": 95318,
33 - "gzip": 30948
32 + "size": 94676,
33 + "gzip": 30901
34 },
35 "react-dom.development.js (NODE_DEV)": {
36 - "size": 555202,
37 - "gzip": 129930
36 + "size": 549200,
37 + "gzip": 129341
38 },
39 "react-dom.production.min.js (NODE_PROD)": {
40 - "size": 93743,
41 - "gzip": 30028
40 + "size": 93256,
41 + "gzip": 30006
42 },
43 "ReactDOM-dev.js (FB_DEV)": {
44 - "size": 573519,
45 - "gzip": 132298
44 + "size": 567097,
45 + "gzip": 131659
46 },
47 "ReactDOM-prod.js (FB_PROD)": {
48 - "size": 272702,
49 - "gzip": 51685
48 + "size": 270522,
49 + "gzip": 51668
50 },
51 "react-dom-test-utils.development.js (NODE_DEV)": {
52 "size": 36202,