{"parents":["717a33abb9e5d59d0c17e9a23af7c9a266cbba57"],"commit":{"authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","revision":"a3875663f6e5bb8bdc28c9cf71cf1312615c9c84","subject":"React Event System: cleanup plugins + break out update batching logic (#18503)","shortRevision":"a3875663f6","authoredAt":"2020-04-06T22:01:20+01:00"},"patch":"diff --git a\/packages\/legacy-events\/EventPluginRegistry.js b\/packages\/legacy-events\/EventPluginRegistry.js\nindex 067e260313..f720c0af37 100644\n--- a\/packages\/legacy-events\/EventPluginRegistry.js\n+++ b\/packages\/legacy-events\/EventPluginRegistry.js\n@@ -241,3 +241,20 @@ export function injectEventPluginsByName(\n recomputePluginOrdering();\n }\n }\n+\n+export function injectEventPlugins(\n+ eventPlugins: [PluginModule],\n+): void {\n+ for (let i = 0; i < eventPlugins.length; i++) {\n+ const pluginModule = eventPlugins[i];\n+ plugins.push(pluginModule);\n+ const publishedEvents = pluginModule.eventTypes;\n+ for (const eventName in publishedEvents) {\n+ publishEventForPlugin(\n+ publishedEvents[eventName],\n+ pluginModule,\n+ eventName,\n+ );\n+ }\n+ }\n+}\ndiff --git a\/packages\/legacy-events\/ReactGenericBatching.js b\/packages\/legacy-events\/ReactGenericBatching.js\nindex f3c8d4d768..2681c30cba 100644\n--- a\/packages\/legacy-events\/ReactGenericBatching.js\n+++ b\/packages\/legacy-events\/ReactGenericBatching.js\n@@ -5,14 +5,6 @@\n * LICENSE file in the root directory of this source tree.\n *\/\n \n-import {\n- needsStateRestore,\n- restoreStateIfNeeded,\n-} from '.\/ReactControlledComponent';\n-\n-import {enableDeprecatedFlareAPI} from 'shared\/ReactFeatureFlags';\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@@ -32,21 +24,6 @@ let batchedEventUpdatesImpl = batchedUpdatesImpl;\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- \/\/ when using controlled components within layers:\n- \/\/ https:\/\/github.com\/facebook\/react\/issues\/1698\n- \/\/ Then we restore state of any controlled component.\n- const controlledComponentsHavePendingUpdates = needsStateRestore();\n- if (controlledComponentsHavePendingUpdates) {\n- \/\/ If a controlled event was fired, we may need to restore the state of\n- \/\/ the DOM node back to the controlled value. This is necessary when React\n- \/\/ bails out of the update without touching the DOM.\n- flushDiscreteUpdatesImpl();\n- restoreStateIfNeeded();\n- }\n-}\n-\n export function batchedUpdates(fn, bookkeeping) {\n if (isInsideEventHandler) {\n \/\/ If we are currently inside another batch, we need to wait until it\n@@ -58,7 +35,6 @@ export function batchedUpdates(fn, bookkeeping) {\n return batchedUpdatesImpl(fn, bookkeeping);\n } finally {\n isInsideEventHandler = false;\n- finishEventHandler();\n }\n }\n \n@@ -73,19 +49,6 @@ export function batchedEventUpdates(fn, a, b) {\n return batchedEventUpdatesImpl(fn, a, b);\n } finally {\n isBatchingEventUpdates = false;\n- finishEventHandler();\n- }\n-}\n-\n-\/\/ This is for the React Flare event system\n-export function executeUserEventHandler(fn: any => void, value: any): void {\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@@ -97,32 +60,12 @@ export function discreteUpdates(fn, a, b, c, d) {\n } finally {\n isInsideEventHandler = prevIsInsideEventHandler;\n if (!isInsideEventHandler) {\n- finishEventHandler();\n }\n }\n }\n \n-let lastFlushedEventTimeStamp = 0;\n export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {\n- \/\/ event.timeStamp isn't overly reliable due to inconsistencies in\n- \/\/ how different browsers have historically provided the time stamp.\n- \/\/ Some browsers provide high-resolution time stamps for all events,\n- \/\/ some provide low-resolution time stamps for all events. FF < 52\n- \/\/ even mixes both time stamps together. Some browsers even report\n- \/\/ negative time stamps or time stamps that are 0 (iOS9) in some cases.\n- \/\/ Given we are only comparing two time stamps with equality (!==),\n- \/\/ we are safe from the resolution differences. If the time stamp is 0\n- \/\/ we bail-out of preventing the flush, which can affect semantics,\n- \/\/ such as if an earlier flush removes or adds event listeners that\n- \/\/ are fired in the subsequent flush. However, this is the same\n- \/\/ behaviour as we had before this change, so the risks are low.\n- if (\n- !isInsideEventHandler &&\n- (!enableDeprecatedFlareAPI ||\n- timeStamp === 0 ||\n- lastFlushedEventTimeStamp !== timeStamp)\n- ) {\n- lastFlushedEventTimeStamp = timeStamp;\n+ if (!isInsideEventHandler) {\n flushDiscreteUpdatesImpl();\n }\n }\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOM.js b\/packages\/react-dom\/src\/client\/ReactDOM.js\nindex 5de914e345..0afaa882da 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOM.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOM.js\n@@ -39,13 +39,6 @@ import {\n } from 'react-reconciler\/src\/ReactFiberReconciler';\n import {createPortal as createPortalImpl} from 'react-reconciler\/src\/ReactPortal';\n import {canUseDOM} from 'shared\/ExecutionEnvironment';\n-import {setBatchingImplementation} from 'legacy-events\/ReactGenericBatching';\n-import {\n- setRestoreImplementation,\n- enqueueStateRestore,\n- restoreStateIfNeeded,\n-} from 'legacy-events\/ReactControlledComponent';\n-import {runEventsInBatch} from 'legacy-events\/EventBatching';\n import {\n eventNameDispatchConfigs,\n injectEventPluginsByName,\n@@ -69,6 +62,12 @@ import {\n setAttemptHydrationAtCurrentPriority,\n queueExplicitHydrationTarget,\n } from '..\/events\/ReactDOMEventReplaying';\n+import {setBatchingImplementation} from '..\/events\/ReactDOMUpdateBatching';\n+import {\n+ setRestoreImplementation,\n+ enqueueStateRestore,\n+ restoreStateIfNeeded,\n+} from '..\/events\/ReactDOMControlledComponent';\n \n setAttemptSynchronousHydration(attemptSynchronousHydration);\n setAttemptUserBlockingHydration(attemptUserBlockingHydration);\n@@ -183,7 +182,6 @@ const Internals = {\n enqueueStateRestore,\n restoreStateIfNeeded,\n dispatchEvent,\n- runEventsInBatch,\n flushPassiveEffects,\n IsThisRendererActing,\n ],\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js b\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js\nindex 4c0ba0d14f..a3608b85da 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js\n@@ -20,43 +20,55 @@ import SimpleEventPlugin from '..\/events\/SimpleEventPlugin';\n import {\n injectEventPluginOrder,\n injectEventPluginsByName,\n+ injectEventPlugins,\n } from 'legacy-events\/EventPluginRegistry';\n+import {enableModernEventSystem} from 'shared\/ReactFeatureFlags';\n \n-\/**\n- * Specifies a deterministic ordering of `EventPlugin`s. A convenient way to\n- * reason about plugins, without having to package every one of them. This\n- * is better than having plugins be ordered in the same order that they\n- * are injected because that ordering would be influenced by the packaging order.\n- * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that\n- * preventing default on events is convenient in `SimpleEventPlugin` handlers.\n- *\/\n-const DOMEventPluginOrder = [\n- 'ResponderEventPlugin',\n- 'SimpleEventPlugin',\n- 'EnterLeaveEventPlugin',\n- 'ChangeEventPlugin',\n- 'SelectEventPlugin',\n- 'BeforeInputEventPlugin',\n-];\n+if (enableModernEventSystem) {\n+ injectEventPlugins([\n+ SimpleEventPlugin,\n+ EnterLeaveEventPlugin,\n+ ChangeEventPlugin,\n+ SelectEventPlugin,\n+ BeforeInputEventPlugin,\n+ ]);\n+} else {\n+ \/**\n+ * Specifies a deterministic ordering of `EventPlugin`s. A convenient way to\n+ * reason about plugins, without having to package every one of them. This\n+ * is better than having plugins be ordered in the same order that they\n+ * are injected because that ordering would be influenced by the packaging order.\n+ * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that\n+ * preventing default on events is convenient in `SimpleEventPlugin` handlers.\n+ *\/\n+ const DOMEventPluginOrder = [\n+ 'ResponderEventPlugin',\n+ 'SimpleEventPlugin',\n+ 'EnterLeaveEventPlugin',\n+ 'ChangeEventPlugin',\n+ 'SelectEventPlugin',\n+ 'BeforeInputEventPlugin',\n+ ];\n \n-\/**\n- * Inject modules for resolving DOM hierarchy and plugin ordering.\n- *\/\n-injectEventPluginOrder(DOMEventPluginOrder);\n-setComponentTree(\n- getFiberCurrentPropsFromNode,\n- getInstanceFromNode,\n- getNodeFromInstance,\n-);\n+ \/**\n+ * Inject modules for resolving DOM hierarchy and plugin ordering.\n+ *\/\n+ injectEventPluginOrder(DOMEventPluginOrder);\n+ setComponentTree(\n+ getFiberCurrentPropsFromNode,\n+ getInstanceFromNode,\n+ getNodeFromInstance,\n+ );\n \n-\/**\n- * Some important event plugins included by default (without having to require\n- * them).\n- *\/\n-injectEventPluginsByName({\n- SimpleEventPlugin: SimpleEventPlugin,\n- EnterLeaveEventPlugin: EnterLeaveEventPlugin,\n- ChangeEventPlugin: ChangeEventPlugin,\n- SelectEventPlugin: SelectEventPlugin,\n- BeforeInputEventPlugin: BeforeInputEventPlugin,\n-});\n+ \/**\n+ * Some important event plugins included by default (without having to require\n+ * them).\n+ *\/\n+ injectEventPluginsByName({\n+ SimpleEventPlugin: SimpleEventPlugin,\n+ EnterLeaveEventPlugin: EnterLeaveEventPlugin,\n+ ChangeEventPlugin: ChangeEventPlugin,\n+ SelectEventPlugin: SelectEventPlugin,\n+ BeforeInputEventPlugin: BeforeInputEventPlugin,\n+ });\n+}\ndiff --git a\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js b\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js\nindex 372af140fb..11a3fec191 100644\n--- a\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/ChangeEventPlugin.js\n@@ -6,8 +6,6 @@\n *\/\n \n import {runEventsInBatch} from 'legacy-events\/EventBatching';\n-import {enqueueStateRestore} from 'legacy-events\/ReactControlledComponent';\n-import {batchedUpdates} from 'legacy-events\/ReactGenericBatching';\n import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n import isTextInputElement from '.\/isTextInputElement';\n import {canUseDOM} from 'shared\/ExecutionEnvironment';\n@@ -27,9 +25,15 @@ import isEventSupported from '.\/isEventSupported';\n import {getNodeFromInstance} from '..\/client\/ReactDOMComponentTree';\n import {updateValueIfChanged} from '..\/client\/inputValueTracking';\n import {setDefaultValue} from '..\/client\/ReactDOMInput';\n+import {enqueueStateRestore} from '.\/ReactDOMControlledComponent';\n \n-import {disableInputAttributeSyncing} from 'shared\/ReactFeatureFlags';\n+import {\n+ disableInputAttributeSyncing,\n+ enableModernEventSystem,\n+} from 'shared\/ReactFeatureFlags';\n import accumulateTwoPhaseListeners from '.\/accumulateTwoPhaseListeners';\n+import {batchedUpdates} from '.\/ReactDOMUpdateBatching';\n+import {dispatchEventsInBatch} from '.\/DOMModernPluginEventSystem';\n \n const eventTypes = {\n change: {\n@@ -101,7 +105,11 @@ function manualDispatchChangeEvent(nativeEvent) {\n }\n \n function runEventInBatch(event) {\n- runEventsInBatch(event);\n+ if (enableModernEventSystem) {\n+ dispatchEventsInBatch([event]);\n+ } else {\n+ runEventsInBatch(event);\n+ }\n }\n \n function getInstIfValueChanged(targetInst) {\ndiff --git a\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js b\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\nindex e1e554a69a..080f554523 100644\n--- a\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\n@@ -22,7 +22,6 @@ import {\n HostText,\n } from 'react-reconciler\/src\/ReactWorkTags';\n import {IS_FIRST_ANCESTOR, PLUGIN_EVENT_SYSTEM} from '.\/EventSystemFlags';\n-import {batchedEventUpdates} from 'legacy-events\/ReactGenericBatching';\n import {runEventsInBatch} from 'legacy-events\/EventBatching';\n import {plugins} from 'legacy-events\/EventPluginRegistry';\n import accumulateInto from 'legacy-events\/accumulateInto';\n@@ -45,6 +44,7 @@ import {\n mediaEventTypes,\n } from '.\/DOMTopLevelEventTypes';\n import {addTrappedEventListener} from '.\/ReactDOMEventListener';\n+import {batchedEventUpdates} from '.\/ReactDOMUpdateBatching';\n \n \/**\n * Summary of `DOMEventPluginSystem` event handling:\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex 3bc74b86d9..fb1155c8d5 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -24,7 +24,6 @@ import type {\n import type {ReactDOMListener} from '..\/shared\/ReactDOMTypes';\n \n import {registrationNameDependencies} from 'legacy-events\/EventPluginRegistry';\n-import {batchedEventUpdates} from 'legacy-events\/ReactGenericBatching';\n import {plugins} from 'legacy-events\/EventPluginRegistry';\n import {\n PLUGIN_EVENT_SYSTEM,\n@@ -86,12 +85,16 @@ import {\n } from '..\/client\/ReactDOMComponentTree';\n import {COMMENT_NODE} from '..\/shared\/HTMLNodeType';\n import {topLevelEventsToDispatchConfig} from '.\/DOMEventProperties';\n+import {batchedEventUpdates} from '.\/ReactDOMUpdateBatching';\n \n import {\n enableLegacyFBSupport,\n enableUseEventAPI,\n } from 'shared\/ReactFeatureFlags';\n-import {invokeGuardedCallbackAndCatchFirstError} from 'shared\/ReactErrorUtils';\n+import {\n+ invokeGuardedCallbackAndCatchFirstError,\n+ rethrowCaughtError,\n+} from 'shared\/ReactErrorUtils';\n \n const capturePhaseEvents = new Set([\n TOP_FOCUS,\n@@ -213,6 +216,21 @@ function executeDispatchesInOrder(event: ReactSyntheticEvent): void {\n event._dispatchCurrentTargets = null;\n }\n \n+export function dispatchEventsInBatch(\n+ events: Array,\n+): void {\n+ for (let i = 0; i < events.length; i++) {\n+ const syntheticEvent = events[i];\n+ executeDispatchesInOrder(syntheticEvent);\n+ \/\/ Release the event from the pool if needed\n+ if (!syntheticEvent.isPersistent()) {\n+ syntheticEvent.constructor.release(syntheticEvent);\n+ }\n+ }\n+ \/\/ This would be a good time to rethrow if any of the event handlers threw.\n+ rethrowCaughtError();\n+}\n+\n function dispatchEventsForPlugins(\n topLevelType: DOMTopLevelEventType,\n eventSystemFlags: EventSystemFlags,\n@@ -244,14 +262,7 @@ function dispatchEventsForPlugins(\n }\n }\n }\n- for (let i = 0; i < syntheticEvents.length; i++) {\n- const syntheticEvent = syntheticEvents[i];\n- executeDispatchesInOrder(syntheticEvent);\n- \/\/ Release the event from the pool if needed\n- if (!syntheticEvent.isPersistent()) {\n- syntheticEvent.constructor.release(syntheticEvent);\n- }\n- }\n+ dispatchEventsInBatch(syntheticEvents);\n }\n \n function shouldUpgradeListener(\ndiff --git a\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js\nindex 47eb5ca68f..8194aa3fb6 100644\n--- a\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js\n@@ -30,13 +30,13 @@ import {\n discreteUpdates,\n flushDiscreteUpdatesIfNeeded,\n executeUserEventHandler,\n-} from 'legacy-events\/ReactGenericBatching';\n-import {enqueueStateRestore} from 'legacy-events\/ReactControlledComponent';\n+} from '.\/ReactDOMUpdateBatching';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import {enableDeprecatedFlareAPI} from 'shared\/ReactFeatureFlags';\n import invariant from 'shared\/invariant';\n \n import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n+import {enqueueStateRestore} from '.\/ReactDOMControlledComponent';\n import {\n ContinuousEvent,\n UserBlockingEvent,\ndiff --git a\/packages\/legacy-events\/ReactControlledComponent.js b\/packages\/react-dom\/src\/events\/ReactDOMControlledComponent.js\nsimilarity index 93%\nrename from packages\/legacy-events\/ReactControlledComponent.js\nrename to packages\/react-dom\/src\/events\/ReactDOMControlledComponent.js\nindex 830f2a1b1c..5b4dc59232 100644\n--- a\/packages\/legacy-events\/ReactControlledComponent.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMControlledComponent.js\n@@ -8,11 +8,10 @@\n *\/\n \n import invariant from 'shared\/invariant';\n-\n import {\n getInstanceFromNode,\n getFiberCurrentPropsFromNode,\n-} from '.\/EventPluginUtils';\n+} from '..\/client\/ReactDOMComponentTree';\n \n \/\/ Use to restore controlled state after a change event has fired.\n \n@@ -20,7 +19,7 @@ let restoreImpl = null;\n let restoreTarget = null;\n let restoreQueue = null;\n \n-function restoreStateOfTarget(target) {\n+function restoreStateOfTarget(target: Node) {\n \/\/ We perform this translation at the end of the event loop so that we\n \/\/ always receive the correct fiber here\n const internalInstance = getInstanceFromNode(target);\n@@ -47,7 +46,7 @@ export function setRestoreImplementation(\n restoreImpl = impl;\n }\n \n-export function enqueueStateRestore(target: EventTarget): void {\n+export function enqueueStateRestore(target: Node): void {\n if (restoreTarget) {\n if (restoreQueue) {\n restoreQueue.push(target);\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex af3d59da55..8db675c670 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -17,10 +17,6 @@ import type {DOMTopLevelEventType} from 'legacy-events\/TopLevelEventTypes';\n \/\/ CommonJS interop named imports.\n import * as Scheduler from 'scheduler';\n \n-import {\n- discreteUpdates,\n- flushDiscreteUpdatesIfNeeded,\n-} from 'legacy-events\/ReactGenericBatching';\n import {DEPRECATED_dispatchEventForResponderEventSystem} from '.\/DeprecatedDOMEventResponderSystem';\n import {\n isReplayableDiscreteEvent,\n@@ -70,6 +66,10 @@ import {\n import {getEventPriorityForPluginSystem} from '.\/DOMEventProperties';\n import {dispatchEventForLegacyPluginEventSystem} from '.\/DOMLegacyEventPluginSystem';\n import {dispatchEventForPluginEventSystem} from '.\/DOMModernPluginEventSystem';\n+import {\n+ flushDiscreteUpdatesIfNeeded,\n+ discreteUpdates,\n+} from '.\/ReactDOMUpdateBatching';\n \n const {\n unstable_UserBlockingPriority: UserBlockingPriority,\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMUpdateBatching.js b\/packages\/react-dom\/src\/events\/ReactDOMUpdateBatching.js\nnew file mode 100644\nindex 0000000000..b4fbc9d1d8\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMUpdateBatching.js\n@@ -0,0 +1,140 @@\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+\n+import {\n+ needsStateRestore,\n+ restoreStateIfNeeded,\n+} from '.\/ReactDOMControlledComponent';\n+\n+import {enableDeprecatedFlareAPI} from 'shared\/ReactFeatureFlags';\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+\/\/ everything is batched by default. We'll then have a similar API to opt-out of\n+\/\/ scheduled work and instead do synchronous work.\n+\n+\/\/ Defaults\n+let batchedUpdatesImpl = function(fn, bookkeeping) {\n+ return fn(bookkeeping);\n+};\n+let discreteUpdatesImpl = function(fn, a, b, c, d) {\n+ return fn(a, b, c, d);\n+};\n+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+ \/\/ when using controlled components within layers:\n+ \/\/ https:\/\/github.com\/facebook\/react\/issues\/1698\n+ \/\/ Then we restore state of any controlled component.\n+ const controlledComponentsHavePendingUpdates = needsStateRestore();\n+ if (controlledComponentsHavePendingUpdates) {\n+ \/\/ If a controlled event was fired, we may need to restore the state of\n+ \/\/ the DOM node back to the controlled value. This is necessary when React\n+ \/\/ bails out of the update without touching the DOM.\n+ flushDiscreteUpdatesImpl();\n+ restoreStateIfNeeded();\n+ }\n+}\n+\n+export function batchedUpdates(fn, bookkeeping) {\n+ if (isInsideEventHandler) {\n+ \/\/ If we are currently inside another batch, we need to wait until it\n+ \/\/ fully completes before restoring state.\n+ return fn(bookkeeping);\n+ }\n+ isInsideEventHandler = true;\n+ try {\n+ return batchedUpdatesImpl(fn, bookkeeping);\n+ } finally {\n+ isInsideEventHandler = false;\n+ finishEventHandler();\n+ }\n+}\n+\n+export function batchedEventUpdates(fn, a, b) {\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+ isBatchingEventUpdates = true;\n+ try {\n+ return batchedEventUpdatesImpl(fn, a, b);\n+ } finally {\n+ isBatchingEventUpdates = false;\n+ finishEventHandler();\n+ }\n+}\n+\n+\/\/ This is for the React Flare event system\n+export function executeUserEventHandler(fn: any => void, value: any): void {\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, d) {\n+ const prevIsInsideEventHandler = isInsideEventHandler;\n+ isInsideEventHandler = true;\n+ try {\n+ return discreteUpdatesImpl(fn, a, b, c, d);\n+ } finally {\n+ isInsideEventHandler = prevIsInsideEventHandler;\n+ if (!isInsideEventHandler) {\n+ finishEventHandler();\n+ }\n+ }\n+}\n+\n+let lastFlushedEventTimeStamp = 0;\n+export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {\n+ \/\/ event.timeStamp isn't overly reliable due to inconsistencies in\n+ \/\/ how different browsers have historically provided the time stamp.\n+ \/\/ Some browsers provide high-resolution time stamps for all events,\n+ \/\/ some provide low-resolution time stamps for all events. FF < 52\n+ \/\/ even mixes both time stamps together. Some browsers even report\n+ \/\/ negative time stamps or time stamps that are 0 (iOS9) in some cases.\n+ \/\/ Given we are only comparing two time stamps with equality (!==),\n+ \/\/ we are safe from the resolution differences. If the time stamp is 0\n+ \/\/ we bail-out of preventing the flush, which can affect semantics,\n+ \/\/ such as if an earlier flush removes or adds event listeners that\n+ \/\/ are fired in the subsequent flush. However, this is the same\n+ \/\/ behaviour as we had before this change, so the risks are low.\n+ if (\n+ !isInsideEventHandler &&\n+ (!enableDeprecatedFlareAPI ||\n+ timeStamp === 0 ||\n+ lastFlushedEventTimeStamp !== timeStamp)\n+ ) {\n+ lastFlushedEventTimeStamp = timeStamp;\n+ flushDiscreteUpdatesImpl();\n+ }\n+}\n+\n+export function setBatchingImplementation(\n+ _batchedUpdatesImpl,\n+ _discreteUpdatesImpl,\n+ _flushDiscreteUpdatesImpl,\n+ _batchedEventUpdatesImpl,\n+) {\n+ batchedUpdatesImpl = _batchedUpdatesImpl;\n+ discreteUpdatesImpl = _discreteUpdatesImpl;\n+ flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;\n+ batchedEventUpdatesImpl = _batchedEventUpdatesImpl;\n+}\ndiff --git a\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js b\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js\nindex 2348a047ba..b751ce1362 100644\n--- a\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js\n+++ b\/packages\/react-dom\/src\/test-utils\/ReactTestUtils.js\n@@ -23,6 +23,10 @@ import act from '.\/ReactTestUtilsAct';\n import forEachAccumulated from 'legacy-events\/forEachAccumulated';\n import accumulateInto from 'legacy-events\/accumulateInto';\n import {enableModernEventSystem} from 'shared\/ReactFeatureFlags';\n+import {\n+ rethrowCaughtError,\n+ invokeGuardedCallbackAndCatchFirstError,\n+} from 'shared\/ReactErrorUtils';\n \n const {findDOMNode} = ReactDOM;\n \/\/ Keep in sync with ReactDOMUnstableNativeDependencies.js\n@@ -38,7 +42,6 @@ const [\n enqueueStateRestore,\n restoreStateIfNeeded,\n dispatchEvent,\n- runEventsInBatch,\n \/* eslint-disable no-unused-vars *\/\n flushPassiveEffects,\n IsThisRendererActing,\n@@ -354,6 +357,93 @@ function nativeTouchData(x, y) {\n \/\/ Start of inline: the below functions were inlined from\n \/\/ EventPropagator.js, as they deviated from ReactDOM's newer\n \/\/ implementations.\n+\n+\/**\n+ * Dispatch the event to the listener.\n+ * @param {SyntheticEvent} event SyntheticEvent to handle\n+ * @param {function} listener Application-level callback\n+ * @param {*} inst Internal component instance\n+ *\/\n+function executeDispatch(event, listener, inst) {\n+ const type = event.type || 'unknown-event';\n+ event.currentTarget = getNodeFromInstance(inst);\n+ invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);\n+ event.currentTarget = null;\n+}\n+\n+\/**\n+ * Standard\/simple iteration through an event's collected dispatches.\n+ *\/\n+function executeDispatchesInOrder(event) {\n+ const dispatchListeners = event._dispatchListeners;\n+ const dispatchInstances = event._dispatchInstances;\n+ if (Array.isArray(dispatchListeners)) {\n+ for (let i = 0; i < dispatchListeners.length; i++) {\n+ if (event.isPropagationStopped()) {\n+ break;\n+ }\n+ \/\/ Listeners and Instances are two parallel arrays that are always in sync.\n+ executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);\n+ }\n+ } else if (dispatchListeners) {\n+ executeDispatch(event, dispatchListeners, dispatchInstances);\n+ }\n+ event._dispatchListeners = null;\n+ event._dispatchInstances = null;\n+}\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+\n+const executeDispatchesAndReleaseTopLevel = function(e) {\n+ return executeDispatchesAndRelease(e);\n+};\n+\n+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 function isInteractive(tag) {\n return (\n tag === 'button' ||\ndiff --git a\/packages\/react-dom\/src\/test-utils\/ReactTestUtilsAct.js b\/packages\/react-dom\/src\/test-utils\/ReactTestUtilsAct.js\nindex c1bab1c869..e50595fae9 100644\n--- a\/packages\/react-dom\/src\/test-utils\/ReactTestUtilsAct.js\n+++ b\/packages\/react-dom\/src\/test-utils\/ReactTestUtilsAct.js\n@@ -26,7 +26,6 @@ const [\n enqueueStateRestore,\n restoreStateIfNeeded,\n dispatchEvent,\n- runEventsInBatch,\n \/* eslint-enable no-unused-vars *\/\n flushPassiveEffects,\n IsThisRendererActing,\n","body":"","files":[{"path":"packages\/legacy-events\/EventPluginRegistry.js","status":"M"},{"path":"packages\/legacy-events\/ReactGenericBatching.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOM.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMClientInjection.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ChangeEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DeprecatedDOMEventResponderSystem.js","status":"M"},{"previousPath":"packages\/legacy-events\/ReactControlledComponent.js","path":"packages\/react-dom\/src\/events\/ReactDOMControlledComponent.js","status":"R093"},{"path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ReactDOMUpdateBatching.js","status":"A"},{"path":"packages\/react-dom\/src\/test-utils\/ReactTestUtils.js","status":"M"},{"path":"packages\/react-dom\/src\/test-utils\/ReactTestUtilsAct.js","status":"M"}]}

dillon1000/react

Files changed