ReactDOM.useEvent: Add more scaffolding for useEvent hook

Add test

Author: trueadm

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

@@ -256,6 +256,17 @@ function useTransition(
   return [callback => {}, false];
 }
 
+const noOp = () => {};
+
+function useEvent(event: any): any {
+  hookLog.push({primitive: 'Event', stackError: new Error(), value: event});
+  return {
+    clear: noOp,
+    listen: noOp,
+    unlisten: noOp,
+  };
+}
+
 function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
   // useDeferredValue() composes multiple hooks internally.
   // Advance the current hook index the same number of times
@@ -285,6 +296,7 @@ const Dispatcher: DispatcherType = {
   useResponder,
   useTransition,
   useDeferredValue,
+  useEvent,
 };
 
 // Inspect

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

@@ -51,6 +51,9 @@ import type {
   ReactDOMEventResponder,
   ReactDOMEventResponderInstance,
   ReactDOMFundamentalComponentInstance,
+  ReactDOMListener,
+  ReactDOMListenerEvent,
+  ReactDOMListenerMap,
 } from 'shared/ReactDOMTypes';
 import {
   mountEventResponder,
@@ -70,6 +73,10 @@ import {
   IS_PASSIVE,
 } from 'legacy-events/EventSystemFlags';
 
+export type ReactListenerEvent = ReactDOMListenerEvent;
+export type ReactListenerMap = ReactDOMListenerMap;
+export type ReactListener = ReactDOMListener;
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,

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

@@ -39,7 +39,7 @@ import {
   getRawEventName,
   mediaEventTypes,
 } from './DOMTopLevelEventTypes';
-import {trapEventForPluginEventSystem} from './ReactDOMEventListener';
+import {trapEventListener} from './ReactDOMEventListener';
 
 /**
  * Summary of `DOMEventPluginSystem` event handling:
@@ -368,12 +368,12 @@ export function legacyTrapBubbledEvent(
   topLevelType: DOMTopLevelEventType,
   element: Document | Element,
 ): void {
-  trapEventForPluginEventSystem(element, topLevelType, false);
+  trapEventListener(element, topLevelType, false);
 }
 
 export function legacyTrapCapturedEvent(
   topLevelType: DOMTopLevelEventType,
   element: Document | Element,
 ): void {
-  trapEventForPluginEventSystem(element, topLevelType, true);
+  trapEventListener(element, topLevelType, true);
 }

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

@@ -13,6 +13,7 @@ import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {PluginModule} from 'legacy-events/PluginModuleType';
 import type {ReactSyntheticEvent} from 'legacy-events/ReactSyntheticEventType';
+import type {ReactDOMListener} from 'shared/ReactDOMTypes';
 
 import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
 import {batchedEventUpdates} from 'legacy-events/ReactGenericBatching';
@@ -21,7 +22,7 @@ import {plugins} from 'legacy-events/EventPluginRegistry';
 
 import {HostRoot, HostPortal} from 'shared/ReactWorkTags';
 
-import {trapEventForPluginEventSystem} from './ReactDOMEventListener';
+import {trapEventListener} from './ReactDOMEventListener';
 import getEventTarget from './getEventTarget';
 import {getListenerMapForElement} from './DOMEventListenerMap';
 import {
@@ -149,11 +150,7 @@ export function listenToTopLevelEvent(
 ): void {
   if (!listenerMap.has(topLevelType)) {
     const isCapturePhase = capturePhaseEvents.has(topLevelType);
-    trapEventForPluginEventSystem(
-      rootContainerElement,
-      topLevelType,
-      isCapturePhase,
-    );
+    trapEventListener(rootContainerElement, topLevelType, isCapturePhase);
     listenerMap.set(topLevelType, null);
   }
 }
@@ -196,7 +193,7 @@ function willDeferLaterForFBLegacyPrimer(nativeEvent: any): boolean {
     if (node.tagName === 'A' && validFBLegacyPrimerRels.has(node.rel)) {
       const legacyFBSupport = true;
       const isCapture = nativeEvent.eventPhase === 1;
-      trapEventForPluginEventSystem(
+      trapEventListener(
         document,
         ((type: any): DOMTopLevelEventType),
         isCapture,
@@ -300,3 +297,11 @@ export function dispatchEventForPluginEventSystem(
     ),
   );
 }
+
+export function attachElementListener(listener: ReactDOMListener): void {
+  // TODO
+}
+
+export function detachElementListener(listener: ReactDOMListener): void {
+  // TODO
+}

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

@@ -140,7 +140,7 @@ export function removeActiveResponderEventSystemEvent(
   }
 }
 
-export function trapEventForPluginEventSystem(
+export function trapEventListener(
   container: Document | Element,
   topLevelType: DOMTopLevelEventType,
   capture: boolean,

packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js

@@ -1039,4 +1039,35 @@ describe('DOMModernPluginEventSystem', () => {
     expect(log).toEqual([]);
     expect(onDivClick).toHaveBeenCalledTimes(0);
   });
+
+  describe('ReactDOM.useEvent', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      ReactFeatureFlags = require('shared/ReactFeatureFlags');
+      ReactFeatureFlags.enableModernEventSystem = true;
+      ReactFeatureFlags.enableUseEventAPI = true;
+
+      React = require('react');
+      ReactDOM = require('react-dom');
+      Scheduler = require('scheduler');
+      ReactDOMServer = require('react-dom/server');
+    });
+
+    it('should create the same event listener map', () => {
+      let listenerMaps = [];
+
+      function Test() {
+        const listenerMap = ReactDOM.unstable_useEvent('click');
+
+        listenerMaps.push(listenerMap);
+
+        return <div />;
+      }
+
+      ReactDOM.render(<Test />, container);
+      ReactDOM.render(<Test />, container);
+      expect(listenerMaps.length).toEqual(2);
+      expect(listenerMaps[1]).toEqual(listenerMaps[1]);
+    });
+  });
 });

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -474,6 +474,13 @@ function useTransition(
   return [startTransition, false];
 }
 
+function useEvent(event: any): any {
+  return {
+    clear: noop,
+    setListener: noop,
+  };
+}
+
 function noop(): void {}
 
 export let currentThreadID: ThreadID = 0;
@@ -500,4 +507,5 @@ export const Dispatcher: DispatcherType = {
   useResponder,
   useDeferredValue,
   useTransition,
+  useEvent,
 };

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

@@ -76,6 +76,10 @@ export type UpdatePayload = Object;
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
+export type ReactListenerEvent = Object;
+export type ReactListenerMap = Object;
+export type ReactListener = Object;
+
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
   /**

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

@@ -26,6 +26,10 @@ import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
+export type ReactListenerEvent = Object;
+export type ReactListenerMap = Object;
+export type ReactListener = Object;
+
 export type Type = string;
 export type Props = Object;
 export type Container = number;