{"body":"","files":[{"path":"packages\/react-art\/src\/ReactARTHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMEventHandle.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\/shared\/ReactDOMTypes.js","status":"M"},{"path":"packages\/react-interactions\/events\/src\/dom\/create-event-handle\/useEvent.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js","status":"M"},{"path":"packages\/react-noop-renderer\/src\/createReactNoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHostConfigWithNoScopes.js","status":"M"},{"path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js","status":"M"},{"path":"scripts\/error-codes\/codes.json","status":"M"}],"commit":{"authoredAt":"2020-07-07T13:05:06+01:00","authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","shortRevision":"4eb9b1d2b4","revision":"4eb9b1d2b4439853016a28091737cfdaa581b5db","subject":"Refactor createEventHandle signature (#19174)"},"patch":"diff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex fed5cf3cee..3362a3fd85 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -469,10 +469,6 @@ export function getInstanceFromNode(node) {\n throw new Error('Not yet implemented.');\n }\n \n-export function removeInstanceEventHandles(instance) {\n- \/\/ noop\n-}\n-\n export function isOpaqueHydratingObject(value: mixed): boolean {\n throw new Error('Not yet implemented');\n }\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\nindex 64c76718e0..1ce1a760cc 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n@@ -47,6 +47,8 @@ type EventHandleOptions = {|\n priority?: EventPriority,\n |};\n \n+const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;\n+\n function getNearestRootOrPortalContainer(node: Fiber): null | Element {\n while (node !== null) {\n const tag = node.tag;\n@@ -72,12 +74,10 @@ function createEventHandleListener(\n type: DOMTopLevelEventType,\n capture: boolean,\n callback: (SyntheticEvent) => void,\n- destroy: (target: EventTarget | ReactScopeInstance) => void,\n ): ReactDOMEventHandleListener {\n return {\n callback,\n capture,\n- destroy,\n type,\n };\n }\n@@ -111,6 +111,65 @@ function registerEventOnNearestTargetContainer(\n );\n }\n \n+function registerReactDOMEvent(\n+ target: EventTarget | ReactScopeInstance,\n+ topLevelType: DOMTopLevelEventType,\n+ passive: boolean | void,\n+ capture: boolean,\n+ priority: EventPriority | void,\n+): void {\n+ \/\/ Check if the target is a DOM element.\n+ if ((target: any).nodeType === ELEMENT_NODE) {\n+ const targetElement = ((target: any): Element);\n+ \/\/ Check if the DOM element is managed by React.\n+ const targetFiber = getClosestInstanceFromNode(targetElement);\n+ if (targetFiber === null) {\n+ invariant(\n+ false,\n+ 'ReactDOM.createEventHandle: setListener called on an element ' +\n+ 'target that is not managed by React. Ensure React rendered the DOM element.',\n+ );\n+ }\n+ registerEventOnNearestTargetContainer(\n+ targetFiber,\n+ topLevelType,\n+ passive,\n+ priority,\n+ );\n+ } else if (enableScopeAPI && isReactScope(target)) {\n+ const scopeTarget = ((target: any): ReactScopeInstance);\n+ const targetFiber = getFiberFromScopeInstance(scopeTarget);\n+ if (targetFiber === null) {\n+ \/\/ Scope is unmounted, do not proceed.\n+ return;\n+ }\n+ registerEventOnNearestTargetContainer(\n+ targetFiber,\n+ topLevelType,\n+ passive,\n+ priority,\n+ );\n+ } else if (isValidEventTarget(target)) {\n+ const eventTarget = ((target: any): EventTarget);\n+ const listenerMap = getEventListenerMap(eventTarget);\n+ listenToTopLevelEvent(\n+ topLevelType,\n+ eventTarget,\n+ listenerMap,\n+ PLUGIN_EVENT_SYSTEM | IS_TARGET_PHASE_ONLY,\n+ capture,\n+ passive,\n+ priority,\n+ );\n+ } else {\n+ invariant(\n+ false,\n+ 'ReactDOM.createEventHandle: setter called on an invalid ' +\n+ 'target. Provide a valid EventTarget or an element managed by React.',\n+ );\n+ }\n+}\n+\n export function createEventHandle(\n type: string,\n options?: EventHandleOptions,\n@@ -140,110 +199,39 @@ export function createEventHandle(\n priority = getEventPriorityForListenerSystem(topLevelType);\n }\n \n- const listeners = new Map();\n-\n- const destroy = (target: EventTarget | ReactScopeInstance): void => {\n- const listener = listeners.get(target);\n- if (listener !== undefined) {\n- listeners.delete(target);\n- const targetListeners = getEventHandlerListeners(target);\n- if (targetListeners !== null) {\n- targetListeners.delete(listener);\n- }\n+ const registeredReactDOMEvents = new PossiblyWeakSet();\n+\n+ return (\n+ target: EventTarget | ReactScopeInstance,\n+ callback: (SyntheticEvent) => void,\n+ ) => {\n+ invariant(\n+ typeof callback === 'function',\n+ 'ReactDOM.createEventHandle: setter called with an invalid ' +\n+ 'callback. The callback must be a function.',\n+ );\n+ if (!registeredReactDOMEvents.has(target)) {\n+ registeredReactDOMEvents.add(target);\n+ registerReactDOMEvent(target, topLevelType, passive, capture, priority);\n+ \/\/ Add the event to our known event types list.\n+ addEventTypeToDispatchConfig(topLevelType);\n }\n- };\n-\n- const clear = (): void => {\n- const eventTargetsArr = Array.from(listeners.keys());\n- for (let i = 0; i < eventTargetsArr.length; i++) {\n- destroy(eventTargetsArr[i]);\n+ const listener = createEventHandleListener(\n+ topLevelType,\n+ capture,\n+ callback,\n+ );\n+ let targetListeners = getEventHandlerListeners(target);\n+ if (targetListeners === null) {\n+ targetListeners = new Set();\n+ setEventHandlerListeners(target, targetListeners);\n }\n- };\n-\n- return {\n- setListener(\n- target: EventTarget | ReactScopeInstance,\n- callback: null | ((SyntheticEvent) => void),\n- ): void {\n- \/\/ Check if the target is a DOM element.\n- if ((target: any).nodeType === ELEMENT_NODE) {\n- const targetElement = ((target: any): Element);\n- \/\/ Check if the DOM element is managed by React.\n- const targetFiber = getClosestInstanceFromNode(targetElement);\n- if (targetFiber === null) {\n- invariant(\n- false,\n- 'ReactDOM.createEventHandle: setListener called on an element ' +\n- 'target that is not managed by React. Ensure React rendered the DOM element.',\n- );\n- }\n- registerEventOnNearestTargetContainer(\n- targetFiber,\n- topLevelType,\n- passive,\n- priority,\n- );\n- } else if (enableScopeAPI && isReactScope(target)) {\n- const scopeTarget = ((target: any): ReactScopeInstance);\n- const targetFiber = getFiberFromScopeInstance(scopeTarget);\n- if (targetFiber === null) {\n- \/\/ Scope is unmounted, do not proceed.\n- return;\n- }\n- registerEventOnNearestTargetContainer(\n- targetFiber,\n- topLevelType,\n- passive,\n- priority,\n- );\n- } else if (isValidEventTarget(target)) {\n- const eventTarget = ((target: any): EventTarget);\n- const listenerMap = getEventListenerMap(eventTarget);\n- listenToTopLevelEvent(\n- topLevelType,\n- eventTarget,\n- listenerMap,\n- PLUGIN_EVENT_SYSTEM | IS_TARGET_PHASE_ONLY,\n- capture,\n- passive,\n- priority,\n- );\n- } else {\n- invariant(\n- false,\n- 'ReactDOM.createEventHandle: setListener called on an invalid ' +\n- 'target. Provide a valid EventTarget or an element managed by React.',\n- );\n- }\n- let listener = listeners.get(target);\n- if (listener === undefined) {\n- if (callback === null) {\n- return;\n- }\n- listener = createEventHandleListener(\n- topLevelType,\n- capture,\n- callback,\n- destroy,\n- );\n- listeners.set(target, listener);\n-\n- let targetListeners = getEventHandlerListeners(target);\n- if (targetListeners === null) {\n- targetListeners = new Set();\n- setEventHandlerListeners(target, targetListeners);\n- }\n- targetListeners.add(listener);\n- \/\/ Finally, add the event to our known event types list.\n- addEventTypeToDispatchConfig(topLevelType);\n- } else if (callback !== null) {\n- listener.callback = callback;\n- } else {\n- \/\/ Remove listener\n- destroy(target);\n- }\n- },\n- clear,\n+ targetListeners.add(listener);\n+ return () => {\n+ ((targetListeners: any): Set).delete(\n+ listener,\n+ );\n+ };\n };\n }\n return (null: any);\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex f794a3ded8..a06abe7614 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -80,10 +80,7 @@ import {\n } from 'shared\/ReactFeatureFlags';\n import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '..\/events\/DOMTopLevelEventTypes';\n-import {\n- listenToReactPropEvent,\n- clearEventHandleListenersForTarget,\n-} from '..\/events\/DOMModernPluginEventSystem';\n+import {listenToReactPropEvent} from '..\/events\/DOMModernPluginEventSystem';\n \n export type Type = string;\n export type Props = {\n@@ -534,14 +531,6 @@ function dispatchAfterDetachedBlur(target: HTMLElement): void {\n }\n }\n \n-export function removeInstanceEventHandles(\n- instance: Instance | TextInstance | SuspenseInstance,\n-) {\n- if (enableCreateEventHandleAPI) {\n- clearEventHandleListenersForTarget(instance);\n- }\n-}\n-\n export function removeChild(\n parentInstance: Instance,\n child: Instance | TextInstance | SuspenseInstance,\n@@ -1134,14 +1123,6 @@ export function prepareScopeUpdate(\n }\n }\n \n-export function removeScopeEventHandles(\n- scopeInstance: ReactScopeInstance,\n-): void {\n- if (enableScopeAPI && enableCreateEventHandleAPI) {\n- clearEventHandleListenersForTarget(scopeInstance);\n- }\n-}\n-\n export function getInstanceFromScope(\n scopeInstance: ReactScopeInstance,\n ): null | Object {\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex f1d95fe5a2..ccfdf65469 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -21,7 +21,7 @@ import type {\n ElementListenerMap,\n ElementListenerMapEntry,\n } from '..\/client\/ReactDOMComponentTree';\n-import type {EventPriority, ReactScopeInstance} from 'shared\/ReactTypes';\n+import type {EventPriority} from 'shared\/ReactTypes';\n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n \n import {registrationNameDependencies} from '.\/EventRegistry';\n@@ -954,24 +954,6 @@ export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {\n }\n }\n \n-export function clearEventHandleListenersForTarget(\n- target: EventTarget | ReactScopeInstance,\n-): void {\n- \/\/ It's unfortunate that we have to do this cleanup, but\n- \/\/ it's necessary otherwise we will leak the host instances\n- \/\/ on the createEventHandle API \"listeners\" Map. We call destroy\n- \/\/ on each listener to ensure we properly remove the instance\n- \/\/ from the listeners Map. Note: we have this Map so that we\n- \/\/ can track listeners for the handle.clear() API call.\n- const listeners = getEventHandlerListeners(target);\n- if (listeners !== null) {\n- const listenersArr = Array.from(listeners);\n- for (let i = 0; i < listenersArr.length; i++) {\n- listenersArr[i].destroy(target);\n- }\n- }\n-}\n-\n export function getListenerMapKey(\n topLevelType: DOMTopLevelEventType,\n capture: boolean,\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 9e5b09e8b0..195d6df3e5 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@@ -1208,13 +1208,13 @@ describe('DOMModernPluginEventSystem', () => {\n \/\/ @gate experimental\n it('can render correctly with the ReactDOMServer', () => {\n const clickEvent = jest.fn();\n- const click = ReactDOM.unstable_createEventHandle('click');\n+ const setClick = ReactDOM.unstable_createEventHandle('click');\n \n function Test() {\n const divRef = React.useRef(null);\n \n React.useEffect(() => {\n- click.setListener(divRef.current, clickEvent);\n+ return setClick(divRef.current, clickEvent);\n });\n \n return

Hello world<\/div>;\n@@ -1227,11 +1227,11 @@ describe('DOMModernPluginEventSystem', () => {\n it('can render correctly with the ReactDOMServer hydration', () => {\n const clickEvent = jest.fn();\n const spanRef = React.createRef();\n- const click = ReactDOM.unstable_createEventHandle('click');\n+ const setClick = ReactDOM.unstable_createEventHandle('click');\n \n function Test() {\n React.useEffect(() => {\n- click.setListener(spanRef.current, clickEvent);\n+ return setClick(spanRef.current, clickEvent);\n });\n \n return (\n@@ -1264,11 +1264,11 @@ describe('DOMModernPluginEventSystem', () => {\n });\n const divRef = React.createRef();\n const buttonRef = React.createRef();\n- const click = ReactDOM.unstable_createEventHandle('click');\n+ const setClick = ReactDOM.unstable_createEventHandle('click');\n \n function Test() {\n React.useEffect(() => {\n- click.setListener(buttonRef.current, clickEvent);\n+ return setClick(buttonRef.current, clickEvent);\n });\n \n return (\n@@ -1327,11 +1327,11 @@ describe('DOMModernPluginEventSystem', () => {\n },\n ]);\n \n- const click2 = ReactDOM.unstable_createEventHandle('click');\n+ const setClick2 = ReactDOM.unstable_createEventHandle('click');\n \n function Test2({clickEvent2}) {\n React.useEffect(() => {\n- click2.setListener(buttonRef.current, clickEvent2);\n+ return setClick2(buttonRef.current, clickEvent2);\n });\n \n return (\n@@ -1364,18 +1364,16 @@ describe('DOMModernPluginEventSystem', () => {\n const clickEvent = jest.fn();\n const divRef = React.createRef();\n const buttonRef = React.createRef();\n- const click = ReactDOM.unstable_createEventHandle('click');\n+ const setClick = ReactDOM.unstable_createEventHandle('click');\n \n function Test({off}) {\n React.useEffect(() => {\n- click.setListener(buttonRef.current, clickEvent);\n- });\n-\n- React.useEffect(() => {\n+ const clear = setClick(buttonRef.current, clickEvent);\n if (off) {\n- click.setListener(buttonRef.current, null);\n+ clear();\n }\n- }, [off]);\n+ return clear;\n+ });\n \n return (\n

dillon1000/react

Files changed