From 90bbc6a0dfb87d9d2272a3d71013143bb2797ef5 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 20 Mar 2019 18:09:13 +0000 Subject: [PATCH 1/7] Add the logic for listening to event responders --- .../react-dom/src/client/ReactDOMComponent.js | 61 ++++++++++++++++++- .../src/client/ReactDOMHostConfig.js | 4 +- .../src/events/ReactBrowserEventEmitter.js | 2 +- 3 files changed, 64 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 7ca05ae7da6eb..9a25382655d76 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -13,6 +13,7 @@ import {registrationNameModules} from 'events/EventPluginRegistry'; import warning from 'shared/warning'; import {canUseDOM} from 'shared/ExecutionEnvironment'; import warningWithoutStack from 'shared/warningWithoutStack'; +import type {ReactEventResponder} from 'shared/ReactTypes'; import { getValueForAttribute, @@ -57,7 +58,12 @@ import { TOP_SUBMIT, TOP_TOGGLE, } from '../events/DOMTopLevelEventTypes'; -import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter'; +import { + listenTo, + trapBubbledEvent, + getListeningSetForElement, +} from '../events/ReactBrowserEventEmitter'; +import {trapEventForResponderEventSystem} from '../events/ReactDOMEventListener.js'; import {mediaEventTypes} from '../events/DOMTopLevelEventTypes'; import { createDangerousStringForStyles, @@ -1267,3 +1273,56 @@ export function restoreControlledState( return; } } + +export function listenToEventResponderEvents( + eventResponder: ReactEventResponder, + element: Element | Document, +) { + const {targetEventTypes} = eventResponder; + // Get the listening set for this element. We use this to track + // what events we're listening to. + const listeningSet = getListeningSetForElement(element, false); + + // Go through each target event type of the event responder + for (let i = 0, length = targetEventTypes.length; i < length; ++i) { + const targetEventType = targetEventTypes[i]; + let topLevelType; + let capture = false; + let passive = true; + + // By default, if no event config object is provided (only a string), + // we default to enabling passive and not capture. + if (typeof targetEventType === 'string') { + topLevelType = targetEventType; + } else { + if (__DEV__) { + warning( + typeof targetEventType === 'object' && targetEventType !== null, + 'Event Responder: invalid entry in targetEventTypes array. ' + + 'Entry must be string or an object. Instead, got %s.', + targetEventType, + ); + } + const targetEventConfigObject = ((targetEventType: any): { + name: string, + passive?: boolean, + capture?: boolean, + }); + topLevelType = targetEventConfigObject.name; + if (targetEventConfigObject.passive !== undefined) { + passive = targetEventConfigObject.passive; + } + if (targetEventConfigObject.capture !== undefined) { + capture = targetEventConfigObject.capture; + } + } + // Create a unique name for this event, plus it's properties. We'll + // use this to ensure we don't listen to the same event with the same + // properties again. + const listeningName = `${name}_${passive}_${capture}`; + if (!listeningSet.has(listeningName)) { + trapEventForResponderEventSystem(element, topLevelType, capture, passive); + listeningSet.add(listeningName); + } + } +} diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 6f84f0c6fc91f..2417f3afb51a7 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -24,6 +24,7 @@ import { warnForDeletedHydratableText, warnForInsertedHydratedElement, warnForInsertedHydratedText, + listenToEventResponderEvents, } from './ReactDOMComponent'; import {getSelectionInformation, restoreSelection} from './ReactInputSelection'; import setTextContent from './setTextContent'; @@ -861,7 +862,8 @@ export function handleEventComponent( rootContainerInstance: Container, internalInstanceHandle: Object, ) { - // TODO: add handleEventComponent implementation + const rootElement = rootContainerInstance.ownerDocument; + listenToEventResponderEvents(eventResponder, rootElement); } export function handleEventTarget( diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js index 2f9f29fcd3097..eb15317e5a230 100644 --- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js +++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js @@ -93,7 +93,7 @@ const elementListeningSets: Set, > = new PossiblyWeakMap(); -function getListeningSetForElement( +export function getListeningSetForElement( element: Document | Element | Node, ): Set { let listeningSet = elementListeningSets.get(element); From 5912d731fd9bc9cc01b2996c337a803436e93ac9 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 20 Mar 2019 20:06:59 +0000 Subject: [PATCH 2/7] Fix flow issues and wrap logic in flag --- .../react-dom/src/client/ReactDOMComponent.js | 14 ++++++-- .../src/client/ReactDOMHostConfig.js | 36 ++++++++++--------- .../src/events/ReactBrowserEventEmitter.js | 4 +-- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 9a25382655d76..92db13f327376 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -14,6 +14,7 @@ import warning from 'shared/warning'; import {canUseDOM} from 'shared/ExecutionEnvironment'; import warningWithoutStack from 'shared/warningWithoutStack'; import type {ReactEventResponder} from 'shared/ReactTypes'; +import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes'; import { getValueForAttribute, @@ -1281,7 +1282,7 @@ export function listenToEventResponderEvents( const {targetEventTypes} = eventResponder; // Get the listening set for this element. We use this to track // what events we're listening to. - const listeningSet = getListeningSetForElement(element, false); + const listeningSet = getListeningSetForElement(element); // Go through each target event type of the event responder for (let i = 0, length = targetEventTypes.length; i < length; ++i) { @@ -1319,9 +1320,16 @@ export function listenToEventResponderEvents( // Create a unique name for this event, plus it's properties. We'll // use this to ensure we don't listen to the same event with the same // properties again. - const listeningName = `${name}_${passive}_${capture}`; + const listeningName = `${topLevelType}${passive ? '_passive' : ''}${ + capture ? '_capture' : '' + }`; if (!listeningSet.has(listeningName)) { - trapEventForResponderEventSystem(element, topLevelType, capture, passive); + trapEventForResponderEventSystem( + element, + ((topLevelType: any): DOMTopLevelEventType), + capture, + passive, + ); listeningSet.add(listeningName); } } diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 2417f3afb51a7..549c75c34617d 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -862,8 +862,10 @@ export function handleEventComponent( rootContainerInstance: Container, internalInstanceHandle: Object, ) { - const rootElement = rootContainerInstance.ownerDocument; - listenToEventResponderEvents(eventResponder, rootElement); + if (enableEventAPI) { + const rootElement = rootContainerInstance.ownerDocument; + listenToEventResponderEvents(eventResponder, rootElement); + } } export function handleEventTarget( @@ -871,20 +873,22 @@ export function handleEventTarget( props: Props, internalInstanceHandle: Object, ) { - // Touch target hit slop handling - if (type === REACT_EVENT_TARGET_TOUCH_HIT) { - // Validates that there is a single element - const element = getElementFromTouchHitTarget(internalInstanceHandle); - if (element !== null) { - // We update the event target state node to be that of the element. - // We can then diff this entry to determine if we need to add the - // hit slop element, or change the dimensions of the hit slop. - const lastElement = internalInstanceHandle.stateNode; - if (lastElement !== element) { - internalInstanceHandle.stateNode = element; - // TODO: Create the hit slop element and attach it to the element - } else { - // TODO: Diff the left, top, right, bottom props + if (enableEventAPI) { + // Touch target hit slop handling + if (type === REACT_EVENT_TARGET_TOUCH_HIT) { + // Validates that there is a single element + const element = getElementFromTouchHitTarget(internalInstanceHandle); + if (element !== null) { + // We update the event target state node to be that of the element. + // We can then diff this entry to determine if we need to add the + // hit slop element, or change the dimensions of the hit slop. + const lastElement = internalInstanceHandle.stateNode; + if (lastElement !== element) { + internalInstanceHandle.stateNode = element; + // TODO: Create the hit slop element and attach it to the element + } else { + // TODO: Diff the left, top, right, bottom props + } } } } diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js index eb15317e5a230..810e08f106bb7 100644 --- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js +++ b/packages/react-dom/src/events/ReactBrowserEventEmitter.js @@ -90,12 +90,12 @@ const elementListeningSets: | WeakMap | Map< Document | Element | Node, - Set, + Set, > = new PossiblyWeakMap(); export function getListeningSetForElement( element: Document | Element | Node, -): Set { +): Set { let listeningSet = elementListeningSets.get(element); if (listeningSet === undefined) { listeningSet = new Set(); From 93a00fe73e6e72cfb6d19ff2ac3e1d62e5dfe899 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 20 Mar 2019 20:51:37 +0000 Subject: [PATCH 3/7] Move wrapping flag for events API to improve DCE --- .../react-dom/src/client/ReactDOMComponent.js | 104 +++++++++--------- .../src/client/ReactDOMHostConfig.js | 36 +++--- 2 files changed, 70 insertions(+), 70 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 92db13f327376..a7aff506f04b8 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -85,6 +85,8 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook'; import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook'; +import {enableEventAPI} from 'shared/ReactFeatureFlags'; + let didWarnInvalidHydration = false; let didWarnShadyDOM = false; @@ -1279,58 +1281,60 @@ export function listenToEventResponderEvents( eventResponder: ReactEventResponder, element: Element | Document, ) { - const {targetEventTypes} = eventResponder; - // Get the listening set for this element. We use this to track - // what events we're listening to. - const listeningSet = getListeningSetForElement(element); - - // Go through each target event type of the event responder - for (let i = 0, length = targetEventTypes.length; i < length; ++i) { - const targetEventType = targetEventTypes[i]; - let topLevelType; - let capture = false; - let passive = true; - - // By default, if no event config object is provided (only a string), - // we default to enabling passive and not capture. - if (typeof targetEventType === 'string') { - topLevelType = targetEventType; - } else { - if (__DEV__) { - warning( - typeof targetEventType === 'object' && targetEventType !== null, - 'Event Responder: invalid entry in targetEventTypes array. ' + - 'Entry must be string or an object. Instead, got %s.', - targetEventType, - ); - } - const targetEventConfigObject = ((targetEventType: any): { - name: string, - passive?: boolean, - capture?: boolean, - }); - topLevelType = targetEventConfigObject.name; - if (targetEventConfigObject.passive !== undefined) { - passive = targetEventConfigObject.passive; + if (enableEventAPI) { + const {targetEventTypes} = eventResponder; + // Get the listening set for this element. We use this to track + // what events we're listening to. + const listeningSet = getListeningSetForElement(element); + + // Go through each target event type of the event responder + for (let i = 0, length = targetEventTypes.length; i < length; ++i) { + const targetEventType = targetEventTypes[i]; + let topLevelType; + let capture = false; + let passive = true; + + // By default, if no event config object is provided (only a string), + // we default to enabling passive and not capture. + if (typeof targetEventType === 'string') { + topLevelType = targetEventType; + } else { + if (__DEV__) { + warning( + typeof targetEventType === 'object' && targetEventType !== null, + 'Event Responder: invalid entry in targetEventTypes array. ' + + 'Entry must be string or an object. Instead, got %s.', + targetEventType, + ); + } + const targetEventConfigObject = ((targetEventType: any): { + name: string, + passive?: boolean, + capture?: boolean, + }); + topLevelType = targetEventConfigObject.name; + if (targetEventConfigObject.passive !== undefined) { + passive = targetEventConfigObject.passive; + } + if (targetEventConfigObject.capture !== undefined) { + capture = targetEventConfigObject.capture; + } } - if (targetEventConfigObject.capture !== undefined) { - capture = targetEventConfigObject.capture; + // Create a unique name for this event, plus it's properties. We'll + // use this to ensure we don't listen to the same event with the same + // properties again. + const listeningName = `${topLevelType}${passive ? '_passive' : ''}${ + capture ? '_capture' : '' + }`; + if (!listeningSet.has(listeningName)) { + trapEventForResponderEventSystem( + element, + ((topLevelType: any): DOMTopLevelEventType), + capture, + passive, + ); + listeningSet.add(listeningName); } } - // Create a unique name for this event, plus it's properties. We'll - // use this to ensure we don't listen to the same event with the same - // properties again. - const listeningName = `${topLevelType}${passive ? '_passive' : ''}${ - capture ? '_capture' : '' - }`; - if (!listeningSet.has(listeningName)) { - trapEventForResponderEventSystem( - element, - ((topLevelType: any): DOMTopLevelEventType), - capture, - passive, - ); - listeningSet.add(listeningName); - } } } diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 549c75c34617d..2417f3afb51a7 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -862,10 +862,8 @@ export function handleEventComponent( rootContainerInstance: Container, internalInstanceHandle: Object, ) { - if (enableEventAPI) { - const rootElement = rootContainerInstance.ownerDocument; - listenToEventResponderEvents(eventResponder, rootElement); - } + const rootElement = rootContainerInstance.ownerDocument; + listenToEventResponderEvents(eventResponder, rootElement); } export function handleEventTarget( @@ -873,22 +871,20 @@ export function handleEventTarget( props: Props, internalInstanceHandle: Object, ) { - if (enableEventAPI) { - // Touch target hit slop handling - if (type === REACT_EVENT_TARGET_TOUCH_HIT) { - // Validates that there is a single element - const element = getElementFromTouchHitTarget(internalInstanceHandle); - if (element !== null) { - // We update the event target state node to be that of the element. - // We can then diff this entry to determine if we need to add the - // hit slop element, or change the dimensions of the hit slop. - const lastElement = internalInstanceHandle.stateNode; - if (lastElement !== element) { - internalInstanceHandle.stateNode = element; - // TODO: Create the hit slop element and attach it to the element - } else { - // TODO: Diff the left, top, right, bottom props - } + // Touch target hit slop handling + if (type === REACT_EVENT_TARGET_TOUCH_HIT) { + // Validates that there is a single element + const element = getElementFromTouchHitTarget(internalInstanceHandle); + if (element !== null) { + // We update the event target state node to be that of the element. + // We can then diff this entry to determine if we need to add the + // hit slop element, or change the dimensions of the hit slop. + const lastElement = internalInstanceHandle.stateNode; + if (lastElement !== element) { + internalInstanceHandle.stateNode = element; + // TODO: Create the hit slop element and attach it to the element + } else { + // TODO: Diff the left, top, right, bottom props } } } From 7faf6230ed01a39378e8322492fb8a719c43e54e Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 20 Mar 2019 20:53:22 +0000 Subject: [PATCH 4/7] Tidy up key logic so it is easier to read --- packages/react-dom/src/client/ReactDOMComponent.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index a7aff506f04b8..00c3fee497af2 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -1323,9 +1323,9 @@ export function listenToEventResponderEvents( // Create a unique name for this event, plus it's properties. We'll // use this to ensure we don't listen to the same event with the same // properties again. - const listeningName = `${topLevelType}${passive ? '_passive' : ''}${ - capture ? '_capture' : '' - }`; + const passiveKey = passive ? '_passive' : ''; + const captureKey = capture ? '_capture' : ''; + const listeningName = `${topLevelType}${passiveKey}${captureKey}`; if (!listeningSet.has(listeningName)) { trapEventForResponderEventSystem( element, From e5afd1f09768c98ecf7f2c08e5b181b873fa93e0 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 20 Mar 2019 23:35:28 +0000 Subject: [PATCH 5/7] Add flow function return types --- packages/react-dom/src/client/ReactDOMComponent.js | 2 +- packages/react-dom/src/client/ReactDOMHostConfig.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 00c3fee497af2..e461d9efe6a78 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -1280,7 +1280,7 @@ export function restoreControlledState( export function listenToEventResponderEvents( eventResponder: ReactEventResponder, element: Element | Document, -) { +): void { if (enableEventAPI) { const {targetEventTypes} = eventResponder; // Get the listening set for this element. We use this to track diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 2417f3afb51a7..baea3cbeec5af 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -861,7 +861,7 @@ export function handleEventComponent( eventResponder: ReactEventResponder, rootContainerInstance: Container, internalInstanceHandle: Object, -) { +): void { const rootElement = rootContainerInstance.ownerDocument; listenToEventResponderEvents(eventResponder, rootElement); } @@ -870,7 +870,7 @@ export function handleEventTarget( type: Symbol | number, props: Props, internalInstanceHandle: Object, -) { +): void { // Touch target hit slop handling if (type === REACT_EVENT_TARGET_TOUCH_HIT) { // Validates that there is a single element From b200243a5f0df2ebdf3c30bdf8cce1bdaa3a9fa3 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 21 Mar 2019 12:08:28 +0000 Subject: [PATCH 6/7] Add results --- scripts/rollup/results.json | 56 ++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index ad8460e020670..346e655064dbf 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -60,15 +60,15 @@ "filename": "react-dom.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 798048, - "gzip": 181482 + "size": 813661, + "gzip": 184364 }, { "filename": "react-dom.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 107733, - "gzip": 34431 + "size": 108035, + "gzip": 34515 }, { "filename": "ReactDOM-dev.js", @@ -102,15 +102,15 @@ "filename": "react-dom-test-utils.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 47988, - "gzip": 13245 + "size": 48334, + "gzip": 13206 }, { "filename": "react-dom-test-utils.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 10288, - "gzip": 3812 + "size": 9954, + "gzip": 3660 }, { "filename": "ReactTestUtils-dev.js", @@ -137,15 +137,15 @@ "filename": "react-dom-unstable-native-dependencies.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 61725, - "gzip": 16151 + "size": 61643, + "gzip": 16033 }, { "filename": "react-dom-unstable-native-dependencies.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 11001, - "gzip": 3783 + "size": 10669, + "gzip": 3640 }, { "filename": "ReactDOMUnstableNativeDependencies-dev.js", @@ -179,15 +179,15 @@ "filename": "react-dom-server.browser.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 129302, - "gzip": 34571 + "size": 132758, + "gzip": 35195 }, { "filename": "react-dom-server.browser.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 19590, - "gzip": 7447 + "size": 19756, + "gzip": 7540 }, { "filename": "ReactDOMServer-dev.js", @@ -207,15 +207,15 @@ "filename": "react-dom-server.node.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 131409, - "gzip": 35129 + "size": 134747, + "gzip": 35752 }, { "filename": "react-dom-server.node.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 20483, - "gzip": 7757 + "size": 20639, + "gzip": 7850 }, { "filename": "react-art.development.js", @@ -718,8 +718,8 @@ "filename": "react-dom.profiling.min.js", "bundleType": "NODE_PROFILING", "packageName": "react-dom", - "size": 110923, - "gzip": 35060 + "size": 111211, + "gzip": 35133 }, { "filename": "ReactNativeRenderer-profiling.js", @@ -1054,22 +1054,22 @@ "filename": "react-dom-unstable-fire.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 798401, - "gzip": 181622 + "size": 814014, + "gzip": 184503 }, { "filename": "react-dom-unstable-fire.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 107747, - "gzip": 34441 + "size": 108049, + "gzip": 34524 }, { "filename": "react-dom-unstable-fire.profiling.min.js", "bundleType": "NODE_PROFILING", "packageName": "react-dom", - "size": 110937, - "gzip": 35069 + "size": 111225, + "gzip": 35142 }, { "filename": "ReactFire-dev.js", From f9fa91b1ac0188f728a5c50947328340ea2f6caf Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 21 Mar 2019 12:19:37 +0000 Subject: [PATCH 7/7] Address nits --- packages/react-dom/src/client/ReactDOMComponent.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index e461d9efe6a78..bc1060d2d6df4 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -1283,7 +1283,7 @@ export function listenToEventResponderEvents( ): void { if (enableEventAPI) { const {targetEventTypes} = eventResponder; - // Get the listening set for this element. We use this to track + // Get the listening Set for this element. We use this to track // what events we're listening to. const listeningSet = getListeningSetForElement(element); @@ -1294,7 +1294,7 @@ export function listenToEventResponderEvents( let capture = false; let passive = true; - // By default, if no event config object is provided (only a string), + // If no event config object is provided (i.e. - only a string), // we default to enabling passive and not capture. if (typeof targetEventType === 'string') { topLevelType = targetEventType; @@ -1320,7 +1320,7 @@ export function listenToEventResponderEvents( capture = targetEventConfigObject.capture; } } - // Create a unique name for this event, plus it's properties. We'll + // Create a unique name for this event, plus its properties. We'll // use this to ensure we don't listen to the same event with the same // properties again. const passiveKey = passive ? '_passive' : '';