{"commit":{"authoredAt":"2019-04-04T23:28:23+01:00","shortRevision":"b93a8a9bb8","authorEmail":"trueadm@users.noreply.github.com","subject":"Experimental event API: refactor responder modules for lifecycle inclusion (#15322)","revision":"b93a8a9bb8460a3d582072d3b252ecc15c6ea0f5","authorName":"Dominic Gannaway"},"body":"","files":[{"status":"M","path":"packages\/events\/EventTypes.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/DOMEventResponderSystem.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js"},{"status":"M","path":"packages\/react-events\/src\/Drag.js"},{"status":"M","path":"packages\/react-events\/src\/Focus.js"},{"status":"M","path":"packages\/react-events\/src\/Hover.js"},{"status":"M","path":"packages\/react-events\/src\/Press.js"},{"status":"M","path":"packages\/react-events\/src\/Swipe.js"},{"status":"M","path":"packages\/react-events\/src\/__tests__\/TouchHitTarget-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.js"},{"status":"M","path":"packages\/shared\/ReactTypes.js"}],"patch":"diff --git a\/packages\/events\/EventTypes.js b\/packages\/events\/EventTypes.js\nindex 169b34aa07..ab5c51db64 100644\n--- a\/packages\/events\/EventTypes.js\n+++ b\/packages\/events\/EventTypes.js\n@@ -10,34 +10,40 @@\n import type {AnyNativeEvent} from 'events\/PluginModuleType';\n import type {ReactEventResponderEventType} from 'shared\/ReactTypes';\n \n-export type EventResponderContext = {\n- event: AnyNativeEvent,\n- eventTarget: Element | Document,\n- eventType: string,\n- isPassive: () => boolean,\n- isPassiveSupported: () => boolean,\n- dispatchEvent: (\n- eventObject: E,\n- {\n- capture?: boolean,\n- discrete?: boolean,\n- stopPropagation?: boolean,\n- },\n+export type ResponderEvent = {\n+ nativeEvent: AnyNativeEvent,\n+ target: Element | Document,\n+ type: string,\n+ passive: boolean,\n+ passiveSupported: boolean,\n+};\n+\n+export type ResponderDispatchEventOptions = {\n+ capture?: boolean,\n+ discrete?: boolean,\n+ stopPropagation?: boolean,\n+};\n+\n+export type ResponderContext = {\n+ dispatchEvent: (\n+ eventObject: Object,\n+ otpions: ResponderDispatchEventOptions,\n ) => void,\n isTargetWithinElement: (\n childTarget: Element | Document,\n parentTarget: Element | Document,\n ) => boolean,\n- isTargetOwned: (Element | Document) => boolean,\n isTargetWithinEventComponent: (Element | Document) => boolean,\n isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,\n addRootEventTypes: (\n+ document: Document,\n rootEventTypes: Array,\n ) => void,\n removeRootEventTypes: (\n rootEventTypes: Array,\n ) => void,\n- requestOwnership: (target: Element | Document | null) => boolean,\n- releaseOwnership: (target: Element | Document | null) => boolean,\n- withAsyncDispatching: (func: () => void) => void,\n+ hasOwnership: () => boolean,\n+ requestOwnership: () => boolean,\n+ releaseOwnership: () => boolean,\n+ setTimeout: (func: () => void, timeout: number) => TimeoutID,\n };\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 45e6c95e46..7630d8d7b4 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -6,6 +6,11 @@\n * @flow\n *\/\n \n+import type {\n+ ResponderContext,\n+ ResponderEvent,\n+ ResponderDispatchEventOptions,\n+} from 'events\/EventTypes';\n import {\n type EventSystemFlags,\n IS_PASSIVE,\n@@ -20,13 +25,13 @@ import type {\n import type {DOMTopLevelEventType} from 'events\/TopLevelEventTypes';\n import {batchedUpdates, interactiveUpdates} from 'events\/ReactGenericBatching';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n-import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n-\n+import warning from 'shared\/warning';\n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n import {invokeGuardedCallbackAndCatchFirstError} from 'shared\/ReactErrorUtils';\n-import warning from 'shared\/warning';\n \n-let listenToResponderEventTypesImpl;\n+import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n+\n+export let listenToResponderEventTypesImpl;\n \n export function setListenToResponderEventTypes(\n _listenToResponderEventTypesImpl: Function,\n@@ -34,31 +39,215 @@ export function setListenToResponderEventTypes(\n listenToResponderEventTypesImpl = _listenToResponderEventTypesImpl;\n }\n \n-const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;\n+type EventQueue = {\n+ bubble: null | Array<$Shape>,\n+ capture: null | Array<$Shape>,\n+ discrete: boolean,\n+};\n+\n+type PartialEventObject = {\n+ listener: ($Shape) => void,\n+ target: Element | Document,\n+ type: string,\n+};\n+\n+let currentOwner = null;\n+let currentFiber: Fiber;\n+let currentResponder: ReactEventResponder;\n+let currentEventQueue: EventQueue;\n+\n+const eventResponderContext: ResponderContext = {\n+ dispatchEvent(\n+ possibleEventObject: Object,\n+ {capture, discrete, stopPropagation}: ResponderDispatchEventOptions,\n+ ): void {\n+ const eventQueue = currentEventQueue;\n+ const {listener, target, type} = possibleEventObject;\n+\n+ if (listener == null || target == null || type == null) {\n+ throw new Error(\n+ 'context.dispatchEvent: \"listener\", \"target\" and \"type\" fields on event object are required.',\n+ );\n+ }\n+ if (__DEV__) {\n+ possibleEventObject.preventDefault = () => {\n+ \/\/ Update this warning when we have a story around dealing with preventDefault\n+ warning(\n+ false,\n+ 'preventDefault() is no longer available on event objects created from event responder modules.',\n+ );\n+ };\n+ possibleEventObject.stopPropagation = () => {\n+ \/\/ Update this warning when we have a story around dealing with stopPropgation\n+ warning(\n+ false,\n+ 'stopPropagation() is no longer available on event objects created from event responder modules.',\n+ );\n+ };\n+ }\n+ const eventObject = ((possibleEventObject: any): $Shape<\n+ PartialEventObject,\n+ >);\n+ let events;\n+\n+ if (capture) {\n+ events = eventQueue.capture;\n+ if (events === null) {\n+ events = eventQueue.capture = [];\n+ }\n+ } else {\n+ events = eventQueue.bubble;\n+ if (events === null) {\n+ events = eventQueue.bubble = [];\n+ }\n+ }\n+ if (discrete) {\n+ eventQueue.discrete = true;\n+ }\n+ events.push(eventObject);\n+\n+ if (stopPropagation) {\n+ eventsWithStopPropagation.add(eventObject);\n+ }\n+ },\n+ isPositionWithinTouchHitTarget(x: number, y: number): boolean {\n+ return false;\n+ },\n+ isTargetWithinEventComponent(target: Element | Document): boolean {\n+ const eventFiber = currentFiber;\n+\n+ if (target != null) {\n+ let fiber = getClosestInstanceFromNode(target);\n+ while (fiber !== null) {\n+ if (fiber === eventFiber || fiber === eventFiber.alternate) {\n+ return true;\n+ }\n+ fiber = fiber.return;\n+ }\n+ }\n+ return false;\n+ },\n+ isTargetWithinElement(\n+ childTarget: Element | Document,\n+ parentTarget: Element | Document,\n+ ): boolean {\n+ const childFiber = getClosestInstanceFromNode(childTarget);\n+ const parentFiber = getClosestInstanceFromNode(parentTarget);\n+\n+ let node = childFiber;\n+ while (node !== null) {\n+ if (node === parentFiber) {\n+ return true;\n+ }\n+ node = node.return;\n+ }\n+ return false;\n+ },\n+ addRootEventTypes(\n+ doc: Document,\n+ rootEventTypes: Array,\n+ ): void {\n+ listenToResponderEventTypesImpl(rootEventTypes, doc);\n+ const eventComponent = currentFiber;\n+ for (let i = 0; i < rootEventTypes.length; i++) {\n+ const rootEventType = rootEventTypes[i];\n+ const topLevelEventType =\n+ typeof rootEventType === 'string' ? rootEventType : rootEventType.name;\n+ let rootEventComponents = rootEventTypesToEventComponents.get(\n+ topLevelEventType,\n+ );\n+ if (rootEventComponents === undefined) {\n+ rootEventComponents = new Set();\n+ rootEventTypesToEventComponents.set(\n+ topLevelEventType,\n+ rootEventComponents,\n+ );\n+ }\n+ rootEventComponents.add(eventComponent);\n+ }\n+ },\n+ removeRootEventTypes(\n+ rootEventTypes: Array,\n+ ): void {\n+ const eventComponent = currentFiber;\n+ for (let i = 0; i < rootEventTypes.length; i++) {\n+ const rootEventType = rootEventTypes[i];\n+ const topLevelEventType =\n+ typeof rootEventType === 'string' ? rootEventType : rootEventType.name;\n+ let rootEventComponents = rootEventTypesToEventComponents.get(\n+ topLevelEventType,\n+ );\n+ if (rootEventComponents !== undefined) {\n+ rootEventComponents.delete(eventComponent);\n+ }\n+ }\n+ },\n+ hasOwnership(): boolean {\n+ return currentOwner === currentFiber;\n+ },\n+ requestOwnership(): boolean {\n+ if (currentOwner !== null) {\n+ return false;\n+ }\n+ currentOwner = currentFiber;\n+ return true;\n+ },\n+ releaseOwnership(): boolean {\n+ if (currentOwner !== currentFiber) {\n+ return false;\n+ }\n+ currentOwner = null;\n+ return false;\n+ },\n+ setTimeout(func: () => void, delay): TimeoutID {\n+ const contextResponder = currentResponder;\n+ const contextFiber = currentFiber;\n+ return setTimeout(() => {\n+ const previousEventQueue = currentEventQueue;\n+ const previousFiber = currentFiber;\n+ const previousResponder = currentResponder;\n+ currentEventQueue = createEventQueue();\n+ currentResponder = contextResponder;\n+ currentFiber = contextFiber;\n+ try {\n+ func();\n+ batchedUpdates(processEventQueue, currentEventQueue);\n+ } finally {\n+ currentFiber = previousFiber;\n+ currentEventQueue = previousEventQueue;\n+ currentResponder = previousResponder;\n+ }\n+ }, delay);\n+ },\n+};\n \n const rootEventTypesToEventComponents: Map<\n DOMTopLevelEventType | string,\n Set,\n > = new Map();\n+const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;\n+const eventsWithStopPropagation:\n+ | WeakSet\n+ | Set<$Shape> = new PossiblyWeakSet();\n const targetEventTypeCached: Map<\n Array,\n Set,\n > = new Map();\n-const targetOwnership: Map = new Map();\n-const eventsWithStopPropagation:\n- | WeakSet\n- | Set<$Shape> = new PossiblyWeakSet();\n \n-type PartialEventObject = {\n- listener: ($Shape) => void,\n- target: Element | Document,\n- type: string,\n-};\n-type EventQueue = {\n- bubble: null | Array<$Shape>,\n- capture: null | Array<$Shape>,\n- discrete: boolean,\n-};\n+function createResponderEvent(\n+ topLevelType: string,\n+ nativeEvent: AnyNativeEvent,\n+ nativeEventTarget: Element | Document,\n+ eventSystemFlags: EventSystemFlags,\n+): ResponderEvent {\n+ return {\n+ nativeEvent: nativeEvent,\n+ target: nativeEventTarget,\n+ type: topLevelType,\n+ passive: (eventSystemFlags & IS_PASSIVE) !== 0,\n+ passiveSupported: (eventSystemFlags & PASSIVE_NOT_SUPPORTED) === 0,\n+ };\n+}\n \n function createEventQueue(): EventQueue {\n return {\n@@ -100,8 +289,8 @@ function processEvents(\n }\n }\n \n-function processEventQueue(eventQueue: EventQueue): void {\n- const {bubble, capture, discrete} = eventQueue;\n+export function processEventQueue(): void {\n+ const {bubble, capture, discrete} = currentEventQueue;\n \n if (discrete) {\n interactiveUpdates(() => {\n@@ -112,218 +301,6 @@ function processEventQueue(eventQueue: EventQueue): void {\n }\n }\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.eventTarget = nativeEventTarget;\n- this.eventType = topLevelType;\n- this._flags = eventSystemFlags;\n- this._fiber = null;\n- this._responder = null;\n- this._discreteEvents = null;\n- this._nonDiscreteEvents = null;\n- this._isBatching = true;\n- this._eventQueue = createEventQueue();\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-DOMEventResponderContext.prototype.dispatchEvent = function(\n- possibleEventObject: Object,\n- {\n- capture,\n- discrete,\n- stopPropagation,\n- }: {\n- capture?: boolean,\n- discrete?: boolean,\n- stopPropagation?: boolean,\n- },\n-): void {\n- const eventQueue = this._eventQueue;\n- const {listener, target, type} = possibleEventObject;\n-\n- if (listener == null || target == null || type == null) {\n- throw new Error(\n- 'context.dispatchEvent: \"listener\", \"target\" and \"type\" fields on event object are required.',\n- );\n- }\n- if (__DEV__) {\n- possibleEventObject.preventDefault = () => {\n- \/\/ Update this warning when we have a story around dealing with preventDefault\n- warning(\n- false,\n- 'preventDefault() is no longer available on event objects created from event responder modules.',\n- );\n- };\n- possibleEventObject.stopPropagation = () => {\n- \/\/ Update this warning when we have a story around dealing with stopPropgation\n- warning(\n- false,\n- 'stopPropagation() is no longer available on event objects created from event responder modules.',\n- );\n- };\n- }\n- const eventObject = ((possibleEventObject: any): $Shape);\n- let events;\n-\n- if (capture) {\n- events = eventQueue.capture;\n- if (events === null) {\n- events = eventQueue.capture = [];\n- }\n- } else {\n- events = eventQueue.bubble;\n- if (events === null) {\n- events = eventQueue.bubble = [];\n- }\n- }\n- if (discrete) {\n- eventQueue.discrete = true;\n- }\n- events.push(eventObject);\n-\n- if (stopPropagation) {\n- eventsWithStopPropagation.add(eventObject);\n- }\n-};\n-\n-DOMEventResponderContext.prototype.isTargetWithinEventComponent = function(\n- target: AnyNativeEvent,\n-): boolean {\n- const eventFiber = this._fiber;\n-\n- if (target != null) {\n- let fiber = getClosestInstanceFromNode(target);\n- while (fiber !== null) {\n- if (fiber === eventFiber || fiber === eventFiber.alternate) {\n- return true;\n- }\n- fiber = fiber.return;\n- }\n- }\n- return false;\n-};\n-\n-DOMEventResponderContext.prototype.isTargetWithinElement = function(\n- childTarget: EventTarget,\n- parentTarget: EventTarget,\n-): boolean {\n- const childFiber = getClosestInstanceFromNode(childTarget);\n- const parentFiber = getClosestInstanceFromNode(parentTarget);\n-\n- let currentFiber = childFiber;\n- while (currentFiber !== null) {\n- if (currentFiber === parentFiber) {\n- return true;\n- }\n- currentFiber = currentFiber.return;\n- }\n- return false;\n-};\n-\n-DOMEventResponderContext.prototype.addRootEventTypes = function(\n- rootEventTypes: Array,\n-) {\n- const element = this.eventTarget.ownerDocument;\n- listenToResponderEventTypesImpl(rootEventTypes, element);\n- const eventComponent = this._fiber;\n- for (let i = 0; i < rootEventTypes.length; i++) {\n- const rootEventType = rootEventTypes[i];\n- const topLevelEventType =\n- typeof rootEventType === 'string' ? rootEventType : rootEventType.name;\n- let rootEventComponents = rootEventTypesToEventComponents.get(\n- topLevelEventType,\n- );\n- if (rootEventComponents === undefined) {\n- rootEventComponents = new Set();\n- rootEventTypesToEventComponents.set(\n- topLevelEventType,\n- rootEventComponents,\n- );\n- }\n- rootEventComponents.add(eventComponent);\n- }\n-};\n-\n-DOMEventResponderContext.prototype.removeRootEventTypes = function(\n- rootEventTypes: Array,\n-): void {\n- const eventComponent = this._fiber;\n- for (let i = 0; i < rootEventTypes.length; i++) {\n- const rootEventType = rootEventTypes[i];\n- const topLevelEventType =\n- typeof rootEventType === 'string' ? rootEventType : rootEventType.name;\n- let rootEventComponents = rootEventTypesToEventComponents.get(\n- topLevelEventType,\n- );\n- if (rootEventComponents !== undefined) {\n- rootEventComponents.delete(eventComponent);\n- }\n- }\n-};\n-\n-DOMEventResponderContext.prototype.isPositionWithinTouchHitTarget = function() {\n- \/\/ TODO\n-};\n-\n-DOMEventResponderContext.prototype.isTargetOwned = function(\n- targetElement: Element | Node,\n-): boolean {\n- const targetDoc = targetElement.ownerDocument;\n- return targetOwnership.has(targetDoc);\n-};\n-\n-DOMEventResponderContext.prototype.requestOwnership = function(\n- targetElement: Element | Node,\n-): boolean {\n- const targetDoc = targetElement.ownerDocument;\n- if (targetOwnership.has(targetDoc)) {\n- return false;\n- }\n- targetOwnership.set(targetDoc, this._fiber);\n- return true;\n-};\n-\n-DOMEventResponderContext.prototype.releaseOwnership = function(\n- targetElement: Element | Node,\n-): boolean {\n- const targetDoc = targetElement.ownerDocument;\n- if (!targetOwnership.has(targetDoc)) {\n- return false;\n- }\n- const owner = targetOwnership.get(targetDoc);\n- if (owner === this._fiber || owner === this._fiber.alternate) {\n- targetOwnership.delete(targetDoc);\n- return true;\n- }\n- return false;\n-};\n-\n-DOMEventResponderContext.prototype.withAsyncDispatching = function(\n- func: () => void,\n-) {\n- const previousEventQueue = this._eventQueue;\n- this._eventQueue = createEventQueue();\n- try {\n- func();\n- batchedUpdates(processEventQueue, this._eventQueue);\n- } finally {\n- this._eventQueue = previousEventQueue;\n- }\n-};\n-\n function getTargetEventTypes(\n eventTypes: Array,\n ): Set {\n@@ -345,7 +322,7 @@ function getTargetEventTypes(\n function handleTopLevelType(\n topLevelType: DOMTopLevelEventType,\n fiber: Fiber,\n- context: Object,\n+ responderEvent: ResponderEvent,\n isRootLevelEvent: boolean,\n ): void {\n const responder: ReactEventResponder = fiber.type.responder;\n@@ -360,9 +337,10 @@ function handleTopLevelType(\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+ currentFiber = fiber;\n+ currentResponder = responder;\n+\n+ responder.onEvent(responderEvent, eventResponderContext, props, state);\n }\n \n export function runResponderEventsInBatch(\n@@ -373,17 +351,18 @@ export function runResponderEventsInBatch(\n eventSystemFlags: EventSystemFlags,\n ): void {\n if (enableEventAPI) {\n- const context = new DOMEventResponderContext(\n- topLevelType,\n+ currentEventQueue = createEventQueue();\n+ const responderEvent = createResponderEvent(\n+ ((topLevelType: any): string),\n nativeEvent,\n- nativeEventTarget,\n+ ((nativeEventTarget: any): Element | Document),\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, false);\n+ handleTopLevelType(topLevelType, node, responderEvent, false);\n }\n node = node.return;\n }\n@@ -399,11 +378,11 @@ export function runResponderEventsInBatch(\n handleTopLevelType(\n topLevelType,\n rootEventComponentFiber,\n- context,\n+ responderEvent,\n true,\n );\n }\n }\n- processEventQueue(context._eventQueue);\n+ processEventQueue();\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\nindex af0111e4eb..c304781341 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n@@ -13,10 +13,10 @@ let React;\n let ReactFeatureFlags;\n let ReactDOM;\n \n-function createReactEventComponent(targetEventTypes, handleEvent) {\n+function createReactEventComponent(targetEventTypes, onEvent) {\n const testEventResponder = {\n targetEventTypes,\n- handleEvent,\n+ onEvent,\n };\n \n return {\n@@ -53,19 +53,19 @@ describe('DOMEventResponderSystem', () => {\n container = null;\n });\n \n- it('the event responder handleEvent() function should fire on click event', () => {\n+ it('the event responder onEvent() 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+ (event, context, props) => {\n eventResponderFiredCount++;\n eventLog.push({\n- name: context.eventType,\n- passive: context.isPassive(),\n- passiveSupported: context.isPassiveSupported(),\n+ name: event.type,\n+ passive: event.passive,\n+ passiveSupported: event.passiveSupported,\n });\n },\n );\n@@ -79,7 +79,7 @@ describe('DOMEventResponderSystem', () => {\n ReactDOM.render(, container);\n expect(container.innerHTML).toBe('

dillon1000/react

Files changed