Refactor event object creation for the experimental event API (#15295)

* Refactor event object creation for the experimental event API

packages/events/EventTypes.js

@@ -7,36 +7,36 @@
  * @flow
  */
 
-import SyntheticEvent from 'events/SyntheticEvent';
 import type {AnyNativeEvent} from 'events/PluginModuleType';
 import type {ReactEventResponderEventType} from 'shared/ReactTypes';
 
 export type EventResponderContext = {
  event: AnyNativeEvent,
- eventTarget: EventTarget,
+ eventTarget: Element | Document,
  eventType: string,
  isPassive: () => boolean,
  isPassiveSupported: () => boolean,
- dispatchEvent: (
- name: string,
- listener: (e: SyntheticEvent) => void | null,
- pressTarget: EventTarget | null,
- discrete: boolean,
- extraProperties?: Object,
+ dispatchEvent: <E>(
+ eventObject: E,
+ {
+ capture?: boolean,
+ discrete?: boolean,
+ stopPropagation?: boolean,
+ },
  ) => void,
  isTargetWithinElement: (
- childTarget: EventTarget,
- parentTarget: EventTarget,
+ childTarget: Element | Document,
+ parentTarget: Element | Document,
  ) => boolean,
- isTargetOwned: EventTarget => boolean,
- isTargetWithinEventComponent: EventTarget => boolean,
+ isTargetOwned: (Element | Document) => boolean,
+ isTargetWithinEventComponent: (Element | Document) => boolean,
  isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,
  addRootEventTypes: (
  rootEventTypes: Array<ReactEventResponderEventType>,
  ) => void,
  removeRootEventTypes: (
  rootEventTypes: Array<ReactEventResponderEventType>,
  ) => void,
- requestOwnership: (target: EventTarget | null) => boolean,
- releaseOwnership: (target: EventTarget | null) => boolean,
+ requestOwnership: (target: Element | Document | null) => boolean,
+ releaseOwnership: (target: Element | Document | null) => boolean,
 };

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

@@ -18,15 +18,13 @@ import type {
  ReactEventResponderEventType,
 } from 'shared/ReactTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
-import SyntheticEvent from 'events/SyntheticEvent';
-import {runEventsInBatch} from 'events/EventBatching';
-import {interactiveUpdates} from 'events/ReactGenericBatching';
-import {executeDispatch} from 'events/EventPluginUtils';
+import {batchedUpdates, interactiveUpdates} from 'events/ReactGenericBatching';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
-
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 
 import {enableEventAPI} from 'shared/ReactFeatureFlags';
+import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
+import warning from 'shared/warning';
 
 let listenToResponderEventTypesImpl;
 
@@ -36,6 +34,8 @@ export function setListenToResponderEventTypes(
  listenToResponderEventTypesImpl = _listenToResponderEventTypesImpl;
 }
 
+const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
+
 const rootEventTypesToEventComponents: Map<
  DOMTopLevelEventType | string,
  Set<Fiber>,
@@ -45,12 +45,76 @@ const targetEventTypeCached: Map<
  Set<DOMTopLevelEventType>,
 > = new Map();
 const targetOwnership: Map<EventTarget, Fiber> = new Map();
+const eventsWithStopPropagation:
+ | WeakSet
+ | Set<$Shape<PartialEventObject>> = new PossiblyWeakSet();
+
+type PartialEventObject = {
+ listener: ($Shape<PartialEventObject>) => void,
+ target: Element | Document,
+ type: string,
+};
+type EventQueue = {
+ bubble: null | Array<$Shape<PartialEventObject>>,
+ capture: null | Array<$Shape<PartialEventObject>>,
+ discrete: boolean,
+ phase: EventQueuePhase,
+};
+type EventQueuePhase = 0 | 1;
+
+const DURING_EVENT_PHASE = 0;
+const AFTER_EVENT_PHASE = 1;
 
-type EventListener = (event: SyntheticEvent) => void;
+function createEventQueue(phase: EventQueuePhase): EventQueue {
+ return {
+ bubble: null,
+ capture: null,
+ discrete: false,
+ phase,
+ };
+}
+
+function processEvent(event: $Shape<PartialEventObject>): void {
+ const type = event.type;
+ const listener = event.listener;
+ invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
+}
 
-function copyEventProperties(eventData, syntheticEvent) {
- for (let propName in eventData) {
- syntheticEvent[propName] = eventData[propName];
+function processEvents(
+ bubble: null | Array<$Shape<PartialEventObject>>,
+ capture: null | Array<$Shape<PartialEventObject>>,
+): void {
+ let i, length;
+
+ if (capture !== null) {
+ for (i = capture.length; i-- > 0; ) {
+ const event = capture[i];
+ processEvent(capture[i]);
+ if (eventsWithStopPropagation.has(event)) {
+ return;
+ }
+ }
+ }
+ if (bubble !== null) {
+ for (i = 0, length = bubble.length; i < length; ++i) {
+ const event = bubble[i];
+ processEvent(event);
+ if (eventsWithStopPropagation.has(event)) {
+ return;
+ }
+ }
+ }
+}
+
+function processEventQueue(eventQueue: EventQueue): void {
+ const {bubble, capture, discrete} = eventQueue;
+
+ if (discrete) {
+ interactiveUpdates(() => {
+ processEvents(bubble, capture);
+ });
+ } else {
+ processEvents(bubble, capture);
  }
 }
 
@@ -70,6 +134,7 @@ function DOMEventResponderContext(
  this._discreteEvents = null;
  this._nonDiscreteEvents = null;
  this._isBatching = true;
+ this._eventQueue = createEventQueue(DURING_EVENT_PHASE);
 }
 
 DOMEventResponderContext.prototype.isPassive = function(): boolean {
@@ -81,49 +146,66 @@ DOMEventResponderContext.prototype.isPassiveSupported = function(): boolean {
 };
 
 DOMEventResponderContext.prototype.dispatchEvent = function(
- eventName: string,
- eventListener: EventListener,
- eventTarget: AnyNativeEvent,
- discrete: boolean,
- extraProperties?: Object,
+ possibleEventObject: Object,
+ {
+ capture,
+ discrete,
+ stopPropagation,
+ }: {
+ capture?: boolean,
+ discrete?: boolean,
+ stopPropagation?: boolean,
+ },
 ): void {
- const eventTargetFiber = getClosestInstanceFromNode(eventTarget);
- const syntheticEvent = SyntheticEvent.getPooled(
- null,
- eventTargetFiber,
- this.event,
- eventTarget,
- );
- if (extraProperties !== undefined) {
- copyEventProperties(extraProperties, syntheticEvent);
+ const eventQueue = this._eventQueue;
+ const {listener, target, type} = possibleEventObject;
+
+ if (listener == null || target == null || type == null) {
+ throw new Error(
+ 'context.dispatchEvent: "listener", "target" and "type" fields on event object are required.',
+ );
  }
- syntheticEvent.type = eventName;
- syntheticEvent._dispatchInstances = [eventTargetFiber];
- syntheticEvent._dispatchListeners = [eventListener];
-
- if (this._isBatching) {
- let events;
- if (discrete) {
- events = this._discreteEvents;
- if (events === null) {
- events = this._discreteEvents = [];
- }
- } else {
- events = this._nonDiscreteEvents;
- if (events === null) {
- events = this._nonDiscreteEvents = [];
- }
+ if (__DEV__) {
+ possibleEventObject.preventDefault = () => {
+ // Update this warning when we have a story around dealing with preventDefault
+ warning(
+ false,
+ 'preventDefault() is no longer available on event objects created from event responder modules.',
+ );
+ };
+ possibleEventObject.stopPropagation = () => {
+ // Update this warning when we have a story around dealing with stopPropgation
+ warning(
+ false,
+ 'stopPropagation() is no longer available on event objects created from event responder modules.',
+ );
+ };
+ }
+ const eventObject = ((possibleEventObject: any): $Shape<PartialEventObject>);
+ let events;
+
+ if (capture) {
+ events = eventQueue.capture;
+ if (events === null) {
+ events = eventQueue.capture = [];
  }
- events.push(syntheticEvent);
  } else {
- if (discrete) {
- interactiveUpdates(() => {
- executeDispatch(syntheticEvent, eventListener, eventTargetFiber);
- });
- } else {
- executeDispatch(syntheticEvent, eventListener, eventTargetFiber);
+ events = eventQueue.bubble;
+ if (events === null) {
+ events = eventQueue.bubble = [];
  }
  }
+ if (discrete) {
+ eventQueue.discrete = true;
+ }
+ events.push(eventObject);
+
+ if (stopPropagation) {
+ eventsWithStopPropagation.add(eventObject);
+ }
+ if (eventQueue.phase === AFTER_EVENT_PHASE) {
+ batchedUpdates(processEventQueue, eventQueue);
+ }
 };
 
 DOMEventResponderContext.prototype.isTargetWithinEventComponent = function(
@@ -318,17 +400,9 @@ export function runResponderEventsInBatch(
  );
  }
  }
- // Run batched events
- const discreteEvents = context._discreteEvents;
- if (discreteEvents !== null) {
- interactiveUpdates(() => {
- runEventsInBatch(discreteEvents);
- });
- }
- const nonDiscreteEvents = context._nonDiscreteEvents;
- if (nonDiscreteEvents !== null) {
- runEventsInBatch(nonDiscreteEvents);
- }
- context._isBatching = false;
+ processEventQueue(context._eventQueue);
+ // In order to capture and process async events from responder modules
+ // we create a new event queue.
+ context._eventQueue = createEventQueue(AFTER_EVENT_PHASE);
  }
 }

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

@@ -228,12 +228,12 @@ describe('DOMEventResponderSystem', () => {
  ['click'],
  (context, props) => {
  if (props.onMagicClick) {
- context.dispatchEvent(
- 'magicclick',
- props.onMagicClick,
- context.eventTarget,
-  false,
- );
+ const event = {
+ listener: props.onMagicClick,
+ target: context.eventTarget,
+ type: 'magicclick',
+ };
+ context.dispatchEvent(event, {discrete: true});
  }
  },
  );