Adds more scaffolding for experimental event API

packages/react-reconciler/src/ReactFiber.js

@@ -8,7 +8,13 @@
  */
 
 import type {ReactElement, Source} from 'shared/ReactElementType';
-import type {ReactFragment, ReactPortal, RefObject} from 'shared/ReactTypes';
+import type {
+  ReactFragment,
+  ReactPortal,
+  RefObject,
+  ReactEvent,
+  ReactEventTarget,
+} from 'shared/ReactTypes';
 import type {WorkTag} from 'shared/ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {SideEffectTag} from 'shared/ReactSideEffectTags';
@@ -19,7 +25,7 @@ import type {HookType} from './ReactFiberHooks';
 
 import invariant from 'shared/invariant';
 import warningWithoutStack from 'shared/warningWithoutStack';
-import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+import {enableProfilerTimer, enableEventAPI} from 'shared/ReactFeatureFlags';
 import {NoEffect} from 'shared/ReactSideEffectTags';
 import {
   IndeterminateComponent,
@@ -38,6 +44,8 @@ import {
   FunctionComponent,
   MemoComponent,
   LazyComponent,
+  EventComponent,
+  EventTarget,
 } from 'shared/ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -60,6 +68,8 @@ import {
   REACT_SUSPENSE_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
+  REACT_EVENT_COMPONENT_TYPE,
+  REACT_EVENT_TARGET_TYPE,
 } from 'shared/ReactSymbols';
 
 let hasBadMapPolyfill;
@@ -503,6 +513,28 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
+            case REACT_EVENT_COMPONENT_TYPE:
+              if (enableEventAPI) {
+                return createFiberFromEventComponent(
+                  type,
+                  pendingProps,
+                  mode,
+                  expirationTime,
+                  key,
+                );
+              }
+              break;
+            case REACT_EVENT_TARGET_TYPE:
+              if (enableEventAPI) {
+                return createFiberFromEventTarget(
+                  type,
+                  pendingProps,
+                  mode,
+                  expirationTime,
+                  key,
+                );
+              }
+              break;
           }
         }
         let info = '';
@@ -581,6 +613,35 @@ export function createFiberFromFragment(
   return fiber;
 }
 
+export function createFiberFromEventComponent(
+  event: ReactEvent,
+  pendingProps: any,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+  key: null | string,
+): Fiber {
+  const fiber = createFiber(EventComponent, pendingProps, key, mode);
+  fiber.elementType = event;
+  fiber.type = event;
+  fiber.stateNode = new Map();
+  fiber.expirationTime = expirationTime;
+  return fiber;
+}
+
+export function createFiberFromEventTarget(
+  eventTarget: ReactEventTarget,
+  pendingProps: any,
+  mode: TypeOfMode,
+  expirationTime: ExpirationTime,
+  key: null | string,
+): Fiber {
+  const fiber = createFiber(EventTarget, pendingProps, key, mode);
+  fiber.elementType = eventTarget;
+  fiber.type = eventTarget;
+  fiber.expirationTime = expirationTime;
+  return fiber;
+}
+
 function createFiberFromProfiler(
   pendingProps: any,
   mode: TypeOfMode,

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -35,6 +35,8 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
+  EventComponent,
+  EventTarget,
 } from 'shared/ReactWorkTags';
 import {
   NoEffect,
@@ -52,6 +54,7 @@ import {
   debugRenderPhaseSideEffectsForStrictMode,
   enableProfilerTimer,
   enableSuspenseServerRenderer,
+  enableEventAPI,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -1923,6 +1926,70 @@ function updateContextConsumer(
   return workInProgress.child;
 }
 
+function updateEventComponent(current, workInProgress, renderExpirationTime) {
+  const nextProps = workInProgress.pendingProps;
+  let nextChildren = nextProps.children;
+
+  reconcileChildren(
+    current,
+    workInProgress,
+    nextChildren,
+    renderExpirationTime,
+  );
+  if (__DEV__) {
+    // Check event node has any text nodes as direct nodes and warn
+    let child = workInProgress.child;
+    while (child !== null) {
+      if (child.tag === HostText) {
+        warningWithoutStack(
+          false,
+          'React event components cannot have text nodes as direct children',
+        );
+      }
+      child = child.sibling;
+    }
+  }
+  return workInProgress.child;
+}
+
+function updateEventTarget(current, workInProgress, renderExpirationTime) {
+  const nextProps = workInProgress.pendingProps;
+  let nextChildren = nextProps.children;
+
+  reconcileChildren(
+    current,
+    workInProgress,
+    nextChildren,
+    renderExpirationTime,
+  );
+  const parent = workInProgress.return;
+  invariant(
+    parent !== null && parent.tag === Event,
+    'Event target components must be direct child of event components',
+  );
+  // These invariants only occur in DEV to reduce overhead in production
+  if (__DEV__ && nextProps.type === 'touch-hit') {
+    let childrenCount = 0;
+    let child = workInProgress.child;
+    while (child !== null) {
+      if (child.tag === HostText) {
+        childrenCount++;
+        invariant(
+          false,
+          '<TouchHitTarget> cannot have text nodes as direct children',
+        );
+      } else if (child.tag === HostComponent) {
+        childrenCount++;
+      }
+      child = child.sibling;
+    }
+    if (childrenCount !== 1) {
+      invariant(false, '<TouchHitTarget> must only have a single child.');
+    }
+  }
+  return workInProgress.child;
+}
+
 export function markWorkInProgressReceivedUpdate() {
   didReceiveUpdate = true;
 }
@@ -2239,6 +2306,22 @@ function beginWork(
       }
       break;
     }
+    case EventComponent: {
+      if (enableEventAPI) {
+        return updateEventComponent(
+          current,
+          workInProgress,
+          renderExpirationTime,
+        );
+      }
+      break;
+    }
+    case EventTarget: {
+      if (enableEventAPI) {
+        return updateEventTarget(current, workInProgress, renderExpirationTime);
+      }
+      break;
+    }
   }
   invariant(
     false,

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -28,6 +28,7 @@ import {
   enableSchedulerTracing,
   enableProfilerTimer,
   enableSuspenseServerRenderer,
+  enableEventAPI,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -1217,9 +1218,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case EventTarget: {
-      const newProps = finishedWork.memoizedProps;
-      const type = finishedWork.type.type;
-      handleEventTarget(type, newProps, finishedWork);
+      if (enableEventAPI) {
+        const newProps = finishedWork.memoizedProps;
+        const type = finishedWork.type.type;
+        handleEventTarget(type, newProps, finishedWork);
+      }
       return;
     }
     default: {

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -85,7 +85,10 @@ import {
   skipPastDehydratedSuspenseInstance,
   popHydrationState,
 } from './ReactFiberHydrationContext';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseServerRenderer,
+  enableEventAPI,
+} from 'shared/ReactFeatureFlags';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -766,13 +769,17 @@ function completeWork(
       break;
     }
     case EventComponent: {
-      const rootContainerInstance = getRootHostContainer();
-      const responder = workInProgress.type.responder;
-      handleEventComponent(responder, rootContainerInstance, workInProgress);
+      if (enableEventAPI) {
+        const rootContainerInstance = getRootHostContainer();
+        const responder = workInProgress.type.responder;
+        handleEventComponent(responder, rootContainerInstance, workInProgress);
+      }
       break;
     }
     case EventTarget: {
-      markUpdate(workInProgress);
+      if (enableEventAPI) {
+        markUpdate(workInProgress);
+      }
       break;
     }
     default:

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -26,6 +26,7 @@ export const enableStableConcurrentModeAPIs = false;
 export const warnAboutShorthandPropertyCollision = false;
 export const enableSchedulerDebugging = false;
 export const warnAboutDeprecatedSetNativeProps = false;
+export const enableEventAPI = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {