Collect Transition Types on the Transition instance

Conceptually they belong to each Transition object and should only be applied
where updates to that batch are applied.

However, since we batch regular Transitions together they go into the same set.

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberHooks.js

@@ -42,6 +42,7 @@ import {
   enableLegacyCache,
   disableLegacyMode,
   enableNoCloningMemoCache,
+  enableViewTransition,
   enableGestureTransition,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -2159,6 +2160,9 @@ function runActionStateAction<S, P>(
     // This is a fork of startTransition
     const prevTransition = ReactSharedInternals.T;
     const currentTransition: Transition = ({}: any);
+    if (enableViewTransition) {
+      currentTransition.types = null;
+    }
     if (enableGestureTransition) {
       currentTransition.gesture = null;
     }
@@ -3052,6 +3056,9 @@ function startTransition<S>(
 
   const prevTransition = ReactSharedInternals.T;
   const currentTransition: Transition = ({}: any);
+  if (enableViewTransition) {
+    currentTransition.types = null;
+  }
   if (enableGestureTransition) {
     currentTransition.gesture = null;
   }

packages/react-reconciler/src/ReactFiberTransition.js

@@ -17,7 +17,6 @@ import type {StackCursor} from './ReactFiberStack';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent';
 import type {Transition} from 'react/src/ReactStartTransition';
 import type {ScheduledGesture} from './ReactFiberGestureScheduler';
-import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 import {
   enableTransitionTracing,
@@ -34,6 +33,7 @@ import {
   retainCache,
   CacheContext,
 } from './ReactFiberCacheComponent';
+import {queueTransitionTypes} from './ReactFiberTransitionTypes';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {entangleAsyncAction} from './ReactFiberAsyncAction';
@@ -87,6 +87,7 @@ ReactSharedInternals.S = function onStartTransitionFinishForReconciler(
     const thenable: Thenable<mixed> = (returnValue: any);
     entangleAsyncAction(transition, thenable);
   }
+  queueTransitionTypes(transition.types);
   if (prevOnStartTransitionFinish !== null) {
     prevOnStartTransitionFinish(transition, returnValue);
   }
@@ -113,15 +114,13 @@ if (enableGestureTransition) {
     transition: Transition,
     provider: GestureProvider,
     options: ?GestureOptions,
-    transitionTypes: null | TransitionTypes,
   ): () => void {
     let cancel = null;
     if (prevOnStartGestureTransitionFinish !== null) {
       cancel = prevOnStartGestureTransitionFinish(
         transition,
         provider,
         options,
-        transitionTypes,
       );
     }
     // For every root that has work scheduled, check if there's a ScheduledGesture
@@ -138,7 +137,7 @@ if (enableGestureTransition) {
         root,
         provider,
         options,
-        transitionTypes,
+        transition.types,
       );
       if (scheduledGesture !== null) {
         cancel = chainGestureCancellation(root, scheduledGesture, cancel);

packages/react-reconciler/src/ReactFiberTransitionTypes.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
+
+let queuedTransitionTypes: null | TransitionTypes = null;
+
+export function queueTransitionTypes(
+  transitionTypes: null | TransitionTypes,
+): void {
+  // Currently, we assume that all Transitions are batched together into a global single commit.
+  if (enableViewTransition && transitionTypes !== null) {
+    let queued = queuedTransitionTypes;
+    if (queued === null) {
+      queued = queuedTransitionTypes = [];
+    }
+    for (let i = 0; i < transitionTypes.length; i++) {
+      const transitionType = transitionTypes[i];
+      if (queued.indexOf(transitionType) === -1) {
+        queued.push(transitionType);
+      }
+    }
+  }
+}
+
+export function claimQueuedTransitionTypes(): null | TransitionTypes {
+  const claimed = queuedTransitionTypes;
+  queuedTransitionTypes = null;
+  return claimed;
+}

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -358,6 +358,7 @@ import {
   deleteScheduledGesture,
   stopCompletedGestures,
 } from './ReactFiberGestureScheduler';
+import {claimQueuedTransitionTypes} from './ReactFiberTransitionTypes';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -3404,11 +3405,7 @@ function commitRoot(
     pendingViewTransitionEvents = null;
     if (includesOnlyViewTransitionEligibleLanes(lanes)) {
       // Claim any pending Transition Types for this commit.
-      // This means that multiple roots committing independent View Transitions
-      // 1) end up staggered because we can only have one at a time.
-      // 2) only the first one gets all the Transition Types.
-      pendingTransitionTypes = ReactSharedInternals.V;
-      ReactSharedInternals.V = null;
+      pendingTransitionTypes = claimQueuedTransitionTypes();
       passiveSubtreeMask = PassiveTransitionMask;
     } else {
       pendingTransitionTypes = null;

packages/react/src/ReactSharedInternalsClient.js

@@ -10,20 +10,15 @@
 import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import type {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import type {Transition} from './ReactStartTransition';
-import type {TransitionTypes} from './ReactTransitionType';
 import type {GestureProvider, GestureOptions} from 'shared/ReactTypes';
 
-import {
-  enableViewTransition,
-  enableGestureTransition,
-} from 'shared/ReactFeatureFlags';
+import {enableGestureTransition} from 'shared/ReactFeatureFlags';
 
 type onStartTransitionFinish = (Transition, mixed) => void;
 type onStartGestureTransitionFinish = (
   Transition,
   GestureProvider,
   ?GestureOptions,
-  transitionTypes: null | TransitionTypes,
 ) => () => void;
 
 export type SharedStateClient = {
@@ -32,7 +27,6 @@ export type SharedStateClient = {
   T: null | Transition, // ReactCurrentBatchConfig for Transitions
   S: null | onStartTransitionFinish,
   G: null | onStartGestureTransitionFinish,
-  V: null | TransitionTypes, // Pending Transition Types for the Next Transition
 
   // DEV-only
 
@@ -72,9 +66,6 @@ const ReactSharedInternals: SharedStateClient = ({
 if (enableGestureTransition) {
   ReactSharedInternals.G = null;
 }
-if (enableViewTransition) {
-  ReactSharedInternals.V = null;
-}
 
 if (__DEV__) {
   ReactSharedInternals.actQueue = null;

packages/react/src/ReactStartTransition.js

@@ -13,23 +13,20 @@ import type {
   GestureProvider,
   GestureOptions,
 } from 'shared/ReactTypes';
+import type {TransitionTypes} from './ReactTransitionType';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {
   enableTransitionTracing,
+  enableViewTransition,
   enableGestureTransition,
 } from 'shared/ReactFeatureFlags';
 
-import {
-  pendingGestureTransitionTypes,
-  pushPendingGestureTransitionTypes,
-  popPendingGestureTransitionTypes,
-} from './ReactTransitionType';
-
 import reportGlobalError from 'shared/reportGlobalError';
 
 export type Transition = {
+  types: null | TransitionTypes, // enableViewTransition
   gesture: null | GestureProvider, // enableGestureTransition
   name: null | string, // enableTransitionTracing only
   startTime: number, // enableTransitionTracing only
@@ -49,6 +46,9 @@ export function startTransition(
 ): void {
   const prevTransition = ReactSharedInternals.T;
   const currentTransition: Transition = ({}: any);
+  if (enableViewTransition) {
+    currentTransition.types = null;
+  }
   if (enableGestureTransition) {
     currentTransition.gesture = null;
   }
@@ -109,6 +109,9 @@ export function startGestureTransition(
   }
   const prevTransition = ReactSharedInternals.T;
   const currentTransition: Transition = ({}: any);
+  if (enableViewTransition) {
+    currentTransition.types = null;
+  }
   if (enableGestureTransition) {
     currentTransition.gesture = provider;
   }
@@ -122,8 +125,6 @@ export function startGestureTransition(
   }
   ReactSharedInternals.T = currentTransition;
 
-  const prevTransitionTypes = pushPendingGestureTransitionTypes();
-
   try {
     const returnValue = scope();
     if (__DEV__) {
@@ -137,20 +138,17 @@ export function startGestureTransition(
         );
       }
     }
-    const transitionTypes = pendingGestureTransitionTypes;
     const onStartGestureTransitionFinish = ReactSharedInternals.G;
     if (onStartGestureTransitionFinish !== null) {
       return onStartGestureTransitionFinish(
         currentTransition,
         provider,
         options,
-        transitionTypes,
       );
     }
   } catch (error) {
     reportGlobalError(error);
   } finally {
-    popPendingGestureTransitionTypes(prevTransitionTypes);
     ReactSharedInternals.T = prevTransition;
   }
   return function cancelGesture() {

packages/react/src/ReactTransitionType.js

@@ -12,44 +12,24 @@ import {
   enableViewTransition,
   enableGestureTransition,
 } from 'shared/ReactFeatureFlags';
+import {startTransition} from './ReactStartTransition';
 
 export type TransitionTypes = Array<string>;
 
-// This one is only available synchronously so we don't need to use ReactSharedInternals
-// for this state. Instead, we track it in isomorphic and pass it to the renderer.
-export let pendingGestureTransitionTypes: null | TransitionTypes = null;
-
-export function pushPendingGestureTransitionTypes(): null | TransitionTypes {
-  const prev = pendingGestureTransitionTypes;
-  pendingGestureTransitionTypes = null;
-  return prev;
-}
-
-export function popPendingGestureTransitionTypes(
-  prev: null | TransitionTypes,
-): void {
-  pendingGestureTransitionTypes = prev;
-}
-
 export function addTransitionType(type: string): void {
   if (enableViewTransition) {
-    let pendingTransitionTypes: null | TransitionTypes;
-    if (
-      enableGestureTransition &&
-      ReactSharedInternals.T !== null &&
-      ReactSharedInternals.T.gesture !== null
-    ) {
-      // We're inside a startGestureTransition which is always sync.
-      pendingTransitionTypes = pendingGestureTransitionTypes;
-      if (pendingTransitionTypes === null) {
-        pendingTransitionTypes = pendingGestureTransitionTypes = [];
+    const transition = ReactSharedInternals.T;
+    if (transition !== null) {
+      const transitionTypes = transition.types;
+      if (transitionTypes === null) {
+        transition.types = [type];
+      } else if (transitionTypes.indexOf(type) === -1) {
+        transitionTypes.push(type);
       }
     } else {
+      // We're in the async gap. Simulate an implicit startTransition around it.
       if (__DEV__) {
-        if (
-          ReactSharedInternals.T === null &&
-          ReactSharedInternals.asyncTransitions === 0
-        ) {
+        if (ReactSharedInternals.asyncTransitions === 0) {
           if (enableGestureTransition) {
             console.error(
               'addTransitionType can only be called inside a `startTransition()` ' +
@@ -64,15 +44,7 @@ export function addTransitionType(type: string): void {
           }
         }
       }
-      // Otherwise we're either inside a synchronous startTransition
-      // or in the async gap of one, which we track globally.
-      pendingTransitionTypes = ReactSharedInternals.V;
-      if (pendingTransitionTypes === null) {
-        pendingTransitionTypes = ReactSharedInternals.V = [];
-      }
-    }
-    if (pendingTransitionTypes.indexOf(type) === -1) {
-      pendingTransitionTypes.push(type);
+      startTransition(addTransitionType.bind(null, type));
     }
   }
 }