end time

Author: lunaruan

packages/react-art/src/ReactARTHostConfig.js

@@ -451,3 +451,7 @@ export function preparePortalMount(portalInstance: any): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -1379,3 +1379,9 @@ export function setupIntersectionObserver(
     },
   };
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(time => callback(time));
+  });
+}

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -609,3 +609,7 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -510,3 +510,7 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -473,6 +473,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     logRecoverableError() {
       // no-op
     },
+
+    requestPostPaintCallback(callback) {
+      const endTime = Scheduler.unstable_now();
+      callback(endTime);
+    },
   };
 
   const hostConfig = useMutation

packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js

@@ -35,3 +35,4 @@ export const hideTextInstance = shim;
 export const unhideInstance = shim;
 export const unhideTextInstance = shim;
 export const clearContainer = shim;
+export const requestPostPaintCallback = shim;

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

@@ -82,6 +82,7 @@ import {
   supportsMicrotasks,
   errorHydratingContainer,
   scheduleMicrotask,
+  requestPostPaintCallback,
 } from './ReactFiberHostConfig';
 
 import {
@@ -350,6 +351,7 @@ export function getWorkInProgressTransitions() {
 }
 
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
+let currentEndTime: number | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
   transition: Transition,
@@ -2514,6 +2516,24 @@ function commitRootImpl(
     markCommitStopped();
   }
 
+  const prevRootTransitionCallbacks = root.transitionCallbacks;
+  if (prevRootTransitionCallbacks !== null) {
+    requestPostPaintCallback(endTime => {
+      const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
+      if (prevPendingTransitionCallbacks !== null) {
+        scheduleCallback(IdleSchedulerPriority, () => {
+          processTransitionCallbacks(
+            prevPendingTransitionCallbacks,
+            endTime,
+            prevRootTransitionCallbacks,
+          );
+        });
+      } else {
+        currentEndTime = endTime;
+      }
+    });
+  }
+
   return null;
 }
 
@@ -2655,28 +2675,23 @@ function flushPassiveEffectsImpl() {
   if (enableTransitionTracing) {
     const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
     const prevRootTransitionCallbacks = root.transitionCallbacks;
+    const prevEndTime = currentEndTime;
     if (
       prevPendingTransitionCallbacks !== null &&
       prevRootTransitionCallbacks !== null
     ) {
-      // TODO(luna) Refactor this code into the Host Config
-      // TODO(luna) The end time here is not necessarily accurate
-      // because passive effects could be called before paint
-      // (synchronously) or after paint (normally). We need
-      // to come up with a way to get the correct end time for both cases.
-      // One solution is in the host config, if the passive effects
-      // have not yet been run, make a call to flush the passive effects
-      // right after paint.
-      const endTime = now();
       currentPendingTransitionCallbacks = null;
-
-      scheduleCallback(IdleSchedulerPriority, () =>
-        processTransitionCallbacks(
-          prevPendingTransitionCallbacks,
-          endTime,
-          prevRootTransitionCallbacks,
-        ),
-      );
+      currentEndTime = null;
+
+      if (prevEndTime !== null) {
+        scheduleCallback(IdleSchedulerPriority, () =>
+          processTransitionCallbacks(
+            prevPendingTransitionCallbacks,
+            prevEndTime,
+            prevRootTransitionCallbacks,
+          ),
+        );
+      }
     }
   }
 

packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js

@@ -1434,4 +1434,66 @@ describe('ReactInteractionTracing', () => {
     });
     expect(Scheduler).toHaveYielded(['Hidden Text']);
   });
+
+  // @gate enableTransitionTracing
+  it('discrete events', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      return (
+        <Suspense
+          fallback={<Text text="Loading..." />}
+          unstable_name="suspense page">
+          <AsyncText text="Page Two" />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+
+    await act(async () => {
+      ReactNoop.discreteUpdates(() =>
+        startTransition(() => root.render(<App />), {name: 'page transition'}),
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Page Two]',
+      'Loading...',
+      'onTransitionStart(page transition, 0)',
+      'onTransitionProgress(page transition, 0, 1000, [suspense page])',
+    ]);
+    await act(async () => {
+      ReactNoop.discreteUpdates(() => resolveText('Page Two'));
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Page Two',
+      'onTransitionProgress(page transition, 0, 2000, [])',
+      'onTransitionComplete(page transition, 0, 2000)',
+    ]);
+  });
 });

packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js

@@ -67,6 +67,7 @@ export const prepareScopeUpdate = $$$hostConfig.prepareScopeUpdate;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;
+export const requestPostPaintCallback = $$$hostConfig.requestPostPaintCallback;
 
 // -------------------
 //      Microtasks

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -317,3 +317,7 @@ export function detachDeletedInstance(node: Instance): void {
 export function logRecoverableError(error: mixed): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}