ReactDOM.useEvent: Add support for experimental scopes API

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

@@ -15,6 +15,7 @@ import type {
   ReactProviderType,
   ReactEventResponder,
   ReactEventResponderListener,
+  ReactScopeMethods,
 } from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {Hook, TimeoutConfig} from 'react-reconciler/src/ReactFiberHooks';
@@ -44,7 +45,10 @@ type HookLogEntry = {
 
 type ReactDebugListenerMap = {|
   clear: () => void,
-  setListener: (target: EventTarget, callback: ?(Event) => void) => void,
+  setListener: (
+    target: EventTarget | ReactScopeMethods,
+    callback: ?(Event) => void,
+  ) => void,
 |};
 
 let hookLog: Array<HookLogEntry> = [];

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

@@ -9,6 +9,15 @@
 
 import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
 import type {RootType} from './ReactDOMRoot';
+import type {
+  ReactDOMEventResponder,
+  ReactDOMEventResponderInstance,
+  ReactDOMFundamentalComponentInstance,
+  ReactDOMListener,
+  ReactDOMListenerEvent,
+  ReactDOMListenerMap,
+} from '../shared/ReactDOMTypes';
+import type {ReactScopeMethods} from 'shared/ReactTypes';
 
 import {
   precacheFiberNode,
@@ -49,14 +58,6 @@ import {
 } from '../shared/HTMLNodeType';
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
-import type {
-  ReactDOMEventResponder,
-  ReactDOMEventResponderInstance,
-  ReactDOMFundamentalComponentInstance,
-  ReactDOMListener,
-  ReactDOMListenerEvent,
-  ReactDOMListenerMap,
-} from '../shared/ReactDOMTypes';
 import {
   mountEventResponder,
   unmountEventResponder,
@@ -69,6 +70,7 @@ import {
   enableDeprecatedFlareAPI,
   enableFundamentalAPI,
   enableUseEventAPI,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
 import {
@@ -79,10 +81,13 @@ import {
   isManagedDOMElement,
   isValidEventTarget,
   listenToTopLevelEvent,
+  attachListenerToManagedDOMElement,
   detachListenerFromManagedDOMElement,
-  attachListenerFromManagedDOMElement,
-  detachTargetEventListener,
   attachTargetEventListener,
+  detachTargetEventListener,
+  isReactScope,
+  attachListenerToReactScope,
+  detachListenerFromReactScope,
 } from '../events/DOMModernPluginEventSystem';
 import {getListenerMapForElement} from '../events/DOMEventListenerMap';
 import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
@@ -1159,7 +1164,9 @@ export function mountEventListener(listener: ReactDOMListener): void {
   if (enableUseEventAPI) {
     const {target} = listener;
     if (isManagedDOMElement(target)) {
-      attachListenerFromManagedDOMElement(listener);
+      attachListenerToManagedDOMElement(listener);
+    } else if (enableScopeAPI && isReactScope(target)) {
+      attachListenerToReactScope(listener);
     } else {
       attachTargetEventListener(listener);
     }
@@ -1171,20 +1178,24 @@ export function unmountEventListener(listener: ReactDOMListener): void {
     const {target} = listener;
     if (isManagedDOMElement(target)) {
       detachListenerFromManagedDOMElement(listener);
+    } else if (enableScopeAPI && isReactScope(target)) {
+      detachListenerFromReactScope(listener);
     } else {
       detachTargetEventListener(listener);
     }
   }
 }
 
 export function validateEventListenerTarget(
-  target: EventTarget,
+  target: EventTarget | ReactScopeMethods,
   listener: ?(Event) => void,
 ): boolean {
   if (enableUseEventAPI) {
     if (
       target != null &&
-      (isManagedDOMElement(target) || isValidEventTarget(target))
+      (isManagedDOMElement(target) ||
+        isValidEventTarget(target) ||
+        isReactScope(target))
     ) {
       if (listener == null || typeof listener === 'function') {
         return true;

packages/react-dom/src/events/DOMModernPluginEventSystem.js

@@ -14,7 +14,7 @@ import type {
   ElementListenerMapEntry,
 } from '../events/DOMEventListenerMap';
 import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
-import type {EventPriority} from 'shared/ReactTypes';
+import type {EventPriority, ReactScopeMethods} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {PluginModule} from 'legacy-events/PluginModuleType';
 import type {
@@ -142,8 +142,11 @@ const emptyDispatchConfigForCustomEvents: CustomDispatchConfig = {
 
 const isArray = Array.isArray;
 
-// $FlowFixMe: Flow struggles with this pattern
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+// TODO: we should remove the FlowFixMes and the casting to figure out how to make
+// these patterns work properly.
+// $FlowFixMe: Flow struggles with this pattern, so we also have to cast it.
+const PossiblyWeakMap = ((typeof WeakMap === 'function' ? WeakMap : Map): any);
+
 // $FlowFixMe: Flow cannot handle polymorphic WeakMaps
 export const eventTargetEventListenerStore: WeakMap<
   EventTarget,
@@ -153,6 +156,15 @@ export const eventTargetEventListenerStore: WeakMap<
   >,
 > = new PossiblyWeakMap();
 
+// $FlowFixMe: Flow cannot handle polymorphic WeakMaps
+export const reactScopeListenerStore: WeakMap<
+  ReactScopeMethods,
+  Map<
+    DOMTopLevelEventType,
+    {bubbled: Set<ReactDOMListener>, captured: Set<ReactDOMListener>},
+  >,
+> = new PossiblyWeakMap();
+
 function dispatchEventsForPlugins(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
@@ -306,12 +318,20 @@ function isMatchingRootContainer(
   );
 }
 
-export function isManagedDOMElement(target: EventTarget): boolean {
+export function isManagedDOMElement(
+  target: EventTarget | ReactScopeMethods,
+): boolean {
   return getClosestInstanceFromNode(((target: any): Node)) !== null;
 }
 
-export function isValidEventTarget(target: EventTarget): boolean {
-  return typeof target.addEventListener === 'function';
+export function isValidEventTarget(
+  target: EventTarget | ReactScopeMethods,
+): boolean {
+  return typeof (target: any).addEventListener === 'function';
+}
+
+export function isReactScope(target: EventTarget | ReactScopeMethods): boolean {
+  return typeof (target: any).getChildContextValues === 'function';
 }
 
 export function dispatchEventForPluginEventSystem(
@@ -446,18 +466,16 @@ function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
   }
 }
 
-export function attachListenerFromManagedDOMElement(
+export function attachListenerToManagedDOMElement(
   listener: ReactDOMListener,
 ): void {
   const {event, target} = listener;
   const {passive, priority, type} = event;
-  const possibleManagedTarget = ((target: any): Element);
-  let containerEventTarget = target;
-  if (getClosestInstanceFromNode(possibleManagedTarget)) {
-    containerEventTarget = getNearestRootOrPortalContainer(
-      possibleManagedTarget,
-    );
-  }
+
+  const managedTargetElement = ((target: any): Element);
+  const containerEventTarget = getNearestRootOrPortalContainer(
+    managedTargetElement,
+  );
   const listenerMap = getListenerMapForElement(containerEventTarget);
   // Add the event listener to the target container (falling back to
   // the target if we didn't find one).
@@ -469,11 +487,11 @@ export function attachListenerFromManagedDOMElement(
     priority,
   );
   // Get the internal listeners Set from the target instance.
-  let listeners = getListenersFromTarget(target);
+  let listeners = getListenersFromTarget(managedTargetElement);
   // If we don't have any listeners, then we need to init them.
   if (listeners === null) {
     listeners = new Set();
-    initListenersSet(target, listeners);
+    initListenersSet(managedTargetElement, listeners);
   }
   // Add our listener to the listeners Set.
   listeners.add(listener);
@@ -485,8 +503,9 @@ export function detachListenerFromManagedDOMElement(
   listener: ReactDOMListener,
 ): void {
   const {target} = listener;
+  const managedTargetElement = ((target: any): Element);
   // Get the internal listeners Set from the target instance.
-  const listeners = getListenersFromTarget(target);
+  const listeners = getListenersFromTarget(managedTargetElement);
   if (listeners !== null) {
     // Remove out listener from the listeners Set.
     listeners.delete(listener);
@@ -496,13 +515,21 @@ export function detachListenerFromManagedDOMElement(
 export function attachTargetEventListener(listener: ReactDOMListener): void {
   const {event, target} = listener;
   const {capture, passive, priority, type} = event;
-  const listenerMap = getListenerMapForElement(target);
+  const eventTarget = ((target: any): EventTarget);
+  const listenerMap = getListenerMapForElement(eventTarget);
   // Add the event listener to the TargetEvent object.
-  listenToTopLevelEvent(type, target, listenerMap, passive, priority, capture);
-  let eventTypeMap = eventTargetEventListenerStore.get(target);
+  listenToTopLevelEvent(
+    type,
+    eventTarget,
+    listenerMap,
+    passive,
+    priority,
+    capture,
+  );
+  let eventTypeMap = eventTargetEventListenerStore.get(eventTarget);
   if (eventTypeMap === undefined) {
     eventTypeMap = new Map();
-    eventTargetEventListenerStore.set(target, eventTypeMap);
+    eventTargetEventListenerStore.set(eventTarget, eventTypeMap);
   }
   // Get the listeners by the event type
   let listeners = eventTypeMap.get(type);
@@ -523,7 +550,51 @@ export function attachTargetEventListener(listener: ReactDOMListener): void {
 export function detachTargetEventListener(listener: ReactDOMListener): void {
   const {event, target} = listener;
   const {capture, type} = event;
-  const eventTypeMap = eventTargetEventListenerStore.get(target);
+  const validEventTarget = ((target: any): EventTarget);
+  const eventTypeMap = eventTargetEventListenerStore.get(validEventTarget);
+  if (eventTypeMap !== undefined) {
+    const listeners = eventTypeMap.get(type);
+    if (listeners !== undefined) {
+      // Remove out listener from the listeners Set.
+      if (capture) {
+        listeners.captured.delete(listener);
+      } else {
+        listeners.bubbled.delete(listener);
+      }
+    }
+  }
+}
+
+export function attachListenerToReactScope(listener: ReactDOMListener): void {
+  const {event, target} = listener;
+  const {capture, type} = event;
+  const reactScope = ((target: any): ReactScopeMethods);
+  let eventTypeMap = reactScopeListenerStore.get(reactScope);
+  if (eventTypeMap === undefined) {
+    eventTypeMap = new Map();
+    reactScopeListenerStore.set(reactScope, eventTypeMap);
+  }
+  // Get the listeners by the event type
+  let listeners = eventTypeMap.get(type);
+  if (listeners === undefined) {
+    listeners = {captured: new Set(), bubbled: new Set()};
+    eventTypeMap.set(type, listeners);
+  }
+  // Add our listener to the listeners Set.
+  if (capture) {
+    listeners.captured.add(listener);
+  } else {
+    listeners.bubbled.add(listener);
+  }
+  // Finally, add the event to our known event types list.
+  addEventTypeToDispatchConfig(type);
+}
+
+export function detachListenerFromReactScope(listener: ReactDOMListener): void {
+  const {event, target} = listener;
+  const {capture, type} = event;
+  const reactScope = ((target: any): ReactScopeMethods);
+  const eventTypeMap = reactScopeListenerStore.get(reactScope);
   if (eventTypeMap !== undefined) {
     const listeners = eventTypeMap.get(type);
     if (listeners !== undefined) {