From e0ab1a429d178d86e13f073f8451d24033bc1838 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 26 Mar 2020 17:13:05 +0000
Subject: [PATCH] ReactDOM.useEvent: enable on internal www and add inspection
 test (#18395)

---
 .../ReactHooksInspection-test.internal.js     | 43 +++++++++++++++++++
 .../react-dom/src/client/ReactDOMComponent.js |  4 ++
 .../src/events/DOMModernPluginEventSystem.js  |  4 +-
 .../ReactFeatureFlags.test-renderer.www.js    |  2 +-
 .../forks/ReactFeatureFlags.testing.www.js    |  2 +-
 .../shared/forks/ReactFeatureFlags.www.js     |  2 +-
 6 files changed, 52 insertions(+), 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
index d075b7097de2a..b8617a76e9163 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js
@@ -11,6 +11,7 @@
 'use strict';
 
 let React;
+let ReactDOM;
 let ReactDebugTools;
 
 describe('ReactHooksInspection', () => {
@@ -18,7 +19,9 @@ describe('ReactHooksInspection', () => {
     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
index f841cbabb5580..e8a0396e24a33 100644
--- 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
index da24fc82b7b0e..d86d9aa04ac14 100644
--- 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
index 79332c5daba24..6734118d0a770 100644
--- 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
index 0528120f580e6..afdacac78719e 100644
--- 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
index 3372d8bbd01af..a2da48dd5f337 100644
--- 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;