[Flare] Adds useListener implementation to ReactDebugHooks (#16205)
Dominic Gannaway committed
Jul 25, 2019 at 16:55 UTC
5b08f7b43fed206c66988f852ba36f0f0e7ffa13
2 files changed
+61
-3
packages/react-debug-tools/src/ReactDebugHooks.js
+18
-3
@@ -7,7 +7,11 @@
7
* @flow
8
*/
9
10
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
10
+import type {
11
+ ReactContext,
12
+ ReactProviderType,
13
+ ReactEventResponder,
14
+} from 'shared/ReactTypes';
15
import type {Fiber} from 'react-reconciler/src/ReactFiber';
16
import type {Hook} from 'react-reconciler/src/ReactFiberHooks';
17
import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
@@ -21,6 +25,8 @@ import {
25
ForwardRef,
26
} from 'shared/ReactWorkTags';
27
28
+const emptyObject = {};
29
+
30
type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
31
32
// Used to track hooks called during a render
@@ -215,8 +221,17 @@ function useMemo<T>(
221
return value;
222
}
223
218
-function useListener() {
219
- throw new Error('TODO: not yet implemented');
224
+function useListener(
225
+ responder: ReactEventResponder<any, any>,
226
+ hookProps: ?Object,
227
+): void {
228
+ const listenerProps = hookProps || emptyObject;
229
+ // Don't put the actual event responder object in, just its displayName
230
+ const value = {
231
+ responder: responder.displayName || 'EventResponder',
232
+ props: listenerProps,
233
+ };
234
+ hookLog.push({primitive: 'Listener', stackError: new Error(), value});
235
}
236
237
const Dispatcher: DispatcherType = {
packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
new
+43
@@ -0,0 +1,43 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ * @jest-environment node
9
+ */
10
+
11
+'use strict';
12
+
13
+let React;
14
+let ReactDebugTools;
15
+
16
+describe('ReactHooksInspection', () => {
17
+ beforeEach(() => {
18
+ jest.resetModules();
19
+ const ReactFeatureFlags = require('shared/ReactFeatureFlags');
20
+ ReactFeatureFlags.enableFlareAPI = true;
21
+ React = require('react');
22
+ ReactDebugTools = require('react-debug-tools');
23
+ });
24
+
25
+ it('should inspect a simple useListener hook', () => {
26
+ const TestResponder = React.unstable_createResponder('TestResponder', {});
27
+
28
+ function Foo(props) {
29
+ React.unstable_useListener(TestResponder, {preventDefault: false});
30
+ return <div responders={<TestResponder />}>Hello world</div>;
31
+ }
32
+ let tree = ReactDebugTools.inspectHooks(Foo, {});
33
+ expect(tree).toEqual([
34
+ {
35
+ isStateEditable: false,
36
+ id: 0,
37
+ name: 'Listener',
38
+ value: {props: {preventDefault: false}, responder: 'TestResponder'},
39
+ subHooks: [],
40
+ },
41
+ ]);
42
+ });
43
+});