marker progress

facebook · Jul 6, 2022 · 5f4bc22 · acdlite · Jul 8, 2022 · 5f4bc22
1 parent 1c39429
commit 5f4bc22
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 12 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -144,6 +144,7 @@ import {
   addTransitionStartCallbackToPendingTransition,
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
@@ -3039,17 +3040,27 @@ 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) {
-          if (
+        if (instance.transitions !== null && instance.hasUpdate) {
+          const transitionsComplete =
             instance.pendingSuspenseBoundaries === null ||
-            instance.pendingSuspenseBoundaries.size === 0
-          ) {
-            instance.transitions.forEach(transition => {
+            instance.pendingSuspenseBoundaries.size === 0;
+
+          instance.transitions.forEach(transition => {
+            addMarkerProgressCallbackToPendingTransition({
+              transition,
+              name: finishedWork.memoizedProps.name,
+              pending: instance.pendingSuspenseBoundaries,
+            });
+
+            if (transitionsComplete) {
               addMarkerCompleteCallbackToPendingTransition({
                 transition,
                 name: finishedWork.memoizedProps.name,
               });
-            });
+            }
+          });
+          instance.hasUpdate = false;
+          if (transitionsComplete) {
             instance.transitions = null;
             instance.pendingSuspenseBoundaries = null;
           }

diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -31,6 +31,7 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Array<TransitionProgress> | null,
   transitionComplete: Array<Transition> | null,
+  markerProgress: Array<MarkerTransitionProgress> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -73,6 +74,20 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach(marker => {
+          onMarkerProgress(
+            marker.transition.name,
+            marker.name,
+            marker.transition.startTime,
+            endTime,
+            Array.from(marker.pending.values()),
+          );
+        });
+      }
+
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
         markerComplete.forEach(marker => {

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -17,6 +17,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
   MarkerTransition,
+  MarkerTransitionProgress,
   Transition,
   TransitionProgress,
 } from './ReactFiberTracingMarkerComponent.new';
@@ -342,6 +343,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionStart: [],
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -354,6 +356,28 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerProgressCallbackToPendingTransition(
+  transition: MarkerTransitionProgress,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: [],
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerProgress === null) {
+      currentPendingTransitionCallbacks.markerProgress = [];
+    }
+
+    currentPendingTransitionCallbacks.markerProgress.push(transition);
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   transition: MarkerTransition,
 ) {
@@ -363,6 +387,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: [],
       };
     }
@@ -384,6 +409,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: [],
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -405,6 +431,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: [],
+        markerProgress: null,
         markerComplete: null,
       };
     }