old

facebook · Jul 8, 2022 · 2940bd5 · 2940bd5
1 parent 1c99766
commit 2940bd5
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 10 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -978,6 +978,7 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
         pendingSuspenseBoundaries: new Map(),
+        name: workInProgress.pendingProps.name,
       };
       workInProgress.stateNode = markerInstance;
     }

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -145,6 +145,7 @@ import {
   addTransitionStartCallbackToPendingTransition,
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
@@ -1122,20 +1123,29 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.set(offscreenInstance, {
               name,
             });
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -1147,18 +1157,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.delete(offscreenInstance);
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });

diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
+  markerProgress: Map<string, TracingMarkerInstance> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  name?: string,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach((markerInstance, markerName) => {
+          if (markerInstance.transitions !== null) {
+            const pending =
+              markerInstance.pendingSuspenseBoundaries !== null
+                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+                : [];
+            markerInstance.transitions.forEach(transition => {
+              onMarkerProgress(
+                transition.name,
+                markerName,
+                transition.startTime,
+                endTime,
+                pending,
+              );
+            });
+          }
+        });
+      }
+
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
         markerComplete.forEach(marker => {

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -342,6 +342,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionStart: [],
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -354,6 +355,33 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerProgressCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerProgress === null) {
+      currentPendingTransitionCallbacks.markerProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerProgress.set(markerName, {
+      pendingSuspenseBoundaries,
+      transitions,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   transition: MarkerTransition,
 ) {
@@ -363,6 +391,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: [],
       };
     }
@@ -385,6 +414,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: new Map(),
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -409,6 +439,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: [],
+        markerProgress: null,
         markerComplete: null,
       };
     }