{"files":[{"path":"packages\/legacy-events\/EventPluginRegistry.js","status":"M"},{"path":"packages\/legacy-events\/PluginModuleType.js","status":"M"},{"path":"packages\/legacy-events\/ReactSyntheticEventType.js","status":"M"},{"path":"packages\/legacy-events\/SyntheticEvent.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/LegacySimpleEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js","status":"M"}],"body":"","parents":["3e13d70984a0ff091e71c20e1b29209bd83342d4"],"patch":"diff --git a\/packages\/legacy-events\/EventPluginRegistry.js b\/packages\/legacy-events\/EventPluginRegistry.js\nindex f720c0af37..7c22ebbcbc 100644\n--- a\/packages\/legacy-events\/EventPluginRegistry.js\n+++ b\/packages\/legacy-events\/EventPluginRegistry.js\n@@ -11,12 +11,18 @@ import type {DispatchConfig} from '.\/ReactSyntheticEventType';\n import type {\n AnyNativeEvent,\n PluginName,\n- PluginModule,\n+ LegacyPluginModule,\n+ ModernPluginModule,\n } from '.\/PluginModuleType';\n \n import invariant from 'shared\/invariant';\n \n-type NamesToPlugins = {[key: PluginName]: PluginModule, ...};\n+type NamesToPlugins = {\n+ [key: PluginName]:\n+ | LegacyPluginModule\n+ | ModernPluginModule,\n+ ...,\n+};\n type EventPluginOrder = null | Array;\n \n \/**\n@@ -84,7 +90,9 @@ function recomputePluginOrdering(): void {\n *\/\n function publishEventForPlugin(\n dispatchConfig: DispatchConfig,\n- pluginModule: PluginModule,\n+ pluginModule:\n+ | LegacyPluginModule\n+ | ModernPluginModule,\n eventName: string,\n ): boolean {\n invariant(\n@@ -128,7 +136,9 @@ function publishEventForPlugin(\n *\/\n function publishRegistrationName(\n registrationName: string,\n- pluginModule: PluginModule,\n+ pluginModule:\n+ | LegacyPluginModule\n+ | ModernPluginModule,\n eventName: string,\n ): void {\n invariant(\n@@ -243,7 +253,7 @@ export function injectEventPluginsByName(\n }\n \n export function injectEventPlugins(\n- eventPlugins: [PluginModule],\n+ eventPlugins: [ModernPluginModule],\n ): void {\n for (let i = 0; i < eventPlugins.length; i++) {\n const pluginModule = eventPlugins[i];\ndiff --git a\/packages\/legacy-events\/PluginModuleType.js b\/packages\/legacy-events\/PluginModuleType.js\nindex 4d85dc788e..7f29ccc642 100644\n--- a\/packages\/legacy-events\/PluginModuleType.js\n+++ b\/packages\/legacy-events\/PluginModuleType.js\n@@ -22,7 +22,7 @@ export type PluginName = string;\n \n export type EventSystemFlags = number;\n \n-export type PluginModule = {\n+export type LegacyPluginModule = {\n eventTypes: EventTypes,\n extractEvents: (\n topLevelType: TopLevelType,\n@@ -34,3 +34,32 @@ export type PluginModule = {\n ) => ?ReactSyntheticEvent,\n tapMoveThreshold?: number,\n };\n+\n+export type DispatchQueueItemPhaseEntry = {|\n+ instance: null | Fiber,\n+ listener: Function,\n+ currentTarget: EventTarget,\n+|};\n+\n+export type DispatchQueueItemPhase = Array;\n+\n+export type DispatchQueueItem = {|\n+ event: ReactSyntheticEvent,\n+ capture: DispatchQueueItemPhase,\n+ bubble: DispatchQueueItemPhase,\n+|};\n+\n+export type DispatchQueue = Array;\n+\n+export type ModernPluginModule = {\n+ eventTypes: EventTypes,\n+ extractEvents: (\n+ dispatchQueue: DispatchQueue,\n+ topLevelType: TopLevelType,\n+ targetInst: null | Fiber,\n+ nativeTarget: NativeEvent,\n+ nativeEventTarget: null | EventTarget,\n+ eventSystemFlags: number,\n+ container: null | EventTarget,\n+ ) => void,\n+};\ndiff --git a\/packages\/legacy-events\/ReactSyntheticEventType.js b\/packages\/legacy-events\/ReactSyntheticEventType.js\nindex d1bbe5ab69..1bc167afe0 100644\n--- a\/packages\/legacy-events\/ReactSyntheticEventType.js\n+++ b\/packages\/legacy-events\/ReactSyntheticEventType.js\n@@ -41,9 +41,8 @@ export type ReactSyntheticEvent = {|\n ) => ReactSyntheticEvent,\n isPersistent: () => boolean,\n isPropagationStopped: () => boolean,\n- _dispatchInstances: null | Array | Fiber,\n- _dispatchListeners: null | Array | Function,\n- _dispatchCurrentTargets: null | Array,\n+ _dispatchInstances?: null | Array | Fiber,\n+ _dispatchListeners?: null | Array | Function,\n _targetInst: Fiber,\n type: string,\n currentTarget: null | EventTarget,\ndiff --git a\/packages\/legacy-events\/SyntheticEvent.js b\/packages\/legacy-events\/SyntheticEvent.js\nindex c04f81685d..a5c8eb21a3 100644\n--- a\/packages\/legacy-events\/SyntheticEvent.js\n+++ b\/packages\/legacy-events\/SyntheticEvent.js\n@@ -8,6 +8,7 @@\n \/* eslint valid-typeof: 0 *\/\n \n import invariant from 'shared\/invariant';\n+import {enableModernEventSystem} from 'shared\/ReactFeatureFlags';\n \n const EVENT_POOL_SIZE = 10;\n \n@@ -76,9 +77,10 @@ function SyntheticEvent(\n this.dispatchConfig = dispatchConfig;\n this._targetInst = targetInst;\n this.nativeEvent = nativeEvent;\n- this._dispatchListeners = null;\n- this._dispatchInstances = null;\n- this._dispatchCurrentTargets = null;\n+ if (!enableModernEventSystem) {\n+ this._dispatchListeners = null;\n+ this._dispatchInstances = null;\n+ }\n \n const Interface = this.constructor.Interface;\n for (const propName in Interface) {\n@@ -186,9 +188,10 @@ Object.assign(SyntheticEvent.prototype, {\n this.nativeEvent = null;\n this.isDefaultPrevented = functionThatReturnsFalse;\n this.isPropagationStopped = functionThatReturnsFalse;\n- this._dispatchListeners = null;\n- this._dispatchInstances = null;\n- this._dispatchCurrentTargets = null;\n+ if (!enableModernEventSystem) {\n+ this._dispatchListeners = null;\n+ this._dispatchInstances = null;\n+ }\n if (__DEV__) {\n Object.defineProperty(\n this,\ndiff --git a\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js b\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\nindex 4e6041123e..6e53cb70bf 100644\n--- a\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\n@@ -12,7 +12,7 @@ import type {DOMTopLevelEventType} from 'legacy-events\/TopLevelEventTypes';\n import type {ElementListenerMap} from '..\/client\/ReactDOMComponentTree';\n import type {EventSystemFlags} from '.\/EventSystemFlags';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n-import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {LegacyPluginModule} from 'legacy-events\/PluginModuleType';\n import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n import forEachAccumulated from 'legacy-events\/forEachAccumulated';\n@@ -191,9 +191,10 @@ function extractPluginEvents(\n eventSystemFlags: EventSystemFlags,\n ): Array | ReactSyntheticEvent | null {\n let events = null;\n- for (let i = 0; i < plugins.length; i++) {\n+ const legacyPlugins = ((plugins: any): Array>);\n+ for (let i = 0; i < legacyPlugins.length; i++) {\n \/\/ Not every plugin in the ordering may be loaded at runtime.\n- const possiblePlugin: PluginModule = plugins[i];\n+ const possiblePlugin = legacyPlugins[i];\n if (possiblePlugin) {\n const extractedEvents = possiblePlugin.extractEvents(\n topLevelType,\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex f5511bbbd7..734f5b30f5 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -16,7 +16,13 @@ import type {\n import type {EventSystemFlags} from '.\/EventSystemFlags';\n import type {EventPriority} from 'shared\/ReactTypes';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n-import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {\n+ ModernPluginModule,\n+ DispatchQueue,\n+ DispatchQueueItem,\n+ DispatchQueueItemPhase,\n+ DispatchQueueItemPhaseEntry,\n+} from 'legacy-events\/PluginModuleType';\n import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n \n import {registrationNameDependencies} from 'legacy-events\/EventPluginRegistry';\n@@ -130,8 +136,6 @@ const capturePhaseEvents = new Set([\n TOP_WAITING,\n ]);\n \n-const isArray = Array.isArray;\n-\n function executeDispatch(\n event: ReactSyntheticEvent,\n listener: Function,\n@@ -143,50 +147,41 @@ function executeDispatch(\n event.currentTarget = null;\n }\n \n-function executeDispatchesInOrder(event: ReactSyntheticEvent): void {\n- \/\/ TODO we should remove _dispatchListeners and _dispatchInstances at some point.\n- const dispatchListeners = event._dispatchListeners;\n- const dispatchInstances = event._dispatchInstances;\n- const dispatchCurrentTargets = event._dispatchCurrentTargets;\n+function executeDispatchesInOrder(\n+ event: ReactSyntheticEvent,\n+ capture: DispatchQueueItemPhase,\n+ bubble: DispatchQueueItemPhase,\n+): void {\n let previousInstance;\n-\n- if (\n- dispatchListeners !== null &&\n- dispatchInstances !== null &&\n- dispatchCurrentTargets !== null\n- ) {\n- for (let i = 0; i < dispatchListeners.length; i++) {\n- const instance = dispatchInstances[i];\n- const listener = dispatchListeners[i];\n- const currentTarget = dispatchCurrentTargets[i];\n-\n- \/\/ We check if the instance was the same as the last one,\n- \/\/ if it was, then we're still on the same instance thus\n- \/\/ propagation should not stop. If we add support for\n- \/\/ stopImmediatePropagation at some point, then we'll\n- \/\/ need to handle that case here differently.\n- if (instance !== previousInstance && event.isPropagationStopped()) {\n- break;\n- }\n- \/\/ Listeners and Instances are two parallel arrays that are always in sync.\n- executeDispatch(event, listener, currentTarget);\n- previousInstance = instance;\n+ \/\/ Dispatch capture phase first.\n+ for (let i = capture.length - 1; i >= 0; i--) {\n+ const {instance, currentTarget, listener} = capture[i];\n+ if (instance !== previousInstance && event.isPropagationStopped()) {\n+ return;\n }\n+ executeDispatch(event, listener, currentTarget);\n+ previousInstance = instance;\n+ }\n+ previousInstance = undefined;\n+ \/\/ Dispatch bubble phase second.\n+ for (let i = 0; i < bubble.length; i++) {\n+ const {instance, currentTarget, listener} = bubble[i];\n+ if (instance !== previousInstance && event.isPropagationStopped()) {\n+ return;\n+ }\n+ executeDispatch(event, listener, currentTarget);\n+ previousInstance = instance;\n }\n- event._dispatchListeners = null;\n- event._dispatchInstances = null;\n- event._dispatchCurrentTargets = null;\n }\n \n-export function dispatchEventsInBatch(\n- events: Array,\n-): void {\n- for (let i = 0; i < events.length; i++) {\n- const syntheticEvent = events[i];\n- executeDispatchesInOrder(syntheticEvent);\n+export function dispatchEventsInBatch(dispatchQueue: DispatchQueue): void {\n+ for (let i = 0; i < dispatchQueue.length; i++) {\n+ const dispatchQueueItem: DispatchQueueItem = dispatchQueue[i];\n+ const {event, capture, bubble} = dispatchQueueItem;\n+ executeDispatchesInOrder(event, capture, bubble);\n \/\/ Release the event from the pool if needed\n- if (!syntheticEvent.isPersistent()) {\n- syntheticEvent.constructor.release(syntheticEvent);\n+ if (!event.isPersistent()) {\n+ event.constructor.release(event);\n }\n }\n \/\/ This would be a good time to rethrow if any of the event handlers threw.\n@@ -200,12 +195,14 @@ function dispatchEventsForPlugins(\n targetInst: null | Fiber,\n targetContainer: EventTarget,\n ): void {\n+ const modernPlugins = ((plugins: any): Array>);\n const nativeEventTarget = getEventTarget(nativeEvent);\n- const syntheticEvents: Array = [];\n+ const dispatchQueue: DispatchQueue = [];\n \n- for (let i = 0; i < plugins.length; i++) {\n- const possiblePlugin: PluginModule = plugins[i];\n- const extractedEvents = possiblePlugin.extractEvents(\n+ for (let i = 0; i < modernPlugins.length; i++) {\n+ const plugin = modernPlugins[i];\n+ plugin.extractEvents(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n@@ -213,16 +210,8 @@ function dispatchEventsForPlugins(\n eventSystemFlags,\n targetContainer,\n );\n- if (isArray(extractedEvents)) {\n- \/\/ Flow complains about @@iterator being missing in ReactSyntheticEvent,\n- \/\/ so we cast to avoid the Flow error.\n- const arrOfExtractedEvents = ((extractedEvents: any): Array);\n- syntheticEvents.push(...arrOfExtractedEvents);\n- } else if (extractedEvents != null) {\n- syntheticEvents.push(extractedEvents);\n- }\n }\n- dispatchEventsInBatch(syntheticEvents);\n+ dispatchEventsInBatch(dispatchQueue);\n }\n \n export function listenToTopLevelEvent(\n@@ -480,17 +469,44 @@ export function dispatchEventForPluginEventSystem(\n );\n }\n \n-export function accumulateTwoPhaseListeners(event: ReactSyntheticEvent): void {\n+function createDispatchQueueItemPhaseEntry(\n+ instance: null | Fiber,\n+ listener: Function,\n+ currentTarget: EventTarget,\n+): DispatchQueueItemPhaseEntry {\n+ return {\n+ instance,\n+ listener,\n+ currentTarget,\n+ };\n+}\n+\n+function createDispatchQueueItem(\n+ event: ReactSyntheticEvent,\n+ capture: DispatchQueueItemPhase,\n+ bubble: DispatchQueueItemPhase,\n+): DispatchQueueItem {\n+ return {\n+ event,\n+ capture,\n+ bubble,\n+ };\n+}\n+\n+export function accumulateTwoPhaseListeners(\n+ targetFiber: Fiber | null,\n+ dispatchQueue: DispatchQueue,\n+ event: ReactSyntheticEvent,\n+): void {\n const phasedRegistrationNames = event.dispatchConfig.phasedRegistrationNames;\n- const dispatchListeners = [];\n- const dispatchInstances: Array = [];\n- const dispatchCurrentTargets = [];\n+ const capturePhase: DispatchQueueItemPhase = [];\n+ const bubblePhase: DispatchQueueItemPhase = [];\n \n const {bubbled, captured} = phasedRegistrationNames;\n \/\/ If we are not handling EventTarget only phase, then we're doing the\n \/\/ usual two phase accumulation using the React fiber tree to pick up\n \/\/ all relevant useEvent and on* prop events.\n- let instance = event._targetInst;\n+ let instance = targetFiber;\n \n \/\/ Accumulate all instances and listeners via the target -> root path.\n while (instance !== null) {\n@@ -502,33 +518,34 @@ export function accumulateTwoPhaseListeners(event: ReactSyntheticEvent): void {\n if (captured !== null) {\n const captureListener = getListener(instance, captured);\n if (captureListener != null) {\n- \/\/ Capture listeners\/instances should go at the start, so we\n- \/\/ unshift them to the start of the array.\n- dispatchListeners.unshift(captureListener);\n- dispatchInstances.unshift(instance);\n- dispatchCurrentTargets.unshift(currentTarget);\n+ capturePhase.push(\n+ createDispatchQueueItemPhaseEntry(\n+ instance,\n+ captureListener,\n+ currentTarget,\n+ ),\n+ );\n }\n }\n if (bubbled !== null) {\n const bubbleListener = getListener(instance, bubbled);\n if (bubbleListener != null) {\n- \/\/ Bubble listeners\/instances should go at the end, so we\n- \/\/ push them to the end of the array.\n- dispatchListeners.push(bubbleListener);\n- dispatchInstances.push(instance);\n- dispatchCurrentTargets.push(currentTarget);\n+ bubblePhase.push(\n+ createDispatchQueueItemPhaseEntry(\n+ instance,\n+ bubbleListener,\n+ currentTarget,\n+ ),\n+ );\n }\n }\n }\n instance = instance.return;\n }\n-\n- \/\/ To prevent allocation to the event unless we actually\n- \/\/ have listeners we check the length of one of the arrays.\n- if (dispatchListeners.length > 0) {\n- event._dispatchListeners = dispatchListeners;\n- event._dispatchInstances = dispatchInstances;\n- event._dispatchCurrentTargets = dispatchCurrentTargets;\n+ if (capturePhase.length !== 0 || bubblePhase.length !== 0) {\n+ dispatchQueue.push(\n+ createDispatchQueueItem(event, capturePhase, bubblePhase),\n+ );\n }\n }\n \n@@ -591,6 +608,7 @@ function getLowestCommonAncestor(instA: Fiber, instB: Fiber): Fiber | null {\n }\n \n function accumulateEnterLeaveListenersForEvent(\n+ dispatchQueue: DispatchQueue,\n event: ReactSyntheticEvent,\n target: Fiber,\n common: Fiber | null,\n@@ -600,9 +618,8 @@ function accumulateEnterLeaveListenersForEvent(\n if (registrationName === undefined) {\n return;\n }\n- const dispatchListeners = [];\n- const dispatchInstances: Array = [];\n- const dispatchCurrentTargets = [];\n+ const capturePhase: DispatchQueueItemPhase = [];\n+ const bubblePhase: DispatchQueueItemPhase = [];\n \n let instance = target;\n while (instance !== null) {\n@@ -618,35 +635,38 @@ function accumulateEnterLeaveListenersForEvent(\n if (capture) {\n const captureListener = getListener(instance, registrationName);\n if (captureListener != null) {\n- \/\/ Capture listeners\/instances should go at the start, so we\n- \/\/ unshift them to the start of the array.\n- dispatchListeners.unshift(captureListener);\n- dispatchInstances.unshift(instance);\n- dispatchCurrentTargets.unshift(currentTarget);\n+ capturePhase.push(\n+ createDispatchQueueItemPhaseEntry(\n+ instance,\n+ captureListener,\n+ currentTarget,\n+ ),\n+ );\n }\n } else {\n const bubbleListener = getListener(instance, registrationName);\n if (bubbleListener != null) {\n- \/\/ Bubble listeners\/instances should go at the end, so we\n- \/\/ push them to the end of the array.\n- dispatchListeners.push(bubbleListener);\n- dispatchInstances.push(instance);\n- dispatchCurrentTargets.push(currentTarget);\n+ bubblePhase.push(\n+ createDispatchQueueItemPhaseEntry(\n+ instance,\n+ bubbleListener,\n+ currentTarget,\n+ ),\n+ );\n }\n }\n }\n instance = instance.return;\n }\n- \/\/ To prevent allocation to the event unless we actually\n- \/\/ have listeners we check the length of one of the arrays.\n- if (dispatchListeners.length > 0) {\n- event._dispatchListeners = dispatchListeners;\n- event._dispatchInstances = dispatchInstances;\n- event._dispatchCurrentTargets = dispatchCurrentTargets;\n+ if (capturePhase.length !== 0 || bubblePhase.length !== 0) {\n+ dispatchQueue.push(\n+ createDispatchQueueItem(event, capturePhase, bubblePhase),\n+ );\n }\n }\n \n export function accumulateEnterLeaveListeners(\n+ dispatchQueue: DispatchQueue,\n leaveEvent: ReactSyntheticEvent,\n enterEvent: ReactSyntheticEvent,\n from: Fiber | null,\n@@ -655,9 +675,21 @@ export function accumulateEnterLeaveListeners(\n const common = from && to ? getLowestCommonAncestor(from, to) : null;\n \n if (from !== null) {\n- accumulateEnterLeaveListenersForEvent(leaveEvent, from, common, false);\n+ accumulateEnterLeaveListenersForEvent(\n+ dispatchQueue,\n+ leaveEvent,\n+ from,\n+ common,\n+ false,\n+ );\n }\n if (to !== null) {\n- accumulateEnterLeaveListenersForEvent(enterEvent, to, common, true);\n+ accumulateEnterLeaveListenersForEvent(\n+ dispatchQueue,\n+ enterEvent,\n+ to,\n+ common,\n+ true,\n+ );\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/LegacySimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/LegacySimpleEventPlugin.js\nindex 532dbec15c..6bae4ab1cd 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/LegacySimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/LegacySimpleEventPlugin.js\n@@ -13,7 +13,7 @@ import type {\n } from 'legacy-events\/TopLevelEventTypes';\n import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n-import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {LegacyPluginModule} from 'legacy-events\/PluginModuleType';\n \n import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n \n@@ -72,7 +72,7 @@ const knownHTMLTopLevelTypes: Array = [\n DOMTopLevelEventTypes.TOP_WAITING,\n ];\n \n-const SimpleEventPlugin: PluginModule = {\n+const SimpleEventPlugin: LegacyPluginModule = {\n \/\/ simpleEventPluginEventTypes gets populated from\n \/\/ the DOMEventProperties module.\n eventTypes: simpleEventPluginEventTypes,\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js\nindex 167a117e8a..b32b6bbddc 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js\n@@ -224,6 +224,7 @@ let isComposing = false;\n * @return {?object} A SyntheticCompositionEvent.\n *\/\n function extractCompositionEvent(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n@@ -260,10 +261,11 @@ function extractCompositionEvent(\n \n const event = SyntheticCompositionEvent.getPooled(\n eventType,\n- targetInst,\n+ null,\n nativeEvent,\n nativeEventTarget,\n );\n+ accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);\n \n if (fallbackData) {\n \/\/ Inject data generated from fallback path into the synthetic event.\n@@ -275,9 +277,6 @@ function extractCompositionEvent(\n event.data = customData;\n }\n }\n-\n- accumulateTwoPhaseListeners(event);\n- return event;\n }\n \n \/**\n@@ -410,6 +409,7 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n * @return {?object} A SyntheticInputEvent.\n *\/\n function extractBeforeInputEvent(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n@@ -431,14 +431,12 @@ function extractBeforeInputEvent(\n \n const event = SyntheticInputEvent.getPooled(\n eventTypes.beforeInput,\n- targetInst,\n+ null,\n nativeEvent,\n nativeEventTarget,\n );\n-\n+ accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);\n event.data = chars;\n- accumulateTwoPhaseListeners(event);\n- return event;\n }\n \n \/**\n@@ -463,35 +461,28 @@ const BeforeInputEventPlugin = {\n eventTypes: eventTypes,\n \n extractEvents: function(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n eventSystemFlags,\n+ container,\n ) {\n- const composition = extractCompositionEvent(\n+ extractCompositionEvent(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n );\n-\n- const beforeInput = extractBeforeInputEvent(\n+ extractBeforeInputEvent(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n );\n-\n- if (composition === null) {\n- return beforeInput;\n- }\n-\n- if (beforeInput === null) {\n- return composition;\n- }\n-\n- return [composition, beforeInput];\n },\n };\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\nindex 82c0ab6a80..49f4f859f4 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\n@@ -52,17 +52,22 @@ const eventTypes = {\n },\n };\n \n-function createAndAccumulateChangeEvent(inst, nativeEvent, target) {\n+function createAndAccumulateChangeEvent(\n+ dispatchQueue,\n+ inst,\n+ nativeEvent,\n+ target,\n+) {\n const event = SyntheticEvent.getPooled(\n eventTypes.change,\n- inst,\n+ null,\n nativeEvent,\n target,\n );\n event.type = 'change';\n \/\/ Flag this event loop as needing state restore.\n enqueueStateRestore(target);\n- accumulateTwoPhaseListeners(event);\n+ accumulateTwoPhaseListeners(inst, dispatchQueue, event);\n return event;\n }\n \/**\n@@ -264,11 +269,13 @@ const ChangeEventPlugin = {\n _isInputEventSupported: isInputEventSupported,\n \n extractEvents: function(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n eventSystemFlags,\n+ container,\n ) {\n const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;\n \n@@ -289,12 +296,13 @@ const ChangeEventPlugin = {\n if (getTargetInstFunc) {\n const inst = getTargetInstFunc(topLevelType, targetInst);\n if (inst) {\n- const event = createAndAccumulateChangeEvent(\n+ createAndAccumulateChangeEvent(\n+ dispatchQueue,\n inst,\n nativeEvent,\n nativeEventTarget,\n );\n- return event;\n+ return;\n }\n }\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\nindex 14a18d8610..86af6cd6f5 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\n@@ -53,11 +53,13 @@ const EnterLeaveEventPlugin = {\n * the `mouseover` top-level event.\n *\/\n extractEvents: function(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n nativeEventTarget,\n eventSystemFlags,\n+ container,\n ) {\n const isOverEvent =\n topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;\n@@ -73,14 +75,14 @@ const EnterLeaveEventPlugin = {\n \/\/ make sure the node that we're coming from is managed by React.\n const inst = getClosestInstanceFromNode(related);\n if (inst !== null) {\n- return null;\n+ return;\n }\n }\n }\n \n if (!isOutEvent && !isOverEvent) {\n \/\/ Must not be a mouse or pointer in or out - ignoring.\n- return null;\n+ return;\n }\n \n let win;\n@@ -120,7 +122,7 @@ const EnterLeaveEventPlugin = {\n \n if (from === to) {\n \/\/ Nothing pertains to our managed components.\n- return null;\n+ return;\n }\n \n let eventInterface, leaveEventType, enterEventType, eventTypePrefix;\n@@ -163,9 +165,7 @@ const EnterLeaveEventPlugin = {\n enter.target = toNode;\n enter.relatedTarget = fromNode;\n \n- accumulateEnterLeaveListeners(leave, enter, from, to);\n-\n- return [leave, enter];\n+ accumulateEnterLeaveListeners(dispatchQueue, leave, enter, from, to);\n },\n };\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\nindex 5abb63ceb5..0550aa82a8 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\n@@ -108,7 +108,7 @@ function getEventTargetDocument(eventTarget) {\n * @param {object} nativeEventTarget\n * @return {?SyntheticEvent}\n *\/\n-function constructSelectEvent(nativeEvent, nativeEventTarget) {\n+function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {\n \/\/ Ensure we have the right element, and that the user is not dragging a\n \/\/ selection (this matches native `select` event behavior). In HTML5, select\n \/\/ fires only on input and textarea thus if there's no focused element we\n@@ -120,7 +120,7 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {\n activeElement == null ||\n activeElement !== getActiveElement(doc)\n ) {\n- return null;\n+ return;\n }\n \n \/\/ Only fire when selection has actually changed.\n@@ -130,7 +130,7 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {\n \n const syntheticEvent = SyntheticEvent.getPooled(\n eventTypes.select,\n- activeElementInst,\n+ null,\n nativeEvent,\n nativeEventTarget,\n );\n@@ -138,12 +138,12 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {\n syntheticEvent.type = 'select';\n syntheticEvent.target = activeElement;\n \n- accumulateTwoPhaseListeners(syntheticEvent);\n-\n- return syntheticEvent;\n+ accumulateTwoPhaseListeners(\n+ activeElementInst,\n+ dispatchQueue,\n+ syntheticEvent,\n+ );\n }\n-\n- return null;\n }\n \n function isListeningToEvents(\n@@ -186,6 +186,7 @@ const SelectEventPlugin = {\n eventTypes: eventTypes,\n \n extractEvents: function(\n+ dispatchQueue,\n topLevelType,\n targetInst,\n nativeEvent,\n@@ -207,7 +208,7 @@ const SelectEventPlugin = {\n (topLevelType !== TOP_SELECTION_CHANGE &&\n !isListeningToEvents(rootTargetDependencies, container))\n ) {\n- return null;\n+ return;\n }\n \n const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;\n@@ -238,7 +239,8 @@ const SelectEventPlugin = {\n case TOP_MOUSE_UP:\n case TOP_DRAG_END:\n mouseDown = false;\n- return constructSelectEvent(nativeEvent, nativeEventTarget);\n+ constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);\n+ break;\n \/\/ Chrome and IE fire non-standard event when selection is changed (and\n \/\/ sometimes when it hasn't). IE's event fires out of order with respect\n \/\/ to key and input events on deletion, so we discard it.\n@@ -255,10 +257,10 @@ const SelectEventPlugin = {\n \/\/ falls through\n case TOP_KEY_DOWN:\n case TOP_KEY_UP:\n- return constructSelectEvent(nativeEvent, nativeEventTarget);\n+ constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);\n }\n \n- return null;\n+ return;\n },\n };\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\nindex eaecb9e331..3be2a61dd6 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n@@ -11,9 +11,11 @@ import type {\n TopLevelType,\n DOMTopLevelEventType,\n } from 'legacy-events\/TopLevelEventTypes';\n-import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n-import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {\n+ ModernPluginModule,\n+ DispatchQueue,\n+} from 'legacy-events\/PluginModuleType';\n import type {EventSystemFlags} from '..\/EventSystemFlags';\n \n import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n@@ -73,21 +75,22 @@ const knownHTMLTopLevelTypes: Array = [\n DOMTopLevelEventTypes.TOP_WAITING,\n ];\n \n-const SimpleEventPlugin: PluginModule = {\n+const SimpleEventPlugin: ModernPluginModule = {\n \/\/ simpleEventPluginEventTypes gets populated from\n \/\/ the DOMEventProperties module.\n eventTypes: simpleEventPluginEventTypes,\n extractEvents: function(\n+ dispatchQueue: DispatchQueue,\n topLevelType: TopLevelType,\n targetInst: null | Fiber,\n nativeEvent: MouseEvent,\n nativeEventTarget: null | EventTarget,\n- eventSystemFlags?: EventSystemFlags,\n- targetContainer?: null | EventTarget,\n- ): null | ReactSyntheticEvent {\n+ eventSystemFlags: EventSystemFlags,\n+ targetContainer: null | EventTarget,\n+ ): void {\n const dispatchConfig = topLevelEventsToDispatchConfig.get(topLevelType);\n if (!dispatchConfig) {\n- return null;\n+ return;\n }\n let EventConstructor;\n switch (topLevelType) {\n@@ -96,7 +99,7 @@ const SimpleEventPlugin: PluginModule = {\n \/\/ the unwanted keypress events. Enter is however both printable and\n \/\/ non-printable. One would expect Tab to be as well (but it isn't).\n if (getEventCharCode(nativeEvent) === 0) {\n- return null;\n+ return;\n }\n \/* falls through *\/\n case DOMTopLevelEventTypes.TOP_KEY_DOWN:\n@@ -113,7 +116,7 @@ const SimpleEventPlugin: PluginModule = {\n \/\/ Firefox creates a click event on right mouse clicks. This removes the\n \/\/ unwanted click events.\n if (nativeEvent.button === 2) {\n- return null;\n+ return;\n }\n \/* falls through *\/\n case DOMTopLevelEventTypes.TOP_AUX_CLICK:\n@@ -193,13 +196,12 @@ const SimpleEventPlugin: PluginModule = {\n }\n const event = EventConstructor.getPooled(\n dispatchConfig,\n- targetInst,\n+ null,\n nativeEvent,\n nativeEventTarget,\n );\n \n- accumulateTwoPhaseListeners(event);\n- return event;\n+ accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);\n },\n };\n \ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js b\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js\nindex 943f34b566..f8f8f44ded 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js\n@@ -9,7 +9,7 @@\n \n import type {AnyNativeEvent} from 'legacy-events\/PluginModuleType';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n-import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {LegacyPluginModule} from 'legacy-events\/PluginModuleType';\n import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n \n@@ -37,9 +37,10 @@ function extractPluginEvents(\n nativeEventTarget: null | EventTarget,\n ): Array | ReactSyntheticEvent | null {\n let events = null;\n- for (let i = 0; i < plugins.length; i++) {\n+ const legacyPlugins = ((plugins: any): Array>);\n+ for (let i = 0; i < legacyPlugins.length; i++) {\n \/\/ Not every plugin in the ordering may be loaded at runtime.\n- const possiblePlugin: PluginModule = plugins[i];\n+ const possiblePlugin: LegacyPluginModule = legacyPlugins[i];\n if (possiblePlugin) {\n const extractedEvents = possiblePlugin.extractEvents(\n topLevelType,\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js b\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js\nindex b3461c72dd..3b1d085455 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js\n@@ -9,7 +9,7 @@\n \n import type {AnyNativeEvent} from 'legacy-events\/PluginModuleType';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n-import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {LegacyPluginModule} from 'legacy-events\/PluginModuleType';\n import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n \n@@ -126,9 +126,10 @@ function extractPluginEvents(\n nativeEventTarget: null | EventTarget,\n ): Array | ReactSyntheticEvent | null {\n let events = null;\n- for (let i = 0; i < plugins.length; i++) {\n+ const legacyPlugins = ((plugins: any): Array>);\n+ for (let i = 0; i < legacyPlugins.length; i++) {\n \/\/ Not every plugin in the ordering may be loaded at runtime.\n- const possiblePlugin: PluginModule = plugins[i];\n+ const possiblePlugin: LegacyPluginModule = legacyPlugins[i];\n if (possiblePlugin) {\n const extractedEvents = possiblePlugin.extractEvents(\n topLevelType,\n","commit":{"revision":"9751935abfa5585623f3ee85bb3c4eff4154e376","shortRevision":"9751935abf","authorEmail":"trueadm@users.noreply.github.com","authorName":"Dominic Gannaway","authoredAt":"2020-05-04T16:55:45+01:00","subject":"Modern Event System: improve dispatching queue (#18799)"}}

dillon1000/react

Files changed