Remove ReactDOM.useEvent and associated types+tests (facebook#18689)

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -493,22 +493,6 @@ export function makeServerId(): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
-export function registerEvent(event: any, rootContainerInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function mountEventListener(listener: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function unmountEventListener(listener: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function validateEventListenerTarget(target: any, listener: any) {
-  throw new Error('Not yet implemented.');
-}
-
 export function beforeActiveInstanceBlur() {
   // noop
 }

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

@@ -15,7 +15,6 @@ import type {
   ReactProviderType,
   ReactEventResponder,
   ReactEventResponderListener,
-  ReactScopeMethods,
 } from 'shared/ReactTypes';
 import type {
   Fiber,
@@ -48,14 +47,6 @@ type HookLogEntry = {
   ...
 };
 
-type ReactDebugListenerMap = {|
-  clear: () => void,
-  setListener: (
-    target: EventTarget | ReactScopeMethods,
-    callback: ?(SyntheticEvent<EventTarget>) => void,
-  ) => void,
-|};
-
 let hookLog: Array<HookLogEntry> = [];
 
 // Primitives
@@ -311,16 +302,6 @@ 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
@@ -368,7 +349,6 @@ const Dispatcher: DispatcherType = {
   useTransition,
   useMutableSource,
   useDeferredValue,
-  useEvent,
   useOpaqueIdentifier,
 };
 

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

@@ -11,17 +11,14 @@
 'use strict';
 
 let React;
-let ReactDOM;
 let ReactDebugTools;
 
 describe('ReactHooksInspection', () => {
   beforeEach(() => {
     jest.resetModules();
     const ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableDeprecatedFlareAPI = true;
-    ReactFeatureFlags.enableUseEventAPI = true;
     React = require('react');
-    ReactDOM = require('react-dom');
     ReactDebugTools = require('react-debug-tools');
   });
 
@@ -46,45 +43,4 @@ describe('ReactHooksInspection', () => {
       },
     ]);
   });
-
-  // @gate experimental
-  it('should inspect a simple ReactDOM.useEvent hook', () => {
-    let clickHandle;
-    let ref;
-
-    const effect = () => {
-      clickHandle.setListener(ref.current, () => {});
-    };
-
-    function Foo(props) {
-      ref = React.useRef(null);
-      clickHandle = ReactDOM.unstable_useEvent('click');
-      React.useEffect(effect);
-      return <div ref={ref}>Hello world</div>;
-    }
-    const tree = ReactDebugTools.inspectHooks(Foo, {});
-    expect(tree).toEqual([
-      {
-        isStateEditable: false,
-        id: 0,
-        name: 'Ref',
-        subHooks: [],
-        value: null,
-      },
-      {
-        isStateEditable: false,
-        id: 1,
-        name: 'Event',
-        value: {capture: false, passive: undefined, priority: 0, type: 'click'},
-        subHooks: [],
-      },
-      {
-        isStateEditable: false,
-        id: 2,
-        name: 'Effect',
-        value: effect,
-        subHooks: [],
-      },
-    ]);
-  });
 });

packages/react-dom/index.classic.fb.js

@@ -36,5 +36,4 @@ export {
   unstable_scheduleHydration,
   unstable_renderSubtreeIntoContainer,
   unstable_createPortal,
-  unstable_useEvent,
 } from './src/client/ReactDOM';

packages/react-dom/index.modern.fb.js

@@ -19,5 +19,4 @@ export {
   unstable_flushDiscreteUpdates,
   unstable_flushControlled,
   unstable_scheduleHydration,
-  unstable_useEvent,
 } from './src/client/ReactDOM';

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

@@ -20,7 +20,6 @@ import {
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
 import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
-import {useEvent} from './ReactDOMUseEvent';
 
 import {
   batchedEventUpdates,
@@ -211,8 +210,6 @@ export {
   // Temporary alias since we already shipped React 16 RC with it.
   // TODO: remove in React 17.
   unstable_createPortal,
-  // enableUseEventAPI
-  useEvent as unstable_useEvent,
 };
 
 const foundDevTools = injectIntoDevTools({

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

@@ -15,7 +15,6 @@ import type {
   SuspenseInstance,
   Props,
 } from './ReactDOMHostConfig';
-import type {ReactDOMListener} from '../shared/ReactDOMTypes';
 
 import {
   HostComponent,
@@ -33,7 +32,6 @@ const randomKey = Math.random()
 const internalInstanceKey = '__reactFiber$' + randomKey;
 const internalEventHandlersKey = '__reactEvents$' + randomKey;
 const internalContainerInstanceKey = '__reactContainer$' + randomKey;
-const internalEventListenersKey = '__reactListeners$' + randomKey;
 
 export function precacheFiberNode(
   hostInst: Fiber,
@@ -187,18 +185,3 @@ export function updateFiberProps(
 ): void {
   (node: any)[internalEventHandlersKey] = props;
 }
-
-// This is used for useEvent listeners
-export function getListenersFromTarget(
-  target: EventTarget,
-): null | Set<ReactDOMListener> {
-  return (target: any)[internalEventListenersKey] || null;
-}
-
-// This is used for useEvent listeners
-export function initListenersSet(
-  target: EventTarget,
-  value: Set<ReactDOMListener>,
-): void {
-  (target: any)[internalEventListenersKey] = value;
-}

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

@@ -13,17 +13,12 @@ import type {
   ReactDOMEventResponder,
   ReactDOMEventResponderInstance,
   ReactDOMFundamentalComponentInstance,
-  ReactDOMListener,
-  ReactDOMListenerEvent,
-  ReactDOMListenerMap,
 } from '../shared/ReactDOMTypes';
-import type {ReactScopeMethods} from 'shared/ReactTypes';
 
 import {
   precacheFiberNode,
   updateFiberProps,
   getClosestInstanceFromNode,
-  getListenersFromTarget,
 } from './ReactDOMComponentTree';
 import {
   createElement,
@@ -69,32 +64,9 @@ import {
   enableSuspenseServerRenderer,
   enableDeprecatedFlareAPI,
   enableFundamentalAPI,
-  enableUseEventAPI,
-  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
-import {
-  PLUGIN_EVENT_SYSTEM,
-  USE_EVENT_SYSTEM,
-} from '../events/EventSystemFlags';
-import {
-  isManagedDOMElement,
-  isValidEventTarget,
-  listenToTopLevelEvent,
-  attachListenerToManagedDOMElement,
-  detachListenerFromManagedDOMElement,
-  attachTargetEventListener,
-  detachTargetEventListener,
-  isReactScope,
-  attachListenerToReactScope,
-  detachListenerFromReactScope,
-} from '../events/DOMModernPluginEventSystem';
-import {getListenerMapForElement} from '../events/DOMEventListenerMap';
 import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
 
-export type ReactListenerEvent = ReactDOMListenerEvent;
-export type ReactListenerMap = ReactDOMListenerMap;
-export type ReactListener = ReactDOMListener;
-
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -246,7 +218,7 @@ export function prepareForCommit(containerInfo: Container): Object | null {
   eventsEnabled = ReactBrowserEventEmitterIsEnabled();
   selectionInformation = getSelectionInformation();
   let activeInstance = null;
-  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+  if (enableDeprecatedFlareAPI) {
     const focusedElem = selectionInformation.focusedElem;
     if (focusedElem !== null) {
       activeInstance = getClosestInstanceFromNode(focusedElem);
@@ -257,15 +229,15 @@ export function prepareForCommit(containerInfo: Container): Object | null {
 }
 
 export function beforeActiveInstanceBlur(): void {
-  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+  if (enableDeprecatedFlareAPI) {
     ReactBrowserEventEmitterSetEnabled(true);
     dispatchBeforeDetachedBlur((selectionInformation: any).focusedElem);
     ReactBrowserEventEmitterSetEnabled(false);
   }
 }
 
 export function afterActiveInstanceBlur(): void {
-  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+  if (enableDeprecatedFlareAPI) {
     ReactBrowserEventEmitterSetEnabled(true);
     dispatchAfterDetachedBlur((selectionInformation: any).focusedElem);
     ReactBrowserEventEmitterSetEnabled(false);
@@ -528,7 +500,7 @@ function createEvent(type: TopLevelType): Event {
 }
 
 function dispatchBeforeDetachedBlur(target: HTMLElement): void {
-  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+  if (enableDeprecatedFlareAPI) {
     const event = createEvent(TOP_BEFORE_BLUR);
     // Dispatch "beforeblur" directly on the target,
     // so it gets picked up by the event system and
@@ -538,7 +510,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
 }
 
 function dispatchAfterDetachedBlur(target: HTMLElement): void {
-  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+  if (enableDeprecatedFlareAPI) {
     const event = createEvent(TOP_AFTER_BLUR);
     // So we know what was detached, make the relatedTarget the
     // detached target on the "afterblur" event.
@@ -550,23 +522,8 @@ function dispatchAfterDetachedBlur(target: HTMLElement): void {
 
 export function beforeRemoveInstance(
   instance: Instance | TextInstance | SuspenseInstance,
-): void {
-  if (enableUseEventAPI) {
-    // It's unfortunate that we have to do this cleanup, but
-    // it's necessary otherwise we will leak the host instances
-    // from the useEvent hook instances Map. We call destroy
-    // on each listener to ensure we properly remove the instance
-    // from the instances Map. Note: we have this Map so that we
-    // can properly unmount instances when the function component
-    // that the hook is attached to gets unmounted.
-    const listenersSet = getListenersFromTarget(instance);
-    if (listenersSet !== null) {
-      const listeners = Array.from(listenersSet);
-      for (let i = 0; i < listeners.length; i++) {
-        listeners[i].destroy(instance);
-      }
-    }
-  }
+) {
+  // TODO for ReactDOM.createEventInstance
 }
 
 export function removeChild(
@@ -1141,78 +1098,3 @@ export function makeOpaqueHydratingObject(
     valueOf: attemptToReadValue,
   };
 }
-
-export function registerEvent(
-  event: ReactDOMListenerEvent,
-  rootContainerInstance: Container,
-): void {
-  const {passive, priority, type} = event;
-  const listenerMap = getListenerMapForElement(rootContainerInstance);
-  // Add the event listener to the target container (falling back to
-  // the target if we didn't find one).
-  listenToTopLevelEvent(
-    type,
-    rootContainerInstance,
-    listenerMap,
-    PLUGIN_EVENT_SYSTEM | USE_EVENT_SYSTEM,
-    passive,
-    priority,
-  );
-}
-
-export function mountEventListener(listener: ReactDOMListener): void {
-  if (enableUseEventAPI) {
-    const {target} = listener;
-    if (isManagedDOMElement(target)) {
-      attachListenerToManagedDOMElement(listener);
-    } else if (enableScopeAPI && isReactScope(target)) {
-      attachListenerToReactScope(listener);
-    } else {
-      attachTargetEventListener(listener);
-    }
-  }
-}
-
-export function unmountEventListener(listener: ReactDOMListener): void {
-  if (enableUseEventAPI) {
-    const {target} = listener;
-    if (isManagedDOMElement(target)) {
-      detachListenerFromManagedDOMElement(listener);
-    } else if (enableScopeAPI && isReactScope(target)) {
-      detachListenerFromReactScope(listener);
-    } else {
-      detachTargetEventListener(listener);
-    }
-  }
-}
-
-export function validateEventListenerTarget(
-  target: EventTarget | ReactScopeMethods,
-  listener: ?(SyntheticEvent<EventTarget>) => void,
-): boolean {
-  if (enableUseEventAPI) {
-    if (
-      target != null &&
-      (isManagedDOMElement(target) ||
-        isValidEventTarget(target) ||
-        isReactScope(target))
-    ) {
-      if (listener == null || typeof listener === 'function') {
-        return true;
-      }
-      if (__DEV__) {
-        console.warn(
-          'Event listener method setListener() from useEvent() hook requires the second argument' +
-            ' to be either a valid function callback or null/undefined.',
-        );
-      }
-    }
-    if (__DEV__) {
-      console.warn(
-        'Event listener method setListener() from useEvent() hook requires the first argument to be ' +
-          'a valid DOM EventTarget. If using a ref, ensure the current value is not null.',
-      );
-    }
-  }
-  return false;
-}