[react-interactions] Add Listener API + useEvent/useDelegatedEvent

Update error codes

fix lint

DCE

fix test

Add event kinds to help propagation rules

Add event kinds to help propagation rules #2

Fix kind bug

cleanup

Address feedback

Fix flow

Major refactor and re-design

packages/legacy-events/EventSystemFlags.js

@@ -11,8 +11,9 @@ export type EventSystemFlags = number;
 
 export const PLUGIN_EVENT_SYSTEM = 1;
 export const RESPONDER_EVENT_SYSTEM = 1 << 1;
-export const IS_PASSIVE = 1 << 2;
-export const IS_ACTIVE = 1 << 3;
-export const PASSIVE_NOT_SUPPORTED = 1 << 4;
-export const IS_REPLAYED = 1 << 5;
-export const IS_FIRST_ANCESTOR = 1 << 6;
+export const LISTENER_EVENT_SYSTEM = 1 << 2;
+export const IS_PASSIVE = 1 << 3;
+export const IS_ACTIVE = 1 << 4;
+export const PASSIVE_NOT_SUPPORTED = 1 << 5;
+export const IS_REPLAYED = 1 << 6;
+export const IS_FIRST_ANCESTOR = 1 << 7;

packages/legacy-events/PluginModuleType.js

@@ -17,7 +17,7 @@ import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 
 export type EventTypes = {[key: string]: DispatchConfig};
 
-export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
+export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | TouchEvent;
 
 export type PluginName = string;
 

packages/legacy-events/ReactGenericBatching.js

@@ -10,7 +10,10 @@ import {
   restoreStateIfNeeded,
 } from './ReactControlledComponent';
 
-import {enableDeprecatedFlareAPI} from 'shared/ReactFeatureFlags';
+import {
+  enableDeprecatedFlareAPI,
+  enableListenerAPI,
+} from 'shared/ReactFeatureFlags';
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 
 // Used as a way to call batchedUpdates when we don't have a reference to
@@ -118,7 +121,7 @@ export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {
   // behaviour as we had before this change, so the risks are low.
   if (
     !isInsideEventHandler &&
-    (!enableDeprecatedFlareAPI ||
+    ((!enableDeprecatedFlareAPI && !enableListenerAPI) ||
       (timeStamp === 0 || lastFlushedEventTimeStamp !== timeStamp))
   ) {
     lastFlushedEventTimeStamp = timeStamp;

packages/react-art/src/ReactARTHostConfig.js

@@ -469,3 +469,20 @@ export function getInstanceFromNode(node) {
 export function beforeRemoveInstance(instance) {
   // noop
 }
+
+export function registerListenerEvent(
+  event: any,
+  rootContainerInstance: Container,
+): void {
+  // noop
+}
+
+export function attachListenerToInstance(listener: any): boolean {
+  // noop
+  return false;
+}
+
+export function detachListenerFromInstance(listener: any): boolean {
+  // noop
+  return false;
+}

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -237,6 +237,17 @@ function useResponder(
   };
 }
 
+const noOp = () => {};
+
+function useEvent(options: any): any {
+  hookLog.push({primitive: 'Event', stackError: new Error(), value: options});
+  return {
+    clear: noOp,
+    listen: noOp,
+    unlisten: noOp,
+  };
+}
+
 function useTransition(
   config: SuspenseConfig | null | void,
 ): [(() => void) => void, boolean] {
@@ -274,6 +285,7 @@ const Dispatcher: DispatcherType = {
   useResponder,
   useTransition,
   useDeferredValue,
+  useEvent,
 };
 
 // Inspect

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

@@ -53,7 +53,10 @@ import {
 } from 'legacy-events/EventPropagators';
 import ReactVersion from 'shared/ReactVersion';
 import invariant from 'shared/invariant';
-import {exposeConcurrentModeAPIs} from 'shared/ReactFeatureFlags';
+import {
+  exposeConcurrentModeAPIs,
+  enableListenerAPI,
+} from 'shared/ReactFeatureFlags';
 
 import {
   getInstanceFromNode,
@@ -70,6 +73,7 @@ import {
   setAttemptHydrationAtCurrentPriority,
   queueExplicitHydrationTarget,
 } from '../events/ReactDOMEventReplaying';
+import {useEvent} from './ReactDOMEventListenerHooks';
 
 setAttemptSynchronousHydration(attemptSynchronousHydration);
 setAttemptUserBlockingHydration(attemptUserBlockingHydration);
@@ -193,6 +197,10 @@ if (exposeConcurrentModeAPIs) {
   };
 }
 
+if (enableListenerAPI) {
+  ReactDOM.unstable_useEvent = useEvent;
+}
+
 const foundDevTools = injectIntoDevTools({
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: __DEV__ ? 1 : 0,

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

@@ -65,6 +65,8 @@ import {
 import {
   addResponderEventSystemEvent,
   removeActiveResponderEventSystemEvent,
+  addListenerSystemEvent,
+  removeListenerSystemEvent,
 } from '../events/ReactDOMEventListener.js';
 import {mediaEventTypes} from '../events/DOMTopLevelEventTypes';
 import {
@@ -90,6 +92,7 @@ import {toStringOrTrustedType} from './ToStringValue';
 import {
   enableDeprecatedFlareAPI,
   enableTrustedTypesIntegration,
+  enableListenerAPI,
 } from 'shared/ReactFeatureFlags';
 
 let didWarnInvalidHydration = false;
@@ -1345,6 +1348,42 @@ export function listenToEventResponderEventTypes(
   }
 }
 
+export function listenToEventListener(
+  type: string,
+  passive: boolean,
+  document: Document,
+): void {
+  if (enableListenerAPI) {
+    // Get the listening Map for this element. We use this to track
+    // what events we're listening to.
+    const listenerMap = getListenerMapForElement(document);
+    const passiveKey = type + '_passive';
+    const activeKey = type + '_active';
+    const eventKey = passive ? passiveKey : activeKey;
+
+    if (!listenerMap.has(eventKey)) {
+      if (passive) {
+        if (listenerMap.has(activeKey)) {
+          // If we have an active event listener, do not register
+          // a passive event listener. We use the same active event
+          // listener.
+          return;
+        } else {
+          // If we have a passive event listener, remove the
+          // existing passive event listener before we add the
+          // active event listener.
+          const passiveListener = listenerMap.get(passiveKey);
+          if (passiveListener != null) {
+            removeListenerSystemEvent(document, type, passiveListener);
+          }
+        }
+      }
+      const eventListener = addListenerSystemEvent(document, type, passive);
+      listenerMap.set(eventKey, eventListener);
+    }
+  }
+}
+
 // We can remove this once the event API is stable and out of a flag
 if (enableDeprecatedFlareAPI) {
   setListenToResponderEventTypes(listenToEventResponderEventTypes);

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

@@ -20,6 +20,7 @@ const randomKey = Math.random()
   .slice(2);
 const internalInstanceKey = '__reactInternalInstance$' + randomKey;
 const internalEventHandlersKey = '__reactEventHandlers$' + randomKey;
+const internalEventListenersKey = '__reactEventListeners$' + randomKey;
 const internalContainerInstanceKey = '__reactContainere$' + randomKey;
 
 export function precacheFiberNode(hostInst, node) {
@@ -164,3 +165,11 @@ export function getFiberCurrentPropsFromNode(node) {
 export function updateFiberProps(node, props) {
   node[internalEventHandlersKey] = props;
 }
+
+export function getListenersFromNode(node) {
+  return node[internalEventListenersKey] || null;
+}
+
+export function initListenersSet(node, value) {
+  node[internalEventListenersKey] = value;
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  ReactDOMListenerEvent,
+  ReactDOMListenerHook,
+} from 'shared/ReactDOMTypes';
+
+import React from 'react';
+import invariant from 'shared/invariant';
+import {getEventPriority} from '../events/SimpleEventPlugin';
+
+const ReactCurrentDispatcher =
+  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+    .ReactCurrentDispatcher;
+
+type EventOptions = {|
+  capture?: boolean,
+  passive?: boolean,
+  priority?: number,
+|};
+
+function resolveDispatcher() {
+  const dispatcher = ReactCurrentDispatcher.current;
+  invariant(
+    dispatcher !== null,
+    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+      ' one of the following reasons:\n' +
+      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+      '2. You might be breaking the Rules of Hooks\n' +
+      '3. You might have more than one copy of React in the same app\n' +
+      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
+  );
+  return dispatcher;
+}
+
+export function useEvent(
+  type: string,
+  options?: EventOptions,
+): ReactDOMListenerHook {
+  const dispatcher = resolveDispatcher();
+  let capture = false;
+  let passive = false;
+  let priority = getEventPriority((type: any));
+
+  if (options != null) {
+    const optionsCapture = options && options.capture;
+    const optionsPassive = options && options.passive;
+    const optionsPriority = options && options.priority;
+
+    if (typeof optionsCapture === 'boolean') {
+      capture = optionsCapture;
+    }
+    if (typeof optionsPassive === 'boolean') {
+      passive = optionsPassive;
+    }
+    if (typeof optionsPriority === 'number') {
+      priority = optionsPriority;
+    }
+  }
+  const event: ReactDOMListenerEvent = {
+    capture,
+    passive,
+    priority,
+    type,
+  };
+  return dispatcher.useEvent(event);
+}

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

@@ -27,6 +27,7 @@ import {
   warnForInsertedHydratedElement,
   warnForInsertedHydratedText,
   listenToEventResponderEventTypes,
+  listenToEventListener,
 } from './ReactDOMComponent';
 import {getSelectionInformation, restoreSelection} from './ReactInputSelection';
 import setTextContent from './setTextContent';
@@ -50,6 +51,9 @@ import type {
   ReactDOMEventResponder,
   ReactDOMEventResponderInstance,
   ReactDOMFundamentalComponentInstance,
+  ReactDOMListener,
+  ReactDOMListenerEvent,
+  ReactDOMListenerHook,
 } from 'shared/ReactDOMTypes';
 import {
   mountEventResponder,
@@ -58,6 +62,10 @@ import {
 } from '../events/DeprecatedDOMEventResponderSystem';
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
+export type ReactListenerEvent = ReactDOMListenerEvent;
+export type ReactListenerHook = ReactDOMListenerHook;
+export type ReactListener = ReactDOMListener;
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -118,6 +126,12 @@ import {
   RESPONDER_EVENT_SYSTEM,
   IS_PASSIVE,
 } from 'legacy-events/EventSystemFlags';
+import {
+  attachElementListener,
+  detachElementListener,
+  attachDocumentListener,
+  detachDocumentListener,
+} from '../events/DOMEventListenerSystem';
 
 let SUPPRESS_HYDRATION_WARNING;
 if (__DEV__) {
@@ -1037,6 +1051,47 @@ export function unmountFundamentalComponent(
   }
 }
 
-export function getInstanceFromNode(node: HTMLElement): null | Object {
+export function getInstanceFromNode(node: Instance): null | Object {
   return getClosestInstanceFromNode(node) || null;
 }
+
+export function registerListenerEvent(
+  event: ReactDOMListenerEvent,
+  rootContainerInstance: Container,
+): void {
+  const {type, passive} = event;
+  const doc = rootContainerInstance.ownerDocument;
+  listenToEventListener(type, passive, doc);
+}
+
+export function attachListenerToInstance(listener: ReactDOMListener): boolean {
+  const {instance} = listener;
+  if (instance.nodeType === DOCUMENT_NODE) {
+    attachDocumentListener(listener);
+    return true;
+  }
+  const internalInstanceHandle = getClosestInstanceFromNode(instance);
+
+  if (!internalInstanceHandle) {
+    return false;
+  }
+  attachElementListener(listener);
+  return true;
+}
+
+export function detachListenerFromInstance(
+  listener: ReactDOMListener,
+): boolean {
+  const {instance} = listener;
+  if (instance.nodeType === DOCUMENT_NODE) {
+    detachDocumentListener(listener);
+    return true;
+  }
+  const internalInstanceHandle = getClosestInstanceFromNode(instance);
+
+  if (!internalInstanceHandle) {
+    return false;
+  }
+  detachElementListener(listener);
+  return true;
+}