old

Author: lunaruan

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

@@ -17,13 +17,15 @@ import {createCursor, push, pop} from './ReactFiberStack.old';
 export type SuspenseInfo = {name: string | null};
 
 export type TransitionObject = {
+  markerName?: string,
   transitionName: string,
   startTime: number,
 };
 
 export type PendingTransitionCallbacks = {
   transitionStart: Array<TransitionObject> | null,
   transitionComplete: Array<TransitionObject> | null,
+  markerComplete: Array<TransitionObject> | null,
 };
 
 export type Transition = {
@@ -47,27 +49,38 @@ export function processTransitionCallbacks(
   if (enableTransitionTracing) {
     if (pendingTransitions !== null) {
       const transitionStart = pendingTransitions.transitionStart;
-      if (transitionStart !== null) {
+      if (transitionStart !== null && callbacks.onTransitionStart != null) {
         transitionStart.forEach(transition => {
-          if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(
-              transition.transitionName,
-              transition.startTime,
-            );
-          }
+          callbacks.onTransitionStart(
+            transition.transitionName,
+            transition.startTime,
+          );
+        });
+      }
+
+      const markerComplete = pendingTransitions.markerComplete;
+      if (markerComplete !== null && callbacks.onMarkerComplete != null) {
+        markerComplete.forEach(transition => {
+          callbacks.onMarkerComplete(
+            transition.transitionName,
+            transition.markerName,
+            transition.startTime,
+            endTime,
+          );
         });
       }
 
       const transitionComplete = pendingTransitions.transitionComplete;
-      if (transitionComplete !== null) {
+      if (
+        transitionComplete !== null &&
+        callbacks.onTransitionComplete != null
+      ) {
         transitionComplete.forEach(transition => {
-          if (callbacks.onTransitionComplete != null) {
-            callbacks.onTransitionComplete(
-              transition.transitionName,
-              transition.startTime,
-              endTime,
-            );
-          }
+          callbacks.onTransitionComplete(
+            transition.transitionName,
+            transition.startTime,
+            endTime,
+          );
         });
       }
     }

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

@@ -349,6 +349,7 @@ export function addTransitionStartCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: [],
         transitionComplete: null,
+        markerComplete: null,
       };
     }
 
@@ -360,6 +361,26 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerCompleteCallbackToPendingTransition(
+  transition: TransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: null,
+        markerComplete: [],
+      };
+    }
+  }
+
+  if (currentPendingTransitionCallbacks.markerComplete === null) {
+    currentPendingTransitionCallbacks.markerComplete = [];
+  }
+
+  currentPendingTransitionCallbacks.markerComplete.push(transition);
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: TransitionObject,
 ) {
@@ -368,6 +389,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: null,
         transitionComplete: [],
+        markerComplete: null,
       };
     }