ReactDOM.useEvent: enable on internal www and add inspection test (#1…

…8395)
facebook · Mar 26, 2020 · e0ab1a4 · e0ab1a4
1 parent 6cceaeb
commit e0ab1a4
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 5 deletions.
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
@@ -11,14 +11,17 @@
 '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');
   });
 
@@ -47,4 +50,44 @@ describe('ReactHooksInspection', () => {
       },
     ]);
   });
+
+  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>;
+    }
+    let 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: [],
+      },
+    ]);
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1348,6 +1348,10 @@ export function listenToEventResponderEventTypes(
       const targetEventType = isPassive
         ? eventType
         : eventType.substring(0, eventType.length - 7);
+      // We don't listen to this as we actually emulate it in the host config
+      if (targetEventType === 'beforeblur') {
+        continue;
+      }
       if (!listenerMap.has(eventKey)) {
         if (isPassive) {
           const activeKey = targetEventType + '_active';

diff --git a/packages/react-dom/src/events/DOMModernPluginEventSystem.js b/packages/react-dom/src/events/DOMModernPluginEventSystem.js
@@ -327,11 +327,11 @@ export function isManagedDOMElement(
 export function isValidEventTarget(
   target: EventTarget | ReactScopeMethods,
 ): boolean {
-  return typeof (target: any).addEventListener === 'function';
+  return typeof (target: Object).addEventListener === 'function';
 }
 
 export function isReactScope(target: EventTarget | ReactScopeMethods): boolean {
-  return typeof (target: any).getChildContextValues === 'function';
+  return typeof (target: Object).getChildContextValues === 'function';
 }
 
 export function dispatchEventForPluginEventSystem(

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -29,7 +29,7 @@ export const disableInputAttributeSyncing = false;
 export const enableDeprecatedFlareAPI = true;
 export const enableFundamentalAPI = false;
 export const enableScopeAPI = true;
-export const enableUseEventAPI = false;
+export const enableUseEventAPI = true;
 export const warnAboutUnmockedScheduler = true;
 export const flushSuspenseFallbacksInTests = true;
 export const enableSuspenseCallback = true;

diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -29,7 +29,7 @@ export const enableSchedulerDebugging = false;
 export const enableDeprecatedFlareAPI = true;
 export const enableFundamentalAPI = false;
 export const enableScopeAPI = true;
-export const enableUseEventAPI = false;
+export const enableUseEventAPI = true;
 export const warnAboutUnmockedScheduler = true;
 export const flushSuspenseFallbacksInTests = true;
 export const enableSuspenseCallback = true;

diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -88,7 +88,7 @@ export const enableFundamentalAPI = false;
 
 export const enableScopeAPI = true;
 
-export const enableUseEventAPI = false;
+export const enableUseEventAPI = true;
 
 export const warnAboutUnmockedScheduler = true;