Skip to content

Commit 991c3b8

Browse files
gaearongaearon
authored
Make event config an implementation detail of each plugin (facebook#19236)
* Merge two variables with same purpose * Replace dispatchConfig with _reactName on event object
1 parent b683c07 commit 991c3b8

13 files changed

+71
-176
lines changed

‎packages/react-dom/src/client/ReactDOMComponent.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
*/
99

1010
import {
11-
registrationNames,
11+
registrationNameDependencies,
1212
possibleRegistrationNames,
1313
} from '../events/EventPluginRegistry';
1414
import {canUseDOM} from 'shared/ExecutionEnvironment';
@@ -133,7 +133,7 @@ if (__DEV__) {
133133
validateARIAProperties(type, props);
134134
validateInputProperties(type, props);
135135
validateUnknownProperties(type, props, {
136-
registrationNames,
136+
registrationNameDependencies,
137137
possibleRegistrationNames,
138138
});
139139
};
@@ -356,7 +356,7 @@ function setInitialDOMProperties(
356356
// We could have excluded it in the property list instead of
357357
// adding a special case here, but then it wouldn't be emitted
358358
// on server rendering (but we *do* want to emit it in SSR).
359-
} else if (registrationNames.hasOwnProperty(propKey)) {
359+
} else if (registrationNameDependencies.hasOwnProperty(propKey)) {
360360
if (nextProp != null) {
361361
if (__DEV__ && typeof nextProp !== 'function') {
362362
warnForInvalidEventListener(propKey, nextProp);
@@ -694,7 +694,7 @@ export function diffProperties(
694694
// Noop
695695
} else if (propKey === AUTOFOCUS) {
696696
// Noop. It doesn't work on updates anyway.
697-
} else if (registrationNames.hasOwnProperty(propKey)) {
697+
} else if (registrationNameDependencies.hasOwnProperty(propKey)) {
698698
// This is a special case. If any listener updates we need to ensure
699699
// that the "current" fiber pointer gets updated so we need a commit
700700
// to update this element.
@@ -781,7 +781,7 @@ export function diffProperties(
781781
propKey === SUPPRESS_HYDRATION_WARNING
782782
) {
783783
// Noop
784-
} else if (registrationNames.hasOwnProperty(propKey)) {
784+
} else if (registrationNameDependencies.hasOwnProperty(propKey)) {
785785
if (nextProp != null) {
786786
// We eagerly listen to this even though we haven't committed yet.
787787
if (__DEV__ && typeof nextProp !== 'function') {
@@ -978,7 +978,7 @@ export function diffHydratedProperties(
978978
updatePayload = [CHILDREN, '' + nextProp];
979979
}
980980
}
981-
} else if (registrationNames.hasOwnProperty(propKey)) {
981+
} else if (registrationNameDependencies.hasOwnProperty(propKey)) {
982982
if (nextProp != null) {
983983
if (__DEV__ && typeof nextProp !== 'function') {
984984
warnForInvalidEventListener(propKey, nextProp);

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,6 @@ import type {
1313
DOMTopLevelEventType,
1414
} from '../events/TopLevelEventTypes';
1515
import type {EventTypes} from '../events/PluginModuleType';
16-
import type {
17-
DispatchConfig,
18-
CustomDispatchConfig,
19-
} from '../events/ReactSyntheticEventType';
2016

2117
import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
2218
import {
@@ -35,9 +31,9 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
3531
// update the below line.
3632
export const simpleEventPluginEventTypes: EventTypes = {};
3733

38-
export const topLevelEventsToDispatchConfig: Map<
34+
export const topLevelEventsToReactNames: Map<
3935
TopLevelType,
40-
DispatchConfig | CustomDispatchConfig,
36+
string | null,
4137
> = new Map();
4238

4339
const eventPriorities = new Map();
@@ -167,8 +163,8 @@ const continuousPairsForSimpleEventPlugin = [
167163
* },
168164
* ...
169165
* };
170-
* topLevelEventsToDispatchConfig = new Map([
171-
* [TOP_ABORT, { sameConfig }],
166+
* topLevelEventsToReactNames = new Map([
167+
* [TOP_ABORT, 'onAbort'],
172168
* ]);
173169
*/
174170

@@ -197,7 +193,7 @@ function processSimpleEventPluginPairsByPriority(
197193
eventPriority: priority,
198194
};
199195
eventPriorities.set(topEvent, priority);
200-
topLevelEventsToDispatchConfig.set(topEvent, config);
196+
topLevelEventsToReactNames.set(topEvent, onEvent);
201197
simpleEventPluginEventTypes[event] = config;
202198
}
203199
}

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

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,7 @@ import type {
1616
DispatchQueueItemPhase,
1717
DispatchQueueItemPhaseEntry,
1818
} from './PluginModuleType';
19-
import type {
20-
ReactSyntheticEvent,
21-
CustomDispatchConfig,
22-
} from './ReactSyntheticEventType';
19+
import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
2320
import type {
2421
ElementListenerMap,
2522
ElementListenerMapEntry,
@@ -113,7 +110,7 @@ import {
113110
addEventCaptureListenerWithPassiveFlag,
114111
} from './EventListener';
115112
import {removeTrappedEventListener} from './DeprecatedDOMEventResponderSystem';
116-
import {topLevelEventsToDispatchConfig} from './DOMEventProperties';
113+
import {topLevelEventsToReactNames} from './DOMEventProperties';
117114
import * as ModernBeforeInputEventPlugin from './plugins/ModernBeforeInputEventPlugin';
118115
import * as ModernChangeEventPlugin from './plugins/ModernChangeEventPlugin';
119116
import * as ModernEnterLeaveEventPlugin from './plugins/ModernEnterLeaveEventPlugin';
@@ -223,14 +220,6 @@ if (enableCreateEventHandleAPI) {
223220
capturePhaseEvents.add(TOP_AFTER_BLUR);
224221
}
225222

226-
const emptyDispatchConfigForCustomEvents: CustomDispatchConfig = {
227-
customEvent: true,
228-
phasedRegistrationNames: {
229-
bubbled: null,
230-
captured: null,
231-
},
232-
};
233-
234223
function executeDispatch(
235224
event: ReactSyntheticEvent,
236225
listener: Function,
@@ -639,11 +628,11 @@ export function accumulateTwoPhaseListeners(
639628
event: ReactSyntheticEvent,
640629
accumulateEventHandleListeners?: boolean,
641630
): void {
642-
const phasedRegistrationNames = event.dispatchConfig.phasedRegistrationNames;
631+
const bubbled = event._reactName;
632+
const captured = bubbled !== null ? bubbled + 'Capture' : null;
643633
const capturePhase: DispatchQueueItemPhase = [];
644634
const bubblePhase: DispatchQueueItemPhase = [];
645635

646-
const {bubbled, captured} = phasedRegistrationNames;
647636
// If we are not handling EventTarget only phase, then we're doing the
648637
// usual two phase accumulation using the React fiber tree to pick up
649638
// all relevant useEvent and on* prop events.
@@ -826,7 +815,7 @@ function accumulateEnterLeaveListenersForEvent(
826815
common: Fiber | null,
827816
capture: boolean,
828817
): void {
829-
const registrationName = event.dispatchConfig.registrationName;
818+
const registrationName = event._reactName;
830819
if (registrationName === undefined) {
831820
return;
832821
}
@@ -944,17 +933,14 @@ export function accumulateEventTargetListeners(
944933
}
945934

946935
export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
947-
const dispatchConfig = topLevelEventsToDispatchConfig.get(type);
948-
// If we don't have a dispatchConfig, then we're dealing with
936+
const reactName = topLevelEventsToReactNames.get(type);
937+
// If we don't have a reactName, then we're dealing with
949938
// an event type that React does not know about (i.e. a custom event).
950939
// We need to register an event config for this or the SimpleEventPlugin
951940
// will not appropriately provide a SyntheticEvent, so we use out empty
952941
// dispatch config for custom events.
953-
if (dispatchConfig === undefined) {
954-
topLevelEventsToDispatchConfig.set(
955-
type,
956-
emptyDispatchConfigForCustomEvents,
957-
);
942+
if (reactName === undefined) {
943+
topLevelEventsToReactNames.set(type, null);
958944
}
959945
}
960946

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,6 @@
1010
import type {TopLevelType} from './TopLevelEventTypes';
1111
import type {EventTypes} from './PluginModuleType';
1212

13-
import invariant from 'shared/invariant';
14-
15-
/**
16-
* Mapping from registration name to plugin module
17-
*/
18-
export const registrationNames = {};
19-
2013
/**
2114
* Mapping from registration name to event name
2215
*/
@@ -62,13 +55,16 @@ function publishRegistrationName(
6255
registrationName: string,
6356
dependencies: ?Array<TopLevelType>,
6457
): void {
65-
invariant(
66-
!registrationNames[registrationName],
67-
'EventPluginRegistry: More than one plugin attempted to publish the same ' +
68-
'registration name, `%s`.',
69-
registrationName,
70-
);
71-
registrationNames[registrationName] = true;
58+
if (__DEV__) {
59+
if (registrationNameDependencies[registrationName]) {
60+
console.error(
61+
'EventPluginRegistry: More than one plugin attempted to publish the same ' +
62+
'registration name, `%s`.',
63+
registrationName,
64+
);
65+
}
66+
}
67+
7268
registrationNameDependencies[registrationName] = dependencies;
7369

7470
if (__DEV__) {

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,12 @@ export type DispatchConfig = {|
2222
eventPriority?: EventPriority,
2323
|};
2424

25-
export type CustomDispatchConfig = {|
26-
phasedRegistrationNames: {|
27-
bubbled: null,
28-
captured: null,
29-
|},
30-
registrationName?: string,
31-
customEvent: true,
32-
|};
33-
3425
export type ReactSyntheticEvent = {|
35-
dispatchConfig: DispatchConfig | CustomDispatchConfig,
3626
isPersistent: () => boolean,
3727
isPropagationStopped: () => boolean,
3828
_dispatchInstances?: null | Array<Fiber | null> | Fiber,
3929
_dispatchListeners?: null | Array<Function> | Function,
30+
_reactName: string,
4031
_targetInst: Fiber,
4132
type: string,
4233
currentTarget: null | EventTarget,

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

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,9 @@ function functionThatReturnsFalse() {
4848
* Synthetic events (and subclasses) implement the DOM Level 3 Events API by
4949
* normalizing browser quirks. Subclasses do not necessarily have to implement a
5050
* DOM interface; custom application-specific events can also subclass this.
51-
*
52-
* @param {object} dispatchConfig Configuration used to dispatch this event.
53-
* @param {*} targetInst Marker identifying the event target.
54-
* @param {object} nativeEvent Native browser event.
55-
* @param {DOMEventTarget} nativeEventTarget Target node.
5651
*/
57-
function SyntheticEvent(
58-
dispatchConfig,
59-
targetInst,
60-
nativeEvent,
61-
nativeEventTarget,
62-
) {
63-
this.dispatchConfig = dispatchConfig;
52+
function SyntheticEvent(reactName, targetInst, nativeEvent, nativeEventTarget) {
53+
this._reactName = reactName;
6454
this._targetInst = targetInst;
6555
this.nativeEvent = nativeEvent;
6656

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,11 @@ function isKeypressCommand(nativeEvent) {
140140
function getCompositionEventType(topLevelType) {
141141
switch (topLevelType) {
142142
case TOP_COMPOSITION_START:
143-
return eventTypes.compositionStart;
143+
return 'onCompositionStart';
144144
case TOP_COMPOSITION_END:
145-
return eventTypes.compositionEnd;
145+
return 'onCompositionEnd';
146146
case TOP_COMPOSITION_UPDATE:
147-
return eventTypes.compositionUpdate;
147+
return 'onCompositionUpdate';
148148
}
149149
}
150150

@@ -237,10 +237,10 @@ function extractCompositionEvent(
237237
eventType = getCompositionEventType(topLevelType);
238238
} else if (!isComposing) {
239239
if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
240-
eventType = eventTypes.compositionStart;
240+
eventType = 'onCompositionStart';
241241
}
242242
} else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
243-
eventType = eventTypes.compositionEnd;
243+
eventType = 'onCompositionEnd';
244244
}
245245

246246
if (!eventType) {
@@ -250,9 +250,9 @@ function extractCompositionEvent(
250250
if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
251251
// The current composition is stored statically and must not be
252252
// overwritten while composition continues.
253-
if (!isComposing && eventType === eventTypes.compositionStart) {
253+
if (!isComposing && eventType === 'onCompositionStart') {
254254
isComposing = FallbackCompositionStateInitialize(nativeEventTarget);
255-
} else if (eventType === eventTypes.compositionEnd) {
255+
} else if (eventType === 'onCompositionEnd') {
256256
if (isComposing) {
257257
fallbackData = FallbackCompositionStateGetData();
258258
}
@@ -430,7 +430,7 @@ function extractBeforeInputEvent(
430430
}
431431

432432
const event = new SyntheticInputEvent(
433-
eventTypes.beforeInput,
433+
'onBeforeInput',
434434
null,
435435
nativeEvent,
436436
nativeEventTarget,

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,7 @@ function createAndAccumulateChangeEvent(
6464
nativeEvent,
6565
target,
6666
) {
67-
const event = new SyntheticEvent(
68-
eventTypes.change,
69-
null,
70-
nativeEvent,
71-
target,
72-
);
67+
const event = new SyntheticEvent('onChange', null, nativeEvent, target);
7368
event.type = 'change';
7469
// Flag this event loop as needing state restore.
7570
enqueueStateRestore(((target: any): Node));

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,16 +126,16 @@ function extractEvents(
126126

127127
if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {
128128
eventInterface = SyntheticMouseEvent;
129-
leaveEventType = eventTypes.mouseLeave;
130-
enterEventType = eventTypes.mouseEnter;
129+
leaveEventType = 'onMouseLeave';
130+
enterEventType = 'onMouseEnter';
131131
eventTypePrefix = 'mouse';
132132
} else if (
133133
topLevelType === TOP_POINTER_OUT ||
134134
topLevelType === TOP_POINTER_OVER
135135
) {
136136
eventInterface = SyntheticPointerEvent;
137-
leaveEventType = eventTypes.pointerLeave;
138-
enterEventType = eventTypes.pointerEnter;
137+
leaveEventType = 'onPointerLeave';
138+
enterEventType = 'onPointerEnter';
139139
eventTypePrefix = 'pointer';
140140
}
141141

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
133133
lastSelection = currentSelection;
134134

135135
const syntheticEvent = new SyntheticEvent(
136-
eventTypes.select,
136+
'onSelect',
137137
null,
138138
nativeEvent,
139139
nativeEventTarget,

0 commit comments

Comments
 (0)