transition tracing delete tracing marker

Author: lunaruan

packages/react-reconciler/src/ReactFiber.new.js

@@ -772,6 +772,8 @@ export function createFiberFromTracingMarker(
   const tracingMarkerInstance: TracingMarkerInstance = {
     transitions: null,
     pendingBoundaries: null,
+    aborts: null,
+    name: pendingProps.name,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -979,6 +979,7 @@ function updateTracingMarkerComponent(
         transitions: new Set(currentTransitions),
         pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
+        aborts: null,
       };
       workInProgress.stateNode = markerInstance;
     }

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -30,7 +30,11 @@ import type {
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {RootState} from './ReactFiberRoot.new';
-import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {
+  Transition,
+  TracingMarkerInstance,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -146,6 +150,7 @@ import {
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
@@ -1132,6 +1137,91 @@ function commitLayoutEffectOnFiber(
   }
 }
 
+function abortParentMarkerTransitions(
+  deletedFiber: Fiber,
+  nearestMountedAncestor: Fiber,
+  abort: TransitionAbort,
+) {
+  let fiber = deletedFiber;
+  let isInDeletedTree = true;
+  while (fiber !== null) {
+    const instance = deletedFiber.stateNode;
+    switch (fiber.tag) {
+      case TracingMarkerComponent:
+        const transitions = instance.transitions;
+
+        const markerInstance = fiber.stateNode;
+        const markerTransitions = markerInstance.transitions;
+        const abortMarker = Array.from(transitions).some(transition =>
+          markerTransitions.has(transition),
+        );
+
+        if (abortMarker) {
+          if (markerInstance.aborts === null) {
+            markerInstance.aborts = new Set();
+          }
+
+          markerInstance.aborts.add(abort);
+          addMarkerIncompleteCallbackToPendingTransition(
+            fiber.memoizedProps.name,
+            transitions,
+            markerInstance.aborts,
+          );
+
+          // We only want to call onTransitionProgress when the marker hasn't been
+          // deleted
+          if (
+            !isInDeletedTree &&
+            markerInstance.pendingBoundaries !== null &&
+            markerInstance.pendingBoundaries.has(instance)
+          ) {
+            markerInstance.pendingBoundaries.delete(instance);
+
+            addMarkerProgressCallbackToPendingTransition(
+              markerInstance.name,
+              transitions,
+              markerInstance.pendingBoundaries,
+            );
+          }
+        }
+        break;
+      case HostRoot:
+        const root = fiber.stateNode;
+        const incompleteTransitions = root.incompleteTransitions;
+
+        instance.transitions.forEach(transition => {
+          if (incompleteTransitions.has(transition)) {
+            const transitionInstance = incompleteTransitions.get(transition);
+            if (transitionInstance.aborts === null) {
+              transitionInstance.aborts = [];
+            }
+            transitionInstance.aborts.push(abort);
+
+            if (
+              transitionInstance.pendingBoundaries !== null &&
+              transitionInstance.pendingBoundaries.has(instance)
+            ) {
+              transitionInstance.pendingBoundaries.delete(instance);
+            }
+          }
+        });
+        break;
+      default:
+        break;
+    }
+
+    if (
+      nearestMountedAncestor.deletions !== null &&
+      nearestMountedAncestor.deletions.includes(fiber)
+    ) {
+      isInDeletedTree = false;
+      fiber = nearestMountedAncestor;
+    } else {
+      fiber = fiber.return;
+    }
+  }
+}
+
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
@@ -1987,6 +2077,20 @@ function commitDeletionEffectsOnFiber(
         const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
+
+        if (enableTransitionTracing) {
+          // We need to mark this fiber's parents as deleted
+          const instance: OffscreenInstance = deletedFiber.stateNode;
+          const markers = instance.pendingMarkers;
+          if (markers !== null) {
+            markers.forEach(marker => {
+              if (marker.pendingBoundaries.has(instance)) {
+                marker.pendingBoundaries.delete(instance);
+              }
+            });
+          }
+        }
+
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,
@@ -2002,6 +2106,30 @@ function commitDeletionEffectsOnFiber(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // We need to mark this fiber's parents as deleted
+        const instance: TracingMarkerInstance = deletedFiber.stateNode;
+        const transitions = instance.transitions;
+        if (transitions !== null) {
+          const abort = {
+            reason: 'marker',
+            name: deletedFiber.memoizedProps.name,
+          };
+          abortParentMarkerTransitions(
+            deletedFiber,
+            nearestMountedAncestor,
+            abort,
+          );
+        }
+      }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
+    }
     default: {
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -2987,6 +3115,11 @@ function commitOffscreenPassiveMountEffects(
     }
 
     commitTransitionProgress(finishedWork);
+
+    if (!isHidden) {
+      instance.transitions = null;
+      instance.pendingMarkers = null;
+    }
   }
 }
 
@@ -3023,14 +3156,16 @@ function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
     (instance.pendingBoundaries === null ||
       instance.pendingBoundaries.size === 0)
   ) {
-    instance.transitions.forEach(transition => {
+    if (instance.aborts === null) {
       addMarkerCompleteCallbackToPendingTransition(
         finishedWork.memoizedProps.name,
         instance.transitions,
       );
-    });
+    }
     instance.transitions = null;
     instance.pendingBoundaries = null;
+    instance.aborts = null;
+    instance.name = null;
   }
 }
 
@@ -3146,7 +3281,9 @@ function commitPassiveMountOnFiber(
           incompleteTransitions.forEach((markerInstance, transition) => {
             const pendingBoundaries = markerInstance.pendingBoundaries;
             if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
+              if (markerInstance.aborts === null) {
+                addTransitionCompleteCallbackToPendingTransition(transition);
+              }
               incompleteTransitions.delete(transition);
             }
           });

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

@@ -21,7 +21,14 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerProgress: Map<string, TracingMarkerInstance> | null,
+  markerProgress: Map<
+    string,
+    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
+  > | null,
+  markerIncomplete: Map<
+    string,
+    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
+  > | null,
   markerComplete: Map<string, Set<Transition>> | null,
 };
 
@@ -37,9 +44,15 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
-  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
-  name?: string,
+  pendingBoundaries: PendingBoundaries | null,
+  aborts: Array<TransitionAbort> | null,
+  name: string | null,
+|};
+
+export type TransitionAbort = {|
+  reason: 'error' | 'unknown' | 'marker' | 'suspense',
+  name?: string | null,
 |};
 
 export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -64,6 +77,7 @@ export function processTransitionCallbacks(
       if (onMarkerProgress != null && markerProgress !== null) {
         markerProgress.forEach((markerInstance, markerName) => {
           if (markerInstance.transitions !== null) {
+            // TODO: Clone the suspense object so users can't modify it
             const pending =
               markerInstance.pendingBoundaries !== null
                 ? Array.from(markerInstance.pendingBoundaries.values())
@@ -96,6 +110,31 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerIncomplete = pendingTransitions.markerIncomplete;
+      const onMarkerIncomplete = callbacks.onMarkerIncomplete;
+      if (onMarkerIncomplete != null && markerIncomplete !== null) {
+        markerIncomplete.forEach(({transitions, aborts}, markerName) => {
+          transitions.forEach(transition => {
+            const filteredAborts = [];
+            aborts.forEach(deletion => {
+              const filteredDeletion = getFilteredDeletion(deletion, endTime);
+              if (filteredDeletion !== null) {
+                filteredAborts.push(filteredDeletion);
+              }
+            });
+
+            if (filteredAborts.length > 0) {
+              onMarkerIncomplete(
+                transition.name,
+                markerName,
+                transition.startTime,
+                filteredAborts,
+              );
+            }
+          });
+        });
+      }
+
       const transitionProgress = pendingTransitions.transitionProgress;
       const onTransitionProgress = callbacks.onTransitionProgress;
       if (onTransitionProgress != null && transitionProgress !== null) {
@@ -120,6 +159,21 @@ export function processTransitionCallbacks(
   }
 }
 
+function getFilteredDeletion(abort: TransitionAbort, endTime: number) {
+  switch (abort.reason) {
+    case 'marker': {
+      return {
+        type: 'marker',
+        name: abort.name,
+        endTime,
+      };
+    }
+    default: {
+      return null;
+    }
+  }
+}
+
 // For every tracing marker, store a pointer to it. We will later access it
 // to get the set of suspense boundaries that need to resolve before the
 // tracing marker can be logged as complete
@@ -148,6 +202,8 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
           const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
             pendingBoundaries: null,
+            aborts: null,
+            name: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }