{"body":"","parents":["6ae6a7c020d9cdee6f881e50304696d817d2c27e"],"commit":{"authorName":"Dominic Gannaway","shortRevision":"dce430ad92","revision":"dce430ad92d7ed6be5b934f4263d4a39e068ee29","authoredAt":"2019-08-19T19:22:46+01:00","subject":"[Flare] Rework the responder dispatching\/batching mechanism (#16334)","authorEmail":"trueadm@users.noreply.github.com"},"patch":"diff --git a\/packages\/legacy-events\/ReactGenericBatching.js b\/packages\/legacy-events\/ReactGenericBatching.js\nindex e92f15b7af..d3cf009c45 100644\n--- a\/packages\/legacy-events\/ReactGenericBatching.js\n+++ b\/packages\/legacy-events\/ReactGenericBatching.js\n@@ -11,6 +11,8 @@ import {\n } from '.\/ReactControlledComponent';\n import {enableFlareAPI} from 'shared\/ReactFeatureFlags';\n \n+import {invokeGuardedCallbackAndCatchFirstError} from 'shared\/ReactErrorUtils';\n+\n \/\/ Used as a way to call batchedUpdates when we don't have a reference to\n \/\/ the renderer. Such as when we're dispatching events or if third party\n \/\/ libraries need to call batchedUpdates. Eventually, this API will go away when\n@@ -28,6 +30,7 @@ let flushDiscreteUpdatesImpl = function() {};\n let batchedEventUpdatesImpl = batchedUpdatesImpl;\n \n let isInsideEventHandler = false;\n+let isBatchingEventUpdates = false;\n \n function finishEventHandler() {\n \/\/ Here we wait until all updates have propagated, which is important\n@@ -60,20 +63,31 @@ export function batchedUpdates(fn, bookkeeping) {\n }\n \n export function batchedEventUpdates(fn, a, b) {\n- if (isInsideEventHandler) {\n+ if (isBatchingEventUpdates) {\n \/\/ If we are currently inside another batch, we need to wait until it\n \/\/ fully completes before restoring state.\n return fn(a, b);\n }\n- isInsideEventHandler = true;\n+ isBatchingEventUpdates = true;\n try {\n return batchedEventUpdatesImpl(fn, a, b);\n } finally {\n- isInsideEventHandler = false;\n+ isBatchingEventUpdates = false;\n finishEventHandler();\n }\n }\n \n+export function executeUserEventHandler(fn: any => void, value: any) {\n+ const previouslyInEventHandler = isInsideEventHandler;\n+ try {\n+ isInsideEventHandler = true;\n+ const type = typeof value === 'object' && value !== null ? value.type : '';\n+ invokeGuardedCallbackAndCatchFirstError(type, fn, undefined, value);\n+ } finally {\n+ isInsideEventHandler = previouslyInEventHandler;\n+ }\n+}\n+\n export function discreteUpdates(fn, a, b, c) {\n const prevIsInsideEventHandler = isInsideEventHandler;\n isInsideEventHandler = true;\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 432ff1ba32..cc82d658b6 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -25,12 +25,12 @@ import {\n batchedEventUpdates,\n discreteUpdates,\n flushDiscreteUpdatesIfNeeded,\n+ executeUserEventHandler,\n } from 'legacy-events\/ReactGenericBatching';\n import {enqueueStateRestore} from 'legacy-events\/ReactControlledComponent';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import warning from 'shared\/warning';\n import {enableFlareAPI} from 'shared\/ReactFeatureFlags';\n-import {invokeGuardedCallbackAndCatchFirstError} from 'shared\/ReactErrorUtils';\n import invariant from 'shared\/invariant';\n import {\n isFiberSuspenseAndTimedOut,\n@@ -61,12 +61,6 @@ export function setListenToResponderEventTypes(\n listenToResponderEventTypesImpl = _listenToResponderEventTypesImpl;\n }\n \n-type EventQueueItem = {|\n- listener: (val: any) => void,\n- value: any,\n-|};\n-type EventQueue = Array;\n-\n type ResponderTimeout = {|\n id: TimeoutID,\n timers: Map,\n@@ -84,15 +78,10 @@ const rootEventTypesToEventResponderInstances: Map<\n DOMTopLevelEventType | string,\n Set,\n > = new Map();\n-const ownershipChangeListeners: Set = new Set();\n-\n-let globalOwner = null;\n \n let currentTimeStamp = 0;\n let currentTimers = new Map();\n let currentInstance: null | ReactDOMEventResponderInstance = null;\n-let currentEventQueue: null | EventQueue = null;\n-let currentEventQueuePriority: EventPriority = ContinuousEvent;\n let currentTimerIDCounter = 0;\n let currentDocument: null | Document = null;\n \n@@ -104,12 +93,29 @@ const eventResponderContext: ReactDOMResponderContext = {\n ): void {\n validateResponderContext();\n validateEventValue(eventValue);\n- if (eventPriority < currentEventQueuePriority) {\n- currentEventQueuePriority = eventPriority;\n+ switch (eventPriority) {\n+ case DiscreteEvent: {\n+ flushDiscreteUpdatesIfNeeded(currentTimeStamp);\n+ discreteUpdates(() =>\n+ executeUserEventHandler(eventListener, eventValue),\n+ );\n+ break;\n+ }\n+ case UserBlockingEvent: {\n+ if (enableUserBlockingEvents) {\n+ runWithPriority(UserBlockingPriority, () =>\n+ executeUserEventHandler(eventListener, eventValue),\n+ );\n+ } else {\n+ executeUserEventHandler(eventListener, eventValue);\n+ }\n+ break;\n+ }\n+ case ContinuousEvent: {\n+ executeUserEventHandler(eventListener, eventValue);\n+ break;\n+ }\n }\n- ((currentEventQueue: any): EventQueue).push(\n- createEventQueueItem(eventValue, eventListener),\n- );\n },\n isTargetWithinResponder(target: Element | Document): boolean {\n validateResponderContext();\n@@ -196,25 +202,6 @@ const eventResponderContext: ReactDOMResponderContext = {\n }\n }\n },\n- hasOwnership(): boolean {\n- validateResponderContext();\n- return globalOwner === currentInstance;\n- },\n- requestGlobalOwnership(): boolean {\n- validateResponderContext();\n- if (globalOwner !== null) {\n- return false;\n- }\n- globalOwner = currentInstance;\n- triggerOwnershipListeners();\n- return true;\n- },\n- releaseOwnership(): boolean {\n- validateResponderContext();\n- return releaseOwnershipForEventResponderInstance(\n- ((currentInstance: any): ReactDOMEventResponderInstance),\n- );\n- },\n setTimeout(func: () => void, delay): number {\n validateResponderContext();\n if (currentTimers === null) {\n@@ -379,16 +366,6 @@ function collectFocusableElements(\n }\n }\n \n-function createEventQueueItem(\n- value: any,\n- listener: (val: any) => void,\n-): EventQueueItem {\n- return {\n- value,\n- listener,\n- };\n-}\n-\n function doesFiberHaveResponder(\n fiber: Fiber,\n responder: ReactDOMEventResponder,\n@@ -409,17 +386,6 @@ function getActiveDocument(): Document {\n return ((currentDocument: any): Document);\n }\n \n-function releaseOwnershipForEventResponderInstance(\n- eventResponderInstance: ReactDOMEventResponderInstance,\n-): boolean {\n- if (globalOwner === eventResponderInstance) {\n- globalOwner = null;\n- triggerOwnershipListeners();\n- return true;\n- }\n- return false;\n-}\n-\n function isFiberHostComponentFocusable(fiber: Fiber): boolean {\n if (fiber.tag !== HostComponent) {\n return false;\n@@ -452,24 +418,22 @@ function processTimers(\n delay: number,\n ): void {\n const timersArr = Array.from(timers.values());\n- currentEventQueuePriority = ContinuousEvent;\n try {\n- for (let i = 0; i < timersArr.length; i++) {\n- const {instance, func, id, timeStamp} = timersArr[i];\n- currentInstance = instance;\n- currentEventQueue = [];\n- currentTimeStamp = timeStamp + delay;\n- try {\n- func();\n- } finally {\n- activeTimeouts.delete(id);\n+ batchedEventUpdates(() => {\n+ for (let i = 0; i < timersArr.length; i++) {\n+ const {instance, func, id, timeStamp} = timersArr[i];\n+ currentInstance = instance;\n+ currentTimeStamp = timeStamp + delay;\n+ try {\n+ func();\n+ } finally {\n+ activeTimeouts.delete(id);\n+ }\n }\n- }\n- processEventQueue();\n+ });\n } finally {\n currentTimers = null;\n currentInstance = null;\n- currentEventQueue = null;\n currentTimeStamp = 0;\n }\n }\n@@ -508,45 +472,6 @@ function createDOMResponderEvent(\n };\n }\n \n-function processEvents(eventQueue: EventQueue): void {\n- for (let i = 0, length = eventQueue.length; i < length; i++) {\n- const {value, listener} = eventQueue[i];\n- const type = typeof value === 'object' && value !== null ? value.type : '';\n- invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, value);\n- }\n-}\n-\n-function processEventQueue(): void {\n- const eventQueue = ((currentEventQueue: any): EventQueue);\n- if (eventQueue.length === 0) {\n- return;\n- }\n- switch (currentEventQueuePriority) {\n- case DiscreteEvent: {\n- flushDiscreteUpdatesIfNeeded(currentTimeStamp);\n- discreteUpdates(() => {\n- batchedEventUpdates(processEvents, eventQueue);\n- });\n- break;\n- }\n- case UserBlockingEvent: {\n- if (enableUserBlockingEvents) {\n- runWithPriority(\n- UserBlockingPriority,\n- batchedEventUpdates.bind(null, processEvents, eventQueue),\n- );\n- } else {\n- batchedEventUpdates(processEvents, eventQueue);\n- }\n- break;\n- }\n- case ContinuousEvent: {\n- batchedEventUpdates(processEvents, eventQueue);\n- break;\n- }\n- }\n-}\n-\n function responderEventTypesContainType(\n eventTypes: Array,\n type: string,\n@@ -571,12 +496,6 @@ function validateResponderTargetEventTypes(\n return false;\n }\n \n-function validateOwnership(\n- responderInstance: ReactDOMEventResponderInstance,\n-): boolean {\n- return globalOwner === null || globalOwner === responderInstance;\n-}\n-\n function traverseAndHandleEventResponderInstances(\n topLevelType: string,\n targetFiber: null | Fiber,\n@@ -610,22 +529,19 @@ function traverseAndHandleEventResponderInstances(\n const responderInstances = Array.from(respondersMap.values());\n for (let i = 0, length = responderInstances.length; i < length; i++) {\n const responderInstance = responderInstances[i];\n-\n- if (validateOwnership(responderInstance)) {\n- const {props, responder, state, target} = responderInstance;\n- if (\n- !visitedResponders.has(responder) &&\n- validateResponderTargetEventTypes(eventType, responder)\n- ) {\n- visitedResponders.add(responder);\n- const onEvent = responder.onEvent;\n- if (onEvent !== null) {\n- currentInstance = responderInstance;\n- responderEvent.responderTarget = ((target: any):\n- | Element\n- | Document);\n- onEvent(responderEvent, eventResponderContext, props, state);\n- }\n+ const {props, responder, state, target} = responderInstance;\n+ if (\n+ !visitedResponders.has(responder) &&\n+ validateResponderTargetEventTypes(eventType, responder)\n+ ) {\n+ visitedResponders.add(responder);\n+ const onEvent = responder.onEvent;\n+ if (onEvent !== null) {\n+ currentInstance = responderInstance;\n+ responderEvent.responderTarget = ((target: any):\n+ | Element\n+ | Document);\n+ onEvent(responderEvent, eventResponderContext, props, state);\n }\n }\n }\n@@ -642,9 +558,6 @@ function traverseAndHandleEventResponderInstances(\n \n for (let i = 0; i < responderInstances.length; i++) {\n const responderInstance = responderInstances[i];\n- if (!validateOwnership(responderInstance)) {\n- continue;\n- }\n const {props, responder, state, target} = responderInstance;\n const onRootEvent = responder.onRootEvent;\n if (onRootEvent !== null) {\n@@ -656,51 +569,20 @@ function traverseAndHandleEventResponderInstances(\n }\n }\n \n-function triggerOwnershipListeners(): void {\n- const listeningInstances = Array.from(ownershipChangeListeners);\n- const previousInstance = currentInstance;\n- const previousEventQueuePriority = currentEventQueuePriority;\n- const previousEventQueue = currentEventQueue;\n- try {\n- for (let i = 0; i < listeningInstances.length; i++) {\n- const instance = listeningInstances[i];\n- const {props, responder, state} = instance;\n- currentInstance = instance;\n- currentEventQueuePriority = ContinuousEvent;\n- currentEventQueue = [];\n- const onOwnershipChange = ((responder: any): ReactDOMEventResponder)\n- .onOwnershipChange;\n- if (onOwnershipChange !== null) {\n- onOwnershipChange(eventResponderContext, props, state);\n- }\n- }\n- processEventQueue();\n- } finally {\n- currentInstance = previousInstance;\n- currentEventQueue = previousEventQueue;\n- currentEventQueuePriority = previousEventQueuePriority;\n- }\n-}\n-\n export function mountEventResponder(\n responder: ReactDOMEventResponder,\n responderInstance: ReactDOMEventResponderInstance,\n props: Object,\n state: Object,\n ) {\n- if (responder.onOwnershipChange !== null) {\n- ownershipChangeListeners.add(responderInstance);\n- }\n const onMount = responder.onMount;\n if (onMount !== null) {\n- currentEventQueuePriority = ContinuousEvent;\n currentInstance = responderInstance;\n- currentEventQueue = [];\n try {\n- onMount(eventResponderContext, props, state);\n- processEventQueue();\n+ batchedEventUpdates(() => {\n+ onMount(eventResponderContext, props, state);\n+ });\n } finally {\n- currentEventQueue = null;\n currentInstance = null;\n currentTimers = null;\n }\n@@ -714,22 +596,16 @@ export function unmountEventResponder(\n const onUnmount = responder.onUnmount;\n if (onUnmount !== null) {\n let {props, state} = responderInstance;\n- currentEventQueue = [];\n- currentEventQueuePriority = ContinuousEvent;\n currentInstance = responderInstance;\n try {\n- onUnmount(eventResponderContext, props, state);\n- processEventQueue();\n+ batchedEventUpdates(() => {\n+ onUnmount(eventResponderContext, props, state);\n+ });\n } finally {\n- currentEventQueue = null;\n currentInstance = null;\n currentTimers = null;\n }\n }\n- releaseOwnershipForEventResponderInstance(responderInstance);\n- if (responder.onOwnershipChange !== null) {\n- ownershipChangeListeners.delete(responderInstance);\n- }\n const rootEventTypesSet = responderInstance.rootEventTypes;\n if (rootEventTypesSet !== null) {\n const rootEventTypes = Array.from(rootEventTypesSet);\n@@ -762,15 +638,11 @@ export function dispatchEventForResponderEventSystem(\n eventSystemFlags: EventSystemFlags,\n ): void {\n if (enableFlareAPI) {\n- const previousEventQueue = currentEventQueue;\n const previousInstance = currentInstance;\n const previousTimers = currentTimers;\n const previousTimeStamp = currentTimeStamp;\n const previousDocument = currentDocument;\n- const previousEventQueuePriority = currentEventQueuePriority;\n currentTimers = null;\n- currentEventQueue = [];\n- currentEventQueuePriority = ContinuousEvent;\n \/\/ nodeType 9 is DOCUMENT_NODE\n currentDocument =\n (nativeEventTarget: any).nodeType === 9\n@@ -779,21 +651,20 @@ export function dispatchEventForResponderEventSystem(\n \/\/ We might want to control timeStamp another way here\n currentTimeStamp = (nativeEvent: any).timeStamp;\n try {\n- traverseAndHandleEventResponderInstances(\n- topLevelType,\n- targetFiber,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- );\n- processEventQueue();\n+ batchedEventUpdates(() => {\n+ traverseAndHandleEventResponderInstances(\n+ topLevelType,\n+ targetFiber,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ );\n+ });\n } finally {\n currentTimers = previousTimers;\n currentInstance = previousInstance;\n- currentEventQueue = previousEventQueue;\n currentTimeStamp = previousTimeStamp;\n currentDocument = previousDocument;\n- currentEventQueuePriority = previousEventQueuePriority;\n }\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 14c52faefd..80f3a0a492 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@@ -26,7 +26,6 @@ function createEventResponder({\n targetEventTypes,\n onMount,\n onUnmount,\n- onOwnershipChange,\n getInitialState,\n }) {\n return React.unstable_createResponder('TestEventResponder', {\n@@ -36,7 +35,6 @@ function createEventResponder({\n onRootEvent,\n onMount,\n onUnmount,\n- onOwnershipChange,\n getInitialState,\n });\n }\n@@ -644,37 +642,6 @@ describe('DOMEventResponderSystem', () => {\n expect(counter).toEqual(5);\n });\n \n- it('the event responder onOwnershipChange() function should fire', () => {\n- let onOwnershipChangeFired = 0;\n- let ownershipGained = false;\n- const buttonRef = React.createRef();\n-\n- const TestResponder = createEventResponder({\n- targetEventTypes: ['click'],\n- onEvent: (event, context, props, state) => {\n- ownershipGained = context.requestGlobalOwnership();\n- },\n- onOwnershipChange: () => {\n- onOwnershipChangeFired++;\n- },\n- });\n-\n- const Test = () => {\n- const listener = React.unstable_useResponder(TestResponder, {});\n- return

dillon1000/react

Files changed