@samitouri / QOS-React-2 / commits / 77754ae618

Decouple event priority list from event name list (#20760)

* Remove some dead code * Decouple event priority list from event name list * Fix lint

Dan Abramov committed Feb 8, 2021 at 20:48 UTC 77754ae6183197a63716202f71be5d396f0f2b9a

4 files changed +86 -102

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

+12 -97

@@ -7,7 +7,6 @@

7 * @flow

8 */

10 -import type {EventPriority} from 'shared/ReactTypes';

10 import type {DOMEventName} from './DOMEventNames';

12 import {registerTwoPhaseEvent} from './EventRegistry';

@@ -17,7 +16,6 @@ import {

16 ANIMATION_START,

17 TRANSITION_END,

18 } from './DOMEventNames';

20 -import {DiscreteEvent, ContinuousEvent, DefaultEvent} from 'shared/ReactTypes';

20 import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';

@@ -26,19 +24,8 @@ export const topLevelEventsToReactNames: Map<

24 string | null,

25 > = new Map();

29 -const eventPriorities = new Map();

30 -

31 -// We store most of the events in this module in pairs of two strings so we can re-use

32 -// the code required to apply the same logic for event prioritization and that of the

33 -// SimpleEventPlugin. This complicates things slightly, but the aim is to reduce code

34 -// duplication (for which there would be quite a bit). For the events that are not needed

35 -// for the SimpleEventPlugin (otherDiscreteEvents) we process them separately as an

36 -// array of top level events.

37 -

38 -// Lastly, we ignore prettier so we can keep the formatting sane.

39 -

27 // prettier-ignore

41 -const discreteEventPairsForSimpleEventPlugin = [

28 +const simpleEventPluginNames = [

29 ('cancel': DOMEventName), 'cancel',

30 ('click': DOMEventName), 'click',

31 ('close': DOMEventName), 'close',

@@ -73,27 +60,7 @@ const discreteEventPairsForSimpleEventPlugin = [

60 ('touchend': DOMEventName), 'touchEnd',

61 ('touchstart': DOMEventName), 'touchStart',

62 ('volumechange': DOMEventName), 'volumeChange',

76 -];

77 -

78 -const otherDiscreteEvents: Array<DOMEventName> = [

79 - 'change',

80 - 'selectionchange',

81 - 'textInput',

82 - 'compositionstart',

83 - 'compositionend',

84 - 'compositionupdate',

85 -];

86 -

87 -if (enableCreateEventHandleAPI) {

88 - // Special case: these two events don't have on* React handler

89 - // and are only accessible via the createEventHandle API.

90 - topLevelEventsToReactNames.set('beforeblur', null);

91 - topLevelEventsToReactNames.set('afterblur', null);

92 - otherDiscreteEvents.push('beforeblur', 'afterblur');

93 -}

95 -// prettier-ignore

96 -const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [

64 ('drag': DOMEventName), 'drag',

65 ('dragenter': DOMEventName), 'dragEnter',

66 ('dragexit': DOMEventName), 'dragExit',

@@ -109,10 +76,7 @@ const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [

76 ('toggle': DOMEventName), 'toggle',

77 ('touchmove': DOMEventName), 'touchMove',

78 ('wheel': DOMEventName), 'wheel',

112 -];

114 -// prettier-ignore

115 -const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [

80 ('abort': DOMEventName), 'abort',

81 (ANIMATION_END: DOMEventName), 'animationEnd',

82 (ANIMATION_ITERATION: DOMEventName), 'animationIteration',

@@ -140,6 +104,13 @@ const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [

104 ('waiting': DOMEventName), 'waiting',

105 ];

106

107 +if (enableCreateEventHandleAPI) {

108 + // Special case: these two events don't have on* React handler

109 + // and are only accessible via the createEventHandle API.

110 + topLevelEventsToReactNames.set('beforeblur', null);

111 + topLevelEventsToReactNames.set('afterblur', null);

112 +}

113 +

114 /**

115 * Turns

116 * ['abort', ...]

@@ -152,75 +123,19 @@ const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [

123 *

124 * and registers them.

125 */

155 -function registerSimplePluginEventsAndSetTheirPriorities(

156 - eventTypes: Array<DOMEventName | string>,

157 - priority: EventPriority,

158 -): void {

126 +export function registerSimpleEvents() {

127 // As the event types are in pairs of two, we need to iterate

128 // through in twos. The events are in pairs of two to save code

129 // and improve init perf of processing this array, as it will

130 // result in far fewer object allocations and property accesses

131 // if we only use three arrays to process all the categories of

132 // instead of tuples.

165 - for (let i = 0; i < eventTypes.length; i += 2) {

166 - const topEvent = ((eventTypes[i]: any): DOMEventName);

167 - const event = ((eventTypes[i + 1]: any): string);

133 + for (let i = 0; i < simpleEventPluginNames.length; i += 2) {

134 + const topEvent = ((simpleEventPluginNames[i]: any): DOMEventName);

135 + const event = ((simpleEventPluginNames[i + 1]: any): string);

136 const capitalizedEvent = event[0].toUpperCase() + event.slice(1);

137 const reactName = 'on' + capitalizedEvent;

170 - eventPriorities.set(topEvent, priority);

138 topLevelEventsToReactNames.set(topEvent, reactName);

139 registerTwoPhaseEvent(reactName, [topEvent]);

140 }

141 }

175 -

176 -function setEventPriorities(

177 - eventTypes: Array<DOMEventName>,

178 - priority: EventPriority,

179 -): void {

180 - for (let i = 0; i < eventTypes.length; i++) {

181 - eventPriorities.set(eventTypes[i], priority);

182 - }

183 -}

184 -

185 -export function getEventPriorityForPluginSystem(

186 - domEventName: DOMEventName,

187 -): EventPriority {

188 - const priority = eventPriorities.get(domEventName);

189 - // Default to a DefaultEvent. Note: we might

190 - // want to warn if we can't detect the priority

191 - // for the event.

192 - return priority === undefined ? DefaultEvent : priority;

193 -}

194 -

195 -export function getEventPriorityForListenerSystem(

196 - type: DOMEventName,

197 -): EventPriority {

198 - const priority = eventPriorities.get(type);

199 - if (priority !== undefined) {

200 - return priority;

201 - }

202 - if (__DEV__) {

203 - console.warn(

204 - 'The event "%s" provided to createEventHandle() does not have a known priority type.' +

205 - ' This is likely a bug in React.',

206 - type,

207 - );

208 - }

209 - return DefaultEvent;

210 -}

211 -

212 -export function registerSimpleEvents() {

213 - registerSimplePluginEventsAndSetTheirPriorities(

214 - discreteEventPairsForSimpleEventPlugin,

215 - DiscreteEvent,

216 - );

217 - registerSimplePluginEventsAndSetTheirPriorities(

218 - continuousPairsForSimpleEventPlugin,

219 - ContinuousEvent,

220 - );

221 - registerSimplePluginEventsAndSetTheirPriorities(

222 - defaultPairsForSimpleEventPlugin,

223 - DefaultEvent,

224 - );

225 - setEventPriorities(otherDiscreteEvents, DiscreteEvent);

226 -}

packages/react-dom/src/events/ReactDOMEventListener.js

+74 -1

@@ -11,6 +11,7 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';

11 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';

12 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';

13 import type {DOMEventName} from '../events/DOMEventNames';

14 +import type {EventPriority} from 'shared/ReactTypes';

16 // Intentionally not named imports because Rollup would use dynamic dispatch for

17 // CommonJS interop named imports.

@@ -44,7 +45,6 @@ import {

45 enableNewReconciler,

46 } from 'shared/ReactFeatureFlags';

47 import {ContinuousEvent, DefaultEvent, DiscreteEvent} from 'shared/ReactTypes';

47 -import {getEventPriorityForPluginSystem} from './DOMEventProperties';

48 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';

49 import {

50 flushDiscreteUpdatesIfNeeded,

@@ -339,3 +339,76 @@ export function attemptToDispatchEvent(

339 // We're not blocked on anything.

340 return null;

341 }

342 +

343 +function getEventPriorityForPluginSystem(

344 + domEventName: DOMEventName,

345 +): EventPriority {

346 + switch (domEventName) {

347 + // Used by SimpleEventPlugin:

348 + case 'cancel':

349 + case 'click':

350 + case 'close':

351 + case 'contextmenu':

352 + case 'copy':

353 + case 'cut':

354 + case 'auxclick':

355 + case 'dblclick':

356 + case 'dragend':

357 + case 'dragstart':

358 + case 'drop':

359 + case 'focusin':

360 + case 'focusout':

361 + case 'input':

362 + case 'invalid':

363 + case 'keydown':

364 + case 'keypress':

365 + case 'keyup':

366 + case 'mousedown':

367 + case 'mouseup':

368 + case 'paste':

369 + case 'pause':

370 + case 'play':

371 + case 'pointercancel':

372 + case 'pointerdown':

373 + case 'pointerup':

374 + case 'ratechange':

375 + case 'reset':

376 + case 'seeked':

377 + case 'submit':

378 + case 'touchcancel':

379 + case 'touchend':

380 + case 'touchstart':

381 + case 'volumechange':

382 + // Used by polyfills:

383 + // eslint-disable-next-line no-fallthrough

384 + case 'change':

385 + case 'selectionchange':

386 + case 'textInput':

387 + case 'compositionstart':

388 + case 'compositionend':

389 + case 'compositionupdate':

390 + // Only enableCreateEventHandleAPI:

391 + // eslint-disable-next-line no-fallthrough

392 + case 'beforeblur':

393 + case 'afterblur':

394 + return DiscreteEvent;

395 + case 'drag':

396 + case 'dragenter':

397 + case 'dragexit':

398 + case 'dragleave':

399 + case 'dragover':

400 + case 'mousemove':

401 + case 'mouseout':

402 + case 'mouseover':

403 + case 'pointermove':

404 + case 'pointerout':

405 + case 'pointerover':

406 + case 'scroll':

407 + case 'toggle':

408 + case 'touchmove':

409 + case 'wheel':

410 + return ContinuousEvent;

411 + default:

412 + return DefaultEvent;

413 + }

414 +}

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

-2

@@ -9,7 +9,6 @@

9 */

11 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';

12 -import type {EventPriority} from 'shared/ReactTypes';

12 import type {DOMEventName} from './DOMEventNames';

14 export type DispatchConfig = {|

@@ -19,7 +18,6 @@ export type DispatchConfig = {|

18 captured: null | string,

19 |},

20 registrationName?: string,

22 - eventPriority?: EventPriority,

21 |};

23 type BaseSyntheticEvent = {

packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js

-2