@samitouri / QOS-React / commits / 61dd00db24

Extract some of the tidy up changes from 19278 (#19315)

Dominic Gannaway committed Jul 10, 2020 at 22:33 UTC 61dd00db24bec6305bd72908d3617b9f2a5183da

11 files changed +184 -270

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

+2 -5

@@ -85,7 +85,7 @@ import {

85 enableDeprecatedFlareAPI,

86 enableTrustedTypesIntegration,

87 } from 'shared/ReactFeatureFlags';

88 -import {listenToReactPropEvent} from '../events/DOMModernPluginEventSystem';

88 +import {listenToReactEvent} from '../events/DOMModernPluginEventSystem';

89 import {getEventListenerMap} from './ReactDOMComponentTree';

91 let didWarnInvalidHydration = false;

@@ -282,10 +282,7 @@ export function ensureListeningTo(

282 'ensureListeningTo(): received a container that was not an element node. ' +

283 'This is likely a bug in React.',

284 );

285 - listenToReactPropEvent(

286 - reactPropEvent,

287 - ((rootContainerElement: any): Element),

288 - );

285 + listenToReactEvent(reactPropEvent, ((rootContainerElement: any): Element));

286 }

287

288 function getOwnerDocumentFromRootContainer(

packages/react-dom/src/client/ReactDOMEventHandle.js

+41 -35

@@ -24,14 +24,14 @@ import {

24 } from './ReactDOMComponentTree';

25 import {ELEMENT_NODE} from '../shared/HTMLNodeType';

26 import {

27 - listenToTopLevelEvent,

27 + listenToNativeEvent,

28 addEventTypeToDispatchConfig,

29 } from '../events/DOMModernPluginEventSystem';

31 import {HostRoot, HostPortal} from 'react-reconciler/src/ReactWorkTags';

32 import {

33 PLUGIN_EVENT_SYSTEM,

34 - IS_TARGET_PHASE_ONLY,

34 + IS_EVENT_HANDLE_NON_MANAGED_NODE,

35 } from '../events/EventSystemFlags';

37 import {

@@ -71,12 +71,12 @@ function isReactScope(target: EventTarget | ReactScopeInstance): boolean {

72 function createEventHandleListener(

73 type: DOMTopLevelEventType,

74 - capture: boolean,

74 + isCapturePhaseListener: boolean,

75 callback: (SyntheticEvent<EventTarget>) => void,

76 ): ReactDOMEventHandleListener {

77 return {

78 callback,

79 - capture,

79 + capture: isCapturePhaseListener,

80 type,

81 };

82 }

@@ -84,9 +84,9 @@ function createEventHandleListener(

84 function registerEventOnNearestTargetContainer(

85 targetFiber: Fiber,

86 topLevelType: DOMTopLevelEventType,

87 - passive: boolean | void,

88 - priority: EventPriority | void,

89 - capture: boolean,

87 + isPassiveListener: boolean | void,

88 + listenerPriority: EventPriority | void,

89 + isCapturePhaseListener: boolean,

90 ): void {

91 // If it is, find the nearest root or portal and make it

92 // our event handle target container.

@@ -99,23 +99,23 @@ function registerEventOnNearestTargetContainer(

99 );

100 }

101 const listenerMap = getEventListenerMap(targetContainer);

102 - listenToTopLevelEvent(

102 + listenToNativeEvent(

103 topLevelType,

104 targetContainer,

105 listenerMap,

106 PLUGIN_EVENT_SYSTEM,

107 - capture,

108 - passive,

109 - priority,

107 + isCapturePhaseListener,

108 + isPassiveListener,

109 + listenerPriority,

110 );

111 }

112

113 function registerReactDOMEvent(

114 target: EventTarget | ReactScopeInstance,

115 topLevelType: DOMTopLevelEventType,

116 - passive: boolean | void,

117 - capture: boolean,

118 - priority: EventPriority | void,

116 + isPassiveListener: boolean | void,

117 + isCapturePhaseListener: boolean,

118 + listenerPriority: EventPriority | void,

119 ): void {

120 // Check if the target is a DOM element.

121 if ((target: any).nodeType === ELEMENT_NODE) {

@@ -132,9 +132,9 @@ function registerReactDOMEvent(

132 registerEventOnNearestTargetContainer(

133 targetFiber,

134 topLevelType,

135 - passive,

136 - priority,

137 - capture,

135 + isPassiveListener,

136 + listenerPriority,

137 + isCapturePhaseListener,

138 );

139 } else if (enableScopeAPI && isReactScope(target)) {

140 const scopeTarget = ((target: any): ReactScopeInstance);

@@ -146,21 +146,21 @@ function registerReactDOMEvent(

146 registerEventOnNearestTargetContainer(

147 targetFiber,

148 topLevelType,

149 - passive,

150 - priority,

151 - capture,

149 + isPassiveListener,

150 + listenerPriority,

151 + isCapturePhaseListener,

152 );

153 } else if (isValidEventTarget(target)) {

154 const eventTarget = ((target: any): EventTarget);

155 const listenerMap = getEventListenerMap(eventTarget);

156 - listenToTopLevelEvent(

156 + listenToNativeEvent(

157 topLevelType,

158 eventTarget,

159 listenerMap,

160 - PLUGIN_EVENT_SYSTEM | IS_TARGET_PHASE_ONLY,

161 - capture,

162 - passive,

163 - priority,

160 + PLUGIN_EVENT_SYSTEM | IS_EVENT_HANDLE_NON_MANAGED_NODE,

161 + isCapturePhaseListener,

162 + isPassiveListener,

163 + listenerPriority,

164 );

165 } else {

166 invariant(

@@ -177,9 +177,9 @@ export function createEventHandle(

177 ): ReactDOMEventHandle {

178 if (enableCreateEventHandleAPI) {

179 const topLevelType = ((type: any): DOMTopLevelEventType);

180 - let capture = false;

181 - let passive = undefined; // Undefined means to use the browser default

182 - let priority;

180 + let isCapturePhaseListener = false;

181 + let isPassiveListener = undefined; // Undefined means to use the browser default

182 + let listenerPriority;

183

184 if (options != null) {

185 const optionsCapture = options.capture;

@@ -187,17 +187,17 @@ export function createEventHandle(

187 const optionsPriority = options.priority;

188

189 if (typeof optionsCapture === 'boolean') {

190 - capture = optionsCapture;

190 + isCapturePhaseListener = optionsCapture;

191 }

192 if (typeof optionsPassive === 'boolean') {

193 - passive = optionsPassive;

193 + isPassiveListener = optionsPassive;

194 }

195 if (typeof optionsPriority === 'number') {

196 - priority = optionsPriority;

196 + listenerPriority = optionsPriority;

197 }

198 }

199 - if (priority === undefined) {

200 - priority = getEventPriorityForListenerSystem(topLevelType);

199 + if (listenerPriority === undefined) {

200 + listenerPriority = getEventPriorityForListenerSystem(topLevelType);

201 }

202

203 const registeredReactDOMEvents = new PossiblyWeakSet();

@@ -213,13 +213,19 @@ export function createEventHandle(

213 );

214 if (!registeredReactDOMEvents.has(target)) {

215 registeredReactDOMEvents.add(target);

216 - registerReactDOMEvent(target, topLevelType, passive, capture, priority);

216 + registerReactDOMEvent(

217 + target,

218 + topLevelType,

219 + isPassiveListener,

220 + isCapturePhaseListener,

221 + listenerPriority,

222 + );

223 // Add the event to our known event types list.

224 addEventTypeToDispatchConfig(topLevelType);

225 }

226 const listener = createEventHandleListener(

227 topLevelType,

222 - capture,

228 + isCapturePhaseListener,

229 callback,

230 );

231 let targetListeners = getEventHandlerListeners(target);

packages/react-dom/src/client/ReactDOMHostConfig.js

+2 -2

@@ -80,7 +80,7 @@ import {

80 } from 'shared/ReactFeatureFlags';

81 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';

82 import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';

83 -import {listenToReactPropEvent} from '../events/DOMModernPluginEventSystem';

83 +import {listenToReactEvent} from '../events/DOMModernPluginEventSystem';

85 export type Type = string;

86 export type Props = {

@@ -1111,7 +1111,7 @@ export function makeOpaqueHydratingObject(

1111 }

1112

1113 export function preparePortalMount(portalInstance: Instance): void {

1114 - listenToReactPropEvent('onMouseEnter', portalInstance);

1114 + listenToReactEvent('onMouseEnter', portalInstance);

1115 }

1116

1117 export function prepareScopeUpdate(

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

+125 -140

@@ -9,13 +9,7 @@

10 import type {TopLevelType, DOMTopLevelEventType} from './TopLevelEventTypes';

11 import type {EventSystemFlags} from './EventSystemFlags';

12 -import type {

13 - AnyNativeEvent,

14 - DispatchQueue,

15 - DispatchQueueItem,

16 - DispatchQueueItemPhase,

17 - DispatchQueueItemPhaseEntry,

18 -} from './PluginModuleType';

12 +import type {AnyNativeEvent} from './PluginModuleType';

13 import type {ReactSyntheticEvent} from './ReactSyntheticEventType';

14 import type {

15 ElementListenerMap,

@@ -30,7 +24,7 @@ import {

24 LEGACY_FB_SUPPORT,

25 IS_REPLAYED,

26 IS_CAPTURE_PHASE,

33 - IS_TARGET_PHASE_ONLY,

27 + IS_EVENT_HANDLE_NON_MANAGED_NODE,

28 } from './EventSystemFlags';

30 import {

@@ -115,6 +109,19 @@ import * as ModernEnterLeaveEventPlugin from './plugins/ModernEnterLeaveEventPlu

109 import * as ModernSelectEventPlugin from './plugins/ModernSelectEventPlugin';

110 import * as ModernSimpleEventPlugin from './plugins/ModernSimpleEventPlugin';

111

112 +type DispatchListener = {|

113 + instance: null | Fiber,

114 + listener: Function,

115 + currentTarget: EventTarget,

116 +|};

117 +

118 +type DispatchEntry = {|

119 + event: ReactSyntheticEvent,

120 + listeners: Array<DispatchListener>,

121 +|};

122 +

123 +export type DispatchQueue = Array<DispatchEntry>;

124 +

125 // TODO: remove top-level side effect.

126 ModernSimpleEventPlugin.registerEvents();

127 ModernEnterLeaveEventPlugin.registerEvents();

@@ -129,7 +136,7 @@ function extractEvents(

136 nativeEvent: AnyNativeEvent,

137 nativeEventTarget: null | EventTarget,

138 eventSystemFlags: EventSystemFlags,

132 - targetContainer: null | EventTarget,

139 + targetContainer: EventTarget,

140 ) {

141 // TODO: we should remove the concept of a "SimpleEventPlugin".

142 // This is the basic functionality of the event system. All

@@ -259,13 +266,13 @@ function executeDispatch(

266

267 function processDispatchQueueItemsInOrder(

268 event: ReactSyntheticEvent,

262 - phase: DispatchQueueItemPhase,

269 + dispatchListeners: Array<DispatchListener>,

270 inCapturePhase: boolean,

271 ): void {

272 let previousInstance;

273 if (inCapturePhase) {

267 - for (let i = phase.length - 1; i >= 0; i--) {

268 - const {instance, currentTarget, listener} = phase[i];

274 + for (let i = dispatchListeners.length - 1; i >= 0; i--) {

275 + const {instance, currentTarget, listener} = dispatchListeners[i];

276 if (instance !== previousInstance && event.isPropagationStopped()) {

277 return;

278 }

@@ -273,8 +280,8 @@ function processDispatchQueueItemsInOrder(

280 previousInstance = instance;

281 }

282 } else {

276 - for (let i = 0; i < phase.length; i++) {

277 - const {instance, currentTarget, listener} = phase[i];

283 + for (let i = 0; i < dispatchListeners.length; i++) {

284 + const {instance, currentTarget, listener} = dispatchListeners[i];

285 if (instance !== previousInstance && event.isPropagationStopped()) {

286 return;

287 }

@@ -290,9 +297,8 @@ export function processDispatchQueue(

297 ): void {

298 const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;

299 for (let i = 0; i < dispatchQueue.length; i++) {

293 - const dispatchQueueItem: DispatchQueueItem = dispatchQueue[i];

294 - const {event, phase} = dispatchQueueItem;

295 - processDispatchQueueItemsInOrder(event, phase, inCapturePhase);

300 + const {event, listeners} = dispatchQueue[i];

301 + processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);

302 // Modern event system doesn't use pooling.

303 }

304 // This would be a good time to rethrow if any of the event handlers threw.

@@ -329,13 +335,13 @@ function shouldUpgradeListener(

335 );

336 }

337

332 -export function listenToTopLevelEvent(

338 +export function listenToNativeEvent(

339 topLevelType: DOMTopLevelEventType,

340 target: EventTarget,

341 listenerMap: ElementListenerMap,

342 eventSystemFlags: EventSystemFlags,

337 - capture: boolean,

338 - passive?: boolean,

343 + isCapturePhaseListener: boolean,

344 + isPassiveListener?: boolean,

345 priority?: EventPriority,

346 ): void {

347 // TOP_SELECTION_CHANGE needs to be attached to the document

@@ -345,11 +351,14 @@ export function listenToTopLevelEvent(

351 target = (target: any).ownerDocument || target;

352 listenerMap = getEventListenerMap(target);

353 }

348 - const listenerMapKey = getListenerMapKey(topLevelType, capture);

354 + const listenerMapKey = getListenerMapKey(

355 + topLevelType,

356 + isCapturePhaseListener,

357 + );

358 const listenerEntry = ((listenerMap.get(

359 listenerMapKey,

360 ): any): ElementListenerMapEntry | void);

352 - const shouldUpgrade = shouldUpgradeListener(listenerEntry, passive);

361 + const shouldUpgrade = shouldUpgradeListener(listenerEntry, isPassiveListener);

362

363 // If the listener entry is empty or we should upgrade, then

364 // we need to trap an event listener onto the target.

@@ -360,23 +369,23 @@ export function listenToTopLevelEvent(

369 removeTrappedEventListener(

370 target,

371 topLevelType,

363 - capture,

372 + isCapturePhaseListener,

373 ((listenerEntry: any): ElementListenerMapEntry).listener,

374 );

375 }

367 - if (capture) {

376 + if (isCapturePhaseListener) {

377 eventSystemFlags |= IS_CAPTURE_PHASE;

378 }

379 const listener = addTrappedEventListener(

380 target,

381 topLevelType,

382 eventSystemFlags,

374 - capture,

383 + isCapturePhaseListener,

384 false,

376 - passive,

385 + isPassiveListener,

386 priority,

387 );

379 - listenerMap.set(listenerMapKey, {passive, listener});

388 + listenerMap.set(listenerMapKey, {passive: isPassiveListener, listener});

389 }

390 }

391

@@ -385,7 +394,7 @@ function isCaptureRegistrationName(registrationName: string): boolean {

394 return registrationName.substr(len - 7) === 'Capture';

395 }

396

388 -export function listenToReactPropEvent(

397 +export function listenToReactEvent(

398 reactPropEvent: string,

399 rootContainerElement: Element,

400 ): void {

@@ -412,7 +421,7 @@ export function listenToReactPropEvent(

421 const dependency = dependencies[i];

422 const capture =

423 capturePhaseEvents.has(dependency) || registrationCapturePhase;

415 - listenToTopLevelEvent(

424 + listenToNativeEvent(

425 dependency,

426 rootContainerElement,

427 listenerMap,

@@ -426,21 +435,21 @@ function addTrappedEventListener(

435 targetContainer: EventTarget,

436 topLevelType: DOMTopLevelEventType,

437 eventSystemFlags: EventSystemFlags,

429 - capture: boolean,

438 + isCapturePhaseListener: boolean,

439 isDeferredListenerForLegacyFBSupport?: boolean,

431 - passive?: boolean,

432 - priority?: EventPriority,

440 + isPassiveListener?: boolean,

441 + listenerPriority?: EventPriority,

442 ): any => void {

443 let listener = createEventListenerWrapperWithPriority(

444 targetContainer,

445 topLevelType,

446 eventSystemFlags,

438 - priority,

447 + listenerPriority,

448 );

449 // If passive option is not supported, then the event will be

450 // active and not passive.

442 - if (passive === true && !passiveBrowserEventsSupported) {

443 - passive = false;

451 + if (isPassiveListener === true && !passiveBrowserEventsSupported) {

452 + isPassiveListener = false;

453 }

454

455 targetContainer =

@@ -472,18 +481,18 @@ function addTrappedEventListener(

481 targetContainer,

482 rawEventName,

483 unsubscribeListener,

475 - capture,

484 + isCapturePhaseListener,

485 );

486 }

487 };

488 }

480 - if (capture) {

481 - if (enableCreateEventHandleAPI && passive !== undefined) {

489 + if (isCapturePhaseListener) {

490 + if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {

491 unsubscribeListener = addEventCaptureListenerWithPassiveFlag(

492 targetContainer,

493 rawEventName,

494 listener,

486 - passive,

495 + isPassiveListener,

496 );

497 } else {

498 unsubscribeListener = addEventCaptureListener(

@@ -493,12 +502,12 @@ function addTrappedEventListener(

502 );

503 }

504 } else {

496 - if (enableCreateEventHandleAPI && passive !== undefined) {

505 + if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {

506 unsubscribeListener = addEventBubbleListenerWithPassiveFlag(

507 targetContainer,

508 rawEventName,

509 listener,

501 - passive,

510 + isPassiveListener,

511 );

512 } else {

513 unsubscribeListener = addEventBubbleListener(

@@ -551,7 +560,7 @@ export function dispatchEventForPluginEventSystem(

560 targetContainer: EventTarget,

561 ): void {

562 let ancestorInst = targetInst;

554 - if (eventSystemFlags & IS_TARGET_PHASE_ONLY) {

563 + if (eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE) {

564 // For TargetEvent nodes (i.e. document, window)

565 ancestorInst = null;

566 } else {

@@ -655,11 +664,11 @@ export function dispatchEventForPluginEventSystem(

664 );

665 }

666

658 -function createDispatchQueueItemPhaseEntry(

667 +function createDispatchListener(

668 instance: null | Fiber,

669 listener: Function,

670 currentTarget: EventTarget,

662 -): DispatchQueueItemPhaseEntry {

671 +): DispatchListener {

672 return {

673 instance,

674 listener,

@@ -667,13 +676,13 @@ function createDispatchQueueItemPhaseEntry(

676 };

677 }

678

670 -function createDispatchQueueItem(

679 +function createDispatchEntry(

680 event: ReactSyntheticEvent,

672 - phase: DispatchQueueItemPhase,

673 -): DispatchQueueItem {

681 + listeners: Array<DispatchListener>,

682 +): DispatchEntry {

683 return {

684 event,

676 - phase,

685 + listeners,

686 };

687 }

688

@@ -685,7 +694,7 @@ export function accumulateSinglePhaseListeners(

694 ): void {

695 const bubbled = event._reactName;

696 const captured = bubbled !== null ? bubbled + 'Capture' : null;

688 - const phase: DispatchQueueItemPhase = [];

697 + const listeners: Array<DispatchListener> = [];

698

699 // If we are not handling EventTarget only phase, then we're doing the

700 // usual two phase accumulation using the React fiber tree to pick up

@@ -708,32 +717,31 @@ export function accumulateSinglePhaseListeners(

717 lastHostComponent = currentTarget;

718 // For Event Handle listeners

719 if (enableCreateEventHandleAPI) {

711 - const listeners = getEventHandlerListeners(currentTarget);

720 + const eventHandlerlisteners = getEventHandlerListeners(currentTarget);

721

713 - if (listeners !== null) {

714 - const listenersArr = Array.from(listeners);

715 - for (let i = 0; i < listenersArr.length; i++) {

716 - const listener = listenersArr[i];

717 - const {callback, capture, type} = listener;

722 + if (eventHandlerlisteners !== null) {

723 + const eventHandlerlistenersArr = Array.from(eventHandlerlisteners);

724 + for (let i = 0; i < eventHandlerlistenersArr.length; i++) {

725 + const {

726 + callback,

727 + capture: isCapturePhaseListener,

728 + type,

729 + } = eventHandlerlistenersArr[i];

730 if (type === targetType) {

719 - if (capture && inCapturePhase) {

720 - phase.push(

721 - createDispatchQueueItemPhaseEntry(

722 - instance,

723 - callback,

724 - currentTarget,

725 - ),

731 + if (isCapturePhaseListener && inCapturePhase) {

732 + listeners.push(

733 + createDispatchListener(instance, callback, currentTarget),

734 );

727 - } else if (!capture) {

728 - const entry = createDispatchQueueItemPhaseEntry(

735 + } else if (!isCapturePhaseListener) {

736 + const entry = createDispatchListener(

737 instance,

738 callback,

739 currentTarget,

740 );

741 if (shouldEmulateTwoPhase) {

734 - phase.unshift(entry);

742 + listeners.unshift(entry);

743 } else if (!inCapturePhase) {

736 - phase.push(entry);

744 + listeners.push(entry);

745 }

746 }

747 }

@@ -744,27 +752,23 @@ export function accumulateSinglePhaseListeners(

752 if (captured !== null && inCapturePhase) {

753 const captureListener = getListener(instance, captured);

754 if (captureListener != null) {

747 - phase.push(

748 - createDispatchQueueItemPhaseEntry(

749 - instance,

750 - captureListener,

751 - currentTarget,

752 - ),

755 + listeners.push(

756 + createDispatchListener(instance, captureListener, currentTarget),

757 );

758 }

759 }

760 if (bubbled !== null) {

761 const bubbleListener = getListener(instance, bubbled);

762 if (bubbleListener != null) {

759 - const entry = createDispatchQueueItemPhaseEntry(

763 + const entry = createDispatchListener(

764 instance,

765 bubbleListener,

766 currentTarget,

767 );

768 if (shouldEmulateTwoPhase) {

765 - phase.unshift(entry);

769 + listeners.unshift(entry);

770 } else if (!inCapturePhase) {

767 - phase.push(entry);

771 + listeners.push(entry);

772 }

773 }

774 }

@@ -775,33 +779,34 @@ export function accumulateSinglePhaseListeners(

779 lastHostComponent !== null

780 ) {

781 const reactScopeInstance = stateNode;

778 - const listeners = getEventHandlerListeners(reactScopeInstance);

782 + const eventHandlerlisteners = getEventHandlerListeners(

783 + reactScopeInstance,

784 + );

785 const lastCurrentTarget = ((lastHostComponent: any): Element);

786

781 - if (listeners !== null) {

782 - const listenersArr = Array.from(listeners);

783 - for (let i = 0; i < listenersArr.length; i++) {

784 - const listener = listenersArr[i];

785 - const {callback, capture, type} = listener;

787 + if (eventHandlerlisteners !== null) {

788 + const eventHandlerlistenersArr = Array.from(eventHandlerlisteners);

789 + for (let i = 0; i < eventHandlerlistenersArr.length; i++) {

790 + const {

791 + callback,

792 + capture: isCapturePhaseListener,

793 + type,

794 + } = eventHandlerlistenersArr[i];

795 if (type === targetType) {

787 - if (capture && inCapturePhase) {

788 - phase.push(

789 - createDispatchQueueItemPhaseEntry(

790 - instance,

791 - callback,

792 - lastCurrentTarget,

793 - ),

796 + if (isCapturePhaseListener && inCapturePhase) {

797 + listeners.push(

798 + createDispatchListener(instance, callback, lastCurrentTarget),

799 );

795 - } else if (!capture) {

796 - const entry = createDispatchQueueItemPhaseEntry(

800 + } else if (!isCapturePhaseListener) {

801 + const entry = createDispatchListener(

802 instance,

803 callback,

804 lastCurrentTarget,

805 );

806 if (shouldEmulateTwoPhase) {

802 - phase.unshift(entry);

807 + listeners.unshift(entry);

808 } else if (!inCapturePhase) {

804 - phase.push(entry);

809 + listeners.push(entry);

810 }

811 }

812 }

@@ -810,8 +815,8 @@ export function accumulateSinglePhaseListeners(

815 }

816 instance = instance.return;

817 }

813 - if (phase.length !== 0) {

814 - dispatchQueue.push(createDispatchQueueItem(event, phase));

818 + if (listeners.length !== 0) {

819 + dispatchQueue.push(createDispatchEntry(event, listeners));

820 }

821 }

822

@@ -829,7 +834,7 @@ export function accumulateTwoPhaseListeners(

834 ): void {

835 const bubbled = event._reactName;

836 const captured = bubbled !== null ? bubbled + 'Capture' : null;

832 - const phase: DispatchQueueItemPhase = [];

837 + const listeners: Array<DispatchListener> = [];

838 let instance = targetFiber;

839

840 // Accumulate all instances and listeners via the target -> root path.

@@ -842,32 +847,24 @@ export function accumulateTwoPhaseListeners(

847 if (captured !== null) {

848 const captureListener = getListener(instance, captured);

849 if (captureListener != null) {

845 - phase.unshift(

846 - createDispatchQueueItemPhaseEntry(

847 - instance,

848 - captureListener,

849 - currentTarget,

850 - ),

850 + listeners.unshift(

851 + createDispatchListener(instance, captureListener, currentTarget),

852 );

853 }

854 }

855 if (bubbled !== null) {

856 const bubbleListener = getListener(instance, bubbled);

857 if (bubbleListener != null) {

857 - phase.push(

858 - createDispatchQueueItemPhaseEntry(

859 - instance,

860 - bubbleListener,

861 - currentTarget,

862 - ),

858 + listeners.push(

859 + createDispatchListener(instance, bubbleListener, currentTarget),

860 );

861 }

862 }

863 }

864 instance = instance.return;

865 }

869 - if (phase.length !== 0) {

870 - dispatchQueue.push(createDispatchQueueItem(event, phase));

866 + if (listeners.length !== 0) {

867 + dispatchQueue.push(createDispatchEntry(event, listeners));

868 }

869 }

870

@@ -934,13 +931,13 @@ function accumulateEnterLeaveListenersForEvent(

931 event: ReactSyntheticEvent,

932 target: Fiber,

933 common: Fiber | null,

937 - capture: boolean,

934 + inCapturePhase: boolean,

935 ): void {

936 const registrationName = event._reactName;

937 if (registrationName === undefined) {

938 return;

939 }

943 - const phase: DispatchQueueItemPhase = [];

940 + const listeners: Array<DispatchListener> = [];

941

942 let instance = target;

943 while (instance !== null) {

@@ -953,34 +950,26 @@ function accumulateEnterLeaveListenersForEvent(

950 }

951 if (tag === HostComponent && stateNode !== null) {

952 const currentTarget = stateNode;

956 - if (capture) {

953 + if (inCapturePhase) {

954 const captureListener = getListener(instance, registrationName);

955 if (captureListener != null) {

959 - phase.unshift(

960 - createDispatchQueueItemPhaseEntry(

961 - instance,

962 - captureListener,

963 - currentTarget,

964 - ),

956 + listeners.unshift(

957 + createDispatchListener(instance, captureListener, currentTarget),

958 );

959 }

967 - } else if (!capture) {

960 + } else if (!inCapturePhase) {

961 const bubbleListener = getListener(instance, registrationName);

962 if (bubbleListener != null) {

970 - phase.push(

971 - createDispatchQueueItemPhaseEntry(

972 - instance,

973 - bubbleListener,

974 - currentTarget,

975 - ),

963 + listeners.push(

964 + createDispatchListener(instance, bubbleListener, currentTarget),

965 );

966 }

967 }

968 }

969 instance = instance.return;

970 }

982 - if (phase.length !== 0) {

983 - dispatchQueue.push(createDispatchQueueItem(event, phase));

971 + if (listeners.length !== 0) {

972 + dispatchQueue.push(createDispatchEntry(event, listeners));

973 }

974 }

975

@@ -1018,13 +1007,13 @@ export function accumulateEnterLeaveTwoPhaseListeners(

1007 }

1008 }

1009

1021 -export function accumulateEventHandleTargetListeners(

1010 +export function accumulateEventHandleNonManagedNodeListeners(

1011 dispatchQueue: DispatchQueue,

1012 event: ReactSyntheticEvent,

1013 currentTarget: EventTarget,

1014 inCapturePhase: boolean,

1015 ): void {

1027 - const phase: DispatchQueueItemPhase = [];

1016 + const listeners: Array<DispatchListener> = [];

1017

1018 const eventListeners = getEventHandlerListeners(currentTarget);

1019 if (eventListeners !== null) {

@@ -1033,22 +1022,18 @@ export function accumulateEventHandleTargetListeners(

1022

1023 for (let i = 0; i < listenersArr.length; i++) {

1024 const listener = listenersArr[i];

1036 - const {callback, capture, type} = listener;

1025 + const {callback, capture: isCapturePhaseListener, type} = listener;

1026 if (type === targetType) {

1038 - if (inCapturePhase && capture) {

1039 - phase.push(

1040 - createDispatchQueueItemPhaseEntry(null, callback, currentTarget),

1041 - );

1042 - } else if (!inCapturePhase && !capture) {

1043 - phase.push(

1044 - createDispatchQueueItemPhaseEntry(null, callback, currentTarget),

1045 - );

1027 + if (inCapturePhase && isCapturePhaseListener) {

1028 + listeners.push(createDispatchListener(null, callback, currentTarget));

1029 + } else if (!inCapturePhase && !isCapturePhaseListener) {

1030 + listeners.push(createDispatchListener(null, callback, currentTarget));

1031 }

1032 }

1033 }

1034 }

1050 - if (phase.length !== 0) {

1051 - dispatchQueue.push(createDispatchQueueItem(event, phase));

1035 + if (listeners.length !== 0) {

1036 + dispatchQueue.push(createDispatchEntry(event, listeners));

1037 }

1038 }

1039

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

+1 -1

@@ -11,7 +11,7 @@ export type EventSystemFlags = number;

12 export const PLUGIN_EVENT_SYSTEM = 1;

13 export const RESPONDER_EVENT_SYSTEM = 1 << 1;

14 -export const IS_TARGET_PHASE_ONLY = 1 << 2;

14 +export const IS_EVENT_HANDLE_NON_MANAGED_NODE = 1 << 2;

15 export const IS_CAPTURE_PHASE = 1 << 3;

16 export const IS_PASSIVE = 1 << 4;

17 export const PASSIVE_NOT_SUPPORTED = 1 << 5;

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

-18

@@ -7,26 +7,8 @@

7 * @flow

8 */

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

11 -import type {ReactSyntheticEvent} from './ReactSyntheticEventType';

12 -

10 export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | TouchEvent;

12 export type PluginName = string;

14 export type EventSystemFlags = number;

18 -

19 -export type DispatchQueueItemPhaseEntry = {|

20 - instance: null | Fiber,

21 - listener: Function,

22 - currentTarget: EventTarget,

23 -|};

24 -

25 -export type DispatchQueueItemPhase = Array<DispatchQueueItemPhaseEntry>;

26 -

27 -export type DispatchQueueItem = {|

28 - event: ReactSyntheticEvent,

29 - phase: DispatchQueueItemPhase,

30 -|};

31 -

32 -export type DispatchQueue = Array<DispatchQueueItem>;

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

+2 -2

@@ -136,7 +136,7 @@ import {

136 } from './DOMTopLevelEventTypes';

137 import {IS_REPLAYED, PLUGIN_EVENT_SYSTEM} from './EventSystemFlags';

138 import {

139 - listenToTopLevelEvent,

139 + listenToNativeEvent,

140 capturePhaseEvents,

141 } from './DOMModernPluginEventSystem';

142 import {addResponderEventSystemEvent} from './DeprecatedDOMEventResponderSystem';

@@ -240,7 +240,7 @@ function trapReplayableEventForContainer(

240 listenerMap: ElementListenerMap,

241 ) {

242 const capture = capturePhaseEvents.has(topLevelType);

243 - listenToTopLevelEvent(

243 + listenToNativeEvent(

244 topLevelType,

245 ((container: any): Element),

246 listenerMap,

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

+1 -1

@@ -8,7 +8,7 @@

8 */

9 import type {AnyNativeEvent} from '../PluginModuleType';

10 import type {TopLevelType} from '../TopLevelEventTypes';

11 -import type {DispatchQueue} from '../PluginModuleType';

11 +import type {DispatchQueue} from '../DOMModernPluginEventSystem';

12 import type {EventSystemFlags} from '../EventSystemFlags';

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

packages/react-dom/src/events/plugins/ModernSimpleEventPlugin.js

+7 -11

@@ -9,10 +9,8 @@

10 import type {TopLevelType} from '../../events/TopLevelEventTypes';

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

12 -import type {

13 - AnyNativeEvent,

14 - DispatchQueue,

15 -} from '../../events/PluginModuleType';

12 +import type {AnyNativeEvent} from '../../events/PluginModuleType';

13 +import type {DispatchQueue} from '../DOMModernPluginEventSystem';

14 import type {EventSystemFlags} from '../EventSystemFlags';

16 import SyntheticEvent from '../../events/SyntheticEvent';

@@ -24,9 +22,9 @@ import {

22 } from '../DOMEventProperties';

23 import {

24 accumulateSinglePhaseListeners,

27 - accumulateEventHandleTargetListeners,

25 + accumulateEventHandleNonManagedNodeListeners,

26 } from '../DOMModernPluginEventSystem';

29 -import {IS_TARGET_PHASE_ONLY} from '../EventSystemFlags';

27 +import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../EventSystemFlags';

28 import SyntheticAnimationEvent from '../SyntheticAnimationEvent';

29 import SyntheticClipboardEvent from '../SyntheticClipboardEvent';

30 import SyntheticFocusEvent from '../SyntheticFocusEvent';

@@ -50,7 +48,7 @@ function extractEvents(

48 nativeEvent: AnyNativeEvent,

49 nativeEventTarget: null | EventTarget,

50 eventSystemFlags: EventSystemFlags,

53 - targetContainer: null | EventTarget,

51 + targetContainer: EventTarget,

52 ): void {

53 const reactName = topLevelEventsToReactNames.get(topLevelType);

54 if (reactName === undefined) {

@@ -155,11 +153,9 @@ function extractEvents(

153 const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;

154 if (

155 enableCreateEventHandleAPI &&

158 - eventSystemFlags !== undefined &&

159 - eventSystemFlags & IS_TARGET_PHASE_ONLY &&

160 - targetContainer != null

156 + eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE

157 ) {

162 - accumulateEventHandleTargetListeners(

158 + accumulateEventHandleNonManagedNodeListeners(

159 dispatchQueue,

160 event,

161 targetContainer,

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

+3 -27

@@ -12,15 +12,12 @@ import type {

12 AnyNativeEvent,

13 PluginName,

14 LegacyPluginModule,

15 - ModernPluginModule,

15 } from './PluginModuleType';

17 import invariant from 'shared/invariant';

19 type NamesToPlugins = {

21 - [key: PluginName]:

22 - | LegacyPluginModule<AnyNativeEvent>

23 - | ModernPluginModule<AnyNativeEvent>,

20 + [key: PluginName]: LegacyPluginModule<AnyNativeEvent>,

21 ...,

22 };

23 type EventPluginOrder = null | Array<PluginName>;

@@ -90,9 +87,7 @@ function recomputePluginOrdering(): void {

87 */

88 function publishEventForPlugin(

89 dispatchConfig: DispatchConfig,

93 - pluginModule:

94 - | LegacyPluginModule<AnyNativeEvent>

95 - | ModernPluginModule<AnyNativeEvent>,

90 + pluginModule: LegacyPluginModule<AnyNativeEvent>,

91 eventName: string,

92 ): boolean {

93 invariant(

@@ -136,9 +131,7 @@ function publishEventForPlugin(

131 */

132 function publishRegistrationName(

133 registrationName: string,

139 - pluginModule:

140 - | LegacyPluginModule<AnyNativeEvent>

141 - | ModernPluginModule<AnyNativeEvent>,

134 + pluginModule: LegacyPluginModule<AnyNativeEvent>,

135 eventName: string,

136 ): void {

137 invariant(

@@ -251,20 +244,3 @@ export function injectEventPluginsByName(

244 recomputePluginOrdering();

245 }

246 }

254 -

255 -export function injectEventPlugins(

256 - eventPlugins: [ModernPluginModule<AnyNativeEvent>],

257 -): void {

258 - for (let i = 0; i < eventPlugins.length; i++) {

259 - const pluginModule = eventPlugins[i];

260 - plugins.push(pluginModule);

261 - const publishedEvents = pluginModule.eventTypes;

262 - for (const eventName in publishedEvents) {

263 - publishEventForPlugin(

264 - publishedEvents[eventName],

265 - pluginModule,

266 - eventName,

267 - );

268 - }

269 - }

270 -}

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

-28

@@ -34,31 +34,3 @@ export type LegacyPluginModule<NativeEvent> = {

34 ) => ?ReactSyntheticEvent,

35 tapMoveThreshold?: number,

36 };

37 -

38 -export type DispatchQueueItemPhaseEntry = {|

39 - instance: null | Fiber,

40 - listener: Function,

41 - currentTarget: EventTarget,

42 -|};

43 -

44 -export type DispatchQueueItemPhase = Array<DispatchQueueItemPhaseEntry>;

45 -

46 -export type DispatchQueueItem = {|

47 - event: ReactSyntheticEvent,

48 - phase: DispatchQueueItemPhase,

49 -|};

50 -

51 -export type DispatchQueue = Array<DispatchQueueItem>;

52 -

53 -export type ModernPluginModule<NativeEvent> = {

54 - eventTypes: EventTypes,

55 - extractEvents: (

56 - dispatchQueue: DispatchQueue,

57 - topLevelType: TopLevelType,

58 - targetInst: null | Fiber,

59 - nativeTarget: NativeEvent,

60 - nativeEventTarget: null | EventTarget,

61 - eventSystemFlags: number,

62 - container: null | EventTarget,

63 - ) => void,

64 -};