add transition progress callback

facebook · Jun 30, 2022 · 62a7daf · 62a7daf
1 parent 4cd788a
commit 62a7daf
Show file tree

Hide file tree

Showing 4 changed files with 391 additions and 8 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -137,6 +137,7 @@ import {
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
+  addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
@@ -1093,6 +1094,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
     const isHidden = nextState !== null;
 
     const pendingMarkers = offscreenInstance.pendingMarkers;
+    const transitions = offscreenInstance.transitions;
     // If there is a name on the suspense boundary, store that in
     // the pending boundaries.
     let name = null;
@@ -1110,9 +1112,18 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(pendingBoundaries => {
-          pendingBoundaries.set(offscreenInstance, {
-            name,
-          });
+          if (!pendingBoundaries.has(offscreenInstance)) {
+            pendingBoundaries.set(offscreenInstance, {
+              name,
+            });
+
+            transitions.forEach(transition => {
+              addTransitionProgressCallbackToPendingTransition({
+                transition,
+                pending: pendingBoundaries,
+              });
+            });
+          }
         });
       }
     } else if (wasHidden && !isHidden) {
@@ -1123,6 +1134,13 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(pendingBoundaries => {
           if (pendingBoundaries.has(offscreenInstance)) {
             pendingBoundaries.delete(offscreenInstance);
+
+            transitions.forEach(transition => {
+              addTransitionProgressCallbackToPendingTransition({
+                transition,
+                pending: pendingBoundaries,
+              });
+            });
           }
         });
       }

diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -22,9 +22,15 @@ export type TransitionObject = {
   startTime: number,
 };
 
+export type TransitionProgressObject = {
+  transition: TransitionObject,
+  pending: PendingSuspenseBoundaries,
+};
+
 export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
   transitionStart: Array<TransitionObject> | null,
+  transitionProgress: Array<TransitionProgressObject> | null,
   transitionComplete: Array<TransitionObject> | null,
   markerComplete: Array<MarkerTransitionObject> | null,
 };
@@ -80,6 +86,25 @@ export function processTransitionCallbacks(
         });
       }
 
+      const transitionProgress = pendingTransitions.transitionProgress;
+      if (transitionProgress !== null) {
+        const logged = new Set();
+        transitionProgress.forEach(({transition, pending}) => {
+          if (
+            callbacks.onTransitionProgress != null &&
+            !logged.has(transition)
+          ) {
+            callbacks.onTransitionProgress(
+              transition.name,
+              transition.startTime,
+              endTime,
+              Array.from(pending.values()),
+            );
+            logged.add(transition);
+          }
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -338,6 +338,7 @@ export function addTransitionStartCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: [],
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: null,
       };
@@ -358,6 +359,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: [],
       };
@@ -371,13 +373,35 @@ export function addMarkerCompleteCallbackToPendingTransition(
   }
 }
 
+export function addTransitionProgressCallbackToPendingTransition(
+  transition: TransitionProgressObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: [],
+        transitionComplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionProgress === null) {
+      currentPendingTransitionCallbacks.transitionProgress = [];
+    }
+
+    currentPendingTransitionCallbacks.transitionProgress.push(transition);
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: TransitionObject,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: [],
         markerComplete: null,
       };