Experimental event API: Support EventComponent onUnmount responder callback

packages/react-art/src/ReactARTHostConfig.js

@@ -442,9 +442,16 @@ export function unhideTextInstance(textInstance, text): void {
 export function handleEventComponent(
   eventResponder: ReactEventResponder,
   rootContainerInstance: Container,
-  internalInstanceHandle: Object,
 ) {
-  // TODO: add handleEventComponent implementation
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): void {
+  throw new Error('Not yet implemented.');
 }
 
 export function handleEventTarget(
@@ -453,5 +460,5 @@ export function handleEventTarget(
   parentInstance: Container,
   internalInstanceHandle: Object,
 ) {
-  // TODO: add handleEventTarget implementation
+  throw new Error('Not yet implemented.');
 }

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

@@ -45,6 +45,7 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
 import type {ReactEventResponder} from 'shared/ReactTypes';
+import {unmountEventResponder} from '../events/DOMEventResponderSystem';
 import {REACT_EVENT_TARGET_TOUCH_HIT} from 'shared/ReactSymbols';
 
 export type Type = string;
@@ -888,7 +889,6 @@ export function didNotFindHydratableSuspenseInstance(
 export function handleEventComponent(
   eventResponder: ReactEventResponder,
   rootContainerInstance: Container,
-  internalInstanceHandle: Object,
 ): void {
   if (enableEventAPI) {
     const rootElement = rootContainerInstance.ownerDocument;
@@ -899,6 +899,17 @@ export function handleEventComponent(
   }
 }
 
+export function unmountEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): void {
+  if (enableEventAPI) {
+    // TODO stop listening to targetEventTypes
+    unmountEventResponder(eventResponder, internalInstanceHandle);
+  }
+}
+
 export function handleEventTarget(
   type: Symbol | number,
   props: Props,

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

@@ -337,10 +337,17 @@ function handleTopLevelType(
   if (state === null && responder.createInitialState !== undefined) {
     state = fiber.stateNode.state = responder.createInitialState(props);
   }
+  const previousFiber = currentFiber;
+  const previousResponder = currentResponder;
   currentFiber = fiber;
   currentResponder = responder;
 
-  responder.onEvent(responderEvent, eventResponderContext, props, state);
+  try {
+    responder.onEvent(responderEvent, eventResponderContext, props, state);
+  } finally {
+    currentFiber = previousFiber;
+    currentResponder = previousResponder;
+  }
 }
 
 export function runResponderEventsInBatch(
@@ -386,3 +393,30 @@ export function runResponderEventsInBatch(
     processEventQueue();
   }
 }
+
+export function unmountEventResponder(
+  responder: ReactEventResponder,
+  fiber: Fiber,
+): void {
+  const onUnmount = responder.onUnmount;
+  if (onUnmount !== undefined) {
+    let {props, state} = fiber.stateNode;
+    const previousEventQueue = currentEventQueue;
+    const previousFiber = currentFiber;
+    const previousResponder = currentResponder;
+    currentEventQueue = createEventQueue();
+    currentFiber = fiber;
+    currentResponder = responder;
+    try {
+      onUnmount(eventResponderContext, props, state);
+    } finally {
+      currentEventQueue = previousEventQueue;
+      currentFiber = previousFiber;
+      currentResponder = previousResponder;
+    }
+  }
+  if (currentOwner === fiber) {
+    // TODO fire owner changed callback
+    currentOwner = null;
+  }
+}

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

@@ -13,10 +13,11 @@ let React;
 let ReactFeatureFlags;
 let ReactDOM;
 
-function createReactEventComponent(targetEventTypes, onEvent) {
+function createReactEventComponent(targetEventTypes, onEvent, onUnmount) {
   const testEventResponder = {
     targetEventTypes,
     onEvent,
+    onUnmount,
   };
 
   return {
@@ -316,4 +317,26 @@ describe('DOMEventResponderSystem', () => {
 
     expect(eventLog).toEqual(['press', 'longpress', 'longpresschange']);
   });
+
+  it('the event responder onUnmount() function should fire', () => {
+    let onUnmountFired = 0;
+
+    const EventComponent = createReactEventComponent(
+      [],
+      (event, context, props) => {},
+      () => {
+        onUnmountFired++;
+      },
+    );
+
+    const Test = () => (
+      <EventComponent>
+        <button />
+      </EventComponent>
+    );
+
+    ReactDOM.render(<Test />, container);
+    ReactDOM.render(null, container);
+    expect(onUnmountFired).toEqual(1);
+  });
 });

packages/react-events/src/Press.js

@@ -209,6 +209,7 @@ function unmountResponder(
 ): void {
   if (state.isPressed) {
     state.isPressed = false;
+    context.removeRootEventTypes(rootEventTypes);
     dispatchPressEndEvents(context, props, state);
     if (state.longPressTimeout !== null) {
       clearTimeout(state.longPressTimeout);
@@ -428,7 +429,6 @@ const PressResponder = {
       }
     }
   },
-  // TODO This method doesn't work as of yet
   onUnmount(context: ResponderContext, props: PressProps, state: PressState) {
     unmountResponder(context, props, state);
   },

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -437,9 +437,16 @@ export function replaceContainerChildren(
 export function handleEventComponent(
   eventResponder: ReactEventResponder,
   rootContainerInstance: Container,
-  internalInstanceHandle: Object,
 ) {
-  // TODO: add handleEventComponent implementation
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): void {
+  throw new Error('Not yet implemented.');
 }
 
 export function handleEventTarget(
@@ -448,5 +455,5 @@ export function handleEventTarget(
   parentInstance: Container,
   internalInstanceHandle: Object,
 ) {
-  // TODO: add handleEventTarget implementation
+  throw new Error('Not yet implemented.');
 }

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -496,9 +496,16 @@ export function unhideTextInstance(
 export function handleEventComponent(
   eventResponder: ReactEventResponder,
   rootContainerInstance: Container,
-  internalInstanceHandle: Object,
 ) {
-  // TODO: add handleEventComponent implementation
+  throw new Error('Not yet implemented.');
+}
+
+export function unmountEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): void {
+  throw new Error('Not yet implemented.');
 }
 
 export function handleEventTarget(
@@ -507,5 +514,5 @@ export function handleEventTarget(
   parentInstance: Container,
   internalInstanceHandle: Object,
 ) {
-  // TODO: add handleEventTarget implementation
+  throw new Error('Not yet implemented.');
 }

packages/react-noop-renderer/src/createReactNoop.js

@@ -427,7 +427,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     isPrimaryRenderer: true,
     supportsHydration: false,
 
-    handleEventComponent() {
+    handleEventComponent(): void {
+      // NO-OP
+    },
+
+    unmountEventComponent(): void {
       // NO-OP
     },
 

packages/react-reconciler/src/ReactFiber.js

@@ -626,6 +626,7 @@ export function createFiberFromEventComponent(
   fiber.stateNode = {
     context: null,
     props: pendingProps,
+    rootInstance: null,
     state: null,
   };
   fiber.expirationTime = expirationTime;

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -28,6 +28,7 @@ import {
   enableSchedulerTracing,
   enableProfilerTimer,
   enableSuspenseServerRenderer,
+  enableEventAPI,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -43,6 +44,7 @@ import {
   IncompleteClassComponent,
   MemoComponent,
   SimpleMemoComponent,
+  EventComponent,
 } from 'shared/ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -90,6 +92,7 @@ import {
   hideTextInstance,
   unhideInstance,
   unhideTextInstance,
+  unmountEventComponent,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -740,6 +743,14 @@ function commitUnmount(current: Fiber): void {
       }
       return;
     }
+    case EventComponent: {
+      if (enableEventAPI) {
+        const rootContainerInstance = current.stateNode.rootInstance;
+        const responder = current.type.responder;
+        unmountEventComponent(responder, rootContainerInstance, current);
+        current.stateNode = null;
+      }
+    }
   }
 }
 

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -776,7 +776,9 @@ function completeWork(
         const responder = workInProgress.type.responder;
         // Update the props on the event component state node
         workInProgress.stateNode.props = newProps;
-        handleEventComponent(responder, rootContainerInstance, workInProgress);
+        // Update the root container, so we can properly unmount events at some point
+        workInProgress.stateNode.rootInstance = rootContainerInstance;
+        handleEventComponent(responder, rootContainerInstance);
       }
       break;
     }

packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js

@@ -84,6 +84,7 @@ export const hideInstance = $$$hostConfig.hideInstance;
 export const hideTextInstance = $$$hostConfig.hideTextInstance;
 export const unhideInstance = $$$hostConfig.unhideInstance;
 export const unhideTextInstance = $$$hostConfig.unhideTextInstance;
+export const unmountEventComponent = $$$hostConfig.unmountEventComponent;
 
 // -------------------
 //     Persistence

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -328,11 +328,18 @@ export function unhideTextInstance(
 export function handleEventComponent(
   eventResponder: ReactEventResponder,
   rootContainerInstance: Container,
-  internalInstanceHandle: Object,
 ) {
   // TODO: add handleEventComponent implementation
 }
 
+export function unmountEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+): void {
+  // TODO: add unmountEventComponent implementation
+}
+
 export function handleEventTarget(
   type: Symbol | number,
   props: Props,