{"commit":{"shortRevision":"80f8b0d512","authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","subject":"Add part of the event responder system for experimental event API (#15179)","authoredAt":"2019-03-26T16:55:25-07:00","revision":"80f8b0d5123981969997e07c071bdc6e3884ef58"},"body":"* Add part of the event responder system","parents":["d03ac4b231da8952d2648f73147f9673de46a6ed"],"files":[{"status":"A","path":"packages\/events\/EventBatching.js"},{"status":"M","path":"packages\/events\/EventPluginHub.js"},{"status":"M","path":"packages\/events\/__tests__\/ResponderEventPlugin-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOM.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ChangeEventPlugin.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/DOMEventResponderSystem.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/fire\/ReactFire.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabricEventEmitter.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeEventEmitter.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberEvents-test-internal.js"}],"patch":"diff --git a\/packages\/events\/EventBatching.js b\/packages\/events\/EventBatching.js\nnew file mode 100644\nindex 0000000000..bffc978ad6\n--- \/dev\/null\n+++ b\/packages\/events\/EventBatching.js\n@@ -0,0 +1,66 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ * @flow\n+ *\/\n+\n+import invariant from 'shared\/invariant';\n+import {rethrowCaughtError} from 'shared\/ReactErrorUtils';\n+\n+import type {ReactSyntheticEvent} from '.\/ReactSyntheticEventType';\n+import accumulateInto from '.\/accumulateInto';\n+import forEachAccumulated from '.\/forEachAccumulated';\n+import {executeDispatchesInOrder} from '.\/EventPluginUtils';\n+\n+\/**\n+ * Internal queue of events that have accumulated their dispatches and are\n+ * waiting to have their dispatches executed.\n+ *\/\n+let eventQueue: ?(Array | ReactSyntheticEvent) = null;\n+\n+\/**\n+ * Dispatches an event and releases it back into the pool, unless persistent.\n+ *\n+ * @param {?object} event Synthetic event to be dispatched.\n+ * @private\n+ *\/\n+const executeDispatchesAndRelease = function(event: ReactSyntheticEvent) {\n+ if (event) {\n+ executeDispatchesInOrder(event);\n+\n+ if (!event.isPersistent()) {\n+ event.constructor.release(event);\n+ }\n+ }\n+};\n+const executeDispatchesAndReleaseTopLevel = function(e) {\n+ return executeDispatchesAndRelease(e);\n+};\n+\n+export function runEventsInBatch(\n+ events: Array | ReactSyntheticEvent | null,\n+) {\n+ if (events !== null) {\n+ eventQueue = accumulateInto(eventQueue, events);\n+ }\n+\n+ \/\/ Set `eventQueue` to null before processing it so that we can tell if more\n+ \/\/ events get enqueued while processing.\n+ const processingEventQueue = eventQueue;\n+ eventQueue = null;\n+\n+ if (!processingEventQueue) {\n+ return;\n+ }\n+\n+ forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);\n+ invariant(\n+ !eventQueue,\n+ 'processEventQueue(): Additional events were enqueued while processing ' +\n+ 'an event queue. Support for this has not yet been implemented.',\n+ );\n+ \/\/ This would be a good time to rethrow if any of the event handlers threw.\n+ rethrowCaughtError();\n+}\ndiff --git a\/packages\/events\/EventPluginHub.js b\/packages\/events\/EventPluginHub.js\nindex e639110713..297d0cbdcc 100644\n--- a\/packages\/events\/EventPluginHub.js\n+++ b\/packages\/events\/EventPluginHub.js\n@@ -6,7 +6,6 @@\n * @flow\n *\/\n \n-import {rethrowCaughtError} from 'shared\/ReactErrorUtils';\n import invariant from 'shared\/invariant';\n \n import {\n@@ -14,12 +13,9 @@ import {\n injectEventPluginsByName,\n plugins,\n } from '.\/EventPluginRegistry';\n-import {\n- executeDispatchesInOrder,\n- getFiberCurrentPropsFromNode,\n-} from '.\/EventPluginUtils';\n+import {getFiberCurrentPropsFromNode} from '.\/EventPluginUtils';\n import accumulateInto from '.\/accumulateInto';\n-import forEachAccumulated from '.\/forEachAccumulated';\n+import {runEventsInBatch} from '.\/EventBatching';\n \n import type {PluginModule} from '.\/PluginModuleType';\n import type {ReactSyntheticEvent} from '.\/ReactSyntheticEventType';\n@@ -27,31 +23,6 @@ import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import type {AnyNativeEvent} from '.\/PluginModuleType';\n import type {TopLevelType} from '.\/TopLevelEventTypes';\n \n-\/**\n- * Internal queue of events that have accumulated their dispatches and are\n- * waiting to have their dispatches executed.\n- *\/\n-let eventQueue: ?(Array | ReactSyntheticEvent) = null;\n-\n-\/**\n- * Dispatches an event and releases it back into the pool, unless persistent.\n- *\n- * @param {?object} event Synthetic event to be dispatched.\n- * @private\n- *\/\n-const executeDispatchesAndRelease = function(event: ReactSyntheticEvent) {\n- if (event) {\n- executeDispatchesInOrder(event);\n-\n- if (!event.isPersistent()) {\n- event.constructor.release(event);\n- }\n- }\n-};\n-const executeDispatchesAndReleaseTopLevel = function(e) {\n- return executeDispatchesAndRelease(e);\n-};\n-\n function isInteractive(tag) {\n return (\n tag === 'button' ||\n@@ -158,7 +129,7 @@ export function getListener(inst: Fiber, registrationName: string) {\n * @return {*} An accumulation of synthetic events.\n * @internal\n *\/\n-function extractEvents(\n+function extractPluginEvents(\n topLevelType: TopLevelType,\n targetInst: null | Fiber,\n nativeEvent: AnyNativeEvent,\n@@ -183,39 +154,13 @@ function extractEvents(\n return events;\n }\n \n-export function runEventsInBatch(\n- events: Array | ReactSyntheticEvent | null,\n-) {\n- if (events !== null) {\n- eventQueue = accumulateInto(eventQueue, events);\n- }\n-\n- \/\/ Set `eventQueue` to null before processing it so that we can tell if more\n- \/\/ events get enqueued while processing.\n- const processingEventQueue = eventQueue;\n- eventQueue = null;\n-\n- if (!processingEventQueue) {\n- return;\n- }\n-\n- forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);\n- invariant(\n- !eventQueue,\n- 'processEventQueue(): Additional events were enqueued while processing ' +\n- 'an event queue. Support for this has not yet been implemented.',\n- );\n- \/\/ This would be a good time to rethrow if any of the event handlers threw.\n- rethrowCaughtError();\n-}\n-\n-export function runExtractedEventsInBatch(\n+export function runExtractedPluginEventsInBatch(\n topLevelType: TopLevelType,\n targetInst: null | Fiber,\n nativeEvent: AnyNativeEvent,\n nativeEventTarget: EventTarget,\n ) {\n- const events = extractEvents(\n+ const events = extractPluginEvents(\n topLevelType,\n targetInst,\n nativeEvent,\ndiff --git a\/packages\/events\/__tests__\/ResponderEventPlugin-test.internal.js b\/packages\/events\/__tests__\/ResponderEventPlugin-test.internal.js\nindex e828ae21e4..84d1329938 100644\n--- a\/packages\/events\/__tests__\/ResponderEventPlugin-test.internal.js\n+++ b\/packages\/events\/__tests__\/ResponderEventPlugin-test.internal.js\n@@ -11,7 +11,7 @@\n \n const {HostComponent} = require('shared\/ReactWorkTags');\n \n-let EventPluginHub;\n+let EventBatching;\n let EventPluginUtils;\n let ResponderEventPlugin;\n \n@@ -321,7 +321,7 @@ const run = function(config, hierarchyConfig, nativeEventConfig) {\n \/\/ At this point the negotiation events have been dispatched as part of the\n \/\/ extraction process, but not the side effectful events. Below, we dispatch\n \/\/ side effectful events.\n- EventPluginHub.runEventsInBatch(extractedEvents);\n+ EventBatching.runEventsInBatch(extractedEvents);\n \n \/\/ Ensure that every event that declared an `order`, was actually dispatched.\n expect('number of events dispatched:' + runData.dispatchCount).toBe(\n@@ -403,7 +403,7 @@ describe('ResponderEventPlugin', () => {\n jest.resetModules();\n \n const ReactDOMUnstableNativeDependencies = require('react-dom\/unstable-native-dependencies');\n- EventPluginHub = require('events\/EventPluginHub');\n+ EventBatching = require('events\/EventBatching');\n EventPluginUtils = require('events\/EventPluginUtils');\n ResponderEventPlugin =\n ReactDOMUnstableNativeDependencies.ResponderEventPlugin;\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOM.js b\/packages\/react-dom\/src\/client\/ReactDOM.js\nindex 0eac062bed..e226843322 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOM.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOM.js\n@@ -44,10 +44,8 @@ import {\n enqueueStateRestore,\n restoreStateIfNeeded,\n } from 'events\/ReactControlledComponent';\n-import {\n- injection as EventPluginHubInjection,\n- runEventsInBatch,\n-} from 'events\/EventPluginHub';\n+import {injection as EventPluginHubInjection} from 'events\/EventPluginHub';\n+import {runEventsInBatch} from 'events\/EventBatching';\n import {eventNameDispatchConfigs} from 'events\/EventPluginRegistry';\n import {\n accumulateTwoPhaseDispatches,\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex baea3cbeec..5254140619 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -862,8 +862,10 @@ export function handleEventComponent(\n rootContainerInstance: Container,\n internalInstanceHandle: Object,\n ): void {\n- const rootElement = rootContainerInstance.ownerDocument;\n- listenToEventResponderEvents(eventResponder, rootElement);\n+ if (enableEventAPI) {\n+ const rootElement = rootContainerInstance.ownerDocument;\n+ listenToEventResponderEvents(eventResponder, rootElement);\n+ }\n }\n \n export function handleEventTarget(\n@@ -871,20 +873,22 @@ export function handleEventTarget(\n props: Props,\n internalInstanceHandle: Object,\n ): void {\n- \/\/ Touch target hit slop handling\n- if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n- \/\/ Validates that there is a single element\n- const element = getElementFromTouchHitTarget(internalInstanceHandle);\n- if (element !== null) {\n- \/\/ We update the event target state node to be that of the element.\n- \/\/ We can then diff this entry to determine if we need to add the\n- \/\/ hit slop element, or change the dimensions of the hit slop.\n- const lastElement = internalInstanceHandle.stateNode;\n- if (lastElement !== element) {\n- internalInstanceHandle.stateNode = element;\n- \/\/ TODO: Create the hit slop element and attach it to the element\n- } else {\n- \/\/ TODO: Diff the left, top, right, bottom props\n+ if (enableEventAPI) {\n+ \/\/ Touch target hit slop handling\n+ if (type === REACT_EVENT_TARGET_TOUCH_HIT) {\n+ \/\/ Validates that there is a single element\n+ const element = getElementFromTouchHitTarget(internalInstanceHandle);\n+ if (element !== null) {\n+ \/\/ We update the event target state node to be that of the element.\n+ \/\/ We can then diff this entry to determine if we need to add the\n+ \/\/ hit slop element, or change the dimensions of the hit slop.\n+ const lastElement = internalInstanceHandle.stateNode;\n+ if (lastElement !== element) {\n+ internalInstanceHandle.stateNode = element;\n+ \/\/ TODO: Create the hit slop element and attach it to the element\n+ } else {\n+ \/\/ TODO: Diff the left, top, right, bottom props\n+ }\n }\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js b\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js\nindex 9e7ba2953e..214becb673 100644\n--- a\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js\n@@ -5,7 +5,7 @@\n * LICENSE file in the root directory of this source tree.\n *\/\n \n-import {runEventsInBatch} from 'events\/EventPluginHub';\n+import {runEventsInBatch} from 'events\/EventBatching';\n import {accumulateTwoPhaseDispatches} from 'events\/EventPropagators';\n import {enqueueStateRestore} from 'events\/ReactControlledComponent';\n import {batchedUpdates} from 'events\/ReactGenericBatching';\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nnew file mode 100644\nindex 0000000000..98969ac8a5\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -0,0 +1,195 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ * @flow\n+ *\/\n+\n+import {\n+ type EventSystemFlags,\n+ IS_PASSIVE,\n+ PASSIVE_NOT_SUPPORTED,\n+} from 'events\/EventSystemFlags';\n+import type {AnyNativeEvent} from 'events\/PluginModuleType';\n+import {EventComponent} from 'shared\/ReactWorkTags';\n+import type {ReactEventResponder} from 'shared\/ReactTypes';\n+import warning from 'shared\/warning';\n+import type {DOMTopLevelEventType} from 'events\/TopLevelEventTypes';\n+import SyntheticEvent from 'events\/SyntheticEvent';\n+import {runEventsInBatch} from 'events\/EventBatching';\n+import {interactiveUpdates} from 'events\/ReactGenericBatching';\n+import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n+\n+import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n+\n+\/\/ Event responders provide us an array of target event types.\n+\/\/ To ensure we fire the right responders for given events, we check\n+\/\/ if the incoming event type is actually relevant for an event\n+\/\/ responder. Instead of doing an O(n) lookup on the event responder\n+\/\/ target event types array each time, we instead create a Set for\n+\/\/ faster O(1) lookups.\n+export const eventResponderValidEventTypes: Map<\n+ ReactEventResponder,\n+ Set,\n+> = new Map();\n+\n+type EventListener = (event: SyntheticEvent) => void;\n+\n+\/\/ TODO add context methods for dispatching events\n+function DOMEventResponderContext(\n+ topLevelType: DOMTopLevelEventType,\n+ nativeEvent: AnyNativeEvent,\n+ nativeEventTarget: EventTarget,\n+ eventSystemFlags: EventSystemFlags,\n+) {\n+ this.event = nativeEvent;\n+ this.eventType = topLevelType;\n+ this.eventTarget = nativeEventTarget;\n+ this._flags = eventSystemFlags;\n+ this._fiber = null;\n+ this._responder = null;\n+ this._discreteEvents = null;\n+ this._nonDiscreteEvents = null;\n+}\n+\n+DOMEventResponderContext.prototype.isPassive = function(): boolean {\n+ return (this._flags & IS_PASSIVE) !== 0;\n+};\n+\n+DOMEventResponderContext.prototype.isPassiveSupported = function(): boolean {\n+ return (this._flags & PASSIVE_NOT_SUPPORTED) === 0;\n+};\n+\n+function copyEventProperties(eventData, syntheticEvent) {\n+ for (let propName in eventData) {\n+ syntheticEvent[propName] = eventData[propName];\n+ }\n+}\n+\n+DOMEventResponderContext.prototype.dispatchEvent = function(\n+ eventName: string,\n+ eventListener: EventListener,\n+ eventTarget: AnyNativeEvent,\n+ discrete: boolean,\n+ extraProperties?: Object,\n+): void {\n+ const eventTargetFiber = getClosestInstanceFromNode(eventTarget);\n+ const syntheticEvent = SyntheticEvent.getPooled(\n+ null,\n+ eventTargetFiber,\n+ this.event,\n+ eventTarget,\n+ );\n+ if (extraProperties !== undefined) {\n+ copyEventProperties(extraProperties, syntheticEvent);\n+ }\n+ syntheticEvent.type = eventName;\n+ syntheticEvent._dispatchInstances = [eventTargetFiber];\n+ syntheticEvent._dispatchListeners = [eventListener];\n+\n+ let events;\n+ if (discrete) {\n+ events = this._discreteEvents;\n+ if (events === null) {\n+ events = this._discreteEvents = [];\n+ }\n+ } else {\n+ events = this._nonDiscreteEvents;\n+ if (events === null) {\n+ events = this._nonDiscreteEvents = [];\n+ }\n+ }\n+ events.push(syntheticEvent);\n+};\n+\n+DOMEventResponderContext.prototype._runEventsInBatch = function(): void {\n+ if (this._discreteEvents !== null) {\n+ interactiveUpdates(() => {\n+ runEventsInBatch(this._discreteEvents);\n+ });\n+ }\n+ if (this._nonDiscreteEvents !== null) {\n+ runEventsInBatch(this._nonDiscreteEvents);\n+ }\n+};\n+\n+function createValidEventTypeSet(targetEventTypes): Set {\n+ const eventTypeSet = new Set();\n+ \/\/ Go through each target event type of the event responder\n+ for (let i = 0, length = targetEventTypes.length; i < length; ++i) {\n+ const targetEventType = targetEventTypes[i];\n+\n+ if (typeof targetEventType === 'string') {\n+ eventTypeSet.add(((targetEventType: any): DOMTopLevelEventType));\n+ } else {\n+ if (__DEV__) {\n+ warning(\n+ typeof targetEventType === 'object' && targetEventType !== null,\n+ 'Event Responder: invalid entry in targetEventTypes array. ' +\n+ 'Entry must be string or an object. Instead, got %s.',\n+ targetEventType,\n+ );\n+ }\n+ const targetEventConfigObject = ((targetEventType: any): {\n+ name: DOMTopLevelEventType,\n+ passive?: boolean,\n+ capture?: boolean,\n+ });\n+ eventTypeSet.add(targetEventConfigObject.name);\n+ }\n+ }\n+ return eventTypeSet;\n+}\n+\n+function handleTopLevelType(\n+ topLevelType: DOMTopLevelEventType,\n+ fiber: Fiber,\n+ context: Object,\n+): void {\n+ const responder: ReactEventResponder = fiber.type.responder;\n+ let {props, state} = fiber.stateNode;\n+ let validEventTypesForResponder = eventResponderValidEventTypes.get(\n+ responder,\n+ );\n+\n+ if (validEventTypesForResponder === undefined) {\n+ validEventTypesForResponder = createValidEventTypeSet(\n+ responder.targetEventTypes,\n+ );\n+ eventResponderValidEventTypes.set(responder, validEventTypesForResponder);\n+ }\n+ if (!validEventTypesForResponder.has(topLevelType)) {\n+ return;\n+ }\n+ if (state === null && responder.createInitialState !== undefined) {\n+ state = fiber.stateNode.state = responder.createInitialState(props);\n+ }\n+ context._fiber = fiber;\n+ context._responder = responder;\n+ responder.handleEvent(context, props, state);\n+}\n+\n+export function runResponderEventsInBatch(\n+ topLevelType: DOMTopLevelEventType,\n+ targetFiber: Fiber,\n+ nativeEvent: AnyNativeEvent,\n+ nativeEventTarget: EventTarget,\n+ eventSystemFlags: EventSystemFlags,\n+): void {\n+ const context = new DOMEventResponderContext(\n+ topLevelType,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ );\n+ let node = targetFiber;\n+ \/\/ Traverse up the fiber tree till we find event component fibers.\n+ while (node !== null) {\n+ if (node.tag === EventComponent) {\n+ handleTopLevelType(topLevelType, node, context);\n+ }\n+ node = node.return;\n+ }\n+ context._runEventsInBatch();\n+}\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex 5189722547..5591646b19 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -12,7 +12,8 @@ import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import type {DOMTopLevelEventType} from 'events\/TopLevelEventTypes';\n \n import {batchedUpdates, interactiveUpdates} from 'events\/ReactGenericBatching';\n-import {runExtractedEventsInBatch} from 'events\/EventPluginHub';\n+import {runExtractedPluginEventsInBatch} from 'events\/EventPluginHub';\n+import {runResponderEventsInBatch} from '..\/events\/DOMEventResponderSystem';\n import {isFiberMounted} from 'react-reconciler\/reflection';\n import {HostRoot} from 'shared\/ReactWorkTags';\n import {\n@@ -130,16 +131,27 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {\n \n for (let i = 0; i < bookKeeping.ancestors.length; i++) {\n targetInst = bookKeeping.ancestors[i];\n- if (bookKeeping.eventSystemFlags === PLUGIN_EVENT_SYSTEM) {\n- runExtractedEventsInBatch(\n- ((bookKeeping.topLevelType: any): DOMTopLevelEventType),\n+ const eventSystemFlags = bookKeeping.eventSystemFlags;\n+ const eventTarget = getEventTarget(bookKeeping.nativeEvent);\n+ const topLevelType = ((bookKeeping.topLevelType: any): DOMTopLevelEventType);\n+ const nativeEvent = ((bookKeeping.nativeEvent: any): AnyNativeEvent);\n+\n+ if (eventSystemFlags === PLUGIN_EVENT_SYSTEM) {\n+ runExtractedPluginEventsInBatch(\n+ topLevelType,\n targetInst,\n- ((bookKeeping.nativeEvent: any): AnyNativeEvent),\n- getEventTarget(bookKeeping.nativeEvent),\n+ nativeEvent,\n+ eventTarget,\n+ );\n+ } else if (enableEventAPI && targetInst !== null) {\n+ \/\/ Responder event system (experimental event API)\n+ runResponderEventsInBatch(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ eventTarget,\n+ eventSystemFlags,\n );\n- } else {\n- \/\/ RESPONDER_EVENT_SYSTEM\n- \/\/ TODO: Add implementation\n }\n }\n }\n@@ -176,9 +188,6 @@ export function trapEventForResponderEventSystem(\n passive: boolean,\n ): void {\n if (enableEventAPI) {\n- const dispatch = isInteractiveTopLevelEventType(topLevelType)\n- ? dispatchInteractiveEvent\n- : dispatchEvent;\n const rawEventName = getRawEventName(topLevelType);\n let eventFlags = RESPONDER_EVENT_SYSTEM;\n \n@@ -198,7 +207,7 @@ export function trapEventForResponderEventSystem(\n eventFlags |= IS_ACTIVE;\n }\n \/\/ Check if interactive and wrap in interactiveUpdates\n- const listener = dispatch.bind(null, topLevelType, eventFlags);\n+ const listener = dispatchEvent.bind(null, topLevelType, eventFlags);\n addEventListener(element, rawEventName, listener, {\n capture,\n passive,\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\nnew file mode 100644\nindex 0000000000..4af4f210df\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n@@ -0,0 +1,259 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React;\n+let ReactFeatureFlags;\n+let ReactDOM;\n+\n+function createReactEventComponent(targetEventTypes, handleEvent) {\n+ const testEventResponder = {\n+ targetEventTypes,\n+ handleEvent,\n+ };\n+\n+ return {\n+ $$typeof: Symbol.for('react.event_component'),\n+ props: null,\n+ responder: testEventResponder,\n+ };\n+}\n+\n+function dispatchClickEvent(element) {\n+ const clickEvent = document.createEvent('Event');\n+ clickEvent.initEvent('click', true, true);\n+ element.dispatchEvent(clickEvent);\n+}\n+\n+\/\/ This is a new feature in Fiber so I put it in its own test file. It could\n+\/\/ probably move to one of the other test files once it is official.\n+describe('DOMEventResponderSystem', () => {\n+ let container;\n+\n+ beforeEach(() => {\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags.enableEventAPI = true;\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ it('the event responder handleEvent() function should fire on click event', () => {\n+ let eventResponderFiredCount = 0;\n+ let eventLog = [];\n+ const buttonRef = React.createRef();\n+\n+ const ClickEventComponent = createReactEventComponent(\n+ ['click'],\n+ (context, props) => {\n+ eventResponderFiredCount++;\n+ eventLog.push({\n+ name: context.eventType,\n+ passive: context.isPassive(),\n+ passiveSupported: context.isPassiveSupported(),\n+ });\n+ },\n+ );\n+\n+ const Test = () => (\n+ \n+

dillon1000/react

Files changed