{"body":"* Refine event registration + event signatures\r\n\r\n* Address feedback","parents":["1cbaf48889c6362232d907e57ce6c132744445d0"],"patch":"diff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex 382581f815..06ff7e52f8 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -7,6 +7,8 @@\n * @flow\n *\/\n \n+import type {ElementListenerMapEntry} from '..\/client\/ReactDOMComponentTree';\n+\n import {\n registrationNameDependencies,\n possibleRegistrationNames,\n@@ -82,7 +84,7 @@ import {\n enableDeprecatedFlareAPI,\n enableTrustedTypesIntegration,\n } from 'shared\/ReactFeatureFlags';\n-import {listenToEvent} from '..\/events\/DOMModernPluginEventSystem';\n+import {listenToReactPropEvent} from '..\/events\/DOMModernPluginEventSystem';\n import {getEventListenerMap} from '.\/ReactDOMComponentTree';\n \n let didWarnInvalidHydration = false;\n@@ -262,7 +264,7 @@ if (__DEV__) {\n \n export function ensureListeningTo(\n rootContainerInstance: Element | Node,\n- registrationName: string,\n+ reactPropEvent: string,\n ): void {\n \/\/ If we have a comment node, then use the parent node,\n \/\/ which should be an element.\n@@ -279,7 +281,10 @@ export function ensureListeningTo(\n 'ensureListeningTo(): received a container that was not an element node. ' +\n 'This is likely a bug in React.',\n );\n- listenToEvent(registrationName, ((rootContainerElement: any): Element));\n+ listenToReactPropEvent(\n+ reactPropEvent,\n+ ((rootContainerElement: any): Element),\n+ );\n }\n \n function getOwnerDocumentFromRootContainer(\n@@ -1267,7 +1272,9 @@ export function listenToEventResponderEventTypes(\n \/\/ existing passive event listener before we add the\n \/\/ active event listener.\n const passiveKey = targetEventType + '_passive';\n- const passiveItem = listenerMap.get(passiveKey);\n+ const passiveItem = ((listenerMap.get(\n+ passiveKey,\n+ ): any): ElementListenerMapEntry | void);\n if (passiveItem !== undefined) {\n removeTrappedEventListener(\n document,\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js b\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\nindex 5381083e4c..606050f8f3 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponentTree.js\n@@ -42,7 +42,7 @@ const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;\n \n export type ElementListenerMap = Map<\n DOMTopLevelEventType | string,\n- ElementListenerMapEntry,\n+ ElementListenerMapEntry | null,\n >;\n \n export type ElementListenerMapEntry = {\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\nindex ae9b40d130..64c76718e0 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n@@ -26,6 +26,7 @@ import {ELEMENT_NODE} from '..\/shared\/HTMLNodeType';\n import {\n listenToTopLevelEvent,\n addEventTypeToDispatchConfig,\n+ capturePhaseEvents,\n } from '..\/events\/DOMModernPluginEventSystem';\n \n import {HostRoot, HostPortal} from 'react-reconciler\/src\/ReactWorkTags';\n@@ -98,11 +99,13 @@ function registerEventOnNearestTargetContainer(\n );\n }\n const listenerMap = getEventListenerMap(targetContainer);\n+ const capture = capturePhaseEvents.has(topLevelType);\n listenToTopLevelEvent(\n topLevelType,\n targetContainer,\n listenerMap,\n PLUGIN_EVENT_SYSTEM,\n+ capture,\n passive,\n priority,\n );\n@@ -201,9 +204,9 @@ export function createEventHandle(\n eventTarget,\n listenerMap,\n PLUGIN_EVENT_SYSTEM | IS_TARGET_PHASE_ONLY,\n+ capture,\n passive,\n priority,\n- capture,\n );\n } else {\n invariant(\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex f064b0f9c2..f794a3ded8 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -81,7 +81,7 @@ import {\n import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '..\/events\/DOMTopLevelEventTypes';\n import {\n- listenToEvent,\n+ listenToReactPropEvent,\n clearEventHandleListenersForTarget,\n } from '..\/events\/DOMModernPluginEventSystem';\n \n@@ -1122,7 +1122,7 @@ export function makeOpaqueHydratingObject(\n }\n \n export function preparePortalMount(portalInstance: Instance): void {\n- listenToEvent('onMouseEnter', portalInstance);\n+ listenToReactPropEvent('onMouseEnter', portalInstance);\n }\n \n export function prepareScopeUpdate(\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex 7ce99083b2..f1d95fe5a2 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -30,6 +30,7 @@ import {\n LEGACY_FB_SUPPORT,\n IS_REPLAYED,\n IS_TARGET_PHASE_ONLY,\n+ IS_CAPTURE_PHASE,\n } from '.\/EventSystemFlags';\n \n import {\n@@ -301,9 +302,9 @@ export function listenToTopLevelEvent(\n target: EventTarget,\n listenerMap: ElementListenerMap,\n eventSystemFlags: EventSystemFlags,\n+ capture: boolean,\n passive?: boolean,\n priority?: EventPriority,\n- capture?: boolean,\n ): void {\n \/\/ TOP_SELECTION_CHANGE needs to be attached to the document\n \/\/ otherwise it won't capture incoming events that are only\n@@ -312,12 +313,10 @@ export function listenToTopLevelEvent(\n target = (target: any).ownerDocument || target;\n listenerMap = getEventListenerMap(target);\n }\n- capture =\n- capture === undefined ? capturePhaseEvents.has(topLevelType) : capture;\n const listenerMapKey = getListenerMapKey(topLevelType, capture);\n- const listenerEntry: ElementListenerMapEntry | void = listenerMap.get(\n+ const listenerEntry = ((listenerMap.get(\n listenerMapKey,\n- );\n+ ): any): ElementListenerMapEntry | void);\n const shouldUpgrade = shouldUpgradeListener(listenerEntry, passive);\n \n \/\/ If the listener entry is empty or we should upgrade, then\n@@ -333,6 +332,9 @@ export function listenToTopLevelEvent(\n ((listenerEntry: any): ElementListenerMapEntry).listener,\n );\n }\n+ if (capture) {\n+ eventSystemFlags |= IS_CAPTURE_PHASE;\n+ }\n const listener = addTrappedEventListener(\n target,\n topLevelType,\n@@ -346,20 +348,31 @@ export function listenToTopLevelEvent(\n }\n }\n \n-export function listenToEvent(\n- registrationName: string,\n+export function listenToReactPropEvent(\n+ reactPropEvent: string,\n rootContainerElement: Element,\n ): void {\n const listenerMap = getEventListenerMap(rootContainerElement);\n- const dependencies = registrationNameDependencies[registrationName];\n+ \/\/ For optimization, let's check if we have the registration name\n+ \/\/ on the rootContainerElement.\n+ if (listenerMap.has(reactPropEvent)) {\n+ return;\n+ }\n+ \/\/ Add the registration name to the map, so we can avoid processing\n+ \/\/ this React prop event again.\n+ listenerMap.set(reactPropEvent, null);\n+ const dependencies = registrationNameDependencies[reactPropEvent];\n \n for (let i = 0; i < dependencies.length; i++) {\n const dependency = dependencies[i];\n+ const capture = capturePhaseEvents.has(dependency);\n+\n listenToTopLevelEvent(\n dependency,\n rootContainerElement,\n listenerMap,\n PLUGIN_EVENT_SYSTEM,\n+ capture,\n );\n }\n }\n@@ -892,10 +905,11 @@ export function accumulateEnterLeaveListeners(\n }\n }\n \n-export function accumulateEventTargetListeners(\n+export function accumulateEventHandleTargetListeners(\n dispatchQueue: DispatchQueue,\n event: ReactSyntheticEvent,\n currentTarget: EventTarget,\n+ inCapturePhase: boolean,\n ): void {\n const capturePhase: DispatchQueueItemPhase = [];\n const bubblePhase: DispatchQueueItemPhase = [];\n@@ -904,17 +918,16 @@ export function accumulateEventTargetListeners(\n if (eventListeners !== null) {\n const listenersArr = Array.from(eventListeners);\n const targetType = ((event.type: any): DOMTopLevelEventType);\n- const isCapturePhase = (event: any).eventPhase === 1;\n \n for (let i = 0; i < listenersArr.length; i++) {\n const listener = listenersArr[i];\n const {callback, capture, type} = listener;\n if (type === targetType) {\n- if (isCapturePhase && capture) {\n+ if (inCapturePhase && capture) {\n capturePhase.push(\n createDispatchQueueItemPhaseEntry(null, callback, currentTarget),\n );\n- } else if (!isCapturePhase && !capture) {\n+ } else if (!inCapturePhase && !capture) {\n bubblePhase.push(\n createDispatchQueueItemPhaseEntry(null, callback, currentTarget),\n );\ndiff --git a\/packages\/react-dom\/src\/events\/EventSystemFlags.js b\/packages\/react-dom\/src\/events\/EventSystemFlags.js\nindex 69e39bf5fc..35af32c3b2 100644\n--- a\/packages\/react-dom\/src\/events\/EventSystemFlags.js\n+++ b\/packages\/react-dom\/src\/events\/EventSystemFlags.js\n@@ -12,8 +12,9 @@ export type EventSystemFlags = number;\n export const PLUGIN_EVENT_SYSTEM = 1;\n export const RESPONDER_EVENT_SYSTEM = 1 << 1;\n export const IS_TARGET_PHASE_ONLY = 1 << 2;\n-export const IS_PASSIVE = 1 << 3;\n-export const PASSIVE_NOT_SUPPORTED = 1 << 4;\n-export const IS_REPLAYED = 1 << 5;\n-export const IS_FIRST_ANCESTOR = 1 << 6;\n-export const LEGACY_FB_SUPPORT = 1 << 7;\n+export const IS_CAPTURE_PHASE = 1 << 3;\n+export const IS_PASSIVE = 1 << 4;\n+export const PASSIVE_NOT_SUPPORTED = 1 << 5;\n+export const IS_REPLAYED = 1 << 6;\n+export const IS_FIRST_ANCESTOR = 1 << 7;\n+export const LEGACY_FB_SUPPORT = 1 << 8;\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\nindex d69d9684a7..d14c7587f2 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n@@ -220,6 +220,7 @@ function trapReplayableEventForContainer(\n ((container: any): Element),\n listenerMap,\n PLUGIN_EVENT_SYSTEM,\n+ false,\n );\n }\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\nindex fabf955988..dc6cacce37 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\n@@ -29,11 +29,7 @@ import {\n } from '..\/..\/client\/ReactDOMComponentTree';\n import {hasSelectionCapabilities} from '..\/..\/client\/ReactInputSelection';\n import {DOCUMENT_NODE} from '..\/..\/shared\/HTMLNodeType';\n-import {\n- accumulateTwoPhaseListeners,\n- getListenerMapKey,\n- capturePhaseEvents,\n-} from '..\/DOMModernPluginEventSystem';\n+import {accumulateTwoPhaseListeners} from '..\/DOMModernPluginEventSystem';\n \n const skipSelectionChangeEvent =\n canUseDOM && 'documentMode' in document && document.documentMode <= 11;\n@@ -148,32 +144,6 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {\n }\n }\n \n-function isListeningToEvents(\n- events: Array,\n- mountAt: Document | Element,\n-): boolean {\n- const listenerMap = getEventListenerMap(mountAt);\n- for (let i = 0; i < events.length; i++) {\n- const event = events[i];\n- const capture = capturePhaseEvents.has(event);\n- const listenerMapKey = getListenerMapKey(event, capture);\n- if (!listenerMap.has(listenerMapKey)) {\n- return false;\n- }\n- }\n- return true;\n-}\n-\n-function isListeningToEvent(\n- registrationName: string,\n- mountAt: Document | Element,\n-): boolean {\n- const listenerMap = getEventListenerMap(mountAt);\n- const capture = capturePhaseEvents.has(registrationName);\n- const listenerMapKey = getListenerMapKey(registrationName, capture);\n- return listenerMap.has(listenerMapKey);\n-}\n-\n \/**\n * This plugin creates an `onSelect` event that normalizes select events\n * across form elements.\n@@ -197,19 +167,17 @@ function extractEvents(\n eventSystemFlags,\n targetContainer,\n ) {\n- const doc = getEventTargetDocument(nativeEventTarget);\n+ const eventListenerMap = getEventListenerMap(targetContainer);\n \/\/ Track whether all listeners exists for this plugin. If none exist, we do\n \/\/ not extract events. See #3639.\n if (\n- \/\/ We only listen to TOP_SELECTION_CHANGE on the document, never the\n- \/\/ root.\n- !isListeningToEvent(TOP_SELECTION_CHANGE, doc) ||\n \/\/ If we are handling TOP_SELECTION_CHANGE, then we don't need to\n \/\/ check for the other dependencies, as TOP_SELECTION_CHANGE is only\n \/\/ event attached from the onChange plugin and we don't expose an\n \/\/ onSelectionChange event from React.\n- (topLevelType !== TOP_SELECTION_CHANGE &&\n- !isListeningToEvents(rootTargetDependencies, targetContainer))\n+ topLevelType !== TOP_SELECTION_CHANGE &&\n+ !eventListenerMap.has('onSelect') &&\n+ !eventListenerMap.has('onSelectCapture')\n ) {\n return;\n }\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\nindex d8021f825f..be6731082c 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n@@ -24,10 +24,9 @@ import {\n } from '..\/DOMEventProperties';\n import {\n accumulateTwoPhaseListeners,\n- accumulateEventTargetListeners,\n+ accumulateEventHandleTargetListeners,\n } from '..\/DOMModernPluginEventSystem';\n import {IS_TARGET_PHASE_ONLY} from '..\/EventSystemFlags';\n-\n import SyntheticAnimationEvent from '..\/SyntheticAnimationEvent';\n import SyntheticClipboardEvent from '..\/SyntheticClipboardEvent';\n import SyntheticFocusEvent from '..\/SyntheticFocusEvent';\n@@ -40,6 +39,7 @@ import SyntheticTransitionEvent from '..\/SyntheticTransitionEvent';\n import SyntheticUIEvent from '..\/SyntheticUIEvent';\n import SyntheticWheelEvent from '..\/SyntheticWheelEvent';\n import getEventCharCode from '..\/getEventCharCode';\n+import {IS_CAPTURE_PHASE} from '..\/EventSystemFlags';\n \n import {enableCreateEventHandleAPI} from 'shared\/ReactFeatureFlags';\n \n@@ -158,7 +158,13 @@ function extractEvents(\n eventSystemFlags & IS_TARGET_PHASE_ONLY &&\n targetContainer != null\n ) {\n- accumulateEventTargetListeners(dispatchQueue, event, targetContainer);\n+ const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;\n+ accumulateEventHandleTargetListeners(\n+ dispatchQueue,\n+ event,\n+ targetContainer,\n+ inCapturePhase,\n+ );\n } else {\n accumulateTwoPhaseListeners(targetInst, dispatchQueue, event, true);\n }\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js b\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js\nindex a98404154c..fa9fcee0fb 100644\n--- a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js\n+++ b\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js\n@@ -126,6 +126,7 @@ function handleGlobalFocusVisibleEvent(\n }\n \n const passiveObject = {passive: true};\n+const passiveCaptureObject = {capture: true, passive: false};\n \n function handleFocusVisibleTargetEvent(\n type: string,\n@@ -242,8 +243,8 @@ export function useFocus(\n ): void {\n \/\/ Setup controlled state for this useFocus hook\n const stateRef = useRef({isFocused: false, isFocusVisible: false});\n- const focusHandle = useEvent('focus', passiveObject);\n- const blurHandle = useEvent('blur', passiveObject);\n+ const focusHandle = useEvent('focus', passiveCaptureObject);\n+ const blurHandle = useEvent('blur', passiveCaptureObject);\n const focusVisibleHandles = useFocusVisibleInputHandles();\n \n useEffect(() => {\n@@ -329,8 +330,8 @@ export function useFocusWithin(\n ) {\n \/\/ Setup controlled state for this useFocus hook\n const stateRef = useRef({isFocused: false, isFocusVisible: false});\n- const focusHandle = useEvent('focus', passiveObject);\n- const blurHandle = useEvent('blur', passiveObject);\n+ const focusHandle = useEvent('focus', passiveCaptureObject);\n+ const blurHandle = useEvent('blur', passiveCaptureObject);\n const afterBlurHandle = useEvent('afterblur', passiveObject);\n const beforeBlurHandle = useEvent('beforeblur', passiveObject);\n const focusVisibleHandles = useFocusVisibleInputHandles();\n","files":[{"path":"packages\/react-dom\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMComponentTree.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMEventHandle.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/EventSystemFlags.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ReactDOMEventReplaying.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-interactions\/events\/src\/dom\/create-event-handle\/Focus.js","status":"M"}],"commit":{"authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2020-07-06T17:42:01+01:00","subject":"Refine event registration + event signatures (#19244)","authorName":"Dominic Gannaway","shortRevision":"26071abbe1","revision":"26071abbe1eda6fb88dfaef9e7bce43f3a774818"}}

dillon1000/react

Files changed