From bd16b96a44885bdba4afede714f4b28419e0a8d8 Mon Sep 17 00:00:00 2001 From: acdlite Date: Fri, 26 Jan 2024 02:59:47 +0000 Subject: [PATCH] Async action support for React.startTransition (#28097) This adds support for async actions to the "isomorphic" version of startTransition (i.e. the one exported by the "react" package). Previously, async actions were only supported by the startTransition that is returned from the useTransition hook. The interesting part about the isomorphic startTransition is that it's not associated with any particular root. It must work with updates to arbitrary roots, or even arbitrary React renderers in the same app. (For example, both React DOM and React Three Fiber.) The idea is that React.startTransition should behave as if every root had an implicit useTransition hook, and you composed together all the startTransitions provided by those hooks. Multiple updates to the same root will be batched together. However, updates to one root will not be batched with updates to other roots. Features like useOptimistic work the same as with the hook version. There is one difference from from the hook version of startTransition: an error triggered inside an async action cannot be captured by an error boundary, because it's not associated with any particular part of the tree. You should handle errors the same way you would in a regular event, e.g. with a global error event handler, or with a local `try/catch`. DiffTrain build for [85b296e9b6ded4accd9ec3389297f95091fb1ac0](https://github.com/facebook/react/commit/85b296e9b6ded4accd9ec3389297f95091fb1ac0) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.classic.js | 17 +- compiled/facebook-www/React-dev.modern.js | 17 +- compiled/facebook-www/React-prod.classic.js | 13 +- compiled/facebook-www/React-prod.modern.js | 13 +- .../facebook-www/React-profiling.classic.js | 13 +- .../facebook-www/React-profiling.modern.js | 13 +- compiled/facebook-www/ReactART-dev.classic.js | 99 +++++++---- compiled/facebook-www/ReactART-dev.modern.js | 99 +++++++---- .../facebook-www/ReactART-prod.classic.js | 116 +++++++------ compiled/facebook-www/ReactART-prod.modern.js | 116 +++++++------ compiled/facebook-www/ReactDOM-dev.classic.js | 99 +++++++---- compiled/facebook-www/ReactDOM-dev.modern.js | 99 +++++++---- .../facebook-www/ReactDOM-prod.classic.js | 156 ++++++++++-------- compiled/facebook-www/ReactDOM-prod.modern.js | 156 ++++++++++-------- .../ReactDOM-profiling.classic.js | 142 +++++++++------- .../facebook-www/ReactDOM-profiling.modern.js | 142 +++++++++------- .../facebook-www/ReactDOMServer-dev.modern.js | 2 +- .../ReactDOMTesting-dev.classic.js | 99 +++++++---- .../ReactDOMTesting-dev.modern.js | 99 +++++++---- .../ReactDOMTesting-prod.classic.js | 156 ++++++++++-------- .../ReactDOMTesting-prod.modern.js | 156 ++++++++++-------- .../facebook-www/ReactServer-dev.modern.js | 17 +- .../facebook-www/ReactServer-prod.modern.js | 13 +- .../ReactTestRenderer-dev.classic.js | 104 ++++++++---- .../ReactTestRenderer-dev.modern.js | 104 ++++++++---- 26 files changed, 1300 insertions(+), 762 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index c5bc8186c1780..3df3bd858fee4 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -382190c595126837ee7e43b4fa953f4edd30e01c +85b296e9b6ded4accd9ec3389297f95091fb1ac0 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 5cf5308eeacca..9669a4e2eb247 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-www-classic-92f5a9ab"; + var ReactVersion = "18.3.0-www-classic-af9ffe5b"; // ATTENTION // When adding new symbols to this file, @@ -2961,8 +2961,14 @@ if (__DEV__) { } function startTransition(scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of + // the scope function. This is used to implement async actions. + + var callbacks = new Set(); + var transition = { + _callbacks: callbacks + }; + ReactCurrentBatchConfig.transition = transition; var currentTransition = ReactCurrentBatchConfig.transition; { @@ -2979,7 +2985,10 @@ if (__DEV__) { } try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index e9acb15195756..4e1fd1b94bf0b 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-www-modern-c131adbc"; + var ReactVersion = "18.3.0-www-modern-c761065d"; // ATTENTION // When adding new symbols to this file, @@ -2926,8 +2926,14 @@ if (__DEV__) { } function startTransition(scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of + // the scope function. This is used to implement async actions. + + var callbacks = new Set(); + var transition = { + _callbacks: callbacks + }; + ReactCurrentBatchConfig.transition = transition; var currentTransition = ReactCurrentBatchConfig.transition; { @@ -2944,7 +2950,10 @@ if (__DEV__) { } try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index e97f90bc5129c..c9a66d42d1a65 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -444,15 +444,20 @@ exports.memo = function (type, compare) { }; }; exports.startTransition = function (scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition, + callbacks = new Set(); + ReactCurrentBatchConfig.transition = { _callbacks: callbacks }; + var currentTransition = ReactCurrentBatchConfig.transition; enableTransitionTracing && void 0 !== options && void 0 !== options.name && ((ReactCurrentBatchConfig.transition.name = options.name), (ReactCurrentBatchConfig.transition.startTime = -1)); try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; } @@ -546,4 +551,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-63557ef1"; +exports.version = "18.3.0-www-classic-d6e83430"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index 42afec76c35c1..0e54cadc53c43 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -437,15 +437,20 @@ exports.memo = function (type, compare) { }; }; exports.startTransition = function (scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition, + callbacks = new Set(); + ReactCurrentBatchConfig.transition = { _callbacks: callbacks }; + var currentTransition = ReactCurrentBatchConfig.transition; enableTransitionTracing && void 0 !== options && void 0 !== options.name && ((ReactCurrentBatchConfig.transition.name = options.name), (ReactCurrentBatchConfig.transition.startTime = -1)); try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; } @@ -538,4 +543,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-14d3332b"; +exports.version = "18.3.0-www-modern-5a0946d0"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 9e790df053156..bf34085c8261b 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -448,15 +448,20 @@ exports.memo = function (type, compare) { }; }; exports.startTransition = function (scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition, + callbacks = new Set(); + ReactCurrentBatchConfig.transition = { _callbacks: callbacks }; + var currentTransition = ReactCurrentBatchConfig.transition; enableTransitionTracing && void 0 !== options && void 0 !== options.name && ((ReactCurrentBatchConfig.transition.name = options.name), (ReactCurrentBatchConfig.transition.startTime = -1)); try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; } @@ -550,7 +555,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-de2439d8"; +exports.version = "18.3.0-www-classic-00275770"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 0782c2a44637c..e493c8649b9c5 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -441,15 +441,20 @@ exports.memo = function (type, compare) { }; }; exports.startTransition = function (scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition, + callbacks = new Set(); + ReactCurrentBatchConfig.transition = { _callbacks: callbacks }; + var currentTransition = ReactCurrentBatchConfig.transition; enableTransitionTracing && void 0 !== options && void 0 !== options.name && ((ReactCurrentBatchConfig.transition.name = options.name), (ReactCurrentBatchConfig.transition.startTime = -1)); try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; } @@ -542,7 +547,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-5b70880a"; +exports.version = "18.3.0-www-modern-a0181100"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index aa7a98fe3e2b1..593696d856e5b 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-classic-01089305"; + var ReactVersion = "18.3.0-www-classic-73d18ac0"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -4787,7 +4787,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -4820,7 +4824,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -9104,16 +9108,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (!enableAsyncActions || revertLane === NoLane) { @@ -9133,6 +9128,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -9143,7 +9144,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -10147,7 +10155,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; if (enableAsyncActions) { // We don't really need to use an optimistic update here, because we @@ -10177,7 +10187,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -10191,8 +10202,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -10501,8 +10511,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$2.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -13780,6 +13792,8 @@ if (__DEV__) { return false; } + // TODO: Is there a way to not include the tag or name here? + var TransitionRoot = 0; var TransitionTracingMarker = 1; function processTransitionCallbacks( @@ -18420,9 +18434,36 @@ if (__DEV__) { var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$1.transition; + var transition = ReactCurrentBatchConfig$1.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + enableAsyncActions && + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -24771,17 +24812,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig.transition !== null) { - var transition = ReactCurrentBatchConfig.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -24848,7 +24889,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 76526619ccf94..7cfa909c1d768 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-modern-aab9ce44"; + var ReactVersion = "18.3.0-www-modern-2a25f03a"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -4537,7 +4537,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -4570,7 +4574,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -8854,16 +8858,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (!enableAsyncActions || revertLane === NoLane) { @@ -8883,6 +8878,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -8893,7 +8894,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -9897,7 +9905,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; if (enableAsyncActions) { // We don't really need to use an optimistic update here, because we @@ -9927,7 +9937,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -9941,8 +9952,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -10251,8 +10261,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$2.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -13489,6 +13501,8 @@ if (__DEV__) { return false; } + // TODO: Is there a way to not include the tag or name here? + var TransitionRoot = 0; var TransitionTracingMarker = 1; function processTransitionCallbacks( @@ -18093,9 +18107,36 @@ if (__DEV__) { var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$1.transition; + var transition = ReactCurrentBatchConfig$1.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + enableAsyncActions && + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -24415,17 +24456,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig.transition !== null) { - var transition = ReactCurrentBatchConfig.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -24492,7 +24533,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 14d4ca705e645..6f9a662c7a3bf 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -533,6 +533,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -1360,19 +1366,15 @@ function scheduleTaskForRootDuringMicrotask(root, currentTime) { return currentTime; } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -2870,30 +2872,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$31 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$31 = !0); continue; - } else { - var clone$33 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$33), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$33); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -2904,7 +2904,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$31 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -2912,7 +2914,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$33 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -2921,9 +2923,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$33), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$33), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -3243,7 +3245,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$2.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$2.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -3258,12 +3260,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -3367,6 +3369,7 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -5730,8 +5733,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$1.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -8373,7 +8393,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$1.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -8386,7 +8406,7 @@ function requestDeferredLane() { (workInProgressDeferredLane = 0 !== (workInProgressRootRenderLanes & 536870912) ? 536870912 - : requestTransitionLane()); + : claimNextTransitionLane()); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); return workInProgressDeferredLane; @@ -10305,19 +10325,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1146 = { + devToolsConfig$jscomp$inline_1144 = { findFiberByHostInstance: function () { return null; }, bundleType: 0, - version: "18.3.0-www-classic-17eadd93", + version: "18.3.0-www-classic-b4063908", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1312 = { - bundleType: devToolsConfig$jscomp$inline_1146.bundleType, - version: devToolsConfig$jscomp$inline_1146.version, - rendererPackageName: devToolsConfig$jscomp$inline_1146.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1146.rendererConfig, +var internals$jscomp$inline_1310 = { + bundleType: devToolsConfig$jscomp$inline_1144.bundleType, + version: devToolsConfig$jscomp$inline_1144.version, + rendererPackageName: devToolsConfig$jscomp$inline_1144.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1144.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10334,26 +10354,26 @@ var internals$jscomp$inline_1312 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1146.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1144.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-17eadd93" + reconcilerVersion: "18.3.0-www-classic-b4063908" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1313 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1311 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1313.isDisabled && - hook$jscomp$inline_1313.supportsFiber + !hook$jscomp$inline_1311.isDisabled && + hook$jscomp$inline_1311.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1313.inject( - internals$jscomp$inline_1312 + (rendererID = hook$jscomp$inline_1311.inject( + internals$jscomp$inline_1310 )), - (injectedHook = hook$jscomp$inline_1313); + (injectedHook = hook$jscomp$inline_1311); } catch (err) {} } var Path = Mode$1.Path; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index dd043cf473c10..83a6e62ba4ac6 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -418,6 +418,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -1167,19 +1173,15 @@ function scheduleTaskForRootDuringMicrotask(root, currentTime) { return currentTime; } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -2677,30 +2679,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$31 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$31 = !0); continue; - } else { - var clone$33 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$33), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$33); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -2711,7 +2711,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$31 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -2719,7 +2721,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$33 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -2728,9 +2730,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$33), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$33), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -3050,7 +3052,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$2.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$2.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -3065,12 +3067,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -3174,6 +3176,7 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -5486,8 +5489,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$1.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -8110,7 +8130,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$1.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -8123,7 +8143,7 @@ function requestDeferredLane() { (workInProgressDeferredLane = 0 !== (workInProgressRootRenderLanes & 536870912) ? 536870912 - : requestTransitionLane()); + : claimNextTransitionLane()); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); return workInProgressDeferredLane; @@ -9971,19 +9991,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1126 = { + devToolsConfig$jscomp$inline_1124 = { findFiberByHostInstance: function () { return null; }, bundleType: 0, - version: "18.3.0-www-modern-e3c468a4", + version: "18.3.0-www-modern-991669f2", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1292 = { - bundleType: devToolsConfig$jscomp$inline_1126.bundleType, - version: devToolsConfig$jscomp$inline_1126.version, - rendererPackageName: devToolsConfig$jscomp$inline_1126.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1126.rendererConfig, +var internals$jscomp$inline_1290 = { + bundleType: devToolsConfig$jscomp$inline_1124.bundleType, + version: devToolsConfig$jscomp$inline_1124.version, + rendererPackageName: devToolsConfig$jscomp$inline_1124.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1124.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10000,26 +10020,26 @@ var internals$jscomp$inline_1292 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1126.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1124.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-e3c468a4" + reconcilerVersion: "18.3.0-www-modern-991669f2" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1293 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1291 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1293.isDisabled && - hook$jscomp$inline_1293.supportsFiber + !hook$jscomp$inline_1291.isDisabled && + hook$jscomp$inline_1291.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1293.inject( - internals$jscomp$inline_1292 + (rendererID = hook$jscomp$inline_1291.inject( + internals$jscomp$inline_1290 )), - (injectedHook = hook$jscomp$inline_1293); + (injectedHook = hook$jscomp$inline_1291); } catch (err) {} } var Path = Mode$1.Path; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index a9baeb143cd69..495a9d6cbfcb1 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -9530,7 +9530,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -9563,7 +9567,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -13715,16 +13719,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (!enableAsyncActions || revertLane === NoLane) { @@ -13744,6 +13739,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -13754,7 +13755,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -14791,7 +14799,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$3.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; if (enableAsyncActions) { // We don't really need to use an optimistic update here, because we @@ -14821,7 +14831,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -14835,8 +14846,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -15159,8 +15169,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$3.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -18501,6 +18513,8 @@ if (__DEV__) { return false; } + // TODO: Is there a way to not include the tag or name here? + var TransitionRoot = 0; var TransitionTracingMarker = 1; function processTransitionCallbacks( @@ -23422,9 +23436,36 @@ if (__DEV__) { var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$2.transition; + var transition = ReactCurrentBatchConfig$2.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + enableAsyncActions && + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -30389,17 +30430,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig$1.transition !== null) { - var transition = ReactCurrentBatchConfig$1.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig$1.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -30466,7 +30507,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. @@ -35004,7 +35045,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-703f3e7b"; + var ReactVersion = "18.3.0-www-classic-463bb300"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 0e0ee87ba4295..63125cd3f32a3 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -9466,7 +9466,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -9499,7 +9503,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -13651,16 +13655,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (!enableAsyncActions || revertLane === NoLane) { @@ -13680,6 +13675,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -13690,7 +13691,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -14727,7 +14735,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$3.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; if (enableAsyncActions) { // We don't really need to use an optimistic update here, because we @@ -14757,7 +14767,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -14771,8 +14782,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -15095,8 +15105,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$3.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -18396,6 +18408,8 @@ if (__DEV__) { return false; } + // TODO: Is there a way to not include the tag or name here? + var TransitionRoot = 0; var TransitionTracingMarker = 1; function processTransitionCallbacks( @@ -23281,9 +23295,36 @@ if (__DEV__) { var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$2.transition; + var transition = ReactCurrentBatchConfig$2.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + enableAsyncActions && + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -30219,17 +30260,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig$1.transition !== null) { - var transition = ReactCurrentBatchConfig$1.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig$1.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -30296,7 +30337,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. @@ -34825,7 +34866,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-8fbdac61"; + var ReactVersion = "18.3.0-www-modern-6f317449"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 15e446764b905..735d0e685ca61 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -577,6 +577,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -2106,19 +2112,15 @@ function scheduleImmediateTask(cb) { }); } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -3610,30 +3612,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$52 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); continue; - } else { - var clone$54 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -3644,7 +3644,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -3652,7 +3654,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$54 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -3661,9 +3663,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -3994,7 +3996,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$3.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$3.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -4009,12 +4011,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4118,6 +4120,7 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -6629,8 +6632,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$2.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -9978,7 +9998,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$2.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -9993,7 +10013,7 @@ function requestDeferredLane() { 0 === workInProgressDeferredLane && (workInProgressDeferredLane = 0 === (workInProgressRootRenderLanes & 536870912) || isHydrating - ? requestTransitionLane() + ? claimNextTransitionLane() : 536870912); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); @@ -12732,14 +12752,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$345; if (canUseDOM) { - var isSupported$jscomp$inline_1536 = "oninput" in document; - if (!isSupported$jscomp$inline_1536) { - var element$jscomp$inline_1537 = document.createElement("div"); - element$jscomp$inline_1537.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1536 = - "function" === typeof element$jscomp$inline_1537.oninput; + var isSupported$jscomp$inline_1534 = "oninput" in document; + if (!isSupported$jscomp$inline_1534) { + var element$jscomp$inline_1535 = document.createElement("div"); + element$jscomp$inline_1535.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1534 = + "function" === typeof element$jscomp$inline_1535.oninput; } - JSCompiler_inline_result$jscomp$345 = isSupported$jscomp$inline_1536; + JSCompiler_inline_result$jscomp$345 = isSupported$jscomp$inline_1534; } else JSCompiler_inline_result$jscomp$345 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$345 && @@ -13051,20 +13071,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1577 = 0; - i$jscomp$inline_1577 < simpleEventPluginEvents.length; - i$jscomp$inline_1577++ + var i$jscomp$inline_1575 = 0; + i$jscomp$inline_1575 < simpleEventPluginEvents.length; + i$jscomp$inline_1575++ ) { - var eventName$jscomp$inline_1578 = - simpleEventPluginEvents[i$jscomp$inline_1577], - domEventName$jscomp$inline_1579 = - eventName$jscomp$inline_1578.toLowerCase(), - capitalizedEvent$jscomp$inline_1580 = - eventName$jscomp$inline_1578[0].toUpperCase() + - eventName$jscomp$inline_1578.slice(1); + var eventName$jscomp$inline_1576 = + simpleEventPluginEvents[i$jscomp$inline_1575], + domEventName$jscomp$inline_1577 = + eventName$jscomp$inline_1576.toLowerCase(), + capitalizedEvent$jscomp$inline_1578 = + eventName$jscomp$inline_1576[0].toUpperCase() + + eventName$jscomp$inline_1576.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1579, - "on" + capitalizedEvent$jscomp$inline_1580 + domEventName$jscomp$inline_1577, + "on" + capitalizedEvent$jscomp$inline_1578 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -16618,17 +16638,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1803 = { +var devToolsConfig$jscomp$inline_1801 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-03343c86", + version: "18.3.0-www-classic-bf108a56", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2149 = { - bundleType: devToolsConfig$jscomp$inline_1803.bundleType, - version: devToolsConfig$jscomp$inline_1803.version, - rendererPackageName: devToolsConfig$jscomp$inline_1803.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1803.rendererConfig, +var internals$jscomp$inline_2147 = { + bundleType: devToolsConfig$jscomp$inline_1801.bundleType, + version: devToolsConfig$jscomp$inline_1801.version, + rendererPackageName: devToolsConfig$jscomp$inline_1801.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1801.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16644,26 +16664,26 @@ var internals$jscomp$inline_2149 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1803.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1801.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-03343c86" + reconcilerVersion: "18.3.0-www-classic-bf108a56" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2150 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2148 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2150.isDisabled && - hook$jscomp$inline_2150.supportsFiber + !hook$jscomp$inline_2148.isDisabled && + hook$jscomp$inline_2148.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2150.inject( - internals$jscomp$inline_2149 + (rendererID = hook$jscomp$inline_2148.inject( + internals$jscomp$inline_2147 )), - (injectedHook = hook$jscomp$inline_2150); + (injectedHook = hook$jscomp$inline_2148); } catch (err) {} } assign(Internals, { @@ -16988,4 +17008,4 @@ exports.useFormState = function () { exports.useFormStatus = function () { throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-classic-03343c86"; +exports.version = "18.3.0-www-classic-bf108a56"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 611630f15e7f0..ec4e3994393f2 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -335,6 +335,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -2000,19 +2006,15 @@ function scheduleImmediateTask(cb) { }); } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -3504,30 +3506,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$52 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); continue; - } else { - var clone$54 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -3538,7 +3538,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -3546,7 +3548,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$54 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -3555,9 +3557,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -3888,7 +3890,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$3.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$3.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -3903,12 +3905,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4012,6 +4014,7 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -6472,8 +6475,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$2.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -9815,7 +9835,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$2.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -9830,7 +9850,7 @@ function requestDeferredLane() { 0 === workInProgressDeferredLane && (workInProgressDeferredLane = 0 === (workInProgressRootRenderLanes & 536870912) || isHydrating - ? requestTransitionLane() + ? claimNextTransitionLane() : 536870912); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); @@ -12973,14 +12993,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$343; if (canUseDOM) { - var isSupported$jscomp$inline_1535 = "oninput" in document; - if (!isSupported$jscomp$inline_1535) { - var element$jscomp$inline_1536 = document.createElement("div"); - element$jscomp$inline_1536.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1535 = - "function" === typeof element$jscomp$inline_1536.oninput; + var isSupported$jscomp$inline_1533 = "oninput" in document; + if (!isSupported$jscomp$inline_1533) { + var element$jscomp$inline_1534 = document.createElement("div"); + element$jscomp$inline_1534.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1533 = + "function" === typeof element$jscomp$inline_1534.oninput; } - JSCompiler_inline_result$jscomp$343 = isSupported$jscomp$inline_1535; + JSCompiler_inline_result$jscomp$343 = isSupported$jscomp$inline_1533; } else JSCompiler_inline_result$jscomp$343 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$343 && @@ -13292,20 +13312,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1576 = 0; - i$jscomp$inline_1576 < simpleEventPluginEvents.length; - i$jscomp$inline_1576++ + var i$jscomp$inline_1574 = 0; + i$jscomp$inline_1574 < simpleEventPluginEvents.length; + i$jscomp$inline_1574++ ) { - var eventName$jscomp$inline_1577 = - simpleEventPluginEvents[i$jscomp$inline_1576], - domEventName$jscomp$inline_1578 = - eventName$jscomp$inline_1577.toLowerCase(), - capitalizedEvent$jscomp$inline_1579 = - eventName$jscomp$inline_1577[0].toUpperCase() + - eventName$jscomp$inline_1577.slice(1); + var eventName$jscomp$inline_1575 = + simpleEventPluginEvents[i$jscomp$inline_1574], + domEventName$jscomp$inline_1576 = + eventName$jscomp$inline_1575.toLowerCase(), + capitalizedEvent$jscomp$inline_1577 = + eventName$jscomp$inline_1575[0].toUpperCase() + + eventName$jscomp$inline_1575.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1578, - "on" + capitalizedEvent$jscomp$inline_1579 + domEventName$jscomp$inline_1576, + "on" + capitalizedEvent$jscomp$inline_1577 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -16141,17 +16161,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1762 = { +var devToolsConfig$jscomp$inline_1760 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b0fef927", + version: "18.3.0-www-modern-d5b75bf8", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2113 = { - bundleType: devToolsConfig$jscomp$inline_1762.bundleType, - version: devToolsConfig$jscomp$inline_1762.version, - rendererPackageName: devToolsConfig$jscomp$inline_1762.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1762.rendererConfig, +var internals$jscomp$inline_2111 = { + bundleType: devToolsConfig$jscomp$inline_1760.bundleType, + version: devToolsConfig$jscomp$inline_1760.version, + rendererPackageName: devToolsConfig$jscomp$inline_1760.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1760.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16168,26 +16188,26 @@ var internals$jscomp$inline_2113 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1762.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1760.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-b0fef927" + reconcilerVersion: "18.3.0-www-modern-d5b75bf8" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2114 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2112 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2114.isDisabled && - hook$jscomp$inline_2114.supportsFiber + !hook$jscomp$inline_2112.isDisabled && + hook$jscomp$inline_2112.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2114.inject( - internals$jscomp$inline_2113 + (rendererID = hook$jscomp$inline_2112.inject( + internals$jscomp$inline_2111 )), - (injectedHook = hook$jscomp$inline_2114); + (injectedHook = hook$jscomp$inline_2112); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16440,4 +16460,4 @@ exports.useFormState = function () { exports.useFormStatus = function () { throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-modern-b0fef927"; +exports.version = "18.3.0-www-modern-d5b75bf8"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 67b9964b4989f..8ed043284c28a 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -685,6 +685,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -2246,19 +2252,15 @@ function scheduleImmediateTask(cb) { }); } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -3750,30 +3752,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$55 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$55 = !0); continue; - } else { - var clone$57 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$57), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$57); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -3784,7 +3784,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$55 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -3792,7 +3794,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$57 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -3801,9 +3803,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$57), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$57), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -4134,7 +4136,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$3.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$3.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -4149,12 +4151,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4260,6 +4262,7 @@ function dispatchSetState(fiber, queue, action) { enableSchedulingProfiler && markStateUpdateScheduled(fiber, lane); } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -6873,8 +6876,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$2.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -10566,7 +10586,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$2.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -10581,7 +10601,7 @@ function requestDeferredLane() { 0 === workInProgressDeferredLane && (workInProgressDeferredLane = 0 === (workInProgressRootRenderLanes & 536870912) || isHydrating - ? requestTransitionLane() + ? claimNextTransitionLane() : 536870912); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); @@ -13501,14 +13521,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$366; if (canUseDOM) { - var isSupported$jscomp$inline_1621 = "oninput" in document; - if (!isSupported$jscomp$inline_1621) { - var element$jscomp$inline_1622 = document.createElement("div"); - element$jscomp$inline_1622.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1621 = - "function" === typeof element$jscomp$inline_1622.oninput; + var isSupported$jscomp$inline_1619 = "oninput" in document; + if (!isSupported$jscomp$inline_1619) { + var element$jscomp$inline_1620 = document.createElement("div"); + element$jscomp$inline_1620.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1619 = + "function" === typeof element$jscomp$inline_1620.oninput; } - JSCompiler_inline_result$jscomp$366 = isSupported$jscomp$inline_1621; + JSCompiler_inline_result$jscomp$366 = isSupported$jscomp$inline_1619; } else JSCompiler_inline_result$jscomp$366 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$366 && @@ -13820,20 +13840,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1662 = 0; - i$jscomp$inline_1662 < simpleEventPluginEvents.length; - i$jscomp$inline_1662++ + var i$jscomp$inline_1660 = 0; + i$jscomp$inline_1660 < simpleEventPluginEvents.length; + i$jscomp$inline_1660++ ) { - var eventName$jscomp$inline_1663 = - simpleEventPluginEvents[i$jscomp$inline_1662], - domEventName$jscomp$inline_1664 = - eventName$jscomp$inline_1663.toLowerCase(), - capitalizedEvent$jscomp$inline_1665 = - eventName$jscomp$inline_1663[0].toUpperCase() + - eventName$jscomp$inline_1663.slice(1); + var eventName$jscomp$inline_1661 = + simpleEventPluginEvents[i$jscomp$inline_1660], + domEventName$jscomp$inline_1662 = + eventName$jscomp$inline_1661.toLowerCase(), + capitalizedEvent$jscomp$inline_1663 = + eventName$jscomp$inline_1661[0].toUpperCase() + + eventName$jscomp$inline_1661.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1664, - "on" + capitalizedEvent$jscomp$inline_1665 + domEventName$jscomp$inline_1662, + "on" + capitalizedEvent$jscomp$inline_1663 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -17387,10 +17407,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1888 = { +var devToolsConfig$jscomp$inline_1886 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-a0c35bd7", + version: "18.3.0-www-classic-4b1d2c60", rendererPackageName: "react-dom" }; (function (internals) { @@ -17408,10 +17428,10 @@ var devToolsConfig$jscomp$inline_1888 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1888.bundleType, - version: devToolsConfig$jscomp$inline_1888.version, - rendererPackageName: devToolsConfig$jscomp$inline_1888.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1888.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1886.bundleType, + version: devToolsConfig$jscomp$inline_1886.version, + rendererPackageName: devToolsConfig$jscomp$inline_1886.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1886.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -17427,14 +17447,14 @@ var devToolsConfig$jscomp$inline_1888 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1888.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1886.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-a0c35bd7" + reconcilerVersion: "18.3.0-www-classic-4b1d2c60" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17758,7 +17778,7 @@ exports.useFormState = function () { exports.useFormStatus = function () { throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-classic-a0c35bd7"; +exports.version = "18.3.0-www-classic-4b1d2c60"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index e8a086044a0c3..a5dc37d5f7932 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -443,6 +443,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -2140,19 +2146,15 @@ function scheduleImmediateTask(cb) { }); } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -3644,30 +3646,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$55 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$55 = !0); continue; - } else { - var clone$57 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$57), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$57); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -3678,7 +3678,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$55 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -3686,7 +3688,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$57 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -3695,9 +3697,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$57), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$57), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -4028,7 +4030,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$3.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$3.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -4043,12 +4045,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4154,6 +4156,7 @@ function dispatchSetState(fiber, queue, action) { enableSchedulingProfiler && markStateUpdateScheduled(fiber, lane); } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -6710,8 +6713,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$2.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -10397,7 +10417,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$2.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -10412,7 +10432,7 @@ function requestDeferredLane() { 0 === workInProgressDeferredLane && (workInProgressDeferredLane = 0 === (workInProgressRootRenderLanes & 536870912) || isHydrating - ? requestTransitionLane() + ? claimNextTransitionLane() : 536870912); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); @@ -13736,14 +13756,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$364; if (canUseDOM) { - var isSupported$jscomp$inline_1620 = "oninput" in document; - if (!isSupported$jscomp$inline_1620) { - var element$jscomp$inline_1621 = document.createElement("div"); - element$jscomp$inline_1621.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1620 = - "function" === typeof element$jscomp$inline_1621.oninput; + var isSupported$jscomp$inline_1618 = "oninput" in document; + if (!isSupported$jscomp$inline_1618) { + var element$jscomp$inline_1619 = document.createElement("div"); + element$jscomp$inline_1619.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1618 = + "function" === typeof element$jscomp$inline_1619.oninput; } - JSCompiler_inline_result$jscomp$364 = isSupported$jscomp$inline_1620; + JSCompiler_inline_result$jscomp$364 = isSupported$jscomp$inline_1618; } else JSCompiler_inline_result$jscomp$364 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$364 && @@ -14055,20 +14075,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1661 = 0; - i$jscomp$inline_1661 < simpleEventPluginEvents.length; - i$jscomp$inline_1661++ + var i$jscomp$inline_1659 = 0; + i$jscomp$inline_1659 < simpleEventPluginEvents.length; + i$jscomp$inline_1659++ ) { - var eventName$jscomp$inline_1662 = - simpleEventPluginEvents[i$jscomp$inline_1661], - domEventName$jscomp$inline_1663 = - eventName$jscomp$inline_1662.toLowerCase(), - capitalizedEvent$jscomp$inline_1664 = - eventName$jscomp$inline_1662[0].toUpperCase() + - eventName$jscomp$inline_1662.slice(1); + var eventName$jscomp$inline_1660 = + simpleEventPluginEvents[i$jscomp$inline_1659], + domEventName$jscomp$inline_1661 = + eventName$jscomp$inline_1660.toLowerCase(), + capitalizedEvent$jscomp$inline_1662 = + eventName$jscomp$inline_1660[0].toUpperCase() + + eventName$jscomp$inline_1660.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1663, - "on" + capitalizedEvent$jscomp$inline_1664 + domEventName$jscomp$inline_1661, + "on" + capitalizedEvent$jscomp$inline_1662 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -16904,10 +16924,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1847 = { +var devToolsConfig$jscomp$inline_1845 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-aab9ce44", + version: "18.3.0-www-modern-2a25f03a", rendererPackageName: "react-dom" }; (function (internals) { @@ -16925,10 +16945,10 @@ var devToolsConfig$jscomp$inline_1847 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1847.bundleType, - version: devToolsConfig$jscomp$inline_1847.version, - rendererPackageName: devToolsConfig$jscomp$inline_1847.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1847.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1845.bundleType, + version: devToolsConfig$jscomp$inline_1845.version, + rendererPackageName: devToolsConfig$jscomp$inline_1845.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1845.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16945,14 +16965,14 @@ var devToolsConfig$jscomp$inline_1847 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1847.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1845.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-aab9ce44" + reconcilerVersion: "18.3.0-www-modern-2a25f03a" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17204,7 +17224,7 @@ exports.useFormState = function () { exports.useFormStatus = function () { throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-modern-aab9ce44"; +exports.version = "18.3.0-www-modern-2a25f03a"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index 679ecee768dc7..c2c96f49acee6 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-modern-efb9d6d0"; + var ReactVersion = "18.3.0-www-modern-a40cc260"; // This refers to a WWW module. var warningWWW = require("warning"); diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 22d08798c96fd..0848d59f3adcf 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -9667,7 +9667,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -9700,7 +9704,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -13852,16 +13856,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (!enableAsyncActions || revertLane === NoLane) { @@ -13881,6 +13876,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -13891,7 +13892,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -14928,7 +14936,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$3.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; if (enableAsyncActions) { // We don't really need to use an optimistic update here, because we @@ -14958,7 +14968,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -14972,8 +14983,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -15296,8 +15306,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$3.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -18638,6 +18650,8 @@ if (__DEV__) { return false; } + // TODO: Is there a way to not include the tag or name here? + var TransitionRoot = 0; var TransitionTracingMarker = 1; function processTransitionCallbacks( @@ -23559,9 +23573,36 @@ if (__DEV__) { var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$2.transition; + var transition = ReactCurrentBatchConfig$2.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + enableAsyncActions && + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -31013,17 +31054,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig$1.transition !== null) { - var transition = ReactCurrentBatchConfig$1.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig$1.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -31090,7 +31131,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. @@ -35628,7 +35669,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-05eed13e"; + var ReactVersion = "18.3.0-www-classic-78856bf2"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 453872ae91a03..1a0062ae1e5d0 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -9603,7 +9603,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -9636,7 +9640,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -13788,16 +13792,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (!enableAsyncActions || revertLane === NoLane) { @@ -13817,6 +13812,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -13827,7 +13828,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -14864,7 +14872,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$3.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; if (enableAsyncActions) { // We don't really need to use an optimistic update here, because we @@ -14894,7 +14904,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -14908,8 +14919,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -15232,8 +15242,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$3.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -18533,6 +18545,8 @@ if (__DEV__) { return false; } + // TODO: Is there a way to not include the tag or name here? + var TransitionRoot = 0; var TransitionTracingMarker = 1; function processTransitionCallbacks( @@ -23418,9 +23432,36 @@ if (__DEV__) { var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$2.transition; + var transition = ReactCurrentBatchConfig$2.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + enableAsyncActions && + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -30843,17 +30884,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig$1.transition !== null) { - var transition = ReactCurrentBatchConfig$1.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig$1.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -30920,7 +30961,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. @@ -35449,7 +35490,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-4ee54ef0"; + var ReactVersion = "18.3.0-www-modern-64c7bec9"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 514b78cf3a91f..f2e5337b90bc9 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -577,6 +577,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -2192,19 +2198,15 @@ function scheduleImmediateTask(cb) { }); } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -3696,30 +3698,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$52 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); continue; - } else { - var clone$54 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -3730,7 +3730,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -3738,7 +3740,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$54 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -3747,9 +3749,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -4080,7 +4082,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$3.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$3.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -4095,12 +4097,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4204,6 +4206,7 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -6715,8 +6718,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$2.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -10250,7 +10270,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$2.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -10265,7 +10285,7 @@ function requestDeferredLane() { 0 === workInProgressDeferredLane && (workInProgressDeferredLane = 0 === (workInProgressRootRenderLanes & 536870912) || isHydrating - ? requestTransitionLane() + ? claimNextTransitionLane() : 536870912); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); @@ -13004,14 +13024,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$347; if (canUseDOM) { - var isSupported$jscomp$inline_1563 = "oninput" in document; - if (!isSupported$jscomp$inline_1563) { - var element$jscomp$inline_1564 = document.createElement("div"); - element$jscomp$inline_1564.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1563 = - "function" === typeof element$jscomp$inline_1564.oninput; + var isSupported$jscomp$inline_1561 = "oninput" in document; + if (!isSupported$jscomp$inline_1561) { + var element$jscomp$inline_1562 = document.createElement("div"); + element$jscomp$inline_1562.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1561 = + "function" === typeof element$jscomp$inline_1562.oninput; } - JSCompiler_inline_result$jscomp$347 = isSupported$jscomp$inline_1563; + JSCompiler_inline_result$jscomp$347 = isSupported$jscomp$inline_1561; } else JSCompiler_inline_result$jscomp$347 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$347 && @@ -13323,20 +13343,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1604 = 0; - i$jscomp$inline_1604 < simpleEventPluginEvents.length; - i$jscomp$inline_1604++ + var i$jscomp$inline_1602 = 0; + i$jscomp$inline_1602 < simpleEventPluginEvents.length; + i$jscomp$inline_1602++ ) { - var eventName$jscomp$inline_1605 = - simpleEventPluginEvents[i$jscomp$inline_1604], - domEventName$jscomp$inline_1606 = - eventName$jscomp$inline_1605.toLowerCase(), - capitalizedEvent$jscomp$inline_1607 = - eventName$jscomp$inline_1605[0].toUpperCase() + - eventName$jscomp$inline_1605.slice(1); + var eventName$jscomp$inline_1603 = + simpleEventPluginEvents[i$jscomp$inline_1602], + domEventName$jscomp$inline_1604 = + eventName$jscomp$inline_1603.toLowerCase(), + capitalizedEvent$jscomp$inline_1605 = + eventName$jscomp$inline_1603[0].toUpperCase() + + eventName$jscomp$inline_1603.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1606, - "on" + capitalizedEvent$jscomp$inline_1607 + domEventName$jscomp$inline_1604, + "on" + capitalizedEvent$jscomp$inline_1605 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -16947,17 +16967,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1808 = { +var devToolsConfig$jscomp$inline_1806 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-92f5a9ab", + version: "18.3.0-www-classic-af9ffe5b", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2161 = { - bundleType: devToolsConfig$jscomp$inline_1808.bundleType, - version: devToolsConfig$jscomp$inline_1808.version, - rendererPackageName: devToolsConfig$jscomp$inline_1808.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1808.rendererConfig, +var internals$jscomp$inline_2159 = { + bundleType: devToolsConfig$jscomp$inline_1806.bundleType, + version: devToolsConfig$jscomp$inline_1806.version, + rendererPackageName: devToolsConfig$jscomp$inline_1806.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1806.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16973,26 +16993,26 @@ var internals$jscomp$inline_2161 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1808.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1806.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-92f5a9ab" + reconcilerVersion: "18.3.0-www-classic-af9ffe5b" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2162 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2160 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2162.isDisabled && - hook$jscomp$inline_2162.supportsFiber + !hook$jscomp$inline_2160.isDisabled && + hook$jscomp$inline_2160.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2162.inject( - internals$jscomp$inline_2161 + (rendererID = hook$jscomp$inline_2160.inject( + internals$jscomp$inline_2159 )), - (injectedHook = hook$jscomp$inline_2162); + (injectedHook = hook$jscomp$inline_2160); } catch (err) {} } assign(Internals, { @@ -17468,4 +17488,4 @@ exports.useFormState = function () { exports.useFormStatus = function () { throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-classic-92f5a9ab"; +exports.version = "18.3.0-www-classic-af9ffe5b"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index c17ba36f3880f..78b3ba8eaf993 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -335,6 +335,12 @@ function getLanesToRetrySynchronouslyOnError(root, originallyAttemptedLanes) { function includesBlockingLane(root, lanes) { return 0 !== (root.current.mode & 32) ? !1 : 0 !== (lanes & 60); } +function claimNextTransitionLane() { + var lane = nextTransitionLane; + nextTransitionLane <<= 1; + 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); + return lane; +} function claimNextRetryLane() { var lane = nextRetryLane; nextRetryLane <<= 1; @@ -2140,19 +2146,15 @@ function scheduleImmediateTask(cb) { }); } function requestTransitionLane() { - if (0 === currentEventTransitionLane) { - var lane = nextTransitionLane; - nextTransitionLane <<= 1; - 0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128); - currentEventTransitionLane = lane; - } + 0 === currentEventTransitionLane && + (currentEventTransitionLane = claimNextTransitionLane()); return currentEventTransitionLane; } var currentEntangledListeners = null, currentEntangledPendingCount = 0, currentEntangledLane = 0, currentEntangledActionThenable = null; -function entangleAsyncAction(thenable) { +function entangleAsyncAction(transition, thenable) { if (null === currentEntangledListeners) { var entangledListeners = (currentEntangledListeners = []); currentEntangledPendingCount = 0; @@ -3644,30 +3646,28 @@ function updateReducerImpl(hook, current, reducer) { ? (workInProgressRootRenderLanes & updateLane) === updateLane : (renderLanes & updateLane) === updateLane ) { - 0 !== updateLane && - updateLane === currentEntangledLane && - (didReadFromEntangledAsyncAction$52 = !0); - updateLane = update.revertLane; - if (enableAsyncActions && 0 !== updateLane) - if ((renderLanes & updateLane) === updateLane) { + var revertLane = update.revertLane; + if (enableAsyncActions && 0 !== revertLane) + if ((renderLanes & revertLane) === revertLane) { update = update.next; + revertLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); continue; - } else { - var clone$54 = { + } else + (updateLane = { lane: 0, revertLane: update.revertLane, action: update.action, hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }; - null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), - (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54); - currentlyRenderingFiber$1.lanes |= updateLane; - workInProgressRootSkippedLanes |= updateLane; - } + }), + null === newBaseQueueLast + ? ((newBaseQueueFirst = newBaseQueueLast = updateLane), + (baseFirst = pendingQueue)) + : (newBaseQueueLast = newBaseQueueLast.next = updateLane), + (currentlyRenderingFiber$1.lanes |= revertLane), + (workInProgressRootSkippedLanes |= revertLane); else null !== newBaseQueueLast && (newBaseQueueLast = newBaseQueueLast.next = @@ -3678,7 +3678,9 @@ function updateReducerImpl(hook, current, reducer) { hasEagerState: update.hasEagerState, eagerState: update.eagerState, next: null - }); + }), + updateLane === currentEntangledLane && + (didReadFromEntangledAsyncAction$52 = !0); updateLane = update.action; shouldDoubleInvokeUserFnsInHooksDEV && reducer(pendingQueue, updateLane); @@ -3686,7 +3688,7 @@ function updateReducerImpl(hook, current, reducer) { ? update.eagerState : reducer(pendingQueue, updateLane); } else - (clone$54 = { + (revertLane = { lane: updateLane, revertLane: update.revertLane, action: update.action, @@ -3695,9 +3697,9 @@ function updateReducerImpl(hook, current, reducer) { next: null }), null === newBaseQueueLast - ? ((newBaseQueueFirst = newBaseQueueLast = clone$54), + ? ((newBaseQueueFirst = newBaseQueueLast = revertLane), (baseFirst = pendingQueue)) - : (newBaseQueueLast = newBaseQueueLast.next = clone$54), + : (newBaseQueueLast = newBaseQueueLast.next = revertLane), (currentlyRenderingFiber$1.lanes |= updateLane), (workInProgressRootSkippedLanes |= updateLane); update = update.next; @@ -4028,7 +4030,7 @@ function startTransition( currentUpdatePriority = 0 !== previousPriority && 8 > previousPriority ? previousPriority : 8; var prevTransition = ReactCurrentBatchConfig$3.transition, - currentTransition = {}; + currentTransition = { _callbacks: new Set() }; enableAsyncActions ? ((ReactCurrentBatchConfig$3.transition = currentTransition), dispatchOptimisticSetState(fiber, !1, queue, pendingState)) @@ -4043,12 +4045,12 @@ function startTransition( try { if (enableAsyncActions) { var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); if ( null !== returnValue && "object" === typeof returnValue && "function" === typeof returnValue.then ) { - entangleAsyncAction(returnValue); var thenableForFinishedState = chainThenableValue( returnValue, finishedState @@ -4152,6 +4154,7 @@ function dispatchSetState(fiber, queue, action) { } } function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) { + requestCurrentTransition(); action = { lane: 2, revertLane: requestTransitionLane(), @@ -6612,8 +6615,25 @@ function releaseCache(cache) { cache.controller.abort(); }); } -var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig, - resumedCache = createCursor(null), +var ReactCurrentBatchConfig$2 = ReactSharedInternals.ReactCurrentBatchConfig; +function requestCurrentTransition() { + var transition = ReactCurrentBatchConfig$2.transition; + null !== transition && transition._callbacks.add(handleTransitionScopeResult); + return transition; +} +function handleTransitionScopeResult(transition, returnValue) { + enableAsyncActions && + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then && + entangleAsyncAction(transition, returnValue); +} +function notifyTransitionCallbacks(transition, returnValue) { + transition._callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); +} +var resumedCache = createCursor(null), transitionStack = createCursor(null); function peekCacheFromPool() { var cacheResumedFromPreviousRender = resumedCache.current; @@ -10141,7 +10161,7 @@ function requestUpdateLane(fiber) { if (0 === (fiber.mode & 1)) return 2; if (0 !== (executionContext & 2) && 0 !== workInProgressRootRenderLanes) return workInProgressRootRenderLanes & -workInProgressRootRenderLanes; - if (null !== ReactCurrentBatchConfig$2.transition) + if (null !== requestCurrentTransition()) return ( (fiber = currentEntangledLane), 0 !== fiber ? fiber : requestTransitionLane() @@ -10156,7 +10176,7 @@ function requestDeferredLane() { 0 === workInProgressDeferredLane && (workInProgressDeferredLane = 0 === (workInProgressRootRenderLanes & 536870912) || isHydrating - ? requestTransitionLane() + ? claimNextTransitionLane() : 536870912); var suspenseHandler = suspenseHandlerStackCursor.current; null !== suspenseHandler && (suspenseHandler.flags |= 32); @@ -13299,14 +13319,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$345; if (canUseDOM) { - var isSupported$jscomp$inline_1562 = "oninput" in document; - if (!isSupported$jscomp$inline_1562) { - var element$jscomp$inline_1563 = document.createElement("div"); - element$jscomp$inline_1563.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1562 = - "function" === typeof element$jscomp$inline_1563.oninput; + var isSupported$jscomp$inline_1560 = "oninput" in document; + if (!isSupported$jscomp$inline_1560) { + var element$jscomp$inline_1561 = document.createElement("div"); + element$jscomp$inline_1561.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1560 = + "function" === typeof element$jscomp$inline_1561.oninput; } - JSCompiler_inline_result$jscomp$345 = isSupported$jscomp$inline_1562; + JSCompiler_inline_result$jscomp$345 = isSupported$jscomp$inline_1560; } else JSCompiler_inline_result$jscomp$345 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$345 && @@ -13618,20 +13638,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1603 = 0; - i$jscomp$inline_1603 < simpleEventPluginEvents.length; - i$jscomp$inline_1603++ + var i$jscomp$inline_1601 = 0; + i$jscomp$inline_1601 < simpleEventPluginEvents.length; + i$jscomp$inline_1601++ ) { - var eventName$jscomp$inline_1604 = - simpleEventPluginEvents[i$jscomp$inline_1603], - domEventName$jscomp$inline_1605 = - eventName$jscomp$inline_1604.toLowerCase(), - capitalizedEvent$jscomp$inline_1606 = - eventName$jscomp$inline_1604[0].toUpperCase() + - eventName$jscomp$inline_1604.slice(1); + var eventName$jscomp$inline_1602 = + simpleEventPluginEvents[i$jscomp$inline_1601], + domEventName$jscomp$inline_1603 = + eventName$jscomp$inline_1602.toLowerCase(), + capitalizedEvent$jscomp$inline_1604 = + eventName$jscomp$inline_1602[0].toUpperCase() + + eventName$jscomp$inline_1602.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1605, - "on" + capitalizedEvent$jscomp$inline_1606 + domEventName$jscomp$inline_1603, + "on" + capitalizedEvent$jscomp$inline_1604 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -16524,17 +16544,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1767 = { +var devToolsConfig$jscomp$inline_1765 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-3f01aeed", + version: "18.3.0-www-modern-f302a037", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2124 = { - bundleType: devToolsConfig$jscomp$inline_1767.bundleType, - version: devToolsConfig$jscomp$inline_1767.version, - rendererPackageName: devToolsConfig$jscomp$inline_1767.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1767.rendererConfig, +var internals$jscomp$inline_2122 = { + bundleType: devToolsConfig$jscomp$inline_1765.bundleType, + version: devToolsConfig$jscomp$inline_1765.version, + rendererPackageName: devToolsConfig$jscomp$inline_1765.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1765.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16551,26 +16571,26 @@ var internals$jscomp$inline_2124 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1767.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1765.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-3f01aeed" + reconcilerVersion: "18.3.0-www-modern-f302a037" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2125 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2123 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2125.isDisabled && - hook$jscomp$inline_2125.supportsFiber + !hook$jscomp$inline_2123.isDisabled && + hook$jscomp$inline_2123.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2125.inject( - internals$jscomp$inline_2124 + (rendererID = hook$jscomp$inline_2123.inject( + internals$jscomp$inline_2122 )), - (injectedHook = hook$jscomp$inline_2125); + (injectedHook = hook$jscomp$inline_2123); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16973,4 +16993,4 @@ exports.useFormState = function () { exports.useFormStatus = function () { throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-modern-3f01aeed"; +exports.version = "18.3.0-www-modern-f302a037"; diff --git a/compiled/facebook-www/ReactServer-dev.modern.js b/compiled/facebook-www/ReactServer-dev.modern.js index 288f9a763bc9c..83714917be814 100644 --- a/compiled/facebook-www/ReactServer-dev.modern.js +++ b/compiled/facebook-www/ReactServer-dev.modern.js @@ -2534,8 +2534,14 @@ if (__DEV__) { }; function startTransition(scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition; // Each renderer registers a callback to receive the return value of + // the scope function. This is used to implement async actions. + + var callbacks = new Set(); + var transition = { + _callbacks: callbacks + }; + ReactCurrentBatchConfig.transition = transition; var currentTransition = ReactCurrentBatchConfig.transition; { @@ -2552,7 +2558,10 @@ if (__DEV__) { } try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; @@ -2574,7 +2583,7 @@ if (__DEV__) { } } - var ReactVersion = "18.3.0-www-modern-63fd69d9"; + var ReactVersion = "18.3.0-www-modern-0c925300"; // Patch fetch var Children = { diff --git a/compiled/facebook-www/ReactServer-prod.modern.js b/compiled/facebook-www/ReactServer-prod.modern.js index ce225949b63b2..5f662f0a2dd49 100644 --- a/compiled/facebook-www/ReactServer-prod.modern.js +++ b/compiled/facebook-www/ReactServer-prod.modern.js @@ -419,15 +419,20 @@ exports.memo = function (type, compare) { }; }; exports.startTransition = function (scope, options) { - var prevTransition = ReactCurrentBatchConfig.transition; - ReactCurrentBatchConfig.transition = {}; + var prevTransition = ReactCurrentBatchConfig.transition, + callbacks = new Set(); + ReactCurrentBatchConfig.transition = { _callbacks: callbacks }; + var currentTransition = ReactCurrentBatchConfig.transition; enableTransitionTracing && void 0 !== options && void 0 !== options.name && ((ReactCurrentBatchConfig.transition.name = options.name), (ReactCurrentBatchConfig.transition.startTime = -1)); try { - scope(); + var returnValue = scope(); + callbacks.forEach(function (callback) { + return callback(currentTransition, returnValue); + }); } finally { ReactCurrentBatchConfig.transition = prevTransition; } @@ -448,4 +453,4 @@ exports.useId = function () { exports.useMemo = function (create, deps) { return ReactCurrentDispatcher.current.useMemo(create, deps); }; -exports.version = "18.3.0-www-modern-efb9d6d0"; +exports.version = "18.3.0-www-modern-a40cc260"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 6471d7aa39b2e..01b647eb1e14c 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -3805,7 +3805,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -3838,7 +3842,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -8092,16 +8096,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (revertLane === NoLane) { @@ -8121,6 +8116,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -8131,7 +8132,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -8642,8 +8650,10 @@ if (__DEV__) { var prevState = actionQueue.state; // This is a fork of startTransition var prevTransition = ReactCurrentBatchConfig$2.transition; - ReactCurrentBatchConfig$2.transition = {}; - var currentTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = { + _callbacks: new Set() + }; + ReactCurrentBatchConfig$2.transition = currentTransition; { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); @@ -8651,6 +8661,7 @@ if (__DEV__) { try { var returnValue = action(prevState, payload); + notifyTransitionCallbacks(currentTransition, returnValue); if ( returnValue !== null && @@ -8669,7 +8680,6 @@ if (__DEV__) { return finishRunningFormStateAction(actionQueue, setState); } ); - entangleAsyncAction(thenable); setState(thenable); } else { setState(returnValue); @@ -9248,7 +9258,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; { // We don't really need to use an optimistic update here, because we @@ -9267,7 +9279,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -9281,8 +9294,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -9584,8 +9596,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$2.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -16601,9 +16615,35 @@ if (__DEV__) { var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$1.transition; + var transition = ReactCurrentBatchConfig$1.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -22003,17 +22043,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig.transition !== null) { - var transition = ReactCurrentBatchConfig.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -22080,7 +22120,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. @@ -26027,7 +26067,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-63557ef1"; + var ReactVersion = "18.3.0-www-classic-d6e83430"; // Might add PROFILE later. diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 2e34cff16e89b..cbe4e08ea607f 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -3805,7 +3805,11 @@ if (__DEV__) { } } - function requestTransitionLane() { + 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 + ) { // 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 // inputs to the algorithm must be the same. @@ -3838,7 +3842,7 @@ if (__DEV__) { // until the async action scope has completed. var currentEntangledActionThenable = null; - function entangleAsyncAction(thenable) { + function entangleAsyncAction(transition, thenable) { // `thenable` is the return value of the async action scope function. Create // a combined thenable that resolves once every entangled scope function // has finished. @@ -8092,16 +8096,7 @@ if (__DEV__) { markSkippedUpdateLanes(updateLane); } else { // This update does have sufficient priority. - // Check if this update is part of a pending async action. If so, - // we'll need to suspend until the action has finished, so that it's - // batched together with future updates in the same action. - if ( - updateLane !== NoLane && - updateLane === peekEntangledActionLane() - ) { - didReadFromEntangledAsyncAction = true; - } // Check if this is an optimistic update. - + // Check if this is an optimistic update. var revertLane = update.revertLane; if (revertLane === NoLane) { @@ -8121,6 +8116,12 @@ if (__DEV__) { next: null }; newBaseQueueLast = newBaseQueueLast.next = _clone; + } // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (updateLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; } } else { // This is an optimistic update. If the "revert" priority is @@ -8131,7 +8132,14 @@ if (__DEV__) { // The transition that this optimistic update is associated with // has finished. Pretend the update doesn't exist by skipping // over it. - update = update.next; + update = update.next; // Check if this update is part of a pending async action. If so, + // we'll need to suspend until the action has finished, so that it's + // batched together with future updates in the same action. + + if (revertLane === peekEntangledActionLane()) { + didReadFromEntangledAsyncAction = true; + } + continue; } else { var _clone2 = { @@ -8642,8 +8650,10 @@ if (__DEV__) { var prevState = actionQueue.state; // This is a fork of startTransition var prevTransition = ReactCurrentBatchConfig$2.transition; - ReactCurrentBatchConfig$2.transition = {}; - var currentTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = { + _callbacks: new Set() + }; + ReactCurrentBatchConfig$2.transition = currentTransition; { ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); @@ -8651,6 +8661,7 @@ if (__DEV__) { try { var returnValue = action(prevState, payload); + notifyTransitionCallbacks(currentTransition, returnValue); if ( returnValue !== null && @@ -8669,7 +8680,6 @@ if (__DEV__) { return finishRunningFormStateAction(actionQueue, setState); } ); - entangleAsyncAction(thenable); setState(thenable); } else { setState(returnValue); @@ -9248,7 +9258,9 @@ if (__DEV__) { higherEventPriority(previousPriority, ContinuousEventPriority) ); var prevTransition = ReactCurrentBatchConfig$2.transition; - var currentTransition = {}; + var currentTransition = { + _callbacks: new Set() + }; { // We don't really need to use an optimistic update here, because we @@ -9267,7 +9279,8 @@ if (__DEV__) { try { if (enableAsyncActions) { - var returnValue = callback(); // Check if we're inside an async action scope. If so, we'll entangle + var returnValue = callback(); + notifyTransitionCallbacks(currentTransition, returnValue); // Check if we're inside an async action scope. If so, we'll entangle // this new action with the existing scope. // // If we're not already inside an async action scope, and this action is @@ -9281,8 +9294,7 @@ if (__DEV__) { typeof returnValue === "object" && typeof returnValue.then === "function" ) { - var thenable = returnValue; - entangleAsyncAction(thenable); // Create a thenable that resolves to `finishedState` once the async + var thenable = returnValue; // Create a thenable that resolves to `finishedState` once the async // action has completed. var thenableForFinishedState = chainThenableValue( @@ -9584,8 +9596,10 @@ if (__DEV__) { queue, action ) { + var transition = requestCurrentTransition(); + { - if (ReactCurrentBatchConfig$2.transition === null) { + if (transition === null) { // An optimistic update occurred, but startTransition is not on the stack. // There are two likely scenarios. // One possibility is that the optimistic update is triggered by a regular @@ -16601,9 +16615,35 @@ if (__DEV__) { var ReactCurrentBatchConfig$1 = ReactSharedInternals.ReactCurrentBatchConfig; - var NoTransition = null; function requestCurrentTransition() { - return ReactCurrentBatchConfig$1.transition; + var transition = ReactCurrentBatchConfig$1.transition; + + if (transition !== null) { + // Whenever a transition update is scheduled, register a callback on the + // transition object so we can get the return value of the scope function. + transition._callbacks.add(handleTransitionScopeResult); + } + + return transition; + } + + function handleTransitionScopeResult(transition, returnValue) { + if ( + returnValue !== null && + typeof returnValue === "object" && + typeof returnValue.then === "function" + ) { + // This is an async action. + var thenable = returnValue; + entangleAsyncAction(transition, thenable); + } + } + + function notifyTransitionCallbacks(transition, returnValue) { + var callbacks = transition._callbacks; + callbacks.forEach(function (callback) { + return callback(transition, returnValue); + }); } // When retrying a Suspense/Offscreen boundary, we restore the cache that was // used during the previous render by placing it here, on the stack. @@ -22003,17 +22043,17 @@ if (__DEV__) { return pickArbitraryLane(workInProgressRootRenderLanes); } - var isTransition = requestCurrentTransition() !== NoTransition; + var transition = requestCurrentTransition(); - if (isTransition) { - if (ReactCurrentBatchConfig.transition !== null) { - var transition = ReactCurrentBatchConfig.transition; + if (transition !== null) { + { + var batchConfigTransition = ReactCurrentBatchConfig.transition; - if (!transition._updatedFibers) { - transition._updatedFibers = new Set(); + if (!batchConfigTransition._updatedFibers) { + batchConfigTransition._updatedFibers = new Set(); } - transition._updatedFibers.add(fiber); + batchConfigTransition._updatedFibers.add(fiber); } var actionScopeLane = peekEntangledActionLane(); @@ -22080,7 +22120,7 @@ if (__DEV__) { workInProgressDeferredLane = OffscreenLane; } else { // Everything else is spawned as a transition. - workInProgressDeferredLane = requestTransitionLane(); + workInProgressDeferredLane = claimNextTransitionLane(); } } // Mark the parent Suspense boundary so it knows to spawn the deferred lane. @@ -26027,7 +26067,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-ebb7faa7"; + var ReactVersion = "18.3.0-www-modern-8e35ecd3"; // Might add PROFILE later.