Simplify SyntheticEvent declarations (#11837)

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;

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

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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,