Adds more scaffolding for experimental event API

packages/react-art/src/ReactARTHostConfig.js

@@ -440,7 +440,7 @@ export function handleEventComponent(
 }
 
 export function handleEventTarget(
-  type: string,
+  type: Symbol | number,
   props: Props,
   internalInstanceHandle: Object,
 ) {

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

@@ -44,6 +44,7 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
 import type {ReactEventResponder} from 'shared/ReactTypes';
+import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
 
 export type Type = string;
 export type Props = {
@@ -65,6 +66,7 @@ export type PublicInstance = Element | Text;
 type HostContextDev = {
   namespace: string,
   ancestorInfo: mixed,
+  isEventComponent?: boolean,
 };
 type HostContextProd = string;
 export type HostContext = HostContextDev | HostContextProd;
@@ -73,7 +75,11 @@ export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseServerRenderer,
+  enableEventAPI,
+} from 'shared/ReactFeatureFlags';
+import warning from 'shared/warning';
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
@@ -142,6 +148,9 @@ export function getRootHostContext(
   if (__DEV__) {
     const validatedTag = type.toLowerCase();
     const ancestorInfo = updatedAncestorInfo(null, validatedTag);
+    if (enableEventAPI) {
+      return {namespace, ancestorInfo, isEventComponent: false};
+    }
     return {namespace, ancestorInfo};
   }
   return namespace;
@@ -159,6 +168,12 @@ export function getChildHostContext(
       parentHostContextDev.ancestorInfo,
       type,
     );
+    if (enableEventAPI) {
+      if (type === REACT_EVENT_COMPONENT_TYPE) {
+        return {namespace, ancestorInfo, isEventComponent: true};
+      }
+      return {namespace, ancestorInfo, isEventComponent: false};
+    }
     return {namespace, ancestorInfo};
   }
   const parentNamespace = ((parentHostContext: any): HostContextProd);
@@ -296,6 +311,14 @@ export function createTextInstance(
   if (__DEV__) {
     const hostContextDev = ((hostContext: any): HostContextDev);
     validateDOMNesting(null, text, hostContextDev.ancestorInfo);
+    if (enableEventAPI) {
+      warning(
+        !hostContextDev.isEventComponent,
+        'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
+          'Wrap the child text "%s" in an element.',
+        text,
+      );
+    }
   }
   const textNode: TextInstance = createTextNode(text, rootContainerInstance);
   precacheFiberNode(internalInstanceHandle, textNode);
@@ -804,7 +827,7 @@ export function handleEventComponent(
 }
 
 export function handleEventTarget(
-  type: string,
+  type: Symbol | number,
   props: Props,
   internalInstanceHandle: Object,
 ) {

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

@@ -5,13 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
 import warningWithoutStack from 'shared/warningWithoutStack';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberStackInDev} from 'react-reconciler/src/ReactCurrentFiber';
 
-import {enableEventAPI} from 'shared/ReactFeatureFlags';
-
 let validateDOMNesting = () => {};
 let updatedAncestorInfo = () => {};
 
@@ -162,18 +159,10 @@ if (__DEV__) {
     dlItemTagAutoclosing: null,
   };
 
-  updatedAncestorInfo = function(oldInfo, tag: string | Symbol) {
+  updatedAncestorInfo = function(oldInfo, tag) {
     let ancestorInfo = {...(oldInfo || emptyAncestorInfo)};
     let info = {tag};
 
-    if (enableEventAPI) {
-      if (tag === REACT_EVENT_COMPONENT_TYPE) {
-        ancestorInfo.inEventComponent = true;
-        return ancestorInfo;
-      } else {
-        ancestorInfo.inEventComponent = false;
-      }
-    }
     if (inScopeTags.indexOf(tag) !== -1) {
       ancestorInfo.aTagInScope = null;
       ancestorInfo.buttonTagInScope = null;
@@ -422,14 +411,6 @@ if (__DEV__) {
     const parentTag = parentInfo && parentInfo.tag;
 
     if (childText != null) {
-      if (enableEventAPI) {
-        warningWithoutStack(
-          !ancestorInfo.inEventComponent,
-          'validateDOMNesting: React event components cannot have text DOM nodes as children. ' +
-            'Wrap the child text "%s" in an element.',
-          childText,
-        );
-      }
       warningWithoutStack(
         childTag == null,
         'validateDOMNesting: when childText is passed, childTag should be null',

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

@@ -428,7 +428,7 @@ export function handleEventComponent(
 }
 
 export function handleEventTarget(
-  type: string,
+  type: Symbol | number,
   props: Props,
   internalInstanceHandle: Object,
 ) {

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

@@ -487,7 +487,7 @@ export function handleEventComponent(
 }
 
 export function handleEventTarget(
-  type: string,
+  type: Symbol | number,
   props: Props,
   internalInstanceHandle: Object,
 ) {

packages/react-reconciler/src/ReactFiber.js

@@ -12,7 +12,7 @@ import type {
   ReactFragment,
   ReactPortal,
   RefObject,
-  ReactEvent,
+  ReactEventComponent,
   ReactEventTarget,
 } from 'shared/ReactTypes';
 import type {WorkTag} from 'shared/ReactWorkTags';
@@ -614,15 +614,15 @@ export function createFiberFromFragment(
 }
 
 export function createFiberFromEventComponent(
-  event: ReactEvent,
+  eventComponent: ReactEventComponent,
   pendingProps: any,
   mode: TypeOfMode,
   expirationTime: ExpirationTime,
   key: null | string,
 ): Fiber {
   const fiber = createFiber(EventComponent, pendingProps, key, mode);
-  fiber.elementType = event;
-  fiber.type = event;
+  fiber.elementType = eventComponent;
+  fiber.type = eventComponent;
   fiber.stateNode = new Map();
   fiber.expirationTime = expirationTime;
   return fiber;

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -61,7 +61,10 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings';
 import {refineResolvedLazyComponent} from 'shared/ReactLazyComponent';
-import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
+import {
+  REACT_LAZY_TYPE,
+  REACT_EVENT_TARGET_TOUCH_HIT,
+} from 'shared/ReactSymbols';
 import warning from 'shared/warning';
 import warningWithoutStack from 'shared/warningWithoutStack';
 import {
@@ -1960,8 +1963,9 @@ function updateEventTarget(current, workInProgress, renderExpirationTime) {
     parent !== null && parent.tag === Event,
     'Event target components must be direct children of event components',
   );
+  const eventTargetType = nextProps.type;
   // These warnings only occur in DEV to reduce overhead in production
-  if (__DEV__ && nextProps.type === 'touch-hit') {
+  if (__DEV__ && eventTargetType === REACT_EVENT_TARGET_TOUCH_HIT) {
     let childrenCount = 0;
     let child = workInProgress.child;
     while (child !== null) {

packages/react-reconciler/src/ReactFiberHostContext.js

@@ -12,10 +12,13 @@ import type {StackCursor} from './ReactFiberStack';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
 import invariant from 'shared/invariant';
+import {EventComponent} from 'shared/ReactWorkTags';
 
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
 
+import {enableEventAPI} from 'shared/ReactFeatureFlags';
+
 declare class NoContextT {}
 const NO_CONTEXT: NoContextT = ({}: any);
 
@@ -79,7 +82,12 @@ function pushHostContext(fiber: Fiber): void {
     rootInstanceStackCursor.current,
   );
   const context: HostContext = requiredContext(contextStackCursor.current);
-  const nextContext = getChildHostContext(context, fiber.type, rootInstance);
+  let type = fiber.type;
+  // For React event components, we get the typeof field (the symbol)
+  if (enableEventAPI && fiber.tag === EventComponent) {
+    type = type.$$typeof;
+  }
+  const nextContext = getChildHostContext(context, type, rootInstance);
 
   // Don't push this Fiber's context unless it's unique.
   if (context === nextContext) {

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

@@ -272,7 +272,7 @@ export function handleEventComponent(
 }
 
 export function handleEventTarget(
-  type: string,
+  type: Symbol | number,
   props: Props,
   internalInstanceHandle: Object,
 ) {

packages/shared/ReactSymbols.js

@@ -53,6 +53,11 @@ export const REACT_EVENT_TARGET_TYPE = hasSymbol
   ? Symbol.for('react.event_target')
   : 0xead6;
 
+// React event targets
+export const REACT_EVENT_TARGET_TOUCH_HIT = hasSymbol
+  ? Symbol.for('react.event_target.touch_hit')
+  : 0xead7;
+
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 

packages/shared/ReactTypes.js

@@ -14,7 +14,7 @@ export type ReactNode =
   | ReactFragment
   | ReactProvider<any>
   | ReactConsumer<any>
-  | ReactEvent
+  | ReactEventComponent
   | ReactEventTarget;
 
 export type ReactEmpty = null | void | boolean;
@@ -81,13 +81,17 @@ export type RefObject = {|
   current: any,
 |};
 
+export type ReactEventResponderEventType =
+  | string
+  | {name: string, passive?: boolean, capture?: boolean};
+
 export type ReactEventResponder = {
-  targetEventTypes: Array<string>,
+  targetEventTypes: Array<ReactEventResponderEventType>,
   createInitialState?: (props: Object) => Object,
   handleEvent: (context: Object, props: Object, state: Object) => void,
 };
 
-export type ReactEvent = {|
+export type ReactEventComponent = {|
   $$typeof: Symbol | number,
   props: null | Object,
   responder: ReactEventResponder,