ReactDOM.useEvent: Add more scaffolding for useEvent hook (#18271)

Author: trueadm

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

@@ -39,6 +39,11 @@ type HookLogEntry = {
   ...
 };
 
+type ReactDebugListenerMap = {|
+  clear: () => void,
+  setListener: (instance: EventTarget, callback: ?(Event) => void) => void,
+|};
+
 let hookLog: Array<HookLogEntry> = [];
 
 // Primitives
@@ -256,6 +261,16 @@ function useTransition(
   return [callback => {}, false];
 }
 
+const noOp = () => {};
+
+function useEvent(event: any): ReactDebugListenerMap {
+  hookLog.push({primitive: 'Event', stackError: new Error(), value: event});
+  return {
+    clear: noOp,
+    setListener: 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 +300,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/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';
@@ -296,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/__tests__/DOMModernPluginEventSystem-test.internal.js

@@ -1039,4 +1039,40 @@ 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');
+    });
+
+    if (!__EXPERIMENTAL__) {
+      it("empty test so Jest doesn't complain", () => {});
+      return;
+    }
+
+    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[0]).toEqual(listenerMaps[1]);
+    });
+  });
 });

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

@@ -17,6 +17,8 @@ import type {
   ReactEventResponderListener,
 } from 'shared/ReactTypes';
 import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberSuspenseConfig';
+import type {ReactDOMListenerMap} from 'shared/ReactDOMTypes';
+
 import {validateContextBounds} from './ReactPartialRendererContext';
 
 import invariant from 'shared/invariant';
@@ -474,6 +476,13 @@ function useTransition(
   return [startTransition, false];
 }
 
+function useEvent(event: any): ReactDOMListenerMap {
+  return {
+    clear: noop,
+    setListener: noop,
+  };
+}
+
 function noop(): void {}
 
 export let currentThreadID: ThreadID = 0;
@@ -500,4 +509,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;