Refactor EventComponent logic + add onOwnershipChange callback (#15354)

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -11,6 +11,7 @@ import * as Scheduler from 'scheduler';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
+import type {ReactEventComponentInstance} from 'shared/ReactTypes';
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
@@ -439,17 +440,20 @@ export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
 
-export function handleEventComponent(
-  eventResponder: ReactEventResponder,
-  rootContainerInstance: Container,
+export function mountEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
+) {
+  throw new Error('Not yet implemented.');
+}
+
+export function updateEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
 ) {
   throw new Error('Not yet implemented.');
 }
 
 export function unmountEventComponent(
-  eventResponder: ReactEventResponder,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
+  eventComponentInstance: ReactEventComponentInstance,
 ): void {
   throw new Error('Not yet implemented.');
 }

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -44,8 +44,11 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
-import type {ReactEventResponder} from 'shared/ReactTypes';
-import {unmountEventResponder} from '../events/DOMEventResponderSystem';
+import type {ReactEventComponentInstance} from 'shared/ReactTypes';
+import {
+  mountEventResponder,
+  unmountEventResponder,
+} from '../events/DOMEventResponderSystem';
 import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 
@@ -888,27 +891,34 @@ export function didNotFindHydratableSuspenseInstance(
   }
 }
 
-export function handleEventComponent(
-  eventResponder: ReactEventResponder,
-  rootContainerInstance: Container,
+export function mountEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
 ): void {
   if (enableEventAPI) {
+    mountEventResponder(eventComponentInstance);
+    updateEventComponent(eventComponentInstance);
+  }
+}
+
+export function updateEventComponent(
+  eventComponentInstance: ReactEventComponentInstance,
+): void {
+  if (enableEventAPI) {
+    const rootContainerInstance = ((eventComponentInstance.rootInstance: any): Container);
     const rootElement = rootContainerInstance.ownerDocument;
     listenToEventResponderEventTypes(
-      eventResponder.targetEventTypes,
+      eventComponentInstance.responder.targetEventTypes,
       rootElement,
     );
   }
 }
 
 export function unmountEventComponent(
-  eventResponder: ReactEventResponder,
-  rootContainerInstance: Container,
-  internalInstanceHandle: Object,
+  eventComponentInstance: ReactEventComponentInstance,
 ): void {
   if (enableEventAPI) {
     // TODO stop listening to targetEventTypes
-    unmountEventResponder(eventResponder, internalInstanceHandle);
+    unmountEventResponder(eventComponentInstance);
   }
 }
 

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

@@ -22,8 +22,8 @@ import {
   EventTarget as EventTargetWorkTag,
 } from 'shared/ReactWorkTags';
 import type {
-  ReactEventResponder,
   ReactEventResponderEventType,
+  ReactEventComponentInstance,
 } from 'shared/ReactTypes';
 import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 import {batchedUpdates, interactiveUpdates} from 'events/ReactGenericBatching';
@@ -55,7 +55,7 @@ type PartialEventObject = {
 };
 
 let currentOwner = null;
-let currentFiber: Fiber;
+let currentInstance: ReactEventComponentInstance;
 let currentEventQueue: EventQueue;
 
 const eventResponderContext: ResponderContext = {
@@ -140,12 +140,10 @@ const eventResponderContext: ResponderContext = {
     return false;
   },
   isTargetWithinEventComponent(target: Element | Document): boolean {
-    const eventFiber = currentFiber;
-
     if (target != null) {
       let fiber = getClosestInstanceFromNode(target);
       while (fiber !== null) {
-        if (fiber === eventFiber || fiber === eventFiber.alternate) {
+        if (fiber.stateNode === currentInstance) {
           return true;
         }
         fiber = fiber.return;
@@ -174,78 +172,78 @@ const eventResponderContext: ResponderContext = {
     rootEventTypes: Array<ReactEventResponderEventType>,
   ): void {
     listenToResponderEventTypesImpl(rootEventTypes, doc);
-    const eventComponent = currentFiber;
     for (let i = 0; i < rootEventTypes.length; i++) {
       const rootEventType = rootEventTypes[i];
       const topLevelEventType =
         typeof rootEventType === 'string' ? rootEventType : rootEventType.name;
-      let rootEventComponents = rootEventTypesToEventComponents.get(
+      let rootEventComponentInstances = rootEventTypesToEventComponentInstances.get(
         topLevelEventType,
       );
-      if (rootEventComponents === undefined) {
-        rootEventComponents = new Set();
-        rootEventTypesToEventComponents.set(
+      if (rootEventComponentInstances === undefined) {
+        rootEventComponentInstances = new Set();
+        rootEventTypesToEventComponentInstances.set(
           topLevelEventType,
-          rootEventComponents,
+          rootEventComponentInstances,
         );
       }
-      rootEventComponents.add(eventComponent);
+      rootEventComponentInstances.add(currentInstance);
     }
   },
   removeRootEventTypes(
     rootEventTypes: Array<ReactEventResponderEventType>,
   ): void {
-    const eventComponent = currentFiber;
     for (let i = 0; i < rootEventTypes.length; i++) {
       const rootEventType = rootEventTypes[i];
       const topLevelEventType =
         typeof rootEventType === 'string' ? rootEventType : rootEventType.name;
-      let rootEventComponents = rootEventTypesToEventComponents.get(
+      let rootEventComponents = rootEventTypesToEventComponentInstances.get(
         topLevelEventType,
       );
       if (rootEventComponents !== undefined) {
-        rootEventComponents.delete(eventComponent);
+        rootEventComponents.delete(currentInstance);
       }
     }
   },
   hasOwnership(): boolean {
-    return currentOwner === currentFiber;
+    return currentOwner === currentInstance;
   },
   requestOwnership(): boolean {
     if (currentOwner !== null) {
       return false;
     }
-    currentOwner = currentFiber;
+    currentOwner = currentInstance;
+    triggerOwnershipListeners();
     return true;
   },
   releaseOwnership(): boolean {
-    if (currentOwner !== currentFiber) {
+    if (currentOwner !== currentInstance) {
       return false;
     }
     currentOwner = null;
+    triggerOwnershipListeners();
     return false;
   },
   setTimeout(func: () => void, delay): TimeoutID {
-    const contextFiber = currentFiber;
+    const contextInstance = currentInstance;
     return setTimeout(() => {
       const previousEventQueue = currentEventQueue;
-      const previousFiber = currentFiber;
+      const previousInstance = currentInstance;
       currentEventQueue = createEventQueue();
-      currentFiber = contextFiber;
+      currentInstance = contextInstance;
       try {
         func();
         batchedUpdates(processEventQueue, currentEventQueue);
       } finally {
-        currentFiber = previousFiber;
+        currentInstance = previousInstance;
         currentEventQueue = previousEventQueue;
       }
     }, delay);
   },
 };
 
-const rootEventTypesToEventComponents: Map<
+const rootEventTypesToEventComponentInstances: Map<
   DOMTopLevelEventType | string,
-  Set<Fiber>,
+  Set<ReactEventComponentInstance>,
 > = new Map();
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 const eventsWithStopPropagation:
@@ -255,6 +253,7 @@ const targetEventTypeCached: Map<
   Array<ReactEventResponderEventType>,
   Set<DOMTopLevelEventType>,
 > = new Map();
+const ownershipChangeListeners: Set<ReactEventComponentInstance> = new Set();
 
 function createResponderEvent(
   topLevelType: string,
@@ -343,25 +342,24 @@ function getTargetEventTypes(
 
 function handleTopLevelType(
   topLevelType: DOMTopLevelEventType,
-  fiber: Fiber,
   responderEvent: ResponderEvent,
+  eventComponentInstance: ReactEventComponentInstance,
   isRootLevelEvent: boolean,
 ): void {
-  const responder: ReactEventResponder = fiber.type.responder;
+  let {props, responder, state} = eventComponentInstance;
   if (!isRootLevelEvent) {
     // Validate the target event type exists on the responder
     const targetEventTypes = getTargetEventTypes(responder.targetEventTypes);
     if (!targetEventTypes.has(topLevelType)) {
       return;
     }
   }
-  let {props, state} = fiber.stateNode;
-  const previousFiber = currentFiber;
-  currentFiber = fiber;
+  const previousInstance = currentInstance;
+  currentInstance = eventComponentInstance;
   try {
     responder.onEvent(responderEvent, eventResponderContext, props, state);
   } finally {
-    currentFiber = previousFiber;
+    currentInstance = previousInstance;
   }
 }
 
@@ -384,23 +382,29 @@ export function runResponderEventsInBatch(
     // Traverse up the fiber tree till we find event component fibers.
     while (node !== null) {
       if (node.tag === EventComponent) {
-        handleTopLevelType(topLevelType, node, responderEvent, false);
+        const eventComponentInstance = node.stateNode;
+        handleTopLevelType(
+          topLevelType,
+          responderEvent,
+          eventComponentInstance,
+          false,
+        );
       }
       node = node.return;
     }
     // Handle root level events
-    const rootEventComponents = rootEventTypesToEventComponents.get(
+    const rootEventInstances = rootEventTypesToEventComponentInstances.get(
       topLevelType,
     );
-    if (rootEventComponents !== undefined) {
-      const rootEventComponentFibers = Array.from(rootEventComponents);
+    if (rootEventInstances !== undefined) {
+      const rootEventComponentInstances = Array.from(rootEventInstances);
 
-      for (let i = 0; i < rootEventComponentFibers.length; i++) {
-        const rootEventComponentFiber = rootEventComponentFibers[i];
+      for (let i = 0; i < rootEventComponentInstances.length; i++) {
+        const rootEventComponentInstance = rootEventComponentInstances[i];
         handleTopLevelType(
           topLevelType,
-          rootEventComponentFiber,
           responderEvent,
+          rootEventComponentInstance,
           true,
         );
       }
@@ -409,26 +413,53 @@ export function runResponderEventsInBatch(
   }
 }
 
+function triggerOwnershipListeners(): void {
+  const listeningInstances = Array.from(ownershipChangeListeners);
+  const previousInstance = currentInstance;
+  for (let i = 0; i < listeningInstances.length; i++) {
+    const instance = listeningInstances[i];
+    const {props, responder, state} = instance;
+    currentInstance = instance;
+    try {
+      responder.onOwnershipChange(eventResponderContext, props, state);
+    } finally {
+      currentInstance = previousInstance;
+    }
+  }
+}
+
+export function mountEventResponder(
+  eventComponentInstance: ReactEventComponentInstance,
+) {
+  const responder = eventComponentInstance.responder;
+  if (responder.onOwnershipChange !== undefined) {
+    ownershipChangeListeners.add(eventComponentInstance);
+  }
+}
+
 export function unmountEventResponder(
-  responder: ReactEventResponder,
-  fiber: Fiber,
+  eventComponentInstance: ReactEventComponentInstance,
 ): void {
+  const responder = eventComponentInstance.responder;
   const onUnmount = responder.onUnmount;
   if (onUnmount !== undefined) {
-    let {props, state} = fiber.stateNode;
+    let {props, state} = eventComponentInstance;
     const previousEventQueue = currentEventQueue;
-    const previousFiber = currentFiber;
+    const previousInstance = currentInstance;
     currentEventQueue = createEventQueue();
-    currentFiber = fiber;
+    currentInstance = eventComponentInstance;
     try {
       onUnmount(eventResponderContext, props, state);
     } finally {
       currentEventQueue = previousEventQueue;
-      currentFiber = previousFiber;
+      currentInstance = previousInstance;
     }
   }
-  if (currentOwner === fiber) {
-    // TODO fire owner changed callback
+  if (currentOwner === eventComponentInstance) {
     currentOwner = null;
+    triggerOwnershipListeners();
+  }
+  if (responder.onOwnershipChange !== undefined) {
+    ownershipChangeListeners.delete(eventComponentInstance);
   }
 }