Support addTransitionType in startGestureTransition (#32792)

Stacked on #32788.

Normally we track `addTransitionType` globally because of the async gap
that can happen in Actions where we lack AsyncContext to associate it
with a particular Transition. This unfortunately also means it's
possible to call outside of `startTransition` which is something we want
to warn for.

We need to be able to distinguish whether `addTransitionType` is for a
regular Transition or a Gesture Transition though.

Since `startGestureTransition` is only synchronous we can track it
within that execution scope and move it to a separate set. Since we know
for sure which call owns it we can properly associate it with that
specific provider's `ScheduledGesture`.

This does not yet handle calling `addTransitionType` inside the render
phase of a gesture. That would currently still be associated with the
next Transition instead.

Author: sebmarkbage

fixtures/view-transition/src/components/Page.js

@@ -1,4 +1,5 @@
 import React, {
+  unstable_addTransitionType as addTransitionType,
   unstable_ViewTransition as ViewTransition,
   unstable_Activity as Activity,
   useLayoutEffect,
@@ -113,7 +114,12 @@ export default function Page({url, navigate}) {
     <div className="swipe-recognizer">
       <SwipeRecognizer
         action={swipeAction}
-        gesture={optimisticNavigate}
+        gesture={direction => {
+          addTransitionType(
+            direction === 'left' ? 'navigation-forward' : 'navigation-back'
+          );
+          optimisticNavigate(direction);
+        }}
         direction={show ? 'left' : 'right'}>
         <button
           className="button"

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -25,7 +25,7 @@ import type {
   PreinitScriptOptions,
   PreinitModuleScriptOptions,
 } from 'react-dom/src/shared/ReactDOMTypes';
-import type {TransitionTypes} from 'react/src/ReactTransitionType.js';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 import {NotPending} from '../shared/ReactDOMFormActions';
 

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

@@ -8,7 +8,7 @@
  */
 
 import type {InspectorData, TouchedViewDataAtPoint} from './ReactNativeTypes';
-import type {TransitionTypes} from 'react/src/ReactTransitionType.js';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 // Modules provided by RN:
 import {

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

@@ -22,7 +22,7 @@ import type {UpdateQueue} from 'react-reconciler/src/ReactFiberClassUpdateQueue'
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
-import type {TransitionTypes} from 'react/src/ReactTransitionType.js';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';

packages/react-reconciler/src/ReactFiberGestureScheduler.js

@@ -10,6 +10,7 @@
 import type {FiberRoot} from './ReactInternalTypes';
 import type {GestureOptions} from 'shared/ReactTypes';
 import type {GestureTimeline, RunningViewTransition} from './ReactFiberConfig';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 import {
   GestureLane,
@@ -25,6 +26,7 @@ export type ScheduledGesture = {
   count: number, // The number of times this same provider has been started.
   rangeStart: number, // The percentage along the timeline where the "current" state starts.
   rangeEnd: number, // The percentage along the timeline where the "destination" state is reached.
+  types: null | TransitionTypes, // Any addTransitionType call made during startGestureTransition.
   running: null | RunningViewTransition, // Used to cancel the running transition after we're done.
   prev: null | ScheduledGesture, // The previous scheduled gesture in the queue for this root.
   next: null | ScheduledGesture, // The next scheduled gesture in the queue for this root.
@@ -51,6 +53,7 @@ export function scheduleGesture(
     count: 0,
     rangeStart: 0, // Uninitialized
     rangeEnd: 100, // Uninitialized
+    types: null,
     running: null,
     prev: prev,
     next: null,
@@ -68,6 +71,7 @@ export function startScheduledGesture(
   root: FiberRoot,
   gestureTimeline: GestureTimeline,
   gestureOptions: ?GestureOptions,
+  transitionTypes: null | TransitionTypes,
 ): null | ScheduledGesture {
   const rangeStart =
     gestureOptions && gestureOptions.rangeStart != null
@@ -87,6 +91,18 @@ export function startScheduledGesture(
       // Update the options.
       prev.rangeStart = rangeStart;
       prev.rangeEnd = rangeEnd;
+      if (transitionTypes !== null) {
+        let scheduledTypes = prev.types;
+        if (scheduledTypes === null) {
+          scheduledTypes = prev.types = [];
+        }
+        for (let i = 0; i < transitionTypes.length; i++) {
+          const transitionType = transitionTypes[i];
+          if (scheduledTypes.indexOf(transitionType) === -1) {
+            scheduledTypes.push(transitionType);
+          }
+        }
+      }
       return prev;
     }
     const next = prev.next;

packages/react-reconciler/src/ReactFiberTransition.js

@@ -17,6 +17,7 @@ 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,
@@ -112,13 +113,15 @@ 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
@@ -131,7 +134,12 @@ if (enableGestureTransition) {
     // that it's conceptually started globally.
     let root = firstScheduledRoot;
     while (root !== null) {
-      const scheduledGesture = startScheduledGesture(root, provider, options);
+      const scheduledGesture = startScheduledGesture(
+        root,
+        provider,
+        options,
+        transitionTypes,
+      );
       if (scheduledGesture !== null) {
         cancel = chainGestureCancellation(root, scheduledGesture, cancel);
       }

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -31,7 +31,7 @@ import {
   getViewTransitionName,
   type ViewTransitionState,
 } from './ReactFiberViewTransitionComponent';
-import type {TransitionTypes} from 'react/src/ReactTransitionType.js';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 import {
   enableCreateEventHandleAPI,
@@ -3925,8 +3925,7 @@ function commitGestureOnRoot(
     setCurrentUpdatePriority(previousPriority);
     ReactSharedInternals.T = prevTransition;
   }
-  // TODO: Collect transition types.
-  pendingTransitionTypes = null;
+  pendingTransitionTypes = finishedGesture.types;
   pendingEffectsStatus = PENDING_GESTURE_MUTATION_PHASE;
 
   pendingViewTransition = finishedGesture.running = startGestureTransition(

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

@@ -8,7 +8,7 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
-import type {TransitionTypes} from 'react/src/ReactTransitionType.js';
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
 
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';

packages/react/src/ReactSharedInternalsClient.js

@@ -18,12 +18,20 @@ import {
   enableGestureTransition,
 } from 'shared/ReactFeatureFlags';
 
+type onStartTransitionFinish = (Transition, mixed) => void;
+type onStartGestureTransitionFinish = (
+  Transition,
+  GestureProvider,
+  ?GestureOptions,
+  transitionTypes: null | TransitionTypes,
+) => () => void;
+
 export type SharedStateClient = {
   H: null | Dispatcher, // ReactCurrentDispatcher for Hooks
   A: null | AsyncDispatcher, // ReactCurrentCache for Cache
   T: null | Transition, // ReactCurrentBatchConfig for Transitions
-  S: null | ((Transition, mixed) => void), // onStartTransitionFinish
-  G: null | ((Transition, GestureProvider, ?GestureOptions) => () => void), // onStartGestureTransitionFinish
+  S: null | onStartTransitionFinish,
+  G: null | onStartGestureTransitionFinish,
   V: null | TransitionTypes, // Pending Transition Types for the Next Transition
 
   // DEV-only

packages/react/src/ReactStartTransition.js

@@ -21,6 +21,12 @@ import {
   enableGestureTransition,
 } from 'shared/ReactFeatureFlags';
 
+import {
+  pendingGestureTransitionTypes,
+  pushPendingGestureTransitionTypes,
+  popPendingGestureTransitionTypes,
+} from './ReactTransitionType';
+
 import reportGlobalError from 'shared/reportGlobalError';
 
 export type Transition = {
@@ -105,6 +111,8 @@ export function startGestureTransition(
   }
   ReactSharedInternals.T = currentTransition;
 
+  const prevTransitionTypes = pushPendingGestureTransitionTypes();
+
   try {
     const returnValue = scope();
     if (__DEV__) {
@@ -118,17 +126,20 @@ 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

@@ -8,17 +8,51 @@
  */
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {enableViewTransition} from 'shared/ReactFeatureFlags';
+import {
+  enableViewTransition,
+  enableGestureTransition,
+} from 'shared/ReactFeatureFlags';
 
 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) {
-    const pendingTransitionTypes: null | TransitionTypes =
-      ReactSharedInternals.V;
-    if (pendingTransitionTypes === null) {
-      ReactSharedInternals.V = [type];
-    } else if (pendingTransitionTypes.indexOf(type) === -1) {
+    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 = [];
+      }
+    } else {
+      // 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);
     }
   }