{"files":[{"path":"packages\/legacy-events\/EventPluginUtils.js","status":"M"},{"path":"packages\/react-art\/src\/ReactARTHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/SimpleEventPlugin.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-native-renderer\/src\/ReactFabricHostConfig.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHooks.js","status":"M"},{"path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js","status":"M"}],"parents":["297f7588c46dc50f7439cf197d28d7686bd8d45d"],"patch":"diff --git a\/packages\/legacy-events\/EventPluginUtils.js b\/packages\/legacy-events\/EventPluginUtils.js\nindex abba8e9a3d..e9081e3c99 100644\n--- a\/packages\/legacy-events\/EventPluginUtils.js\n+++ b\/packages\/legacy-events\/EventPluginUtils.js\n@@ -79,12 +79,20 @@ export function executeDispatchesInOrder(event) {\n validateEventDispatches(event);\n }\n if (Array.isArray(dispatchListeners)) {\n+ let previousInstance;\n for (let i = 0; i < dispatchListeners.length; i++) {\n- if (event.isPropagationStopped()) {\n+ const instance = dispatchInstances[i];\n+ \/\/ We check if the instance was the same as the last one,\n+ \/\/ if it was, then we're still on the same instance thus\n+ \/\/ propagation should not stop. If we add support for\n+ \/\/ stopImmediatePropagation at some point, then we'll\n+ \/\/ need to handle that case here differently.\n+ if (instance !== previousInstance && event.isPropagationStopped()) {\n break;\n }\n \/\/ Listeners and Instances are two parallel arrays that are always in sync.\n executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);\n+ previousInstance = instance;\n }\n } else if (dispatchListeners) {\n executeDispatch(event, dispatchListeners, dispatchInstances);\ndiff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex 4a6211e709..41f544810f 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -470,6 +470,10 @@ export function beforeRemoveInstance(instance) {\n \/\/ noop\n }\n \n+export function registerEvent(event: any, rootContainerInstance: any) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n export function mountEventListener(listener: any) {\n throw new Error('Not yet implemented.');\n }\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 56eab95607..d3e49e974f 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -7,12 +7,14 @@\n * @flow\n *\/\n \n+import type {DOMTopLevelEventType} from 'legacy-events\/TopLevelEventTypes';\n import type {RootType} from '.\/ReactDOMRoot';\n \n import {\n precacheFiberNode,\n updateFiberProps,\n getClosestInstanceFromNode,\n+ getListenersFromTarget,\n } from '.\/ReactDOMComponentTree';\n import {\n createElement,\n@@ -78,7 +80,9 @@ import {\n detachElementListener,\n isDOMDocument,\n isDOMElement,\n+ listenToTopLevelEvent,\n } from '..\/events\/DOMModernPluginEventSystem';\n+import {getListenerMapForElement} from '..\/events\/DOMEventListenerMap';\n \n export type ReactListenerEvent = ReactDOMListenerEvent;\n export type ReactListenerMap = ReactDOMListenerMap;\n@@ -529,6 +533,22 @@ export function beforeRemoveInstance(\n ) {\n dispatchBeforeDetachedBlur(((instance: any): HTMLElement));\n }\n+ if (enableUseEventAPI) {\n+ \/\/ It's unfortunate that we have to do this cleanup, but\n+ \/\/ it's necessary otherwise we will leak the host instances\n+ \/\/ from the useEvent hook instances Map. We call destroy\n+ \/\/ on each listener to ensure we properly remove the instance\n+ \/\/ from the instances Map. Note: we have this Map so that we\n+ \/\/ can properly unmount instances when the function component\n+ \/\/ that the hook is attached to gets unmounted.\n+ const listenersSet = getListenersFromTarget(instance);\n+ if (listenersSet !== null) {\n+ const listeners = Array.from(listenersSet);\n+ for (let i = 0; i < listeners.length; i++) {\n+ listeners[i].destroy(instance);\n+ }\n+ }\n+ }\n }\n \n export function removeChild(\n@@ -1083,6 +1103,23 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {\n return getClosestInstanceFromNode(node) || null;\n }\n \n+export function registerEvent(\n+ event: ReactDOMListenerEvent,\n+ rootContainerInstance: Container,\n+): void {\n+ const {passive, priority, type} = event;\n+ const listenerMap = getListenerMapForElement(rootContainerInstance);\n+ \/\/ Add the event listener to the target container (falling back to\n+ \/\/ the target if we didn't find one).\n+ listenToTopLevelEvent(\n+ ((type: any): DOMTopLevelEventType),\n+ rootContainerInstance,\n+ listenerMap,\n+ passive,\n+ priority,\n+ );\n+}\n+\n export function mountEventListener(listener: ReactDOMListener): void {\n if (enableUseEventAPI) {\n const {target} = listener;\ndiff --git a\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\nindex bcfdd9fd77..1c9cc0ecb0 100644\n--- a\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\n@@ -191,7 +191,7 @@ const SimpleEventPlugin: PluginModule = {\n nativeEvent,\n nativeEventTarget,\n );\n- accumulateTwoPhaseListeners(event);\n+ accumulateTwoPhaseListeners(event, true);\n return event;\n },\n };\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 4e686ce84f..3df6dbbc92 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@@ -1074,5 +1074,530 @@ describe('DOMModernPluginEventSystem', () => {\n expect(listenerMaps.length).toEqual(2);\n expect(listenerMaps[0]).toEqual(listenerMaps[1]);\n });\n+\n+ it('can render correctly with the ReactDOMServer', () => {\n+ const clickEvent = jest.fn();\n+\n+ function Test() {\n+ const divRef = React.useRef(null);\n+ const click = ReactDOM.unstable_useEvent('click');\n+\n+ React.useEffect(() => {\n+ click.setListener(divRef.current, clickEvent);\n+ });\n+\n+ return

Hello world<\/div>;\n+ }\n+ const output = ReactDOMServer.renderToString();\n+ expect(output).toBe(`

Hello world<\/div>`);\n+ });\n+\n+ it('can render correctly with the ReactDOMServer hydration', () => {\n+ const clickEvent = jest.fn();\n+ const spanRef = React.createRef();\n+\n+ function Test() {\n+ const click = ReactDOM.unstable_useEvent('click');\n+\n+ React.useEffect(() => {\n+ click.setListener(spanRef.current, clickEvent);\n+ });\n+\n+ return (\n+

\n+ Hello world<\/span>\n+ <\/div>\n+ );\n+ }\n+ const output = ReactDOMServer.renderToString();\n+ expect(output).toBe(\n+ `

Hello world<\/span><\/div>`,\n+ );\n+ container.innerHTML = output;\n+ ReactDOM.hydrate(, container);\n+ Scheduler.unstable_flushAll();\n+ dispatchClickEvent(spanRef.current);\n+ expect(clickEvent).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('should correctly work for a basic \"click\" listener', () => {\n+ let log = [];\n+ const clickEvent = jest.fn(event => {\n+ log.push({\n+ eventPhase: event.eventPhase,\n+ type: event.type,\n+ currentTarget: event.currentTarget,\n+ target: event.target,\n+ });\n+ });\n+ const divRef = React.createRef();\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 (\n+

dillon1000/react

Files changed