[Flare] EventPriority enum

packages/events/ReactSyntheticEventType.js

@@ -9,14 +9,9 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
+import type {EventPriority} from 'shared/ReactTypes';
 import type {TopLevelType} from './TopLevelEventTypes';
 
-export opaque type EventPriority = 0 | 1 | 2;
-
-export const DiscreteEvent: EventPriority = 0;
-export const UserBlockingEvent: EventPriority = 1;
-export const ContinuousEvent: EventPriority = 2;
-
 export type DispatchConfig = {
   dependencies: Array<TopLevelType>,
   phasedRegistrationNames?: {

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -23,6 +23,7 @@ import type {
   ReactEventComponentInstance,
   ReactResponderContext,
   ReactResponderEvent,
+  EventPriority,
 } from 'shared/ReactTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 import {
@@ -41,6 +42,20 @@ import {
 } from 'react-reconciler/src/ReactFiberEvents';
 
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
+import {
+  ContinuousEvent,
+  UserBlockingEvent,
+  DiscreteEvent,
+} from 'shared/ReactTypes';
+import {enableUserBlockingEvents} from 'shared/ReactFeatureFlags';
+
+// Intentionally not named imports because Rollup would use dynamic dispatch for
+// CommonJS interop named imports.
+import * as Scheduler from 'scheduler';
+const {
+  unstable_UserBlockingPriority: UserBlockingPriority,
+  unstable_runWithPriority: runWithPriority,
+} = Scheduler;
 
 export let listenToResponderEventTypesImpl;
 
@@ -54,7 +69,7 @@ type EventObjectType = $Shape<PartialEventObject>;
 
 type EventQueue = {
   events: Array<EventObjectType>,
-  discrete: boolean,
+  eventPriority: EventPriority,
 };
 
 type PartialEventObject = {
@@ -107,7 +122,7 @@ const eventResponderContext: ReactResponderContext = {
   dispatchEvent(
     possibleEventObject: Object,
     listener: ($Shape<PartialEventObject>) => void,
-    discrete: boolean,
+    eventPriority: EventPriority,
   ): void {
     validateResponderContext();
     const {target, type, timeStamp} = possibleEventObject;
@@ -169,9 +184,7 @@ const eventResponderContext: ReactResponderContext = {
       PartialEventObject,
     >);
     const eventQueue = ((currentEventQueue: any): EventQueue);
-    if (discrete) {
-      eventQueue.discrete = true;
-    }
+    eventQueue.eventPriority = eventPriority;
     eventListeners.set(eventObject, listener);
     eventQueue.events.push(eventObject);
   },
@@ -585,7 +598,7 @@ function createResponderEvent(
 function createEventQueue(): EventQueue {
   return {
     events: [],
-    discrete: false,
+    eventPriority: ContinuousEvent,
   };
 }
 
@@ -604,18 +617,35 @@ function processEvents(events: Array<EventObjectType>): void {
 }
 
 export function processEventQueue(): void {
-  const {events, discrete} = ((currentEventQueue: any): EventQueue);
+  const {events, eventPriority} = ((currentEventQueue: any): EventQueue);
 
   if (events.length === 0) {
     return;
   }
-  if (discrete) {
-    flushDiscreteUpdatesIfNeeded(currentTimeStamp);
-    discreteUpdates(() => {
+
+  switch (eventPriority) {
+    case DiscreteEvent: {
+      flushDiscreteUpdatesIfNeeded(currentTimeStamp);
+      discreteUpdates(() => {
+        batchedEventUpdates(processEvents, events);
+      });
+      break;
+    }
+    case UserBlockingEvent: {
+      if (enableUserBlockingEvents) {
+        runWithPriority(
+          UserBlockingPriority,
+          batchedEventUpdates.bind(null, processEvents, events),
+        );
+      } else {
+        batchedEventUpdates(processEvents, events);
+      }
+      break;
+    }
+    case ContinuousEvent: {
       batchedEventUpdates(processEvents, events);
-    });
-  } else {
-    batchedEventUpdates(processEvents, events);
+      break;
+    }
   }
 }
 

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -52,7 +52,7 @@ import {
   UserBlockingEvent,
   ContinuousEvent,
   DiscreteEvent,
-} from 'events/ReactSyntheticEventType';
+} from 'shared/ReactTypes';
 
 const {
   unstable_UserBlockingPriority: UserBlockingPriority,

packages/react-dom/src/events/SimpleEventPlugin.js

@@ -7,25 +7,25 @@
  * @flow
  */
 
+import type {EventPriority} from 'shared/ReactTypes';
 import type {
   TopLevelType,
   DOMTopLevelEventType,
 } from 'events/TopLevelEventTypes';
 import type {
   DispatchConfig,
   ReactSyntheticEvent,
-  EventPriority,
 } from 'events/ReactSyntheticEventType';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {EventTypes, PluginModule} from 'events/PluginModuleType';
 
-import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
-import SyntheticEvent from 'events/SyntheticEvent';
 import {
   DiscreteEvent,
   UserBlockingEvent,
   ContinuousEvent,
-} from 'events/ReactSyntheticEventType';
+} from 'shared/ReactTypes';
+import {accumulateTwoPhaseDispatches} from 'events/EventPropagators';
+import SyntheticEvent from 'events/SyntheticEvent';
 
 import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
 import warningWithoutStack from 'shared/warningWithoutStack';

packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js

@@ -13,6 +13,10 @@ let React;
 let ReactFeatureFlags;
 let ReactDOM;
 
+// FIXME: What should the public API be for setting an event's priority? Right
+// now it's an enum but is that what we want? Hard coding this for now.
+const DiscreteEvent = 0;
+
 function createReactEventComponent({
   targetEventTypes,
   rootEventTypes,
@@ -403,7 +407,11 @@ describe('DOMEventResponderSystem', () => {
             phase: 'bubble',
             timeStamp: context.getTimeStamp(),
           };
-          context.dispatchEvent(syntheticEvent, props.onMagicClick, true);
+          context.dispatchEvent(
+            syntheticEvent,
+            props.onMagicClick,
+            DiscreteEvent,
+          );
         }
       },
       onEventCapture: (event, context, props) => {
@@ -414,7 +422,11 @@ describe('DOMEventResponderSystem', () => {
             phase: 'capture',
             timeStamp: context.getTimeStamp(),
           };
-          context.dispatchEvent(syntheticEvent, props.onMagicClick, true);
+          context.dispatchEvent(
+            syntheticEvent,
+            props.onMagicClick,
+            DiscreteEvent,
+          );
         }
       },
     });
@@ -456,7 +468,7 @@ describe('DOMEventResponderSystem', () => {
         phase,
         timeStamp: context.getTimeStamp(),
       };
-      context.dispatchEvent(pressEvent, props.onPress, true);
+      context.dispatchEvent(pressEvent, props.onPress, DiscreteEvent);
 
       context.setTimeout(() => {
         if (props.onLongPress) {
@@ -466,7 +478,11 @@ describe('DOMEventResponderSystem', () => {
             phase,
             timeStamp: context.getTimeStamp(),
           };
-          context.dispatchEvent(longPressEvent, props.onLongPress, true);
+          context.dispatchEvent(
+            longPressEvent,
+            props.onLongPress,
+            DiscreteEvent,
+          );
         }
 
         if (props.onLongPressChange) {
@@ -479,7 +495,7 @@ describe('DOMEventResponderSystem', () => {
           context.dispatchEvent(
             longPressChangeEvent,
             props.onLongPressChange,
-            true,
+            DiscreteEvent,
           );
         }
       }, 500);
@@ -838,7 +854,7 @@ describe('DOMEventResponderSystem', () => {
           type: 'click',
           timeStamp: context.getTimeStamp(),
         };
-        context.dispatchEvent(syntheticEvent, props.onClick, true);
+        context.dispatchEvent(syntheticEvent, props.onClick, DiscreteEvent);
       },
     });
 

packages/react-events/src/Drag.js

@@ -10,9 +10,11 @@
 import type {
   ReactResponderEvent,
   ReactResponderContext,
+  EventPriority,
 } from 'shared/ReactTypes';
 
 import React from 'react';
+import {DiscreteEvent, UserBlockingEvent} from 'shared/ReactTypes';
 
 const targetEventTypes = ['pointerdown'];
 const rootEventTypes = [
@@ -74,12 +76,12 @@ function dispatchDragEvent(
   name: DragEventType,
   listener: DragEvent => void,
   state: DragState,
-  discrete: boolean,
+  eventPriority: EventPriority,
   eventData?: EventData,
 ): void {
   const target = ((state.dragTarget: any): Element | Document);
   const syntheticEvent = createDragEvent(context, name, target, eventData);
-  context.dispatchEvent(syntheticEvent, listener, discrete);
+  context.dispatchEvent(syntheticEvent, listener, eventPriority);
 }
 
 const DragResponder = {
@@ -130,7 +132,7 @@ const DragResponder = {
               'dragstart',
               props.onDragStart,
               state,
-              true,
+              DiscreteEvent,
             );
           }
 
@@ -184,7 +186,7 @@ const DragResponder = {
                   'dragchange',
                   dragChangeEventListener,
                   state,
-                  true,
+                  UserBlockingEvent,
                 );
               }
             } else {
@@ -203,7 +205,7 @@ const DragResponder = {
                 'dragmove',
                 props.onDragMove,
                 state,
-                false,
+                UserBlockingEvent,
                 eventData,
               );
             }
@@ -222,7 +224,13 @@ const DragResponder = {
             context.releaseOwnership();
           }
           if (props.onDragEnd) {
-            dispatchDragEvent(context, 'dragend', props.onDragEnd, state, true);
+            dispatchDragEvent(
+              context,
+              'dragend',
+              props.onDragEnd,
+              state,
+              DiscreteEvent,
+            );
           }
           if (props.onDragChange) {
             const dragChangeEventListener = () => {
@@ -233,7 +241,7 @@ const DragResponder = {
               'dragchange',
               dragChangeEventListener,
               state,
-              true,
+              UserBlockingEvent,
             );
           }
           state.isDragging = false;

packages/react-events/src/Focus.js

@@ -13,6 +13,7 @@ import type {
 } from 'shared/ReactTypes';
 
 import React from 'react';
+import {DiscreteEvent} from 'shared/ReactTypes';
 
 type FocusProps = {
   disabled: boolean,
@@ -97,7 +98,7 @@ function dispatchFocusInEvents(
       target,
       pointerType,
     );
-    context.dispatchEvent(syntheticEvent, props.onFocus, true);
+    context.dispatchEvent(syntheticEvent, props.onFocus, DiscreteEvent);
   }
   if (props.onFocusChange) {
     const listener = () => {
@@ -109,7 +110,7 @@ function dispatchFocusInEvents(
       target,
       pointerType,
     );
-    context.dispatchEvent(syntheticEvent, listener, true);
+    context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
   }
   if (props.onFocusVisibleChange && state.isLocalFocusVisible) {
     const listener = () => {
@@ -121,7 +122,7 @@ function dispatchFocusInEvents(
       target,
       pointerType,
     );
-    context.dispatchEvent(syntheticEvent, listener, true);
+    context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
   }
 }
 
@@ -139,7 +140,7 @@ function dispatchFocusOutEvents(
       target,
       pointerType,
     );
-    context.dispatchEvent(syntheticEvent, props.onBlur, true);
+    context.dispatchEvent(syntheticEvent, props.onBlur, DiscreteEvent);
   }
   if (props.onFocusChange) {
     const listener = () => {
@@ -151,7 +152,7 @@ function dispatchFocusOutEvents(
       target,
       pointerType,
     );
-    context.dispatchEvent(syntheticEvent, listener, true);
+    context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
   }
   dispatchFocusVisibleOutEvent(context, props, state);
 }
@@ -173,7 +174,7 @@ function dispatchFocusVisibleOutEvent(
       target,
       pointerType,
     );
-    context.dispatchEvent(syntheticEvent, listener, true);
+    context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
     state.isLocalFocusVisible = false;
   }
 }