ReactDOM.useEvent: Add more scaffolding for useEvent hook

Add test

Fix

Address feedback

fix

Fix flow types

Fix

Fix

Wtf?

Fix path

Fix

Fix bundles...

Fix CI tests, by adding to experimental build

Attempt #2 at fixing CI

Revert

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,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[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;