[Flare] Adds useListener implementation to ReactDebugHooks (#16205)

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

@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {
+  ReactContext,
+  ReactProviderType,
+  ReactEventResponder,
+} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactFiber';
 import type {Hook} from 'react-reconciler/src/ReactFiberHooks';
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
@@ -21,6 +25,8 @@ import {
   ForwardRef,
 } from 'shared/ReactWorkTags';
 
+const emptyObject = {};
+
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
 
 // Used to track hooks called during a render
@@ -215,8 +221,17 @@ function useMemo<T>(
   return value;
 }
 
-function useListener() {
-  throw new Error('TODO: not yet implemented');
+function useListener(
+  responder: ReactEventResponder<any, any>,
+  hookProps: ?Object,
+): void {
+  const listenerProps = hookProps || emptyObject;
+  // Don't put the actual event responder object in, just its displayName
+  const value = {
+    responder: responder.displayName || 'EventResponder',
+    props: listenerProps,
+  };
+  hookLog.push({primitive: 'Listener', stackError: new Error(), value});
 }
 
 const Dispatcher: DispatcherType = {

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactDebugTools;
+
+describe('ReactHooksInspection', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableFlareAPI = true;
+    React = require('react');
+    ReactDebugTools = require('react-debug-tools');
+  });
+
+  it('should inspect a simple useListener hook', () => {
+    const TestResponder = React.unstable_createResponder('TestResponder', {});
+
+    function Foo(props) {
+      React.unstable_useListener(TestResponder, {preventDefault: false});
+      return <div responders={<TestResponder />}>Hello world</div>;
+    }
+    let tree = ReactDebugTools.inspectHooks(Foo, {});
+    expect(tree).toEqual([
+      {
+        isStateEditable: false,
+        id: 0,
+        name: 'Listener',
+        value: {props: {preventDefault: false}, responder: 'TestResponder'},
+        subHooks: [],
+      },
+    ]);
+  });
+});