{"parents":["a4bc8ae4c1db471bb34d908dd890a09d4c774303"],"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js"},{"status":"M","path":"packages\/shared\/ReactFeatureFlags.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.testing.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.testing.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 9f954f4581..b1a88868b3 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -1905,10 +1905,19 @@ describe('ReactDOMServerPartialHydration', () => {\n resolve();\n await promise;\n });\n- expect(clicks).toBe(1);\n-\n- expect(container.textContent).toBe('Hello');\n \n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(clicks).toBe(0);\n+ expect(container.textContent).toBe('Click meHello');\n+ } else {\n+ expect(clicks).toBe(1);\n+ expect(container.textContent).toBe('Hello');\n+ }\n document.body.removeChild(container);\n });\n \n@@ -1991,7 +2000,16 @@ describe('ReactDOMServerPartialHydration', () => {\n await promise;\n });\n \n- expect(onEvent).toHaveBeenCalledTimes(2);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(onEvent).toHaveBeenCalledTimes(0);\n+ } else {\n+ expect(onEvent).toHaveBeenCalledTimes(2);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -2072,7 +2090,17 @@ describe('ReactDOMServerPartialHydration', () => {\n resolve();\n await promise;\n });\n- expect(clicks).toBe(2);\n+\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(clicks).toBe(0);\n+ } else {\n+ expect(clicks).toBe(2);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -2158,7 +2186,16 @@ describe('ReactDOMServerPartialHydration', () => {\n resolve();\n await promise;\n });\n- expect(onEvent).toHaveBeenCalledTimes(2);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(onEvent).toHaveBeenCalledTimes(0);\n+ } else {\n+ expect(onEvent).toHaveBeenCalledTimes(2);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -2231,9 +2268,19 @@ describe('ReactDOMServerPartialHydration', () => {\n await promise;\n });\n \n- expect(clicksOnChild).toBe(1);\n- \/\/ This will be zero due to the stopPropagation.\n- expect(clicksOnParent).toBe(0);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(clicksOnChild).toBe(0);\n+ expect(clicksOnParent).toBe(0);\n+ } else {\n+ expect(clicksOnChild).toBe(1);\n+ \/\/ This will be zero due to the stopPropagation.\n+ expect(clicksOnParent).toBe(0);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -2310,8 +2357,16 @@ describe('ReactDOMServerPartialHydration', () => {\n });\n \n \/\/ We're now full hydrated.\n-\n- expect(clicks).toBe(1);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(clicks).toBe(0);\n+ } else {\n+ expect(clicks).toBe(1);\n+ }\n \n document.body.removeChild(parentContainer);\n });\n@@ -2580,8 +2635,20 @@ describe('ReactDOMServerPartialHydration', () => {\n await promise;\n });\n \n- expect(submits).toBe(1);\n- expect(container.textContent).toBe('Hello');\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ \/\/ discrete event not replayed\n+ expect(submits).toBe(0);\n+ expect(container.textContent).toBe('Click meHello');\n+ } else {\n+ expect(submits).toBe(1);\n+ expect(container.textContent).toBe('Hello');\n+ }\n+\n document.body.removeChild(container);\n });\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js\nindex 76d9b43d07..bb04b46df1 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerSelectiveHydration-test.internal.js\n@@ -14,6 +14,7 @@ import {createEventTarget} from 'dom-event-testing-library';\n let React;\n let ReactDOM;\n let ReactDOMServer;\n+let ReactFeatureFlags;\n let Scheduler;\n let Suspense;\n let act;\n@@ -112,7 +113,7 @@ describe('ReactDOMServerSelectiveHydration', () => {\n beforeEach(() => {\n jest.resetModuleRegistry();\n \n- const ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n ReactFeatureFlags.enableCreateEventHandleAPI = true;\n React = require('react');\n ReactDOM = require('react-dom');\n@@ -266,9 +267,19 @@ describe('ReactDOMServerSelectiveHydration', () => {\n resolve();\n await promise;\n });\n- \/\/ After the click, we should prioritize D and the Click first,\n- \/\/ and only after that render A and C.\n- expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);\n+\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(Scheduler).toHaveYielded(['D', 'A']);\n+ } else {\n+ \/\/ After the click, we should prioritize D and the Click first,\n+ \/\/ and only after that render A and C.\n+ expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -343,7 +354,16 @@ describe('ReactDOMServerSelectiveHydration', () => {\n dispatchClickEvent(spanC);\n dispatchClickEvent(spanD);\n \n- expect(Scheduler).toHaveYielded(['App']);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);\n+ } else {\n+ expect(Scheduler).toHaveYielded(['App']);\n+ }\n \n await act(async () => {\n suspend = false;\n@@ -351,18 +371,29 @@ describe('ReactDOMServerSelectiveHydration', () => {\n await promise;\n });\n \n- \/\/ We should prioritize hydrating A, C and D first since we clicked in\n- \/\/ them. Only after they're done will we hydrate B.\n- expect(Scheduler).toHaveYielded([\n- 'A',\n- 'Clicked A',\n- 'C',\n- 'Clicked C',\n- 'D',\n- 'Clicked D',\n- \/\/ B should render last since it wasn't clicked.\n- 'B',\n- ]);\n+ if (\n+ ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay\n+ ) {\n+ expect(Scheduler).toHaveYielded([\n+ 'A',\n+ 'D',\n+ \/\/ B should render last since it wasn't clicked.\n+ 'B',\n+ ]);\n+ } else {\n+ \/\/ We should prioritize hydrating A, C and D first since we clicked in\n+ \/\/ them. Only after they're done will we hydrate B.\n+ expect(Scheduler).toHaveYielded([\n+ 'A',\n+ 'Clicked A',\n+ 'C',\n+ 'Clicked C',\n+ 'D',\n+ 'Clicked D',\n+ \/\/ B should render last since it wasn't clicked.\n+ 'B',\n+ ]);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -519,7 +550,17 @@ describe('ReactDOMServerSelectiveHydration', () => {\n resolve();\n await promise;\n });\n- expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ \/\/ no replay\n+ expect(Scheduler).toHaveYielded(['D', 'A']);\n+ } else {\n+ expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -599,26 +640,42 @@ describe('ReactDOMServerSelectiveHydration', () => {\n createEventTarget(spanC).virtualclick();\n createEventTarget(spanD).virtualclick();\n \n- expect(Scheduler).toHaveYielded(['App']);\n-\n+ if (\n+ ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay\n+ ) {\n+ expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);\n+ } else {\n+ expect(Scheduler).toHaveYielded(['App']);\n+ }\n await act(async () => {\n suspend = false;\n resolve();\n await promise;\n });\n \n- \/\/ We should prioritize hydrating A, C and D first since we clicked in\n- \/\/ them. Only after they're done will we hydrate B.\n- expect(Scheduler).toHaveYielded([\n- 'A',\n- 'Clicked A',\n- 'C',\n- 'Clicked C',\n- 'D',\n- 'Clicked D',\n- \/\/ B should render last since it wasn't clicked.\n- 'B',\n- ]);\n+ if (\n+ ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay\n+ ) {\n+ expect(Scheduler).toHaveYielded([\n+ 'A',\n+ 'D',\n+ \/\/ B should render last since it wasn't clicked.\n+ 'B',\n+ ]);\n+ } else {\n+ \/\/ We should prioritize hydrating A, C and D first since we clicked in\n+ \/\/ them. Only after they're done will we hydrate B.\n+ expect(Scheduler).toHaveYielded([\n+ 'A',\n+ 'Clicked A',\n+ 'C',\n+ 'Clicked C',\n+ 'D',\n+ 'Clicked D',\n+ \/\/ B should render last since it wasn't clicked.\n+ 'B',\n+ ]);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -707,20 +764,37 @@ describe('ReactDOMServerSelectiveHydration', () => {\n await promise;\n });\n \n- \/\/ We should prioritize hydrating D first because we clicked it.\n- \/\/ Next we should hydrate C since that's the current hover target.\n- \/\/ To simplify implementation details we hydrate both B and C at\n- \/\/ the same time since B was already scheduled.\n- \/\/ This is ok because it will at least not continue for nested\n- \/\/ boundary. See the next test below.\n- expect(Scheduler).toHaveYielded([\n- 'D',\n- 'Clicked D',\n- 'B', \/\/ Ideally this should be later.\n- 'C',\n- 'Hover C',\n- 'A',\n- ]);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ \/\/ We should prioritize hydrating D first because we clicked it.\n+ \/\/ but event isnt replayed\n+ expect(Scheduler).toHaveYielded([\n+ 'D',\n+ 'B', \/\/ Ideally this should be later.\n+ 'C',\n+ 'Hover C',\n+ 'A',\n+ ]);\n+ } else {\n+ \/\/ We should prioritize hydrating D first because we clicked it.\n+ \/\/ Next we should hydrate C since that's the current hover target.\n+ \/\/ To simplify implementation details we hydrate both B and C at\n+ \/\/ the same time since B was already scheduled.\n+ \/\/ This is ok because it will at least not continue for nested\n+ \/\/ boundary. See the next test below.\n+ expect(Scheduler).toHaveYielded([\n+ 'D',\n+ 'Clicked D',\n+ 'B', \/\/ Ideally this should be later.\n+ 'C',\n+ 'Hover C',\n+ 'A',\n+ ]);\n+ }\n \n document.body.removeChild(container);\n });\n@@ -796,16 +870,18 @@ describe('ReactDOMServerSelectiveHydration', () => {\n dispatchMouseHoverEvent(spanB, spanD);\n dispatchMouseHoverEvent(spanC, spanB);\n \n- suspend = false;\n- resolve();\n- await promise;\n+ await act(async () => {\n+ suspend = false;\n+ resolve();\n+ await promise;\n+ });\n \n \/\/ We should prioritize hydrating D first because we clicked it.\n \/\/ Next we should hydrate C since that's the current hover target.\n \/\/ Next it doesn't matter if we hydrate A or B first but as an\n \/\/ implementation detail we're currently hydrating B first since\n \/\/ we at one point hovered over it and we never deprioritized it.\n- expect(Scheduler).toFlushAndYield(['App', 'C', 'Hover C', 'A', 'B', 'D']);\n+ expect(Scheduler).toHaveYielded(['App', 'C', 'Hover C', 'A', 'B', 'D']);\n \n document.body.removeChild(container);\n });\n@@ -970,4 +1046,88 @@ describe('ReactDOMServerSelectiveHydration', () => {\n \n document.body.removeChild(container);\n });\n+\n+ \/\/ @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay\n+ it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {\n+ spyOnDev(console, 'error');\n+ function Child({text}) {\n+ Scheduler.unstable_yieldValue(text);\n+ const ref = React.useRef();\n+ React.useLayoutEffect(() => {\n+ if (!ref.current) {\n+ return;\n+ }\n+ ref.current.onclick = () => {\n+ Scheduler.unstable_yieldValue('Native Click ' + text);\n+ };\n+ }, [text]);\n+ return (\n+ {\n+ Scheduler.unstable_yieldValue('Capture Clicked ' + text);\n+ }}\n+ onClick={e => {\n+ Scheduler.unstable_yieldValue('Clicked ' + text);\n+ }}>\n+ {text}\n+ <\/span>\n+ );\n+ }\n+\n+ function App() {\n+ Scheduler.unstable_yieldValue('App');\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ \n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ }\n+\n+ let finalHTML;\n+ expect(() => {\n+ finalHTML = ReactDOMServer.renderToString();\n+ }).toErrorDev([\n+ 'useLayoutEffect does nothing on the server',\n+ 'useLayoutEffect does nothing on the server',\n+ ]);\n+\n+ expect(Scheduler).toHaveYielded(['App', 'A', 'B']);\n+\n+ const container = document.createElement('div');\n+ \/\/ We need this to be in the document since we'll dispatch events on it.\n+ document.body.appendChild(container);\n+\n+ container.innerHTML = finalHTML;\n+\n+ const span = container.getElementsByTagName('span')[1];\n+\n+ ReactDOM.hydrateRoot(container, );\n+\n+ \/\/ Nothing has been hydrated so far.\n+ expect(Scheduler).toHaveYielded([]);\n+\n+ \/\/ This should synchronously hydrate the root App and the second suspense\n+ \/\/ boundary.\n+ dispatchClickEvent(span);\n+\n+ \/\/ We rendered App, B and then invoked the event without rendering A.\n+ expect(Scheduler).toHaveYielded([\n+ 'App',\n+ 'B',\n+ 'Capture Clicked B',\n+ 'Native Click B',\n+ 'Clicked B',\n+ ]);\n+\n+ \/\/ After continuing the scheduler, we finally hydrate A.\n+ expect(Scheduler).toFlushAndYield(['A']);\n+\n+ document.body.removeChild(container);\n+ });\n });\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex dfe3c2e3c0..6467421d4f 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -11,13 +11,18 @@ import type {AnyNativeEvent} from '..\/events\/PluginModuleType';\n import type {FiberRoot} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {Container, SuspenseInstance} from '..\/client\/ReactDOMHostConfig';\n import type {DOMEventName} from '..\/events\/DOMEventNames';\n-\n+import {\n+ enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ enableSelectiveHydration,\n+} from 'shared\/ReactFeatureFlags';\n import {\n isReplayableDiscreteEvent,\n queueDiscreteEvent,\n hasQueuedDiscreteEvents,\n clearIfContinuousEvent,\n queueIfContinuousEvent,\n+ attemptSynchronousHydration,\n+ isCapturePhaseSynchronouslyHydratableEvent,\n } from '.\/ReactDOMEventReplaying';\n import {\n getNearestMountedFiber,\n@@ -28,7 +33,10 @@ import {HostRoot, SuspenseComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import {type EventSystemFlags, IS_CAPTURE_PHASE} from '.\/EventSystemFlags';\n \n import getEventTarget from '.\/getEventTarget';\n-import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n+import {\n+ getInstanceFromNode,\n+ getClosestInstanceFromNode,\n+} from '..\/client\/ReactDOMComponentTree';\n \n import {dispatchEventForPluginEventSystem} from '.\/DOMPluginEventSystem';\n \n@@ -176,7 +184,7 @@ export function dispatchEvent(\n return;\n }\n \n- const blockedOn = attemptToDispatchEvent(\n+ let blockedOn = attemptToDispatchEvent(\n domEventName,\n eventSystemFlags,\n targetContainer,\n@@ -192,7 +200,10 @@ export function dispatchEvent(\n }\n \n if (allowReplay) {\n- if (isReplayableDiscreteEvent(domEventName)) {\n+ if (\n+ !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&\n+ isReplayableDiscreteEvent(domEventName)\n+ ) {\n \/\/ This this to be replayed later once the target is available.\n queueDiscreteEvent(\n blockedOn,\n@@ -219,6 +230,29 @@ export function dispatchEvent(\n clearIfContinuousEvent(domEventName, nativeEvent);\n }\n \n+ if (\n+ enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&\n+ enableSelectiveHydration &&\n+ isCapturePhaseSynchronouslyHydratableEvent(domEventName)\n+ ) {\n+ while (blockedOn !== null) {\n+ const fiber = getInstanceFromNode(blockedOn);\n+ if (fiber !== null) {\n+ attemptSynchronousHydration(fiber);\n+ }\n+ const nextBlockedOn = attemptToDispatchEvent(\n+ domEventName,\n+ eventSystemFlags,\n+ targetContainer,\n+ nativeEvent,\n+ );\n+ if (nextBlockedOn === blockedOn) {\n+ break;\n+ }\n+ blockedOn = nextBlockedOn;\n+ }\n+ }\n+\n \/\/ This is not replayable so we'll invoke it but without a target,\n \/\/ in case the event system needs to trace it.\n dispatchEventForPluginEventSystem(\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\nindex eab9b4650c..c363721bcd 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n@@ -14,7 +14,10 @@ import type {EventSystemFlags} from '.\/EventSystemFlags';\n import type {FiberRoot} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {EventPriority} from 'react-reconciler\/src\/ReactEventPriorities';\n \n-import {enableSelectiveHydration} from 'shared\/ReactFeatureFlags';\n+import {\n+ enableSelectiveHydration,\n+ enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+} from 'shared\/ReactFeatureFlags';\n import {\n unstable_scheduleCallback as scheduleCallback,\n unstable_NormalPriority as NormalPriority,\n@@ -32,10 +35,14 @@ import {\n import {HostRoot, SuspenseComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import {isHigherEventPriority} from 'react-reconciler\/src\/ReactEventPriorities';\n \n-let attemptSynchronousHydration: (fiber: Object) => void;\n+let _attemptSynchronousHydration: (fiber: Object) => void;\n \n export function setAttemptSynchronousHydration(fn: (fiber: Object) => void) {\n- attemptSynchronousHydration = fn;\n+ _attemptSynchronousHydration = fn;\n+}\n+\n+export function attemptSynchronousHydration(fiber: Object) {\n+ _attemptSynchronousHydration(fiber);\n }\n \n let attemptDiscreteHydration: (fiber: Object) => void;\n@@ -180,6 +187,9 @@ export function queueDiscreteEvent(\n targetContainer: EventTarget,\n nativeEvent: AnyNativeEvent,\n ): void {\n+ if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {\n+ return;\n+ }\n const queuedEvent = createQueuedReplayableEvent(\n blockedOn,\n domEventName,\n@@ -290,6 +300,13 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(\n return existingQueuedEvent;\n }\n \n+export function isCapturePhaseSynchronouslyHydratableEvent(\n+ eventName: DOMEventName,\n+) {\n+ \/\/ TODO: maybe include more events\n+ return isReplayableDiscreteEvent(eventName);\n+}\n+\n export function queueIfContinuousEvent(\n blockedOn: null | Container | SuspenseInstance,\n domEventName: DOMEventName,\n@@ -483,39 +500,41 @@ function attemptReplayContinuousQueuedEventInMap(\n \n function replayUnblockedEvents() {\n hasScheduledReplayAttempt = false;\n- \/\/ First replay discrete events.\n- while (queuedDiscreteEvents.length > 0) {\n- const nextDiscreteEvent = queuedDiscreteEvents[0];\n- if (nextDiscreteEvent.blockedOn !== null) {\n- \/\/ We're still blocked.\n- \/\/ Increase the priority of this boundary to unblock\n- \/\/ the next discrete event.\n- const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);\n- if (fiber !== null) {\n- attemptDiscreteHydration(fiber);\n- }\n- break;\n- }\n- const targetContainers = nextDiscreteEvent.targetContainers;\n- while (targetContainers.length > 0) {\n- const targetContainer = targetContainers[0];\n- const nextBlockedOn = attemptToDispatchEvent(\n- nextDiscreteEvent.domEventName,\n- nextDiscreteEvent.eventSystemFlags,\n- targetContainer,\n- nextDiscreteEvent.nativeEvent,\n- );\n- if (nextBlockedOn !== null) {\n- \/\/ We're still blocked. Try again later.\n- nextDiscreteEvent.blockedOn = nextBlockedOn;\n+ if (!enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {\n+ \/\/ First replay discrete events.\n+ while (queuedDiscreteEvents.length > 0) {\n+ const nextDiscreteEvent = queuedDiscreteEvents[0];\n+ if (nextDiscreteEvent.blockedOn !== null) {\n+ \/\/ We're still blocked.\n+ \/\/ Increase the priority of this boundary to unblock\n+ \/\/ the next discrete event.\n+ const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);\n+ if (fiber !== null) {\n+ attemptDiscreteHydration(fiber);\n+ }\n break;\n }\n- \/\/ This target container was successfully dispatched. Try the next.\n- targetContainers.shift();\n- }\n- if (nextDiscreteEvent.blockedOn === null) {\n- \/\/ We've successfully replayed the first event. Let's try the next one.\n- queuedDiscreteEvents.shift();\n+ const targetContainers = nextDiscreteEvent.targetContainers;\n+ while (targetContainers.length > 0) {\n+ const targetContainer = targetContainers[0];\n+ const nextBlockedOn = attemptToDispatchEvent(\n+ nextDiscreteEvent.domEventName,\n+ nextDiscreteEvent.eventSystemFlags,\n+ targetContainer,\n+ nextDiscreteEvent.nativeEvent,\n+ );\n+ if (nextBlockedOn !== null) {\n+ \/\/ We're still blocked. Try again later.\n+ nextDiscreteEvent.blockedOn = nextBlockedOn;\n+ break;\n+ }\n+ \/\/ This target container was successfully dispatched. Try the next.\n+ targetContainers.shift();\n+ }\n+ if (nextDiscreteEvent.blockedOn === null) {\n+ \/\/ We've successfully replayed the first event. Let's try the next one.\n+ queuedDiscreteEvents.shift();\n+ }\n }\n }\n \/\/ Next replay any continuous events.\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\nindex 4f2df6fffc..1b2bfbb0be 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMPluginEventSystem-test.internal.js\n@@ -649,7 +649,16 @@ describe('DOMPluginEventSystem', () => {\n \n \/\/ We're now full hydrated.\n \n- expect(clicks).toBe(1);\n+ if (\n+ gate(\n+ flags =>\n+ flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ )\n+ ) {\n+ expect(clicks).toBe(0);\n+ } else {\n+ expect(clicks).toBe(1);\n+ }\n \n document.body.removeChild(parentContainer);\n });\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 608db694be..f5d34e2ff6 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -103,6 +103,8 @@ export const warnOnSubscriptionInsideStartTransition = false;\n \n export const enableSuspenseAvoidThisFallback = false;\n \n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+\n export const enableComponentStackLocations = true;\n \n export const enableNewReconciler = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 9c3d45528c..5a1c1ed8d9 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -50,6 +50,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableComponentStackLocations = false;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex bf96cc00e6..3c11070d6e 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableComponentStackLocations = false;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 0d2b226adf..4b0457c219 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex f760425ce0..2c54c1fb77 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -51,6 +51,7 @@ export const enableNewReconciler = false;\n export const deferRenderPhaseUpdateToNextBatch = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableStrictEffects = false;\n export const createRootStrictEffectsByDefault = false;\n export const enableUseRefAccessWarning = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex cb0efcc34b..be60bcfbdd 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\nindex d1cfdbb749..76af047ab6 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\nindex 62a10f475a..6fc6cf3c68 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = !__EXPERIMENTAL__;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\nindex 6400ef0422..ef980529f3 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n@@ -27,6 +27,7 @@ export const enableLazyContextPropagation = __VARIANT__;\n export const enableSyncDefaultUpdates = __VARIANT__;\n export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;\n export const warnOnSubscriptionInsideStartTransition = __VARIANT__;\n+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;\n \n \/\/ Enable this flag to help with concurrent mode debugging.\n \/\/ It logs information to the console about React scheduling, rendering, and commit phases.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex c5dde53578..0f1ce6eb1f 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -32,6 +32,7 @@ export const {\n enableLazyContextPropagation,\n enableSyncDefaultUpdates,\n warnOnSubscriptionInsideStartTransition,\n+ enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n } = dynamicFeatureFlags;\n \n \/\/ On WWW, __EXPERIMENTAL__ is used for a new modern build.\n","commit":{"authorName":"salazarm","revision":"0ecbbe142201ef65830f0b7a19d52c1f77043e86","shortRevision":"0ecbbe1422","authoredAt":"2021-10-04T09:54:33-04:00","subject":"Sync hydrate discrete events in capture phase and dont replay discrete events (#22448)","authorEmail":"salazarm@users.noreply.github.com"},"body":""}

dillon1000/react

Files changed