Skip to content

Commit 76ce685

Browse files
gaearongaearon
authored
Remove SyntheticEvent subtypes (facebook#19436)
* Remove SyntheticEvent subtypes * Code golf
1 parent 30e3cfe commit 76ce685

File tree

4 files changed

+140
-152
lines changed

4 files changed

+140
-152
lines changed

‎packages/react-dom/src/events/SyntheticEvent.js

Lines changed: 97 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,15 @@ import getEventCharCode from './getEventCharCode';
1414
* @see http://www.w3.org/TR/DOM-Level-3-Events/
1515
*/
1616
const EventInterface = {
17-
type: null,
18-
target: null,
19-
// currentTarget is set when dispatching; no use in copying it here
20-
currentTarget: function() {
21-
return null;
22-
},
23-
eventPhase: null,
24-
bubbles: null,
25-
cancelable: null,
17+
type: 0,
18+
eventPhase: 0,
19+
bubbles: 0,
20+
cancelable: 0,
2621
timeStamp: function(event) {
2722
return event.timeStamp || Date.now();
2823
},
29-
defaultPrevented: null,
30-
isTrusted: null,
24+
defaultPrevented: 0,
25+
isTrusted: 0,
3126
};
3227

3328
function functionThatReturnsTrue() {
@@ -56,12 +51,14 @@ export function SyntheticEvent(
5651
targetInst,
5752
nativeEvent,
5853
nativeEventTarget,
54+
Interface = EventInterface,
5955
) {
6056
this._reactName = reactName;
6157
this._targetInst = targetInst;
6258
this.nativeEvent = nativeEvent;
59+
this.target = nativeEventTarget;
60+
this.currentTarget = null;
6361

64-
const Interface = this.constructor.Interface;
6562
for (const propName in Interface) {
6663
if (!Interface.hasOwnProperty(propName)) {
6764
continue;
@@ -70,11 +67,7 @@ export function SyntheticEvent(
7067
if (normalize) {
7168
this[propName] = normalize(nativeEvent);
7269
} else {
73-
if (propName === 'target') {
74-
this.target = nativeEventTarget;
75-
} else {
76-
this[propName] = nativeEvent[propName];
77-
}
70+
this[propName] = nativeEvent[propName];
7871
}
7972
}
8073

@@ -144,36 +137,12 @@ Object.assign(SyntheticEvent.prototype, {
144137
isPersistent: functionThatReturnsTrue,
145138
});
146139

147-
SyntheticEvent.Interface = EventInterface;
148-
149-
/**
150-
* Helper to reduce boilerplate when creating subclasses.
151-
*/
152-
SyntheticEvent.extend = function(Interface) {
153-
const Super = this;
154-
155-
const E = function() {};
156-
E.prototype = Super.prototype;
157-
const prototype = new E();
158-
159-
function Class() {
160-
return Super.apply(this, arguments);
161-
}
162-
Object.assign(prototype, Class.prototype);
163-
Class.prototype = prototype;
164-
Class.prototype.constructor = Class;
165-
166-
Class.Interface = Object.assign({}, Super.Interface, Interface);
167-
Class.extend = Super.extend;
168-
169-
return Class;
140+
export const UIEventInterface = {
141+
...EventInterface,
142+
view: 0,
143+
detail: 0,
170144
};
171145

172-
export const SyntheticUIEvent = SyntheticEvent.extend({
173-
view: null,
174-
detail: null,
175-
});
176-
177146
let previousScreenX = 0;
178147
let previousScreenY = 0;
179148
// Use flags to signal movementX/Y has already been set
@@ -184,20 +153,21 @@ let isMovementYSet = false;
184153
* @interface MouseEvent
185154
* @see http://www.w3.org/TR/DOM-Level-3-Events/
186155
*/
187-
export const SyntheticMouseEvent = SyntheticUIEvent.extend({
188-
screenX: null,
189-
screenY: null,
190-
clientX: null,
191-
clientY: null,
192-
pageX: null,
193-
pageY: null,
194-
ctrlKey: null,
195-
shiftKey: null,
196-
altKey: null,
197-
metaKey: null,
156+
export const MouseEventInterface = {
157+
...UIEventInterface,
158+
screenX: 0,
159+
screenY: 0,
160+
clientX: 0,
161+
clientY: 0,
162+
pageX: 0,
163+
pageY: 0,
164+
ctrlKey: 0,
165+
shiftKey: 0,
166+
altKey: 0,
167+
metaKey: 0,
198168
getModifierState: getEventModifierState,
199-
button: null,
200-
buttons: null,
169+
button: 0,
170+
buttons: 0,
201171
relatedTarget: function(event) {
202172
return (
203173
event.relatedTarget ||
@@ -236,63 +206,67 @@ export const SyntheticMouseEvent = SyntheticUIEvent.extend({
236206

237207
return event.type === 'mousemove' ? event.screenY - screenY : 0;
238208
},
239-
});
209+
};
240210

241211
/**
242212
* @interface DragEvent
243213
* @see http://www.w3.org/TR/DOM-Level-3-Events/
244214
*/
245-
export const SyntheticDragEvent = SyntheticMouseEvent.extend({
246-
dataTransfer: null,
247-
});
215+
export const DragEventInterface = {
216+
...MouseEventInterface,
217+
dataTransfer: 0,
218+
};
248219

249220
/**
250221
* @interface FocusEvent
251222
* @see http://www.w3.org/TR/DOM-Level-3-Events/
252223
*/
253-
export const SyntheticFocusEvent = SyntheticUIEvent.extend({
254-
relatedTarget: null,
255-
});
224+
export const FocusEventInterface = {
225+
...UIEventInterface,
226+
relatedTarget: 0,
227+
};
256228

257229
/**
258230
* @interface Event
259231
* @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
260232
* @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
261233
*/
262-
export const SyntheticAnimationEvent = SyntheticEvent.extend({
263-
animationName: null,
264-
elapsedTime: null,
265-
pseudoElement: null,
266-
});
234+
export const AnimationEventInterface = {
235+
...EventInterface,
236+
animationName: 0,
237+
elapsedTime: 0,
238+
pseudoElement: 0,
239+
};
267240

268241
/**
269242
* @interface Event
270243
* @see http://www.w3.org/TR/clipboard-apis/
271244
*/
272-
export const SyntheticClipboardEvent = SyntheticEvent.extend({
245+
export const ClipboardEventInterface = {
246+
...EventInterface,
273247
clipboardData: function(event) {
274248
return 'clipboardData' in event
275249
? event.clipboardData
276250
: window.clipboardData;
277251
},
278-
});
252+
};
279253

280254
/**
281255
* @interface Event
282256
* @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
283257
*/
284-
export const SyntheticCompositionEvent = SyntheticEvent.extend({
285-
data: null,
286-
});
258+
export const CompositionEventInterface = {
259+
...EventInterface,
260+
data: 0,
261+
};
287262

288263
/**
289264
* @interface Event
290265
* @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
291266
* /#events-inputevents
292267
*/
293-
export const SyntheticInputEvent = SyntheticEvent.extend({
294-
data: null,
295-
});
268+
// Happens to share the same list for now.
269+
export const InputEventInterface = CompositionEventInterface;
296270

297271
/**
298272
* Normalization of deprecated HTML5 `key` values
@@ -422,16 +396,17 @@ function getEventModifierState(nativeEvent) {
422396
* @interface KeyboardEvent
423397
* @see http://www.w3.org/TR/DOM-Level-3-Events/
424398
*/
425-
export const SyntheticKeyboardEvent = SyntheticUIEvent.extend({
399+
export const KeyboardEventInterface = {
400+
...UIEventInterface,
426401
key: getEventKey,
427-
code: null,
428-
location: null,
429-
ctrlKey: null,
430-
shiftKey: null,
431-
altKey: null,
432-
metaKey: null,
433-
repeat: null,
434-
locale: null,
402+
code: 0,
403+
location: 0,
404+
ctrlKey: 0,
405+
shiftKey: 0,
406+
altKey: 0,
407+
metaKey: 0,
408+
repeat: 0,
409+
locale: 0,
435410
getModifierState: getEventModifierState,
436411
// Legacy Interface
437412
charCode: function(event) {
@@ -469,56 +444,60 @@ export const SyntheticKeyboardEvent = SyntheticUIEvent.extend({
469444
}
470445
return 0;
471446
},
472-
});
447+
};
473448

474449
/**
475450
* @interface PointerEvent
476451
* @see http://www.w3.org/TR/pointerevents/
477452
*/
478-
export const SyntheticPointerEvent = SyntheticMouseEvent.extend({
479-
pointerId: null,
480-
width: null,
481-
height: null,
482-
pressure: null,
483-
tangentialPressure: null,
484-
tiltX: null,
485-
tiltY: null,
486-
twist: null,
487-
pointerType: null,
488-
isPrimary: null,
489-
});
453+
export const PointerEventInterface = {
454+
...MouseEventInterface,
455+
pointerId: 0,
456+
width: 0,
457+
height: 0,
458+
pressure: 0,
459+
tangentialPressure: 0,
460+
tiltX: 0,
461+
tiltY: 0,
462+
twist: 0,
463+
pointerType: 0,
464+
isPrimary: 0,
465+
};
490466

491467
/**
492468
* @interface TouchEvent
493469
* @see http://www.w3.org/TR/touch-events/
494470
*/
495-
export const SyntheticTouchEvent = SyntheticUIEvent.extend({
496-
touches: null,
497-
targetTouches: null,
498-
changedTouches: null,
499-
altKey: null,
500-
metaKey: null,
501-
ctrlKey: null,
502-
shiftKey: null,
471+
export const TouchEventInterface = {
472+
...UIEventInterface,
473+
touches: 0,
474+
targetTouches: 0,
475+
changedTouches: 0,
476+
altKey: 0,
477+
metaKey: 0,
478+
ctrlKey: 0,
479+
shiftKey: 0,
503480
getModifierState: getEventModifierState,
504-
});
481+
};
505482

506483
/**
507484
* @interface Event
508485
* @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
509486
* @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
510487
*/
511-
export const SyntheticTransitionEvent = SyntheticEvent.extend({
512-
propertyName: null,
513-
elapsedTime: null,
514-
pseudoElement: null,
515-
});
488+
export const TransitionEventInterface = {
489+
...EventInterface,
490+
propertyName: 0,
491+
elapsedTime: 0,
492+
pseudoElement: 0,
493+
};
516494

517495
/**
518496
* @interface WheelEvent
519497
* @see http://www.w3.org/TR/DOM-Level-3-Events/
520498
*/
521-
export const SyntheticWheelEvent = SyntheticMouseEvent.extend({
499+
export const WheelEventInterface = {
500+
...MouseEventInterface,
522501
deltaX(event) {
523502
return 'deltaX' in event
524503
? event.deltaX
@@ -538,11 +517,11 @@ export const SyntheticWheelEvent = SyntheticMouseEvent.extend({
538517
? -event.wheelDelta
539518
: 0;
540519
},
541-
deltaZ: null,
520+
deltaZ: 0,
542521

543522
// Browsers without "deltaMode" is reporting in raw wheel delta where one
544523
// notch on the scroll is always +/- 120, roughly equivalent to pixels.
545524
// A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
546525
// ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
547-
deltaMode: null,
548-
});
526+
deltaMode: 0,
527+
};

‎packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ import {
2828
reset as FallbackCompositionStateReset,
2929
} from '../FallbackCompositionState';
3030
import {
31-
SyntheticCompositionEvent,
32-
SyntheticInputEvent,
31+
CompositionEventInterface,
32+
InputEventInterface,
33+
SyntheticEvent,
3334
} from '../SyntheticEvent';
3435
import {accumulateTwoPhaseListeners} from '../DOMPluginEventSystem';
3536

@@ -237,11 +238,12 @@ function extractCompositionEvent(
237238
}
238239
}
239240

240-
const event = new SyntheticCompositionEvent(
241+
const event = new SyntheticEvent(
241242
eventType,
242243
null,
243244
nativeEvent,
244245
nativeEventTarget,
246+
CompositionEventInterface,
245247
);
246248
accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
247249

@@ -407,11 +409,12 @@ function extractBeforeInputEvent(
407409
return null;
408410
}
409411

410-
const event = new SyntheticInputEvent(
412+
const event = new SyntheticEvent(
411413
'onBeforeInput',
412414
null,
413415
nativeEvent,
414416
nativeEventTarget,
417+
InputEventInterface,
415418
);
416419
accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
417420
event.data = chars;

0 commit comments

Comments
 (0)