diff --git a/packages/events/ResponderSyntheticEvent.js b/packages/events/ResponderSyntheticEvent.js index 74ab4003a0..defadf6bc2 100644 --- a/packages/events/ResponderSyntheticEvent.js +++ b/packages/events/ResponderSyntheticEvent.js @@ -12,33 +12,10 @@ import SyntheticEvent from './SyntheticEvent'; * interface will ensure that it is cleaned up when pooled/destroyed. The * `ResponderEventPlugin` will populate it appropriately. */ -const ResponderEventInterface = { +const ResponderSyntheticEvent = SyntheticEvent.extend({ touchHistory: function(nativeEvent) { return null; // Actually doesn't even look at the native event. }, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native event. - * @extends {SyntheticEvent} - */ -function ResponderSyntheticEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass(ResponderSyntheticEvent, ResponderEventInterface); +}); export default ResponderSyntheticEvent; diff --git a/packages/events/SyntheticEvent.js b/packages/events/SyntheticEvent.js index 1fb66f6e46..4380bf09a8 100644 --- a/packages/events/SyntheticEvent.js +++ b/packages/events/SyntheticEvent.js @@ -207,24 +207,26 @@ SyntheticEvent.Interface = EventInterface; /** * Helper to reduce boilerplate when creating subclasses. - * - * @param {function} Class - * @param {?object} Interface */ -SyntheticEvent.augmentClass = function(Class, Interface) { +SyntheticEvent.extend = function(Interface) { const Super = this; const E = function() {}; E.prototype = Super.prototype; const prototype = new E(); + function Class() { + return Super.apply(this, arguments); + } Object.assign(prototype, Class.prototype); Class.prototype = prototype; Class.prototype.constructor = Class; Class.Interface = Object.assign({}, Super.Interface, Interface); - Class.augmentClass = Super.augmentClass; + Class.extend = Super.extend; addEventPoolingTo(Class); + + return Class; }; /** Proxying after everything set on SyntheticEvent diff --git a/packages/react-dom/src/events/SyntheticAnimationEvent.js b/packages/react-dom/src/events/SyntheticAnimationEvent.js index a796156640..b34e9c3d9b 100644 --- a/packages/react-dom/src/events/SyntheticAnimationEvent.js +++ b/packages/react-dom/src/events/SyntheticAnimationEvent.js @@ -12,33 +12,10 @@ import SyntheticEvent from 'events/SyntheticEvent'; * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent */ -const AnimationEventInterface = { +const SyntheticAnimationEvent = SyntheticEvent.extend({ animationName: null, elapsedTime: null, pseudoElement: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticEvent} - */ -function SyntheticAnimationEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass(SyntheticAnimationEvent, AnimationEventInterface); +}); export default SyntheticAnimationEvent; diff --git a/packages/react-dom/src/events/SyntheticClipboardEvent.js b/packages/react-dom/src/events/SyntheticClipboardEvent.js index 436a3b5987..4f194d8bd7 100644 --- a/packages/react-dom/src/events/SyntheticClipboardEvent.js +++ b/packages/react-dom/src/events/SyntheticClipboardEvent.js @@ -11,35 +11,12 @@ import SyntheticEvent from 'events/SyntheticEvent'; * @interface Event * @see http://www.w3.org/TR/clipboard-apis/ */ -const ClipboardEventInterface = { +const SyntheticClipboardEvent = SyntheticEvent.extend({ clipboardData: function(event) { return 'clipboardData' in event ? event.clipboardData : window.clipboardData; }, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticEvent} - */ -function SyntheticClipboardEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass(SyntheticClipboardEvent, ClipboardEventInterface); +}); export default SyntheticClipboardEvent; diff --git a/packages/react-dom/src/events/SyntheticCompositionEvent.js b/packages/react-dom/src/events/SyntheticCompositionEvent.js index 938f7e996b..457c7d3e96 100644 --- a/packages/react-dom/src/events/SyntheticCompositionEvent.js +++ b/packages/react-dom/src/events/SyntheticCompositionEvent.js @@ -11,34 +11,8 @@ import SyntheticEvent from 'events/SyntheticEvent'; * @interface Event * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents */ -const CompositionEventInterface = { +const SyntheticCompositionEvent = SyntheticEvent.extend({ data: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticEvent} - */ -function SyntheticCompositionEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass( - SyntheticCompositionEvent, - CompositionEventInterface, -); +}); export default SyntheticCompositionEvent; diff --git a/packages/react-dom/src/events/SyntheticDragEvent.js b/packages/react-dom/src/events/SyntheticDragEvent.js index 3eb24359bd..d2cbbdb29d 100644 --- a/packages/react-dom/src/events/SyntheticDragEvent.js +++ b/packages/react-dom/src/events/SyntheticDragEvent.js @@ -11,31 +11,8 @@ import SyntheticMouseEvent from './SyntheticMouseEvent'; * @interface DragEvent * @see http://www.w3.org/TR/DOM-Level-3-Events/ */ -const DragEventInterface = { +const SyntheticDragEvent = SyntheticMouseEvent.extend({ dataTransfer: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticMouseEvent} - */ -function SyntheticDragEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticMouseEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticMouseEvent.augmentClass(SyntheticDragEvent, DragEventInterface); +}); export default SyntheticDragEvent; diff --git a/packages/react-dom/src/events/SyntheticFocusEvent.js b/packages/react-dom/src/events/SyntheticFocusEvent.js index 75c83f3800..52dfdf348f 100644 --- a/packages/react-dom/src/events/SyntheticFocusEvent.js +++ b/packages/react-dom/src/events/SyntheticFocusEvent.js @@ -11,31 +11,8 @@ import SyntheticUIEvent from './SyntheticUIEvent'; * @interface FocusEvent * @see http://www.w3.org/TR/DOM-Level-3-Events/ */ -const FocusEventInterface = { +const SyntheticFocusEvent = SyntheticUIEvent.extend({ relatedTarget: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticUIEvent} - */ -function SyntheticFocusEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticUIEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticUIEvent.augmentClass(SyntheticFocusEvent, FocusEventInterface); +}); export default SyntheticFocusEvent; diff --git a/packages/react-dom/src/events/SyntheticInputEvent.js b/packages/react-dom/src/events/SyntheticInputEvent.js index 6a8552f0a6..623f5e72a5 100644 --- a/packages/react-dom/src/events/SyntheticInputEvent.js +++ b/packages/react-dom/src/events/SyntheticInputEvent.js @@ -12,31 +12,8 @@ import SyntheticEvent from 'events/SyntheticEvent'; * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105 * /#events-inputevents */ -const InputEventInterface = { +const SyntheticInputEvent = SyntheticEvent.extend({ data: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticEvent} - */ -function SyntheticInputEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass(SyntheticInputEvent, InputEventInterface); +}); export default SyntheticInputEvent; diff --git a/packages/react-dom/src/events/SyntheticKeyboardEvent.js b/packages/react-dom/src/events/SyntheticKeyboardEvent.js index da15bcc250..c42d1b9f9a 100644 --- a/packages/react-dom/src/events/SyntheticKeyboardEvent.js +++ b/packages/react-dom/src/events/SyntheticKeyboardEvent.js @@ -14,7 +14,7 @@ import getEventModifierState from './getEventModifierState'; * @interface KeyboardEvent * @see http://www.w3.org/TR/DOM-Level-3-Events/ */ -const KeyboardEventInterface = { +const SyntheticKeyboardEvent = SyntheticUIEvent.extend({ key: getEventKey, location: null, ctrlKey: null, @@ -60,29 +60,6 @@ const KeyboardEventInterface = { } return 0; }, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticUIEvent} - */ -function SyntheticKeyboardEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticUIEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticUIEvent.augmentClass(SyntheticKeyboardEvent, KeyboardEventInterface); +}); export default SyntheticKeyboardEvent; diff --git a/packages/react-dom/src/events/SyntheticMouseEvent.js b/packages/react-dom/src/events/SyntheticMouseEvent.js index 19c4058918..d1ff4b32a1 100644 --- a/packages/react-dom/src/events/SyntheticMouseEvent.js +++ b/packages/react-dom/src/events/SyntheticMouseEvent.js @@ -12,7 +12,7 @@ import getEventModifierState from './getEventModifierState'; * @interface MouseEvent * @see http://www.w3.org/TR/DOM-Level-3-Events/ */ -const MouseEventInterface = { +const SyntheticMouseEvent = SyntheticUIEvent.extend({ screenX: null, screenY: null, clientX: null, @@ -34,29 +34,6 @@ const MouseEventInterface = { : event.fromElement) ); }, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticUIEvent} - */ -function SyntheticMouseEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticUIEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticUIEvent.augmentClass(SyntheticMouseEvent, MouseEventInterface); +}); export default SyntheticMouseEvent; diff --git a/packages/react-dom/src/events/SyntheticTouchEvent.js b/packages/react-dom/src/events/SyntheticTouchEvent.js index 32c5c0c56f..123bcedd6b 100644 --- a/packages/react-dom/src/events/SyntheticTouchEvent.js +++ b/packages/react-dom/src/events/SyntheticTouchEvent.js @@ -12,7 +12,7 @@ import getEventModifierState from './getEventModifierState'; * @interface TouchEvent * @see http://www.w3.org/TR/touch-events/ */ -const TouchEventInterface = { +const SyntheticTouchEvent = SyntheticUIEvent.extend({ touches: null, targetTouches: null, changedTouches: null, @@ -21,29 +21,6 @@ const TouchEventInterface = { ctrlKey: null, shiftKey: null, getModifierState: getEventModifierState, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticUIEvent} - */ -function SyntheticTouchEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticUIEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticUIEvent.augmentClass(SyntheticTouchEvent, TouchEventInterface); +}); export default SyntheticTouchEvent; diff --git a/packages/react-dom/src/events/SyntheticTransitionEvent.js b/packages/react-dom/src/events/SyntheticTransitionEvent.js index 884ceffcc5..7ea210a8d9 100644 --- a/packages/react-dom/src/events/SyntheticTransitionEvent.js +++ b/packages/react-dom/src/events/SyntheticTransitionEvent.js @@ -12,33 +12,10 @@ import SyntheticEvent from 'events/SyntheticEvent'; * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events- * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent */ -const TransitionEventInterface = { +const SyntheticTransitionEvent = SyntheticEvent.extend({ propertyName: null, elapsedTime: null, pseudoElement: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticEvent} - */ -function SyntheticTransitionEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass(SyntheticTransitionEvent, TransitionEventInterface); +}); export default SyntheticTransitionEvent; diff --git a/packages/react-dom/src/events/SyntheticUIEvent.js b/packages/react-dom/src/events/SyntheticUIEvent.js index a03b82ad7c..e2c3e16c7a 100644 --- a/packages/react-dom/src/events/SyntheticUIEvent.js +++ b/packages/react-dom/src/events/SyntheticUIEvent.js @@ -7,36 +7,9 @@ import SyntheticEvent from 'events/SyntheticEvent'; -/** - * @interface UIEvent - * @see http://www.w3.org/TR/DOM-Level-3-Events/ - */ -const UIEventInterface = { +const SyntheticUIEvent = SyntheticEvent.extend({ view: null, detail: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticEvent} - */ -function SyntheticUIEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticEvent.augmentClass(SyntheticUIEvent, UIEventInterface); +}); export default SyntheticUIEvent; diff --git a/packages/react-dom/src/events/SyntheticWheelEvent.js b/packages/react-dom/src/events/SyntheticWheelEvent.js index 69837e1b2f..b4c49f430a 100644 --- a/packages/react-dom/src/events/SyntheticWheelEvent.js +++ b/packages/react-dom/src/events/SyntheticWheelEvent.js @@ -11,14 +11,14 @@ import SyntheticMouseEvent from './SyntheticMouseEvent'; * @interface WheelEvent * @see http://www.w3.org/TR/DOM-Level-3-Events/ */ -const WheelEventInterface = { - deltaX: function(event) { +const SyntheticWheelEvent = SyntheticMouseEvent.extend({ + deltaX(event) { return 'deltaX' in event ? event.deltaX : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive). 'wheelDeltaX' in event ? -event.wheelDeltaX : 0; }, - deltaY: function(event) { + deltaY(event) { return 'deltaY' in event ? event.deltaY : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive). @@ -34,29 +34,6 @@ const WheelEventInterface = { // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size. deltaMode: null, -}; - -/** - * @param {object} dispatchConfig Configuration used to dispatch this event. - * @param {string} dispatchMarker Marker identifying the event target. - * @param {object} nativeEvent Native browser event. - * @extends {SyntheticMouseEvent} - */ -function SyntheticWheelEvent( - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, -) { - return SyntheticMouseEvent.call( - this, - dispatchConfig, - dispatchMarker, - nativeEvent, - nativeEventTarget, - ); -} - -SyntheticMouseEvent.augmentClass(SyntheticWheelEvent, WheelEventInterface); +}); export default SyntheticWheelEvent; diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index f9f83c421f..f7b3d7a2db 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -25,28 +25,28 @@ "gzip": 3454 }, "react-dom.development.js (UMD_DEV)": { - "size": 571169, - "gzip": 133781 + "size": 565167, + "gzip": 133142 }, "react-dom.production.min.js (UMD_PROD)": { - "size": 95318, - "gzip": 30948 + "size": 94676, + "gzip": 30901 }, "react-dom.development.js (NODE_DEV)": { - "size": 555202, - "gzip": 129930 + "size": 549200, + "gzip": 129341 }, "react-dom.production.min.js (NODE_PROD)": { - "size": 93743, - "gzip": 30028 + "size": 93256, + "gzip": 30006 }, "ReactDOM-dev.js (FB_DEV)": { - "size": 573519, - "gzip": 132298 + "size": 567097, + "gzip": 131659 }, "ReactDOM-prod.js (FB_PROD)": { - "size": 272702, - "gzip": 51685 + "size": 270522, + "gzip": 51668 }, "react-dom-test-utils.development.js (NODE_DEV)": { "size": 36202,