lint, gating, codes.json

Author: salazarm

packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js

@@ -1240,6 +1240,82 @@ describe('ReactDOMServerSelectiveHydration', () => {
     });
   });
 
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  it('replays event with null target when tree is dismounted', async () => {
+    let suspend = false;
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+      resolve = () => {
+        suspend = false;
+        resolvePromise();
+      };
+    });
+
+    function Child() {
+      if (suspend) {
+        throw promise;
+      }
+      Scheduler.unstable_yieldValue('Child');
+      return (
+        <div
+          onMouseOver={() => {
+            Scheduler.unstable_yieldValue('on mouse over');
+          }}>
+          Child
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <Suspense>
+          <Child />
+        </Suspense>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    suspend = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    const childDiv = container.firstElementChild;
+    dispatchMouseHoverEvent(childDiv);
+
+    // Not hydrated so event is saved for replay and stopPropagation is called
+    expect(Scheduler).toHaveYielded([]);
+
+    resolve();
+    Scheduler.unstable_flushNumberOfYields(1);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    Scheduler.unstable_scheduleCallback(
+      Scheduler.unstable_ImmediatePriority,
+      () => {
+        container.removeChild(childDiv);
+
+        const container2 = document.createElement('div');
+        container2.addEventListener('mouseover', () => {
+          Scheduler.unstable_yieldValue('container2 mouse over');
+        });
+        container2.appendChild(childDiv);
+      },
+    );
+    Scheduler.unstable_flushAllWithoutAsserting();
+
+    // Even though the tree is remove the event is still dispatched with native event handler
+    // on the container firing.
+    expect(Scheduler).toHaveYielded(['container2 mouse over']);
+
+    document.body.removeChild(container);
+  });
+
   it('hydrates the last target path first for continuous events', async () => {
     let suspend = false;
     let resolve;

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -13,6 +13,9 @@ import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
 import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
+  nullTarget,
+  NullTarget,
+  isBlocked,
   isDiscreteEventThatRequiresHydration,
   queueDiscreteEvent,
   hasQueuedDiscreteEvents,
@@ -186,8 +189,8 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
   );
 
   // We can dispatch the event now
-  // Intentional double equals, either null or undefined
-  if (blockedOn == null) {
+  let blockedOnInst = isBlocked(blockedOn);
+  if (!blockedOnInst) {
     clearIfContinuousEvent(domEventName, nativeEvent);
     dispatchEventForPluginEventSystem(
       domEventName,
@@ -221,9 +224,8 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
     eventSystemFlags & IS_CAPTURE_PHASE &&
     isDiscreteEventThatRequiresHydration(domEventName)
   ) {
-    // Intentionally not strict equal. Could be `null` or `undefined`
-    while (blockedOn != null) {
-      const fiber = getInstanceFromNode(blockedOn);
+    while (blockedOnInst) {
+      const fiber = getInstanceFromNode(blockedOnInst);
       if (fiber !== null) {
         attemptSynchronousHydration(fiber);
       }
@@ -237,8 +239,9 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
         break;
       }
       blockedOn = nextBlockedOn;
+      blockedOnInst = isBlocked(blockedOn);
     }
-    if (blockedOn) {
+    if (blockedOnInst) {
       nativeEvent.stopPropagation();
       return;
     }
@@ -301,7 +304,8 @@ function dispatchEventOriginal(
     targetContainer,
     nativeEvent,
   );
-  if (blockedOn == null) {
+  const blockedOnInst = isBlocked(blockedOn);
+  if (!blockedOnInst) {
     dispatchEventForPluginEventSystem(
       domEventName,
       eventSystemFlags,
@@ -359,13 +363,13 @@ function dispatchEventOriginal(
 
 // Returns a SuspenseInstance or Container if it's blocked.
 // Returns null if not blocked and we should use closestInstance
-// Returns undefined if not blocked but we should dispatch without a targetInst
+// Returns nullTarget if not blocked but we should dispatch without a targetInst
 export function findInstanceBlockingEvent(
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
   nativeEvent: AnyNativeEvent,
-): typeof undefined | null | Container | SuspenseInstance {
+): NullTarget | null | Container | SuspenseInstance {
   // TODO: Warn if _enabled is false.
 
   const nativeEventTarget = getEventTarget(nativeEvent);
@@ -380,31 +384,30 @@ export function findInstanceBlockingEvent(
         if (instance !== null) {
           // Queue the event to be replayed later. Abort dispatching since we
           // don't want this event dispatched twice through the event system.
-          // TODO: If this is the first discrete event in the queue. Schedule an increased
-          // priority for this boundary.
           return instance;
         }
         // This shouldn't happen, something went wrong but to avoid blocking
         // the whole system, dispatch the event without a target.
         // TODO: Warn.
-        return undefined;
+        return nullTarget;
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
         if (root.isDehydrated) {
           // If this happens during a replay something went wrong and it might block
           // the whole system.
           return getContainerFromFiber(nearestMounted);
         }
+        return nullTarget;
       } else if (nearestMounted !== targetInst) {
         // If we get an event (ex: img onload) before committing that
         // component's mount, ignore it for now (that is, treat it as if it was an
         // event on a non-React tree). We might also consider queueing events and
         // dispatching them after the mount.
-        return undefined;
+        return nullTarget;
       }
     } else {
       // This tree has been unmounted already. Dispatch without a target.
-      return undefined;
+      return nullTarget;
     }
   }
   // We're not blocked on anything.

packages/react-dom/src/events/ReactDOMEventReplaying.js

@@ -90,8 +90,18 @@ type PointerEvent = Event & {
   ...
 };
 
+declare export class NullTarget {}
+export const nullTarget: NullTarget = ({}: any);
+export function isBlocked(
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
+): Container | SuspenseInstance | void {
+  if (blockedOn !== nullTarget && blockedOn !== null) {
+    return ((blockedOn: any): Container | SuspenseInstance);
+  }
+}
+
 type QueuedReplayableEvent = {|
-  blockedOn: typeof undefined | null | Container | SuspenseInstance,
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
@@ -116,7 +126,7 @@ const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 // We could consider replaying selectionchange and touchmoves too.
 
 type QueuedHydrationTarget = {|
-  blockedOn: typeof undefined | null | Container | SuspenseInstance,
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
   target: Node,
   priority: EventPriority,
 |};
@@ -168,7 +178,7 @@ export function isDiscreteEventThatRequiresHydration(
 }
 
 function createQueuedReplayableEvent(
-  blockedOn: typeof undefined | null | Container | SuspenseInstance,
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -184,7 +194,7 @@ function createQueuedReplayableEvent(
 }
 
 export function queueDiscreteEvent(
-  blockedOn: typeof undefined | null | Container | SuspenseInstance,
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -205,13 +215,15 @@ export function queueDiscreteEvent(
     if (queuedDiscreteEvents.length === 1) {
       // If this was the first discrete event, we might be able to
       // synchronously unblock it so that preventDefault still works.
-      while (queuedEvent.blockedOn != null) {
-        const fiber = getInstanceFromNode(queuedEvent.blockedOn);
+      let blockedOnInst;
+      while ((blockedOnInst = isBlocked(queuedEvent.blockedOn))) {
+        const fiber = getInstanceFromNode(blockedOnInst);
         if (fiber === null) {
           break;
         }
         attemptSynchronousHydration(fiber);
-        if (queuedEvent.blockedOn == null) {
+        blockedOnInst = isBlocked(queuedEvent.blockedOn);
+        if (!blockedOnInst) {
           // We got unblocked by hydration. Let's try again.
           replayUnblockedEvents();
           // If we're reblocked, on an inner boundary, we might need
@@ -262,7 +274,7 @@ export function clearIfContinuousEvent(
 
 function accumulateOrCreateContinuousQueuedReplayableEvent(
   existingQueuedEvent: null | QueuedReplayableEvent,
-  blockedOn: typeof undefined | null | Container | SuspenseInstance,
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -279,8 +291,9 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
       targetContainer,
       nativeEvent,
     );
-    if (blockedOn != null) {
-      const fiber = getInstanceFromNode(blockedOn);
+    const blockedOnInst = isBlocked(blockedOn);
+    if (blockedOnInst) {
+      const fiber = getInstanceFromNode(blockedOnInst);
       if (fiber !== null) {
         // Attempt to increase the priority of this target.
         attemptContinuousHydration(fiber);
@@ -304,7 +317,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
 }
 
 export function queueIfContinuousEvent(
-  blockedOn: typeof undefined | null | Container | SuspenseInstance,
+  blockedOn: NullTarget | null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -386,7 +399,6 @@ export function queueIfContinuousEvent(
   return false;
 }
 
-// Check if this target is unblocked. Returns true if it's unblocked.
 function attemptExplicitHydrationTarget(
   queuedTarget: QueuedHydrationTarget,
 ): void {
@@ -454,7 +466,8 @@ export function queueExplicitHydrationTarget(target: Node): void {
 function attemptReplayContinuousQueuedEvent(
   queuedEvent: QueuedReplayableEvent,
 ): boolean {
-  if (queuedEvent.blockedOn != null) {
+  const blockedOnInst = isBlocked(queuedEvent.blockedOn);
+  if (blockedOnInst) {
     return false;
   }
   const targetContainers = queuedEvent.targetContainers;
@@ -466,16 +479,17 @@ function attemptReplayContinuousQueuedEvent(
       targetContainer,
       queuedEvent.nativeEvent,
     );
-    if (nextBlockedOn != null) {
+    const nextBlockedOnInst = isBlocked(nextBlockedOn);
+    if (nextBlockedOnInst) {
       // We're still blocked. Try again later.
-      const fiber = getInstanceFromNode(nextBlockedOn);
+      const fiber = getInstanceFromNode(nextBlockedOnInst);
       if (fiber !== null) {
         attemptContinuousHydration(fiber);
       }
       queuedEvent.blockedOn = nextBlockedOn;
       return false;
     }
-    replayEvent(queuedEvent, targetContainer);
+    replayEvent(queuedEvent, targetContainer, nextBlockedOn);
     // This target container was successfully dispatched. Try the next.
     targetContainers.shift();
   }
@@ -498,11 +512,13 @@ function replayUnblockedEvents() {
     // First replay discrete events.
     while (queuedDiscreteEvents.length > 0) {
       const nextDiscreteEvent = queuedDiscreteEvents[0];
-      if (nextDiscreteEvent.blockedOn != null) {
+      const blockedOn = nextDiscreteEvent.blockedOn;
+      const blockedOnInst = isBlocked(blockedOn);
+      if (blockedOnInst) {
         // We're still blocked.
         // Increase the priority of this boundary to unblock
         // the next discrete event.
-        const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+        const fiber = getInstanceFromNode(blockedOnInst);
         if (fiber !== null) {
           attemptDiscreteHydration(fiber);
         }
@@ -517,16 +533,20 @@ function replayUnblockedEvents() {
           targetContainer,
           nextDiscreteEvent.nativeEvent,
         );
-        if (nextBlockedOn != null) {
+        const nextBlockedOnInst = isBlocked(nextBlockedOn);
+        if (nextBlockedOnInst) {
           // We're still blocked. Try again later.
-          nextDiscreteEvent.blockedOn = nextBlockedOn;
+          nextDiscreteEvent.blockedOn = nextBlockedOnInst;
           break;
         }
-        replayEvent(nextDiscreteEvent, targetContainer);
+        replayEvent(nextDiscreteEvent, targetContainer, nextBlockedOn);
         // This target container was successfully dispatched. Try the next.
         targetContainers.shift();
       }
-      if (nextDiscreteEvent.blockedOn == null) {
+      if (
+        nextDiscreteEvent.blockedOn === null ||
+        nextDiscreteEvent.blockedOn === nullTarget
+      ) {
         // We've successfully replayed the first event. Let's try the next one.
         queuedDiscreteEvents.shift();
       }
@@ -603,12 +623,13 @@ export function retryIfBlockedOn(
 
   while (queuedExplicitHydrationTargets.length > 0) {
     const nextExplicitTarget = queuedExplicitHydrationTargets[0];
-    if (nextExplicitTarget.blockedOn != null) {
+    const blockedOnInst = isBlocked(nextExplicitTarget.blockedOn);
+    if (blockedOnInst) {
       // We're still blocked.
       break;
     } else {
       attemptExplicitHydrationTarget(nextExplicitTarget);
-      if (nextExplicitTarget.blockedOn == null) {
+      if (!isBlocked(nextExplicitTarget.blockedOn)) {
         // We're unblocked.
         queuedExplicitHydrationTargets.shift();
       }
@@ -619,6 +640,7 @@ export function retryIfBlockedOn(
 function replayEvent(
   queuedEvent: QueuedReplayableEvent,
   targetContainer: EventTarget,
+  targetInst: null | NullTarget | Container | SuspenseInstance,
 ) {
   const event = queuedEvent.nativeEvent;
   if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
@@ -632,7 +654,9 @@ function replayEvent(
         queuedEvent.domEventName,
         queuedEvent.eventSystemFlags,
         event,
-        getClosestInstanceFromNode(getEventTarget(queuedEvent.nativeEvent)),
+        targetInst === nullTarget
+          ? null
+          : getClosestInstanceFromNode(getEventTarget(queuedEvent.nativeEvent)),
         targetContainer,
       );
     });