Adds experimental event API scaffolding (#15108)

* Adds experimental event API scaffolding

packages/react-art/src/ReactARTHostConfig.js

@@ -430,3 +430,19 @@ export function unhideInstance(instance, props) {
 export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
+
+export function handleEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventComponent implementation
+}
+
+export function handleEventTarget(
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventTarget implementation
+}

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

@@ -43,6 +43,7 @@ import {
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
 import type {DOMContainer} from './ReactDOM';
+import type {ReactEventResponder} from 'shared/ReactTypes';
 
 export type Type = string;
 export type Props = {
@@ -793,3 +794,19 @@ export function didNotFindHydratableSuspenseInstance(
     // TODO: warnForInsertedHydratedSuspense(parentInstance);
   }
 }
+
+export function handleEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventComponent implementation
+}
+
+export function handleEventTarget(
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventTarget implementation
+}

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

@@ -14,6 +14,7 @@ import type {
   NativeMethodsMixinType,
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
+import type {ReactEventResponder} from 'shared/ReactTypes';
 
 import {
   mountSafeCallback_NOT_REALLY_SAFE,
@@ -417,3 +418,19 @@ export function replaceContainerChildren(
   container: Container,
   newChildren: ChildSet,
 ): void {}
+
+export function handleEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventComponent implementation
+}
+
+export function handleEventTarget(
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventTarget implementation
+}

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

@@ -8,6 +8,7 @@
  */
 
 import type {ReactNativeBaseComponentViewConfig} from './ReactNativeTypes';
+import type {ReactEventResponder} from 'shared/ReactTypes';
 
 import invariant from 'shared/invariant';
 
@@ -476,3 +477,19 @@ export function unhideTextInstance(
 ): void {
   throw new Error('Not yet implemented.');
 }
+
+export function handleEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventComponent implementation
+}
+
+export function handleEventTarget(
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventTarget implementation
+}

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -43,6 +43,7 @@ import {
   IncompleteClassComponent,
   MemoComponent,
   SimpleMemoComponent,
+  EventTarget,
 } from 'shared/ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -90,6 +91,7 @@ import {
   hideTextInstance,
   unhideInstance,
   unhideTextInstance,
+  handleEventTarget,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -299,6 +301,7 @@ function commitBeforeMutationLifeCycles(
     case HostText:
     case HostPortal:
     case IncompleteClassComponent:
+    case EventTarget:
       // Nothing to do for these component types
       return;
     default: {
@@ -584,8 +587,8 @@ function commitLifeCycles(
       return;
     }
     case SuspenseComponent:
-      break;
     case IncompleteClassComponent:
+    case EventTarget:
       break;
     default: {
       invariant(
@@ -1213,6 +1216,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case IncompleteClassComponent: {
       return;
     }
+    case EventTarget: {
+      const newProps = finishedWork.memoizedProps;
+      const type = finishedWork.type.type;
+      handleEventTarget(type, newProps, finishedWork);
+      return;
+    }
     default: {
       invariant(
         false,

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -38,6 +38,8 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
+  EventComponent,
+  EventTarget,
 } from 'shared/ReactWorkTags';
 import {
   Placement,
@@ -63,6 +65,7 @@ import {
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
+  handleEventComponent,
 } from './ReactFiberHostConfig';
 import {
   getRootHostContainer,
@@ -762,6 +765,16 @@ function completeWork(
       }
       break;
     }
+    case EventComponent: {
+      const rootContainerInstance = getRootHostContainer();
+      const responder = workInProgress.type.responder;
+      handleEventComponent(responder, rootContainerInstance, workInProgress);
+      break;
+    }
+    case EventTarget: {
+      markUpdate(workInProgress);
+      break;
+    }
     default:
       invariant(
         false,

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

@@ -59,6 +59,8 @@ export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
 export const supportsMutation = $$$hostConfig.supportsMutation;
 export const supportsPersistence = $$$hostConfig.supportsPersistence;
 export const supportsHydration = $$$hostConfig.supportsHydration;
+export const handleEventComponent = $$$hostConfig.handleEventComponent;
+export const handleEventTarget = $$$hostConfig.handleEventTarget;
 
 // -------------------
 //      Mutation

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

@@ -9,6 +9,8 @@
 
 import warning from 'shared/warning';
 
+import type {ReactEventResponder} from 'shared/ReactTypes';
+
 export type Type = string;
 export type Props = Object;
 export type Container = {|
@@ -260,3 +262,19 @@ export function unhideTextInstance(
 ): void {
   textInstance.isHidden = false;
 }
+
+export function handleEventComponent(
+  eventResponder: ReactEventResponder,
+  rootContainerInstance: Container,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventComponent implementation
+}
+
+export function handleEventTarget(
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+) {
+  // TODO: add handleEventTarget implementation
+}

packages/shared/ReactFeatureFlags.js

@@ -58,3 +58,6 @@ export const warnAboutShorthandPropertyCollision = false;
 // See https://github.com/react-native-community/discussions-and-proposals/issues/72 for more information
 // This is a flag so we can fix warnings in RN core before turning it on
 export const warnAboutDeprecatedSetNativeProps = false;
+
+// Experimental React Events support. Only used in www builds for now.
+export const enableEventAPI = false;

packages/shared/ReactSymbols.js

@@ -46,6 +46,12 @@ export const REACT_SUSPENSE_TYPE = hasSymbol
   : 0xead1;
 export const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
 export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+export const REACT_EVENT_COMPONENT_TYPE = hasSymbol
+  ? Symbol.for('react.event')
+  : 0xead5;
+export const REACT_EVENT_TARGET_TYPE = hasSymbol
+  ? Symbol.for('react.event_target')
+  : 0xead6;
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';

packages/shared/ReactTypes.js

@@ -13,7 +13,9 @@ export type ReactNode =
   | ReactText
   | ReactFragment
   | ReactProvider<any>
-  | ReactConsumer<any>;
+  | ReactConsumer<any>
+  | ReactEvent
+  | ReactEventTarget;
 
 export type ReactEmpty = null | void | boolean;
 
@@ -78,3 +80,20 @@ export type ReactPortal = {
 export type RefObject = {|
   current: any,
 |};
+
+export type ReactEventResponder = {
+  targetEventTypes: Array<string>,
+  createInitialState?: (props: Object) => Object,
+  handleEvent: (context: Object, props: Object, state: Object) => void,
+};
+
+export type ReactEvent = {|
+  $$typeof: Symbol | number,
+  props: null | Object,
+  responder: ReactEventResponder,
+|};
+
+export type ReactEventTarget = {|
+  $$typeof: Symbol | number,
+  type: string,
+|};

packages/shared/ReactWorkTags.js

@@ -26,7 +26,9 @@ export type WorkTag =
   | 15
   | 16
   | 17
-  | 18;
+  | 18
+  | 19
+  | 20;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -47,3 +49,5 @@ export const SimpleMemoComponent = 15;
 export const LazyComponent = 16;
 export const IncompleteClassComponent = 17;
 export const DehydratedSuspenseComponent = 18;
+export const EventComponent = 19;
+export const EventTarget = 20;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -29,6 +29,7 @@ export const disableInputAttributeSyncing = false;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
 export const warnAboutDeprecatedSetNativeProps = true;
+export const enableEventAPI = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {

packages/shared/forks/ReactFeatureFlags.native-oss.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() {

packages/shared/forks/ReactFeatureFlags.persistent.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() {

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

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

packages/shared/forks/ReactFeatureFlags.www.js

@@ -65,6 +65,8 @@ function updateFlagOutsideOfReactCallStack() {
   }
 }
 
+export const enableEventAPI = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

packages/shared/isValidElementType.js

@@ -18,6 +18,8 @@ import {
   REACT_SUSPENSE_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
+  REACT_EVENT_COMPONENT_TYPE,
+  REACT_EVENT_TARGET_TYPE,
 } from 'shared/ReactSymbols';
 
 export default function isValidElementType(type: mixed) {
@@ -36,6 +38,8 @@ export default function isValidElementType(type: mixed) {
         type.$$typeof === REACT_MEMO_TYPE ||
         type.$$typeof === REACT_PROVIDER_TYPE ||
         type.$$typeof === REACT_CONTEXT_TYPE ||
-        type.$$typeof === REACT_FORWARD_REF_TYPE))
+        type.$$typeof === REACT_FORWARD_REF_TYPE ||
+        type.$$typeof === REACT_EVENT_COMPONENT_TYPE ||
+        type.$$typeof === REACT_EVENT_TARGET_TYPE))
   );
 }