diff --git a/packages/react-reconciler/src/ReactFiberActivityComponent.js b/packages/react-reconciler/src/ReactFiberActivityComponent.js index 8d9dcad67e50b..a7eef97d81271 100644 --- a/packages/react-reconciler/src/ReactFiberActivityComponent.js +++ b/packages/react-reconciler/src/ReactFiberActivityComponent.js @@ -10,10 +10,8 @@ import type {ReactNodeList, OffscreenMode, Wakeable} from 'shared/ReactTypes'; import type {Lanes} from './ReactFiberLane'; import type {SpawnedCachePool} from './ReactFiberCacheComponent'; -import type { - Transition, - TracingMarkerInstance, -} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; +import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent'; import type {RetryQueue} from './ReactFiberSuspenseComponent'; export type OffscreenProps = { diff --git a/packages/react-reconciler/src/ReactFiberAsyncAction.js b/packages/react-reconciler/src/ReactFiberAsyncAction.js index 4d210d02ac827..808035c0759ce 100644 --- a/packages/react-reconciler/src/ReactFiberAsyncAction.js +++ b/packages/react-reconciler/src/ReactFiberAsyncAction.js @@ -13,7 +13,7 @@ import type { RejectedThenable, } from 'shared/ReactTypes'; import type {Lane} from './ReactFiberLane'; -import type {BatchConfigTransition} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; import {requestTransitionLane} from './ReactFiberRootScheduler'; import {NoLane} from './ReactFiberLane'; @@ -46,7 +46,7 @@ let currentEntangledLane: Lane = NoLane; let currentEntangledActionThenable: Thenable | null = null; export function entangleAsyncAction( - transition: BatchConfigTransition, + transition: Transition, thenable: Thenable, ): Thenable { // `thenable` is the return value of the async action scope function. Create diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 5b27c8e494d46..5b2bbd30f5979 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -30,8 +30,8 @@ import type { } from './ReactFiberActivityComponent'; import type {Cache} from './ReactFiberCacheComponent'; import type {RootState} from './ReactFiberRoot'; +import type {Transition} from 'react/src/ReactStartTransition'; import type { - Transition, TracingMarkerInstance, TransitionAbort, } from './ReactFiberTracingMarkerComponent'; diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index 30dc3f91384b7..76514e5a89456 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -149,7 +149,7 @@ import { SuspenseActionException, } from './ReactFiberThenable'; import type {ThenableState} from './ReactFiberThenable'; -import type {BatchConfigTransition} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; import { peekEntangledActionLane, peekEntangledActionThenable, @@ -2137,11 +2137,15 @@ function runActionStateAction( // This is a fork of startTransition const prevTransition = ReactSharedInternals.T; - const currentTransition: BatchConfigTransition = {}; - ReactSharedInternals.T = currentTransition; + const currentTransition: Transition = ({}: any); + if (enableTransitionTracing) { + currentTransition.name = null; + currentTransition.startTime = -1; + } if (__DEV__) { - ReactSharedInternals.T._updatedFibers = new Set(); + currentTransition._updatedFibers = new Set(); } + ReactSharedInternals.T = currentTransition; try { const returnValue = action(prevState, payload); const onStartTransitionFinish = ReactSharedInternals.S; @@ -3012,7 +3016,15 @@ function startTransition( ); const prevTransition = ReactSharedInternals.T; - const currentTransition: BatchConfigTransition = {}; + const currentTransition: Transition = ({}: any); + if (enableTransitionTracing) { + currentTransition.name = + options !== undefined && options.name !== undefined ? options.name : null; + currentTransition.startTime = now(); + } + if (__DEV__) { + currentTransition._updatedFibers = new Set(); + } // We don't really need to use an optimistic update here, because we // schedule a second "revert" update below (which we use to suspend the @@ -3023,17 +3035,6 @@ function startTransition( ReactSharedInternals.T = currentTransition; dispatchOptimisticSetState(fiber, false, queue, pendingState); - if (enableTransitionTracing) { - if (options !== undefined && options.name !== undefined) { - currentTransition.name = options.name; - currentTransition.startTime = now(); - } - } - - if (__DEV__) { - currentTransition._updatedFibers = new Set(); - } - try { const returnValue = callback(); const onStartTransitionFinish = ReactSharedInternals.S; diff --git a/packages/react-reconciler/src/ReactFiberLane.js b/packages/react-reconciler/src/ReactFiberLane.js index 22bf99624dbb4..eb65e69508cec 100644 --- a/packages/react-reconciler/src/ReactFiberLane.js +++ b/packages/react-reconciler/src/ReactFiberLane.js @@ -8,7 +8,7 @@ */ import type {Fiber, FiberRoot} from './ReactInternalTypes'; -import type {Transition} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates'; // TODO: Ideally these types would be opaque but that doesn't work well with diff --git a/packages/react-reconciler/src/ReactFiberRootScheduler.js b/packages/react-reconciler/src/ReactFiberRootScheduler.js index e7e61fb6cd1cf..cc5012aac675b 100644 --- a/packages/react-reconciler/src/ReactFiberRootScheduler.js +++ b/packages/react-reconciler/src/ReactFiberRootScheduler.js @@ -10,7 +10,7 @@ import type {FiberRoot} from './ReactInternalTypes'; import type {Lane, Lanes} from './ReactFiberLane'; import type {PriorityLevel} from 'scheduler/src/SchedulerPriorities'; -import type {BatchConfigTransition} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; import { disableLegacyMode, @@ -635,7 +635,7 @@ export function requestTransitionLane( // This argument isn't used, it's only here to encourage the caller to // check that it's inside a transition before calling this function. // TODO: Make this non-nullable. Requires a tweak to useOptimistic. - transition: BatchConfigTransition | null, + transition: Transition | null, ): Lane { // The algorithm for assigning an update to a lane should be stable for all // updates at the same priority within the same event. To do this, the diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js index 039daafa6fa10..b456768ae2064 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js @@ -12,6 +12,7 @@ import type { Fiber, FiberRoot, } from './ReactInternalTypes'; +import type {Transition} from 'react/src/ReactStartTransition'; import type {OffscreenInstance} from './ReactFiberActivityComponent'; import type {StackCursor} from './ReactFiberStack'; @@ -36,19 +37,6 @@ export type PendingTransitionCallbacks = { markerComplete: Map> | null, }; -// TODO: Unclear to me why these are separate types -export type Transition = { - name: string, - startTime: number, - ... -}; - -export type BatchConfigTransition = { - name?: string, - startTime?: number, - _updatedFibers?: Set, -}; - // TODO: Is there a way to not include the tag or name here? export type TracingMarkerInstance = { tag?: TracingMarkerTag, @@ -79,9 +67,11 @@ export function processTransitionCallbacks( const transitionStart = pendingTransitions.transitionStart; const onTransitionStart = callbacks.onTransitionStart; if (transitionStart !== null && onTransitionStart != null) { - transitionStart.forEach(transition => - onTransitionStart(transition.name, transition.startTime), - ); + transitionStart.forEach(transition => { + if (transition.name != null) { + onTransitionStart(transition.name, transition.startTime); + } + }); } const markerProgress = pendingTransitions.markerProgress; @@ -95,13 +85,15 @@ export function processTransitionCallbacks( ? Array.from(markerInstance.pendingBoundaries.values()) : []; markerInstance.transitions.forEach(transition => { - onMarkerProgress( - transition.name, - markerName, - transition.startTime, - endTime, - pending, - ); + if (transition.name != null) { + onMarkerProgress( + transition.name, + markerName, + transition.startTime, + endTime, + pending, + ); + } }); } }); @@ -112,12 +104,14 @@ export function processTransitionCallbacks( if (markerComplete !== null && onMarkerComplete != null) { markerComplete.forEach((transitions, markerName) => { transitions.forEach(transition => { - onMarkerComplete( - transition.name, - markerName, - transition.startTime, - endTime, - ); + if (transition.name != null) { + onMarkerComplete( + transition.name, + markerName, + transition.startTime, + endTime, + ); + } }); }); } @@ -153,12 +147,14 @@ export function processTransitionCallbacks( }); if (filteredAborts.length > 0) { - onMarkerIncomplete( - transition.name, - markerName, - transition.startTime, - filteredAborts, - ); + if (transition.name != null) { + onMarkerIncomplete( + transition.name, + markerName, + transition.startTime, + filteredAborts, + ); + } } }); }); @@ -168,21 +164,29 @@ export function processTransitionCallbacks( const onTransitionProgress = callbacks.onTransitionProgress; if (onTransitionProgress != null && transitionProgress !== null) { transitionProgress.forEach((pending, transition) => { - onTransitionProgress( - transition.name, - transition.startTime, - endTime, - Array.from(pending.values()), - ); + if (transition.name != null) { + onTransitionProgress( + transition.name, + transition.startTime, + endTime, + Array.from(pending.values()), + ); + } }); } const transitionComplete = pendingTransitions.transitionComplete; const onTransitionComplete = callbacks.onTransitionComplete; if (transitionComplete !== null && onTransitionComplete != null) { - transitionComplete.forEach(transition => - onTransitionComplete(transition.name, transition.startTime, endTime), - ); + transitionComplete.forEach(transition => { + if (transition.name != null) { + onTransitionComplete( + transition.name, + transition.startTime, + endTime, + ); + } + }); } } } diff --git a/packages/react-reconciler/src/ReactFiberTransition.js b/packages/react-reconciler/src/ReactFiberTransition.js index db4db589084f1..e74e2761a8586 100644 --- a/packages/react-reconciler/src/ReactFiberTransition.js +++ b/packages/react-reconciler/src/ReactFiberTransition.js @@ -11,10 +11,7 @@ import type {Thenable} from 'shared/ReactTypes'; import type {Lanes} from './ReactFiberLane'; import type {StackCursor} from './ReactFiberStack'; import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent'; -import type { - BatchConfigTransition, - Transition, -} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; import {enableTransitionTracing} from 'shared/ReactFeatureFlags'; import {isPrimaryRenderer} from './ReactFiberConfig'; @@ -57,7 +54,7 @@ export const NoTransition = null; // reconciler. Leaving this for a future PR. const prevOnStartTransitionFinish = ReactSharedInternals.S; ReactSharedInternals.S = function onStartTransitionFinishForReconciler( - transition: BatchConfigTransition, + transition: Transition, returnValue: mixed, ) { if ( @@ -81,7 +78,7 @@ ReactSharedInternals.S = function onStartTransitionFinishForReconciler( } }; -export function requestCurrentTransition(): BatchConfigTransition | null { +export function requestCurrentTransition(): Transition | null { return ReactSharedInternals.T; } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index c86a5f084ea8d..95aae97197e8c 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -14,10 +14,10 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes'; import type {Lanes, Lane} from './ReactFiberLane'; import type {SuspenseState} from './ReactFiberSuspenseComponent'; import type {FunctionComponentUpdateQueue} from './ReactFiberHooks'; +import type {Transition} from 'react/src/ReactStartTransition'; import type { PendingTransitionCallbacks, PendingBoundaries, - Transition, TransitionAbort, } from './ReactFiberTracingMarkerComponent'; import type {OffscreenInstance} from './ReactFiberActivityComponent'; @@ -927,8 +927,6 @@ export function scheduleUpdateOnFiber( transition.startTime = now(); } - // $FlowFixMe[prop-missing]: The BatchConfigTransition and Transition types are incompatible but was previously untyped and thus uncaught - // $FlowFixMe[incompatible-call]: " addTransitionToLanesMap(root, transition, lane); } } diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index 4de46988db14b..a683401283e8c 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -33,10 +33,8 @@ import type { TransitionStatus, } from './ReactFiberConfig'; import type {Cache} from './ReactFiberCacheComponent'; -import type { - TracingMarkerInstance, - Transition, -} from './ReactFiberTracingMarkerComponent'; +import type {Transition} from 'react/src/ReactStartTransition'; +import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent'; import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates'; import type {ComponentStackNode} from 'react-server/src/ReactFizzComponentStack'; import type {ThenableState} from './ReactFiberThenable'; diff --git a/packages/react/src/ReactSharedInternalsClient.js b/packages/react/src/ReactSharedInternalsClient.js index 746ee99c1d035..7f8daf9ec032a 100644 --- a/packages/react/src/ReactSharedInternalsClient.js +++ b/packages/react/src/ReactSharedInternalsClient.js @@ -9,14 +9,14 @@ import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes'; import type {AsyncDispatcher} from 'react-reconciler/src/ReactInternalTypes'; -import type {BatchConfigTransition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent'; +import type {Transition} from './ReactStartTransition'; import type {TransitionTypes} from './ReactTransitionType'; export type SharedStateClient = { H: null | Dispatcher, // ReactCurrentDispatcher for Hooks A: null | AsyncDispatcher, // ReactCurrentCache for Cache - T: null | BatchConfigTransition, // ReactCurrentBatchConfig for Transitions - S: null | ((BatchConfigTransition, mixed) => void), // onStartTransitionFinish + T: null | Transition, // ReactCurrentBatchConfig for Transitions + S: null | ((Transition, mixed) => void), // onStartTransitionFinish V: null | TransitionTypes, // Pending Transition Types for the Next Transition // DEV-only diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js index 99ccbb959b015..47e522aae9086 100644 --- a/packages/react/src/ReactStartTransition.js +++ b/packages/react/src/ReactStartTransition.js @@ -6,8 +6,9 @@ * * @flow */ -import type {BatchConfigTransition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent'; + import type {StartTransitionOptions} from 'shared/ReactTypes'; +import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; import ReactSharedInternals from 'shared/ReactSharedInternals'; @@ -15,24 +16,28 @@ import {enableTransitionTracing} from 'shared/ReactFeatureFlags'; import reportGlobalError from 'shared/reportGlobalError'; +export type Transition = { + name: null | string, // enableTransitionTracing only + startTime: number, // enableTransitionTracing only + _updatedFibers: Set, // DEV-only + ... +}; + export function startTransition( scope: () => void, options?: StartTransitionOptions, ) { const prevTransition = ReactSharedInternals.T; - const currentTransition: BatchConfigTransition = {}; - ReactSharedInternals.T = currentTransition; - + const currentTransition: Transition = ({}: any); + if (enableTransitionTracing) { + currentTransition.name = + options !== undefined && options.name !== undefined ? options.name : null; + currentTransition.startTime = -1; // TODO: This should read the timestamp. + } if (__DEV__) { currentTransition._updatedFibers = new Set(); } - - if (enableTransitionTracing) { - if (options !== undefined && options.name !== undefined) { - currentTransition.name = options.name; - currentTransition.startTime = -1; - } - } + ReactSharedInternals.T = currentTransition; try { const returnValue = scope(); @@ -56,8 +61,8 @@ export function startTransition( } function warnAboutTransitionSubscriptions( - prevTransition: BatchConfigTransition | null, - currentTransition: BatchConfigTransition, + prevTransition: Transition | null, + currentTransition: Transition, ) { if (__DEV__) { if (prevTransition === null && currentTransition._updatedFibers) {