ReactDOM.useEvent: enable on internal www and add inspection test (#18395)
Dominic Gannaway committed
Mar 26, 2020 at 17:13 UTC
e0ab1a429d178d86e13f073f8451d24033bc1838
6 files changed
+52
-5
packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
+43
@@ -11,6 +11,7 @@
11
'use strict';
12
13
let React;
14
+let ReactDOM;
15
let ReactDebugTools;
16
17
describe('ReactHooksInspection', () => {
@@ -18,7 +19,9 @@ describe('ReactHooksInspection', () => {
19
jest.resetModules();
20
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
21
ReactFeatureFlags.enableDeprecatedFlareAPI = true;
22
+ ReactFeatureFlags.enableUseEventAPI = true;
23
React = require('react');
24
+ ReactDOM = require('react-dom');
25
ReactDebugTools = require('react-debug-tools');
26
});
27
@@ -47,4 +50,44 @@ describe('ReactHooksInspection', () => {
50
},
51
]);
52
});
53
+
54
+ it('should inspect a simple ReactDOM.useEvent hook', () => {
55
+ let clickHandle;
56
+ let ref;
57
+
58
+ const effect = () => {
59
+ clickHandle.setListener(ref.current, () => {});
60
+ };
61
+
62
+ function Foo(props) {
63
+ ref = React.useRef(null);
64
+ clickHandle = ReactDOM.unstable_useEvent('click');
65
+ React.useEffect(effect);
66
+ return <div ref={ref}>Hello world</div>;
67
+ }
68
+ let tree = ReactDebugTools.inspectHooks(Foo, {});
69
+ expect(tree).toEqual([
70
+ {
71
+ isStateEditable: false,
72
+ id: 0,
73
+ name: 'Ref',
74
+ subHooks: [],
75
+ value: null,
76
+ },
77
+ {
78
+ isStateEditable: false,
79
+ id: 1,
80
+ name: 'Event',
81
+ value: {capture: false, passive: undefined, priority: 0, type: 'click'},
82
+ subHooks: [],
83
+ },
84
+ {
85
+ isStateEditable: false,
86
+ id: 2,
87
+ name: 'Effect',
88
+ value: effect,
89
+ subHooks: [],
90
+ },
91
+ ]);
92
+ });
93
});
packages/react-dom/src/client/ReactDOMComponent.js
+4
@@ -1348,6 +1348,10 @@ export function listenToEventResponderEventTypes(
1348
const targetEventType = isPassive
1349
? eventType
1350
: eventType.substring(0, eventType.length - 7);
1351
+ // We don't listen to this as we actually emulate it in the host config
1352
+ if (targetEventType === 'beforeblur') {
1353
+ continue;
1354
+ }
1355
if (!listenerMap.has(eventKey)) {
1356
if (isPassive) {
1357
const activeKey = targetEventType + '_active';
packages/react-dom/src/events/DOMModernPluginEventSystem.js
+2
-2
@@ -327,11 +327,11 @@ export function isManagedDOMElement(
327
export function isValidEventTarget(
328
target: EventTarget | ReactScopeMethods,
329
): boolean {
330
- return typeof (target: any).addEventListener === 'function';
330
+ return typeof (target: Object).addEventListener === 'function';
331
}
332
333
export function isReactScope(target: EventTarget | ReactScopeMethods): boolean {
334
- return typeof (target: any).getChildContextValues === 'function';
334
+ return typeof (target: Object).getChildContextValues === 'function';
335
}
336
337
export function dispatchEventForPluginEventSystem(
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
-1
@@ -29,7 +29,7 @@ export const disableInputAttributeSyncing = false;
29
export const enableDeprecatedFlareAPI = true;
30
export const enableFundamentalAPI = false;
31
export const enableScopeAPI = true;
32
-export const enableUseEventAPI = false;
32
+export const enableUseEventAPI = true;
33
export const warnAboutUnmockedScheduler = true;
34
export const flushSuspenseFallbacksInTests = true;
35
export const enableSuspenseCallback = true;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
-1
@@ -29,7 +29,7 @@ export const enableSchedulerDebugging = false;
29
export const enableDeprecatedFlareAPI = true;
30
export const enableFundamentalAPI = false;
31
export const enableScopeAPI = true;
32
-export const enableUseEventAPI = false;
32
+export const enableUseEventAPI = true;
33
export const warnAboutUnmockedScheduler = true;
34
export const flushSuspenseFallbacksInTests = true;
35
export const enableSuspenseCallback = true;
packages/shared/forks/ReactFeatureFlags.www.js
+1
-1
@@ -88,7 +88,7 @@ export const enableFundamentalAPI = false;
88
89
export const enableScopeAPI = true;
90
91
-export const enableUseEventAPI = false;
91
+export const enableUseEventAPI = true;
92
93
export const warnAboutUnmockedScheduler = true;
94