Experimental event API: refactor responder modules for lifecycle inclusion

packages/events/EventTypes.js

@@ -10,12 +10,15 @@
 import type {AnyNativeEvent} from 'events/PluginModuleType';
 import type {ReactEventResponderEventType} from 'shared/ReactTypes';
 
-export type EventResponderContext = {
-  event: AnyNativeEvent,
+export type ResponderEvent = {
+  nativeEvent: AnyNativeEvent,
   eventTarget: Element | Document,
   eventType: string,
   isPassive: () => boolean,
   isPassiveSupported: () => boolean,
+};
+
+export type ResponderContext = {
   dispatchEvent: <E>(
     eventObject: E,
     {
@@ -28,7 +31,6 @@ export type EventResponderContext = {
     childTarget: Element | Document,
     parentTarget: Element | Document,
   ) => boolean,
-  isTargetOwned: (Element | Document) => boolean,
   isTargetWithinEventComponent: (Element | Document) => boolean,
   isPositionWithinTouchHitTarget: (x: number, y: number) => boolean,
   addRootEventTypes: (
@@ -37,7 +39,8 @@ export type EventResponderContext = {
   removeRootEventTypes: (
     rootEventTypes: Array<ReactEventResponderEventType>,
   ) => void,
-  requestOwnership: (target: Element | Document | null) => boolean,
-  releaseOwnership: (target: Element | Document | null) => boolean,
+  hasOwnership: () => boolean,
+  requestOwnership: () => boolean,
+  releaseOwnership: () => boolean,
   withAsyncDispatching: (func: () => void) => void,
 };

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

@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @flow
+ */
+
+import type {AnyNativeEvent} from 'events/PluginModuleType';
+import warning from 'shared/warning';
+import {batchedUpdates} from 'events/ReactGenericBatching';
+import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
+import {
+  eventsWithStopPropagation,
+  rootEventTypesToEventComponents,
+  processEventQueue,
+  listenToResponderEventTypesImpl,
+  type PartialEventObject,
+} from './DOMEventResponderSystem';
+import type {ReactEventResponderEventType} from 'shared/ReactTypes';
+
+let currentOwner = null;
+
+export type EventQueue = {
+  bubble: null | Array<$Shape<PartialEventObject>>,
+  capture: null | Array<$Shape<PartialEventObject>>,
+  discrete: boolean,
+};
+
+export function createEventQueue(): EventQueue {
+  return {
+    bubble: null,
+    capture: null,
+    discrete: false,
+  };
+}
+
+export function DOMEventResponderContext() {
+  this._fiber = null;
+  this._responder = null;
+  this._discreteEvents = null;
+  this._nonDiscreteEvents = null;
+  this._isBatching = true;
+  this._eventQueue = null;
+  this._event = null;
+}
+
+DOMEventResponderContext.prototype.dispatchEvent = function(
+  possibleEventObject: Object,
+  {
+    capture,
+    discrete,
+    stopPropagation,
+  }: {
+    capture?: boolean,
+    discrete?: boolean,
+    stopPropagation?: boolean,
+  },
+): void {
+  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.',
+    );
+  }
+  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 = [];
+    }
+  } else {
+    events = eventQueue.bubble;
+    if (events === null) {
+      events = eventQueue.bubble = [];
+    }
+  }
+  if (discrete) {
+    eventQueue.discrete = true;
+  }
+  events.push(eventObject);
+
+  if (stopPropagation) {
+    eventsWithStopPropagation.add(eventObject);
+  }
+};
+
+DOMEventResponderContext.prototype.isTargetWithinEventComponent = function(
+  target: AnyNativeEvent,
+): boolean {
+  const eventFiber = this._fiber;
+
+  if (target != null) {
+    let fiber = getClosestInstanceFromNode(target);
+    while (fiber !== null) {
+      if (fiber === eventFiber || fiber === eventFiber.alternate) {
+        return true;
+      }
+      fiber = fiber.return;
+    }
+  }
+  return false;
+};
+
+DOMEventResponderContext.prototype.isTargetWithinElement = function(
+  childTarget: EventTarget,
+  parentTarget: EventTarget,
+): boolean {
+  const childFiber = getClosestInstanceFromNode(childTarget);
+  const parentFiber = getClosestInstanceFromNode(parentTarget);
+
+  let currentFiber = childFiber;
+  while (currentFiber !== null) {
+    if (currentFiber === parentFiber) {
+      return true;
+    }
+    currentFiber = currentFiber.return;
+  }
+  return false;
+};
+
+DOMEventResponderContext.prototype.addRootEventTypes = function(
+  rootEventTypes: Array<ReactEventResponderEventType>,
+) {
+  const element = this._event.eventTarget.ownerDocument;
+  ((listenToResponderEventTypesImpl: any): Function)(rootEventTypes, element);
+  const eventComponent = this._fiber;
+  for (let i = 0; i < rootEventTypes.length; i++) {
+    const rootEventType = rootEventTypes[i];
+    const topLevelEventType =
+      typeof rootEventType === 'string' ? rootEventType : rootEventType.name;
+    let rootEventComponents = rootEventTypesToEventComponents.get(
+      topLevelEventType,
+    );
+    if (rootEventComponents === undefined) {
+      rootEventComponents = new Set();
+      rootEventTypesToEventComponents.set(
+        topLevelEventType,
+        rootEventComponents,
+      );
+    }
+    rootEventComponents.add(eventComponent);
+  }
+};
+
+DOMEventResponderContext.prototype.removeRootEventTypes = function(
+  rootEventTypes: Array<ReactEventResponderEventType>,
+): void {
+  const eventComponent = this._fiber;
+  for (let i = 0; i < rootEventTypes.length; i++) {
+    const rootEventType = rootEventTypes[i];
+    const topLevelEventType =
+      typeof rootEventType === 'string' ? rootEventType : rootEventType.name;
+    let rootEventComponents = rootEventTypesToEventComponents.get(
+      topLevelEventType,
+    );
+    if (rootEventComponents !== undefined) {
+      rootEventComponents.delete(eventComponent);
+    }
+  }
+};
+
+DOMEventResponderContext.prototype.isPositionWithinTouchHitTarget = function() {
+  // TODO
+};
+
+DOMEventResponderContext.prototype.hasOwnership = function(): boolean {
+  return currentOwner === this._fiber;
+};
+
+DOMEventResponderContext.prototype.requestOwnership = function(): boolean {
+  if (currentOwner !== null) {
+    return false;
+  }
+  currentOwner = this._fiber;
+  return true;
+};
+
+DOMEventResponderContext.prototype.releaseOwnership = function(
+  targetElement: Element | Node,
+): boolean {
+  if (currentOwner !== this._fiber) {
+    return false;
+  }
+  currentOwner = null;
+  return false;
+};
+
+DOMEventResponderContext.prototype.withAsyncDispatching = function(
+  func: () => void,
+) {
+  const previousEventQueue = this._eventQueue;
+  this._eventQueue = createEventQueue();
+  try {
+    func();
+    batchedUpdates(processEventQueue, this._eventQueue);
+  } finally {
+    this._eventQueue = previousEventQueue;
+  }
+};

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

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @flow
+ */
+
+import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
+import type {AnyNativeEvent} from 'events/PluginModuleType';
+import {
+  type EventSystemFlags,
+  IS_PASSIVE,
+  PASSIVE_NOT_SUPPORTED,
+} from 'events/EventSystemFlags';
+
+export function DOMEventResponderEvent(
+  topLevelType: DOMTopLevelEventType,
+  nativeEvent: AnyNativeEvent,
+  nativeEventTarget: EventTarget,
+  eventSystemFlags: EventSystemFlags,
+) {
+  this.nativeEvent = nativeEvent;
+  this.eventTarget = nativeEventTarget;
+  this.eventType = topLevelType;
+  this._flags = eventSystemFlags;
+}
+
+DOMEventResponderEvent.prototype.isPassive = function(): boolean {
+  return (this._flags & IS_PASSIVE) !== 0;
+};
+
+DOMEventResponderEvent.prototype.isPassiveSupported = function(): boolean {
+  return (this._flags & PASSIVE_NOT_SUPPORTED) === 0;
+};