{"parents":["0f334553c9558a56037b481fedc9b9fcad3643e7"],"files":[{"path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js","status":"M"},{"path":"packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/accumulateTwoPhaseListeners.js","status":"M"},{"path":"packages\/react-dom\/src\/shared\/ReactDOMTypes.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHooks.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.testing.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"}],"commit":{"revision":"dc3c6c9565ba1710c89c2072b6d809cee8abd40c","shortRevision":"dc3c6c9565","authoredAt":"2020-04-01T12:45:26+01:00","authorName":"Dominic Gannaway","subject":"ReactDOM.useEvent: revert and add guard for null stateNode (#18441)","authorEmail":"trueadm@users.noreply.github.com"},"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 175b51485d..a338dd0526 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -15,6 +15,7 @@ import type {\n ReactProviderType,\n ReactEventResponder,\n ReactEventResponderListener,\n+ ReactScopeMethods,\n } from 'shared\/ReactTypes';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import type {Hook, TimeoutConfig} from 'react-reconciler\/src\/ReactFiberHooks';\n@@ -44,7 +45,10 @@ type HookLogEntry = {\n \n type ReactDebugListenerMap = {|\n clear: () => void,\n- setListener: (target: EventTarget, callback: ?(Event) => void) => void,\n+ setListener: (\n+ target: EventTarget | ReactScopeMethods,\n+ callback: ?(Event) => void,\n+ ) => void,\n |};\n \n let hookLog: Array = [];\ndiff --git a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.internal.js b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.internal.js\nindex d075b7097d..b8617a76e9 100644\n--- a\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.internal.js\n+++ b\/packages\/react-debug-tools\/src\/__tests__\/ReactHooksInspection-test.internal.js\n@@ -11,6 +11,7 @@\n 'use strict';\n \n let React;\n+let ReactDOM;\n let ReactDebugTools;\n \n describe('ReactHooksInspection', () => {\n@@ -18,7 +19,9 @@ describe('ReactHooksInspection', () => {\n jest.resetModules();\n const ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.enableDeprecatedFlareAPI = true;\n+ ReactFeatureFlags.enableUseEventAPI = true;\n React = require('react');\n+ ReactDOM = require('react-dom');\n ReactDebugTools = require('react-debug-tools');\n });\n \n@@ -47,4 +50,44 @@ describe('ReactHooksInspection', () => {\n },\n ]);\n });\n+\n+ it('should inspect a simple ReactDOM.useEvent hook', () => {\n+ let clickHandle;\n+ let ref;\n+\n+ const effect = () => {\n+ clickHandle.setListener(ref.current, () => {});\n+ };\n+\n+ function Foo(props) {\n+ ref = React.useRef(null);\n+ clickHandle = ReactDOM.unstable_useEvent('click');\n+ React.useEffect(effect);\n+ return

Hello world<\/div>;\n+ }\n+ let tree = ReactDebugTools.inspectHooks(Foo, {});\n+ expect(tree).toEqual([\n+ {\n+ isStateEditable: false,\n+ id: 0,\n+ name: 'Ref',\n+ subHooks: [],\n+ value: null,\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 1,\n+ name: 'Event',\n+ value: {capture: false, passive: undefined, priority: 0, type: 'click'},\n+ subHooks: [],\n+ },\n+ {\n+ isStateEditable: false,\n+ id: 2,\n+ name: 'Effect',\n+ value: effect,\n+ subHooks: [],\n+ },\n+ ]);\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex f841cbabb5..e8a0396e24 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -1348,6 +1348,10 @@ export function listenToEventResponderEventTypes(\n const targetEventType = isPassive\n ? eventType\n : eventType.substring(0, eventType.length - 7);\n+ \/\/ We don't listen to this as we actually emulate it in the host config\n+ if (targetEventType === 'beforeblur') {\n+ continue;\n+ }\n if (!listenerMap.has(eventKey)) {\n if (isPassive) {\n const activeKey = targetEventType + '_active';\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 17e32e5211..67904a44d5 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -9,6 +9,15 @@\n \n import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n import type {RootType} from '.\/ReactDOMRoot';\n+import type {\n+ ReactDOMEventResponder,\n+ ReactDOMEventResponderInstance,\n+ ReactDOMFundamentalComponentInstance,\n+ ReactDOMListener,\n+ ReactDOMListenerEvent,\n+ ReactDOMListenerMap,\n+} from '..\/shared\/ReactDOMTypes';\n+import type {ReactScopeMethods} from 'shared\/ReactTypes';\n \n import {\n precacheFiberNode,\n@@ -49,14 +58,6 @@ import {\n } from '..\/shared\/HTMLNodeType';\n import dangerousStyleValue from '..\/shared\/dangerousStyleValue';\n \n-import type {\n- ReactDOMEventResponder,\n- ReactDOMEventResponderInstance,\n- ReactDOMFundamentalComponentInstance,\n- ReactDOMListener,\n- ReactDOMListenerEvent,\n- ReactDOMListenerMap,\n-} from '..\/shared\/ReactDOMTypes';\n import {\n mountEventResponder,\n unmountEventResponder,\n@@ -69,6 +70,7 @@ import {\n enableDeprecatedFlareAPI,\n enableFundamentalAPI,\n enableUseEventAPI,\n+ enableScopeAPI,\n } from 'shared\/ReactFeatureFlags';\n import {HostComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import {\n@@ -79,10 +81,13 @@ import {\n isManagedDOMElement,\n isValidEventTarget,\n listenToTopLevelEvent,\n+ attachListenerToManagedDOMElement,\n detachListenerFromManagedDOMElement,\n- attachListenerFromManagedDOMElement,\n- detachTargetEventListener,\n attachTargetEventListener,\n+ detachTargetEventListener,\n+ isReactScope,\n+ attachListenerToReactScope,\n+ detachListenerFromReactScope,\n } from '..\/events\/DOMModernPluginEventSystem';\n import {getListenerMapForElement} from '..\/events\/DOMEventListenerMap';\n import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '..\/events\/DOMTopLevelEventTypes';\n@@ -1160,7 +1165,9 @@ export function mountEventListener(listener: ReactDOMListener): void {\n if (enableUseEventAPI) {\n const {target} = listener;\n if (isManagedDOMElement(target)) {\n- attachListenerFromManagedDOMElement(listener);\n+ attachListenerToManagedDOMElement(listener);\n+ } else if (enableScopeAPI && isReactScope(target)) {\n+ attachListenerToReactScope(listener);\n } else {\n attachTargetEventListener(listener);\n }\n@@ -1172,6 +1179,8 @@ export function unmountEventListener(listener: ReactDOMListener): void {\n const {target} = listener;\n if (isManagedDOMElement(target)) {\n detachListenerFromManagedDOMElement(listener);\n+ } else if (enableScopeAPI && isReactScope(target)) {\n+ detachListenerFromReactScope(listener);\n } else {\n detachTargetEventListener(listener);\n }\n@@ -1179,13 +1188,15 @@ export function unmountEventListener(listener: ReactDOMListener): void {\n }\n \n export function validateEventListenerTarget(\n- target: EventTarget,\n+ target: EventTarget | ReactScopeMethods,\n listener: ?(Event) => void,\n ): boolean {\n if (enableUseEventAPI) {\n if (\n target != null &&\n- (isManagedDOMElement(target) || isValidEventTarget(target))\n+ (isManagedDOMElement(target) ||\n+ isValidEventTarget(target) ||\n+ isReactScope(target))\n ) {\n if (listener == null || typeof listener === 'function') {\n return true;\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex e550cdb7a3..d86d9aa04a 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -14,7 +14,7 @@ import type {\n ElementListenerMapEntry,\n } from '..\/events\/DOMEventListenerMap';\n import type {EventSystemFlags} from 'legacy-events\/EventSystemFlags';\n-import type {EventPriority} from 'shared\/ReactTypes';\n+import type {EventPriority, ReactScopeMethods} from 'shared\/ReactTypes';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import type {PluginModule} from 'legacy-events\/PluginModuleType';\n import type {\n@@ -142,8 +142,11 @@ const emptyDispatchConfigForCustomEvents: CustomDispatchConfig = {\n \n const isArray = Array.isArray;\n \n-\/\/ $FlowFixMe: Flow struggles with this pattern\n-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;\n+\/\/ TODO: we should remove the FlowFixMes and the casting to figure out how to make\n+\/\/ these patterns work properly.\n+\/\/ $FlowFixMe: Flow struggles with this pattern, so we also have to cast it.\n+const PossiblyWeakMap = ((typeof WeakMap === 'function' ? WeakMap : Map): any);\n+\n \/\/ $FlowFixMe: Flow cannot handle polymorphic WeakMaps\n export const eventTargetEventListenerStore: WeakMap<\n EventTarget,\n@@ -153,6 +156,15 @@ export const eventTargetEventListenerStore: WeakMap<\n >,\n > = new PossiblyWeakMap();\n \n+\/\/ $FlowFixMe: Flow cannot handle polymorphic WeakMaps\n+export const reactScopeListenerStore: WeakMap<\n+ ReactScopeMethods,\n+ Map<\n+ DOMTopLevelEventType,\n+ {bubbled: Set, captured: Set},\n+ >,\n+> = new PossiblyWeakMap();\n+\n function dispatchEventsForPlugins(\n topLevelType: DOMTopLevelEventType,\n eventSystemFlags: EventSystemFlags,\n@@ -306,12 +318,20 @@ function isMatchingRootContainer(\n );\n }\n \n-export function isManagedDOMElement(target: EventTarget): boolean {\n+export function isManagedDOMElement(\n+ target: EventTarget | ReactScopeMethods,\n+): boolean {\n return getClosestInstanceFromNode(((target: any): Node)) !== null;\n }\n \n-export function isValidEventTarget(target: EventTarget): boolean {\n- return typeof target.addEventListener === 'function';\n+export function isValidEventTarget(\n+ target: EventTarget | ReactScopeMethods,\n+): boolean {\n+ return typeof (target: Object).addEventListener === 'function';\n+}\n+\n+export function isReactScope(target: EventTarget | ReactScopeMethods): boolean {\n+ return typeof (target: Object).getChildContextValues === 'function';\n }\n \n export function dispatchEventForPluginEventSystem(\n@@ -446,18 +466,16 @@ function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {\n }\n }\n \n-export function attachListenerFromManagedDOMElement(\n+export function attachListenerToManagedDOMElement(\n listener: ReactDOMListener,\n ): void {\n const {event, target} = listener;\n const {passive, priority, type} = event;\n- const possibleManagedTarget = ((target: any): Element);\n- let containerEventTarget = target;\n- if (getClosestInstanceFromNode(possibleManagedTarget)) {\n- containerEventTarget = getNearestRootOrPortalContainer(\n- possibleManagedTarget,\n- );\n- }\n+\n+ const managedTargetElement = ((target: any): Element);\n+ const containerEventTarget = getNearestRootOrPortalContainer(\n+ managedTargetElement,\n+ );\n const listenerMap = getListenerMapForElement(containerEventTarget);\n \/\/ Add the event listener to the target container (falling back to\n \/\/ the target if we didn't find one).\n@@ -469,11 +487,11 @@ export function attachListenerFromManagedDOMElement(\n priority,\n );\n \/\/ Get the internal listeners Set from the target instance.\n- let listeners = getListenersFromTarget(target);\n+ let listeners = getListenersFromTarget(managedTargetElement);\n \/\/ If we don't have any listeners, then we need to init them.\n if (listeners === null) {\n listeners = new Set();\n- initListenersSet(target, listeners);\n+ initListenersSet(managedTargetElement, listeners);\n }\n \/\/ Add our listener to the listeners Set.\n listeners.add(listener);\n@@ -485,8 +503,9 @@ export function detachListenerFromManagedDOMElement(\n listener: ReactDOMListener,\n ): void {\n const {target} = listener;\n+ const managedTargetElement = ((target: any): Element);\n \/\/ Get the internal listeners Set from the target instance.\n- const listeners = getListenersFromTarget(target);\n+ const listeners = getListenersFromTarget(managedTargetElement);\n if (listeners !== null) {\n \/\/ Remove out listener from the listeners Set.\n listeners.delete(listener);\n@@ -496,13 +515,21 @@ export function detachListenerFromManagedDOMElement(\n export function attachTargetEventListener(listener: ReactDOMListener): void {\n const {event, target} = listener;\n const {capture, passive, priority, type} = event;\n- const listenerMap = getListenerMapForElement(target);\n+ const eventTarget = ((target: any): EventTarget);\n+ const listenerMap = getListenerMapForElement(eventTarget);\n \/\/ Add the event listener to the TargetEvent object.\n- listenToTopLevelEvent(type, target, listenerMap, passive, priority, capture);\n- let eventTypeMap = eventTargetEventListenerStore.get(target);\n+ listenToTopLevelEvent(\n+ type,\n+ eventTarget,\n+ listenerMap,\n+ passive,\n+ priority,\n+ capture,\n+ );\n+ let eventTypeMap = eventTargetEventListenerStore.get(eventTarget);\n if (eventTypeMap === undefined) {\n eventTypeMap = new Map();\n- eventTargetEventListenerStore.set(target, eventTypeMap);\n+ eventTargetEventListenerStore.set(eventTarget, eventTypeMap);\n }\n \/\/ Get the listeners by the event type\n let listeners = eventTypeMap.get(type);\n@@ -523,7 +550,51 @@ export function attachTargetEventListener(listener: ReactDOMListener): void {\n export function detachTargetEventListener(listener: ReactDOMListener): void {\n const {event, target} = listener;\n const {capture, type} = event;\n- const eventTypeMap = eventTargetEventListenerStore.get(target);\n+ const validEventTarget = ((target: any): EventTarget);\n+ const eventTypeMap = eventTargetEventListenerStore.get(validEventTarget);\n+ if (eventTypeMap !== undefined) {\n+ const listeners = eventTypeMap.get(type);\n+ if (listeners !== undefined) {\n+ \/\/ Remove out listener from the listeners Set.\n+ if (capture) {\n+ listeners.captured.delete(listener);\n+ } else {\n+ listeners.bubbled.delete(listener);\n+ }\n+ }\n+ }\n+}\n+\n+export function attachListenerToReactScope(listener: ReactDOMListener): void {\n+ const {event, target} = listener;\n+ const {capture, type} = event;\n+ const reactScope = ((target: any): ReactScopeMethods);\n+ let eventTypeMap = reactScopeListenerStore.get(reactScope);\n+ if (eventTypeMap === undefined) {\n+ eventTypeMap = new Map();\n+ reactScopeListenerStore.set(reactScope, eventTypeMap);\n+ }\n+ \/\/ Get the listeners by the event type\n+ let listeners = eventTypeMap.get(type);\n+ if (listeners === undefined) {\n+ listeners = {captured: new Set(), bubbled: new Set()};\n+ eventTypeMap.set(type, listeners);\n+ }\n+ \/\/ Add our listener to the listeners Set.\n+ if (capture) {\n+ listeners.captured.add(listener);\n+ } else {\n+ listeners.bubbled.add(listener);\n+ }\n+ \/\/ Finally, add the event to our known event types list.\n+ addEventTypeToDispatchConfig(type);\n+}\n+\n+export function detachListenerFromReactScope(listener: ReactDOMListener): void {\n+ const {event, target} = listener;\n+ const {capture, type} = event;\n+ const reactScope = ((target: any): ReactScopeMethods);\n+ const eventTypeMap = reactScopeListenerStore.get(reactScope);\n if (eventTypeMap !== undefined) {\n const listeners = eventTypeMap.get(type);\n if (listeners !== undefined) {\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js\nindex 0547c66a2a..f676f936a2 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js\n@@ -1317,6 +1317,28 @@ describe('DOMModernPluginEventSystem', () => {\n expect(clickEvent).toBeCalledTimes(0);\n });\n \n+ it('should handle the target being a text node', () => {\n+ const clickEvent = jest.fn();\n+ const buttonRef = React.createRef();\n+\n+ function Test() {\n+ const click = ReactDOM.unstable_useEvent('click');\n+\n+ React.useEffect(() => {\n+ click.setListener(buttonRef.current, clickEvent);\n+ });\n+\n+ return

dillon1000/react

Files changed