old

Author: lunaruan

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

@@ -770,7 +770,7 @@ export function createFiberFromTracingMarker(
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
     transitions: null,
-    pendingSuspenseBoundaries: null,
+    pendingBoundaries: null,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;

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

@@ -977,7 +977,7 @@ function updateTracingMarkerComponent(
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
-        pendingSuspenseBoundaries: new Map(),
+        pendingBoundaries: null,
       };
       workInProgress.stateNode = markerInstance;
     }

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

@@ -1081,7 +1081,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
-    // or tracing marker's pendingSuspenseBoundaries map.
+    // or tracing marker's pendingBoundaries map.
     // When a suspense boundary goes from a resolved to a fallback
     // state we add the boundary to the map, and when it goes from
     // a fallback to a resolved state, we remove the boundary from
@@ -1121,7 +1121,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1146,7 +1146,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
@@ -2916,7 +2916,7 @@ function commitPassiveMountOnFiber(
         }
 
         incompleteTransitions.forEach((markerInstance, transition) => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           if (pendingBoundaries === null || pendingBoundaries.size === 0) {
             addTransitionCompleteCallbackToPendingTransition(transition);
             incompleteTransitions.delete(transition);
@@ -2991,8 +2991,8 @@ function commitPassiveMountOnFiber(
                     if (instance.transitions === null) {
                       instance.transitions = new Set();
                     } else if (instance.transitions.has(transition)) {
-                      if (markerInstance.pendingSuspenseBoundaries === null) {
-                        markerInstance.pendingSuspenseBoundaries = new Map();
+                      if (markerInstance.pendingBoundaries === null) {
+                        markerInstance.pendingBoundaries = new Map();
                       }
                       if (instance.pendingMarkers === null) {
                         instance.pendingMarkers = new Set();
@@ -3041,19 +3041,16 @@ function commitPassiveMountOnFiber(
         // and add a start transition callback for each of them
         const instance = finishedWork.stateNode;
         if (
-          instance.pendingSuspenseBoundaries === null ||
-          instance.pendingSuspenseBoundaries.size === 0
+          instance.transitions !== null &&
+          (instance.pendingBoundaries === null ||
+            instance.pendingBoundaries.size === 0)
         ) {
-          if (instance.transitions !== null) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition({
-                transition,
-                name: finishedWork.memoizedProps.name,
-              });
-            });
-            instance.transitions = null;
-            instance.pendingSuspenseBoundaries = null;
-          }
+          addMarkerCompleteCallbackToPendingTransition(
+            finishedWork.memoizedProps.name,
+            instance.transitions,
+          );
+          instance.transitions = null;
+          instance.pendingBoundaries = null;
         }
       }
       break;

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

@@ -17,16 +17,11 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
-export type MarkerTransition = {
-  transition: Transition,
-  name: string,
-};
-
 export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
-  transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
+  transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerComplete: Array<MarkerTransition> | null,
+  markerComplete: Map<string, Set<Transition>> | null,
 };
 
 export type Transition = {
@@ -41,11 +36,11 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
 |};
 
-export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
+export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
   pendingTransitions: PendingTransitionCallbacks,
@@ -55,25 +50,25 @@ export function processTransitionCallbacks(
   if (enableTransitionTracing) {
     if (pendingTransitions !== null) {
       const transitionStart = pendingTransitions.transitionStart;
-      if (transitionStart !== null) {
-        transitionStart.forEach(transition => {
-          if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(transition.name, transition.startTime);
-          }
-        });
+      const onTransitionStart = callbacks.onTransitionStart;
+      if (transitionStart !== null && onTransitionStart != null) {
+        transitionStart.forEach(transition =>
+          onTransitionStart(transition.name, transition.startTime),
+        );
       }
 
       const markerComplete = pendingTransitions.markerComplete;
-      if (markerComplete !== null) {
-        markerComplete.forEach(marker => {
-          if (callbacks.onMarkerComplete != null) {
-            callbacks.onMarkerComplete(
-              marker.transition.name,
-              marker.name,
-              marker.transition.startTime,
+      const onMarkerComplete = callbacks.onMarkerComplete;
+      if (markerComplete !== null && onMarkerComplete != null) {
+        markerComplete.forEach((transitions, markerName) => {
+          transitions.forEach(transition => {
+            onMarkerComplete(
+              transition.name,
+              markerName,
+              transition.startTime,
               endTime,
             );
-          }
+          });
         });
       }
 
@@ -91,16 +86,11 @@ export function processTransitionCallbacks(
       }
 
       const transitionComplete = pendingTransitions.transitionComplete;
-      if (transitionComplete !== null) {
-        transitionComplete.forEach(transition => {
-          if (callbacks.onTransitionComplete != null) {
-            callbacks.onTransitionComplete(
-              transition.name,
-              transition.startTime,
-              endTime,
-            );
-          }
-        });
+      const onTransitionComplete = callbacks.onTransitionComplete;
+      if (transitionComplete !== null && onTransitionComplete != null) {
+        transitionComplete.forEach(transition =>
+          onTransitionComplete(transition.name, transition.startTime, endTime),
+        );
       }
     }
   }
@@ -133,7 +123,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
-            pendingSuspenseBoundaries: null,
+            pendingBoundaries: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }

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

@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
-  MarkerTransition,
-  PendingSuspenseBoundaries,
+  PendingBoundaries,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -355,29 +354,33 @@ export function addTransitionStartCallbackToPendingTransition(
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransition,
+  markerName: string,
+  transitions: Set<Transition>,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: null,
-        markerComplete: [],
+        markerComplete: new Map(),
       };
     }
 
     if (currentPendingTransitionCallbacks.markerComplete === null) {
-      currentPendingTransitionCallbacks.markerComplete = [];
+      currentPendingTransitionCallbacks.markerComplete = new Map();
     }
 
-    currentPendingTransitionCallbacks.markerComplete.push(transition);
+    currentPendingTransitionCallbacks.markerComplete.set(
+      markerName,
+      transitions,
+    );
   }
 }
 
 export function addTransitionProgressCallbackToPendingTransition(
   transition: Transition,
-  boundaries: PendingSuspenseBoundaries,
+  boundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {