old

Author: lunaruan

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

@@ -771,6 +771,9 @@ export function createFiberFromTracingMarker(
   const tracingMarkerInstance: TracingMarkerInstance = {
     transitions: null,
     pendingSuspenseBoundaries: null,
+    deletions: null,
+    parents: null,
+    name: pendingProps.name,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;

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

@@ -974,11 +974,15 @@ function updateTracingMarkerComponent(
   // or updated it, so we can create a new set of transitions each time
   if (current === null) {
     const currentTransitions = getPendingTransitions();
+    // TODO: What if the parent markers change?
+    const parents = getMarkerInstances();
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
         pendingSuspenseBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
+        parents,
+        deletions: null,
       };
       workInProgress.stateNode = markerInstance;
     }

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

@@ -146,6 +146,7 @@ import {
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
@@ -2937,7 +2938,9 @@ function commitPassiveMountOnFiber(
         incompleteTransitions.forEach((markerInstance, transition) => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
           if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-            addTransitionCompleteCallbackToPendingTransition(transition);
+            if (markerInstance.deletions === null) {
+              addTransitionCompleteCallbackToPendingTransition(transition);
+            }
             incompleteTransitions.delete(transition);
           }
         });
@@ -3059,19 +3062,75 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const instance = finishedWork.stateNode;
-        if (
-          instance.transitions !== null &&
-          (instance.pendingSuspenseBoundaries === null ||
-            instance.pendingSuspenseBoundaries.size === 0)
-        ) {
-          instance.transitions.forEach(transition => {
-            addMarkerCompleteCallbackToPendingTransition({
-              transition,
-              name: finishedWork.memoizedProps.name,
-            });
-          });
-          instance.transitions = null;
-          instance.pendingSuspenseBoundaries = null;
+        if (instance.transitions !== null) {
+          if (finishedWork.alternate !== null) {
+            const prevName = finishedWork.alternate.memoizedProps.name;
+            const nextName = finishedWork.memoizedProps.name;
+
+            // The transition should be marked as incomplete if the name changed
+            if (prevName !== nextName) {
+              if (!instance.deletions) {
+                instance.deletions = [];
+
+                addMarkerIncompleteCallbackToPendingTransition(
+                  prevName,
+                  instance.transitions,
+                  instance.deletions,
+                );
+              }
+
+              const deletion = {
+                type: 'marker',
+                name: prevName,
+                newName: nextName,
+                // we'll filter the transitions that need to have this deletion
+                // during the callback stage
+                transitions: instance.transitions,
+              };
+
+              instance.deletions.push(deletion);
+              if (instance.parents !== null) {
+                instance.parents.forEach(marker => {
+                  const parentDeletion = {
+                    type: 'marker',
+                    name: prevName,
+                    transitions: marker.transitions,
+                  };
+
+                  if (!marker.deletions) {
+                    marker.deletions = [];
+                    // we only add the incomplete callback the first time the marker is incomplete
+                    if (marker.name !== null) {
+                      addMarkerIncompleteCallbackToPendingTransition(
+                        marker.name,
+                        instance.transitions,
+                        marker.deletions,
+                      );
+                    }
+                  }
+
+                  marker.deletions.push(parentDeletion);
+                });
+              }
+            }
+          }
+
+          if (
+            instance.pendingSuspenseBoundaries === null ||
+            instance.pendingSuspenseBoundaries.size === 0
+          ) {
+            if (instance.deletions === null) {
+              instance.transitions.forEach(transition => {
+                addMarkerCompleteCallbackToPendingTransition({
+                  transition,
+                  name: finishedWork.memoizedProps.name,
+                });
+              });
+            }
+            instance.transitions = null;
+            instance.pendingSuspenseBoundaries = null;
+            instance.deletions = null;
+          }
         }
       }
       break;

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

@@ -1605,8 +1605,11 @@ function completeWork(
         }
         bubbleProperties(workInProgress);
 
+        const prevName = current !== null ? current.memoizedProps.name : null;
+        const nextName = workInProgress.memoizedProps.name;
         if (
           current === null ||
+          prevName !== nextName ||
           (workInProgress.subtreeFlags & Visibility) !== NoFlags
         ) {
           // If any of our suspense children toggle visibility, this means that

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

@@ -26,7 +26,17 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerProgress: Map<string, TracingMarkerInstance> | null,
+  markerProgress: Map<
+    string,
+    {
+      pendingSuspenseBoundaries: PendingSuspenseBoundaries,
+      transitions: Set<Transition>,
+    },
+  > | null,
+  markerIncomplete: Map<
+    string,
+    {deletions: Array<TransitionDeletion>, transitions: Set<Transition>},
+  > | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -44,7 +54,17 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  deletions: Array<TransitionDeletion> | null,
+  parents: Array<TracingMarkerInstance> | null,
+  name: string | null,
+|};
+
+export type TransitionDeletion = {|
+  type: 'error' | 'unknown' | 'marker' | 'suspense',
   name?: string,
+  newName?: string,
+  endTime: number,
+  transitions: Set<Transition>,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -70,6 +90,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.pendingSuspenseBoundaries !== null
                 ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
@@ -101,6 +122,30 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerIncomplete = pendingTransitions.markerIncomplete;
+      const onMarkerIncomplete = callbacks.onMarkerIncomplete;
+      if (onMarkerIncomplete != null && markerIncomplete !== null) {
+        markerIncomplete.forEach(({transitions, deletions}, markerName) => {
+          transitions.forEach(transition => {
+            const filteredDeletions = [];
+            deletions.forEach(deletion => {
+              if (deletion.transitions.has(transition)) {
+                const filteredDeletion = getFilteredDeletion(deletion, endTime);
+                if (filteredDeletion !== null) {
+                  filteredDeletions.push(filteredDeletion);
+                }
+              }
+            });
+            onMarkerIncomplete(
+              transition.name,
+              markerName,
+              transition.startTime,
+              filteredDeletions,
+            );
+          });
+        });
+      }
+
       const transitionProgress = pendingTransitions.transitionProgress;
       const onTransitionProgress = callbacks.onTransitionProgress;
       if (onTransitionProgress != null && transitionProgress !== null) {
@@ -130,6 +175,28 @@ export function processTransitionCallbacks(
   }
 }
 
+function getFilteredDeletion(deletion: TransitionDeletion, endTime: number) {
+  switch (deletion.type) {
+    case 'marker': {
+      return deletion.newName
+        ? {
+            type: deletion.type,
+            name: deletion.name,
+            newName: deletion.newName,
+            endTime,
+          }
+        : {
+            type: deletion.type,
+            name: deletion.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
@@ -158,6 +225,9 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
           const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
             pendingSuspenseBoundaries: null,
+            deletions: null,
+            parents: null,
+            name: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -19,6 +19,7 @@ import type {
   MarkerTransition,
   PendingSuspenseBoundaries,
   Transition,
+  TransitionDeletion,
 } from './ReactFiberTracingMarkerComponent.old';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
@@ -343,6 +344,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -358,7 +360,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -367,6 +369,7 @@ export function addMarkerProgressCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: new Map(),
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -382,6 +385,34 @@ export function addMarkerProgressCallbackToPendingTransition(
   }
 }
 
+export function addMarkerIncompleteCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  deletions: Array<TransitionDeletion>,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: null,
+        markerIncomplete: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerIncomplete === null) {
+      currentPendingTransitionCallbacks.markerIncomplete = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerIncomplete.set(markerName, {
+      transitions,
+      deletions,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   transition: MarkerTransition,
 ) {
@@ -392,6 +423,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: [],
       };
     }
@@ -415,6 +447,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionProgress: new Map(),
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -440,6 +473,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: [],
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }