From b31d26f85cf9c2e9e08bc322ebfab105c78a8bcc Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 24 Apr 2019 00:19:54 +0100
Subject: [PATCH] Experimental Event API: add event component mount phase
 callback

---
 .../src/events/DOMEventResponderSystem.js     | 13 +++++++++
 .../DOMEventResponderSystem-test.internal.js  | 29 ++++++++++++++++++-
 .../src/ReactFiberCommitWork.js               |  9 +++++-
 .../src/ReactFiberCompleteWork.js             |  4 +--
 packages/shared/ReactTypes.js                 |  6 +++-
 5 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js
index a1898b332d6..b7c790a0a7d 100644
--- a/packages/react-dom/src/events/DOMEventResponderSystem.js
+++ b/packages/react-dom/src/events/DOMEventResponderSystem.js
@@ -626,6 +626,19 @@ export function mountEventResponder(
   if (responder.onOwnershipChange !== undefined) {
     ownershipChangeListeners.add(eventComponentInstance);
   }
+  const onMount = responder.onMount;
+  if (onMount !== undefined) {
+    let {props, state} = eventComponentInstance;
+    currentEventQueue = createEventQueue();
+    currentInstance = eventComponentInstance;
+    try {
+      onMount(eventResponderContext, props, state);
+    } finally {
+      currentEventQueue = null;
+      currentInstance = null;
+      currentTimers = null;
+    }
+  }
 }
 
 export function unmountEventResponder(
diff --git a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
index 7a6b51bb8ca..98e616b4a96 100644
--- a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
@@ -18,6 +18,7 @@ function createReactEventComponent(
   targetEventTypes,
   createInitialState,
   onEvent,
+  onMount,
   onUnmount,
   onOwnershipChange,
 ) {
@@ -25,6 +26,7 @@ function createReactEventComponent(
     targetEventTypes,
     createInitialState,
     onEvent,
+    onMount,
     onUnmount,
     onOwnershipChange,
   };
@@ -559,12 +561,35 @@ describe('DOMEventResponderSystem', () => {
     ]);
   });
 
+  it('the event responder onMount() function should fire', () => {
+    let onMountFired = 0;
+
+    const EventComponent = createReactEventComponent(
+      [],
+      undefined,
+      undefined,
+      () => {
+        onMountFired++;
+      },
+    );
+
+    const Test = () => (
+      <EventComponent>
+        <button />
+      </EventComponent>
+    );
+
+    ReactDOM.render(<Test />, container);
+    expect(onMountFired).toEqual(1);
+  });
+
   it('the event responder onUnmount() function should fire', () => {
     let onUnmountFired = 0;
 
     const EventComponent = createReactEventComponent(
       [],
       undefined,
+      undefined,
       (event, context, props, state) => {},
       () => {
         onUnmountFired++;
@@ -590,7 +615,8 @@ describe('DOMEventResponderSystem', () => {
       () => ({
         incrementAmount: 5,
       }),
-      (event, context, props, state) => {},
+      undefined,
+      undefined,
       (context, props, state) => {
         counter += state.incrementAmount;
       },
@@ -621,6 +647,7 @@ describe('DOMEventResponderSystem', () => {
         }
       },
       undefined,
+      undefined,
       () => {
         onOwnershipChangeFired++;
       },
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 3bf04ea9c11..b28401538ee 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -98,6 +98,7 @@ import {
   unhideTextInstance,
   unmountEventComponent,
   commitEventTarget,
+  mountEventComponent,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -595,6 +596,7 @@ function commitLifeCycles(
     case SuspenseComponent:
     case IncompleteClassComponent:
     case EventTarget:
+    case EventComponent:
       break;
     default: {
       invariant(
@@ -835,7 +837,8 @@ function commitContainer(finishedWork: Fiber) {
     case ClassComponent:
     case HostComponent:
     case HostText:
-    case EventTarget: {
+    case EventTarget:
+    case EventComponent: {
       return;
     }
     case HostRoot:
@@ -1255,6 +1258,10 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case IncompleteClassComponent: {
       return;
     }
+    case EventComponent: {
+      mountEventComponent(finishedWork.stateNode);
+      return;
+    }
     default: {
       invariant(
         false,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index da5385eb3b0..48db83dfa7c 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -68,7 +68,6 @@ import {
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
-  mountEventComponent,
   updateEventComponent,
   handleEventTarget,
 } from './ReactFiberHostConfig';
@@ -813,13 +812,12 @@ function completeWork(
             responderState = responder.createInitialState(newProps);
           }
           eventComponentInstance = workInProgress.stateNode = {
-            context: null,
             props: newProps,
             responder,
             rootInstance: rootContainerInstance,
             state: responderState,
           };
-          mountEventComponent(eventComponentInstance);
+          markUpdate(workInProgress);
         } else {
           // Update the props on the event component state node
           eventComponentInstance.props = newProps;
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index f0676edb888..9d7f3c2d0b6 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -94,6 +94,11 @@ export type ReactEventResponder = {
     props: null | Object,
     state: null | Object,
   ) => boolean,
+  onMount: (
+    context: ReactResponderContext,
+    props: null | Object,
+    state: null | Object,
+  ) => void,
   onUnmount: (
     context: ReactResponderContext,
     props: null | Object,
@@ -107,7 +112,6 @@ export type ReactEventResponder = {
 };
 
 export type ReactEventComponentInstance = {|
-  context: null | Object,
   props: null | Object,
   responder: ReactEventResponder,
   rootInstance: mixed,