diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index e1f1e18f1b..7d66b5874c 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -48274a43aa708f63a7580142a4c1c1a47f31c1ac +c2d6552079178b36619f5dfd1ea39ae80b1d38b5 diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS index e1f1e18f1b..7d66b5874c 100644 --- a/compiled/facebook-www/REVISION_TRANSFORMS +++ b/compiled/facebook-www/REVISION_TRANSFORMS @@ -1 +1 @@ -48274a43aa708f63a7580142a4c1c1a47f31c1ac +c2d6552079178b36619f5dfd1ea39ae80b1d38b5 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 820545f7ee..2d138a47c8 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-classic-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-classic-c2d655207-20230104"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 3167d23280..eca9121f32 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-modern-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-modern-c2d655207-20230104"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index 8e63b61a0c..d3e2dfd674 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -643,4 +643,4 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-classic-48274a43a-20230104"; +exports.version = "18.3.0-www-classic-c2d655207-20230104"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index fd38bec63a..22994fdd5f 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -635,4 +635,4 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-modern-48274a43a-20230104"; +exports.version = "18.3.0-www-modern-c2d655207-20230104"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 893c5fee08..7c110a959f 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -654,7 +654,7 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-classic-48274a43a-20230104"; +exports.version = "18.3.0-www-classic-c2d655207-20230104"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 4ca0f2aaff..be0380bf25 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -646,7 +646,7 @@ exports.useSyncExternalStore = function( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-www-modern-48274a43a-20230104"; +exports.version = "18.3.0-www-modern-c2d655207-20230104"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index bcc57a7764..6db9002425 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-classic-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-classic-c2d655207-20230104"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -6864,71 +6864,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -6940,6 +6937,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -6953,6 +6965,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -12368,13 +12385,49 @@ function throwException( logComponentSuspended(name, wakeable); } } - } // Schedule the nearest Suspense to re-render the timed out view. + } // Mark the nearest Suspense boundary to switch to rendering a fallback. var suspenseBoundary = getSuspenseHandler(); if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -18001,24 +18054,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -24294,16 +24330,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -24315,28 +24346,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -24406,6 +24431,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -24621,6 +24648,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 907e8a68fd..ff3a5c2332 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-modern-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-modern-c2d655207-20230104"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -6626,71 +6626,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -6702,6 +6699,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -6715,6 +6727,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -12096,13 +12113,49 @@ function throwException( logComponentSuspended(name, wakeable); } } - } // Schedule the nearest Suspense to re-render the timed out view. + } // Mark the nearest Suspense boundary to switch to rendering a fallback. var suspenseBoundary = getSuspenseHandler(); if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -17704,24 +17757,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -23983,16 +24019,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -24004,28 +24035,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -24095,6 +24120,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -24310,6 +24337,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index dcaa8dd088..4f8a4568a8 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -2106,47 +2106,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -5409,14 +5400,14 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - instance = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && null !== current.memoizedState.dehydrated) ) { - if (null !== instance && null !== instance.dehydrated) { + if (null !== newProps && null !== newProps.dehydrated) { if (null === current) { throw Error(formatProdErrorMessage(318)); throw Error(formatProdErrorMessage(344)); @@ -5425,42 +5416,34 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.memoizedState = null); workInProgress.flags |= 4; bubbleProperties(workInProgress); - var JSCompiler_inline_result = !1; + instance = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) + (instance = !0); + if (!instance) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; - renderLanes = null !== instance; - instance = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$77 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$77 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + instance = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (instance = newProps.alternate.memoizedState.cachePool.pool); var cache$78 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$78 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$78 !== previousCache$77 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$78 = newProps.memoizedState.cachePool.pool); + cache$78 !== instance && (newProps.flags |= 2048); } - renderLanes !== instance && + renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), - renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3)))); + renderLanes && (workInProgress.child.flags |= 8192)); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -5491,8 +5474,8 @@ function completeWork(current, workInProgress, renderLanes) { instance = workInProgress.memoizedState; if (null === instance) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = instance.rendering; - if (null === JSCompiler_inline_result) + cache$78 = instance.rendering; + if (null === cache$78) if (newProps) cutOffTailIfNeeded(instance, !1); else { if ( @@ -5500,11 +5483,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$78 = findFirstSuspended(current); + if (null !== cache$78) { workInProgress.flags |= 128; cutOffTailIfNeeded(instance, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$78.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); @@ -5530,10 +5513,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$78)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -5544,7 +5524,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !0), null === instance.tail && "hidden" === instance.tailMode && - !JSCompiler_inline_result.alternate) + !cache$78.alternate) ) return bubbleProperties(workInProgress), null; } else @@ -5556,13 +5536,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !1), (workInProgress.lanes = 8388608)); instance.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$78.sibling = workInProgress.child), + (workInProgress.child = cache$78)) : ((current = instance.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (instance.last = JSCompiler_inline_result)); + ? (current.sibling = cache$78) + : (workInProgress.child = cache$78), + (instance.last = cache$78)); } if (null !== instance.tail) return ( @@ -5598,7 +5578,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), 23 !== workInProgress.tag && @@ -5682,7 +5662,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if ( null !== current && @@ -5703,7 +5683,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), popTransition(workInProgress, current), (current = workInProgress.flags), @@ -5752,7 +5732,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -5762,7 +5742,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); popTransition(interruptedWork, current); break; @@ -8184,11 +8164,6 @@ function handleThrow(root, thrownValue) { (workInProgressRootFatalError = thrownValue)); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -8197,18 +8172,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher() { var prevDispatcher = ReactCurrentDispatcher$2.current; @@ -8447,6 +8418,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; if (0 === (suspenseBoundary.mode & 1)) if (suspenseBoundary === returnFiber) @@ -9814,19 +9791,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1167 = { + devToolsConfig$jscomp$inline_1148 = { findFiberByHostInstance: function() { return null; }, bundleType: 0, - version: "18.3.0-www-classic-48274a43a-20230104", + version: "18.3.0-www-classic-c2d655207-20230104", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1334 = { - bundleType: devToolsConfig$jscomp$inline_1167.bundleType, - version: devToolsConfig$jscomp$inline_1167.version, - rendererPackageName: devToolsConfig$jscomp$inline_1167.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1167.rendererConfig, +var internals$jscomp$inline_1319 = { + bundleType: devToolsConfig$jscomp$inline_1148.bundleType, + version: devToolsConfig$jscomp$inline_1148.version, + rendererPackageName: devToolsConfig$jscomp$inline_1148.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1148.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9843,26 +9820,26 @@ var internals$jscomp$inline_1334 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1167.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1148.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1335 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1320 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1335.isDisabled && - hook$jscomp$inline_1335.supportsFiber + !hook$jscomp$inline_1320.isDisabled && + hook$jscomp$inline_1320.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1335.inject( - internals$jscomp$inline_1334 + (rendererID = hook$jscomp$inline_1320.inject( + internals$jscomp$inline_1319 )), - (injectedHook = hook$jscomp$inline_1335); + (injectedHook = hook$jscomp$inline_1320); } 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 f2a135920f..0fc8328cae 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -1913,47 +1913,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -5156,14 +5147,14 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - instance = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && null !== current.memoizedState.dehydrated) ) { - if (null !== instance && null !== instance.dehydrated) { + if (null !== newProps && null !== newProps.dehydrated) { if (null === current) { throw Error(formatProdErrorMessage(318)); throw Error(formatProdErrorMessage(344)); @@ -5172,42 +5163,34 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.memoizedState = null); workInProgress.flags |= 4; bubbleProperties(workInProgress); - var JSCompiler_inline_result = !1; + instance = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) + (instance = !0); + if (!instance) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; - renderLanes = null !== instance; - instance = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$77 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$77 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + instance = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (instance = newProps.alternate.memoizedState.cachePool.pool); var cache$78 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$78 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$78 !== previousCache$77 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$78 = newProps.memoizedState.cachePool.pool); + cache$78 !== instance && (newProps.flags |= 2048); } - renderLanes !== instance && + renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), - renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3)))); + renderLanes && (workInProgress.child.flags |= 8192)); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -5234,8 +5217,8 @@ function completeWork(current, workInProgress, renderLanes) { instance = workInProgress.memoizedState; if (null === instance) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = instance.rendering; - if (null === JSCompiler_inline_result) + cache$78 = instance.rendering; + if (null === cache$78) if (newProps) cutOffTailIfNeeded(instance, !1); else { if ( @@ -5243,11 +5226,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$78 = findFirstSuspended(current); + if (null !== cache$78) { workInProgress.flags |= 128; cutOffTailIfNeeded(instance, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$78.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); @@ -5273,10 +5256,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$78)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -5287,7 +5267,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !0), null === instance.tail && "hidden" === instance.tailMode && - !JSCompiler_inline_result.alternate) + !cache$78.alternate) ) return bubbleProperties(workInProgress), null; } else @@ -5299,13 +5279,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !1), (workInProgress.lanes = 8388608)); instance.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$78.sibling = workInProgress.child), + (workInProgress.child = cache$78)) : ((current = instance.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (instance.last = JSCompiler_inline_result)); + ? (current.sibling = cache$78) + : (workInProgress.child = cache$78), + (instance.last = cache$78)); } if (null !== instance.tail) return ( @@ -5341,7 +5321,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), 23 !== workInProgress.tag && @@ -5422,7 +5402,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if ( null !== current && @@ -5443,7 +5423,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), popTransition(workInProgress, current), (current = workInProgress.flags), @@ -5486,7 +5466,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -5496,7 +5476,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); popTransition(interruptedWork, current); break; @@ -7918,11 +7898,6 @@ function handleThrow(root, thrownValue) { (workInProgressRootFatalError = thrownValue)); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -7931,18 +7906,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher() { var prevDispatcher = ReactCurrentDispatcher$2.current; @@ -8181,6 +8152,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; if (0 === (suspenseBoundary.mode & 1)) if (suspenseBoundary === returnFiber) @@ -9481,19 +9458,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1156 = { + devToolsConfig$jscomp$inline_1137 = { findFiberByHostInstance: function() { return null; }, bundleType: 0, - version: "18.3.0-www-modern-48274a43a-20230104", + version: "18.3.0-www-modern-c2d655207-20230104", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1325 = { - bundleType: devToolsConfig$jscomp$inline_1156.bundleType, - version: devToolsConfig$jscomp$inline_1156.version, - rendererPackageName: devToolsConfig$jscomp$inline_1156.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1156.rendererConfig, +var internals$jscomp$inline_1310 = { + bundleType: devToolsConfig$jscomp$inline_1137.bundleType, + version: devToolsConfig$jscomp$inline_1137.version, + rendererPackageName: devToolsConfig$jscomp$inline_1137.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1137.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9510,26 +9487,26 @@ var internals$jscomp$inline_1325 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1156.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1137.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1326 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1311 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1326.isDisabled && - hook$jscomp$inline_1326.supportsFiber + !hook$jscomp$inline_1311.isDisabled && + hook$jscomp$inline_1311.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1326.inject( - internals$jscomp$inline_1325 + (rendererID = hook$jscomp$inline_1311.inject( + internals$jscomp$inline_1310 )), - (injectedHook = hook$jscomp$inline_1326); + (injectedHook = hook$jscomp$inline_1311); } 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 acd286a471..d42b2b53b8 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -21109,71 +21109,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -21185,6 +21182,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -21198,6 +21210,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -26682,13 +26699,49 @@ function throwException( logComponentSuspended(name, wakeable); } } - } // Schedule the nearest Suspense to re-render the timed out view. + } // Mark the nearest Suspense boundary to switch to rendering a fallback. var suspenseBoundary = getSuspenseHandler(); if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -32744,24 +32797,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -39305,16 +39341,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -39326,28 +39357,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -39419,6 +39444,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -39634,6 +39661,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); @@ -42635,7 +42666,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-classic-c2d655207-20230104"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index b08e40e756..0a5a5e16c0 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -20906,71 +20906,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -20982,6 +20979,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -20995,6 +21007,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -26445,13 +26462,49 @@ function throwException( logComponentSuspended(name, wakeable); } } - } // Schedule the nearest Suspense to re-render the timed out view. + } // Mark the nearest Suspense boundary to switch to rendering a fallback. var suspenseBoundary = getSuspenseHandler(); if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -32482,24 +32535,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -39029,16 +39065,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -39050,28 +39081,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -39143,6 +39168,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -39358,6 +39385,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); @@ -42359,7 +42390,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-modern-c2d655207-20230104"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index e90749cbde..5876b682f2 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -3567,14 +3567,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$267; if (canUseDOM) { - var isSupported$jscomp$inline_523 = "oninput" in document; - if (!isSupported$jscomp$inline_523) { - var element$jscomp$inline_524 = document.createElement("div"); - element$jscomp$inline_524.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_523 = - "function" === typeof element$jscomp$inline_524.oninput; + var isSupported$jscomp$inline_521 = "oninput" in document; + if (!isSupported$jscomp$inline_521) { + var element$jscomp$inline_522 = document.createElement("div"); + element$jscomp$inline_522.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_521 = + "function" === typeof element$jscomp$inline_522.oninput; } - JSCompiler_inline_result$jscomp$267 = isSupported$jscomp$inline_523; + JSCompiler_inline_result$jscomp$267 = isSupported$jscomp$inline_521; } else JSCompiler_inline_result$jscomp$267 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$267 && @@ -3740,19 +3740,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_536 = 0; - i$jscomp$inline_536 < simpleEventPluginEvents.length; - i$jscomp$inline_536++ + var i$jscomp$inline_534 = 0; + i$jscomp$inline_534 < simpleEventPluginEvents.length; + i$jscomp$inline_534++ ) { - var eventName$jscomp$inline_537 = - simpleEventPluginEvents[i$jscomp$inline_536], - domEventName$jscomp$inline_538 = eventName$jscomp$inline_537.toLowerCase(), - capitalizedEvent$jscomp$inline_539 = - eventName$jscomp$inline_537[0].toUpperCase() + - eventName$jscomp$inline_537.slice(1); + var eventName$jscomp$inline_535 = + simpleEventPluginEvents[i$jscomp$inline_534], + domEventName$jscomp$inline_536 = eventName$jscomp$inline_535.toLowerCase(), + capitalizedEvent$jscomp$inline_537 = + eventName$jscomp$inline_535[0].toUpperCase() + + eventName$jscomp$inline_535.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_538, - "on" + capitalizedEvent$jscomp$inline_539 + domEventName$jscomp$inline_536, + "on" + capitalizedEvent$jscomp$inline_537 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -6715,47 +6715,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -8862,7 +8853,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { : (workInProgress.lanes = 1073741824), null ); - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); } current = nextProps.children; didSuspend = nextProps.fallback; @@ -10159,13 +10150,13 @@ function completeWork(current, workInProgress, renderLanes) { null ); case 3: - newProps = workInProgress.stateNode; + renderLanes = workInProgress.stateNode; enableTransitionTracing && null !== workInProgressTransitions && (workInProgress.flags |= 2048); - renderLanes = null; - null !== current && (renderLanes = current.memoizedState.cache); - workInProgress.memoizedState.cache !== renderLanes && + newProps = null; + null !== current && (newProps = current.memoizedState.cache); + workInProgress.memoizedState.cache !== newProps && (workInProgress.flags |= 2048); popProvider(CacheContext); enableTransitionTracing && @@ -10176,9 +10167,9 @@ function completeWork(current, workInProgress, renderLanes) { pop(didPerformWorkStackCursor); pop(contextStackCursor$1); resetWorkInProgressVersions(); - newProps.pendingContext && - ((newProps.context = newProps.pendingContext), - (newProps.pendingContext = null)); + renderLanes.pendingContext && + ((renderLanes.context = renderLanes.pendingContext), + (renderLanes.pendingContext = null)); if (null === current || null === current.child) popHydrationState(workInProgress) ? markUpdate(workInProgress) @@ -10296,15 +10287,15 @@ function completeWork(current, workInProgress, renderLanes) { current = rootInstanceStackCursor.current; if (popHydrationState(workInProgress)) { current = workInProgress.stateNode; - newProps = workInProgress.memoizedProps; + renderLanes = workInProgress.memoizedProps; current[internalInstanceKey] = workInProgress; - if ((renderLanes = current.nodeValue !== newProps)) + if ((newProps = current.nodeValue !== renderLanes)) if (((type = hydrationParentFiber), null !== type)) switch (type.tag) { case 3: checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); break; @@ -10313,11 +10304,11 @@ function completeWork(current, workInProgress, renderLanes) { !0 !== type.memoizedProps.suppressHydrationWarning && checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); } - renderLanes && markUpdate(workInProgress); + newProps && markUpdate(workInProgress); } else (current = (9 === current.nodeType ? current @@ -10329,8 +10320,8 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - type = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && @@ -10341,68 +10332,54 @@ function completeWork(current, workInProgress, renderLanes) { null !== nextHydratableInstance && 0 !== (workInProgress.mode & 1) && 0 === (workInProgress.flags & 128) - ) { - warnIfUnhydratedTailNodes(); - resetHydrationState(); - workInProgress.flags |= 98560; - var JSCompiler_inline_result = !1; - } else if ( - ((JSCompiler_inline_result = popHydrationState(workInProgress)), - null !== type && null !== type.dehydrated) + ) + warnIfUnhydratedTailNodes(), + resetHydrationState(), + (workInProgress.flags |= 98560), + (type = !1); + else if ( + ((type = popHydrationState(workInProgress)), + null !== newProps && null !== newProps.dehydrated) ) { if (null === current) { - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(318)); - JSCompiler_inline_result = workInProgress.memoizedState; - JSCompiler_inline_result = - null !== JSCompiler_inline_result - ? JSCompiler_inline_result.dehydrated - : null; - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(317)); - JSCompiler_inline_result[internalInstanceKey] = workInProgress; + if (!type) throw Error(formatProdErrorMessage(318)); + type = workInProgress.memoizedState; + type = null !== type ? type.dehydrated : null; + if (!type) throw Error(formatProdErrorMessage(317)); + type[internalInstanceKey] = workInProgress; } else resetHydrationState(), 0 === (workInProgress.flags & 128) && (workInProgress.memoizedState = null), (workInProgress.flags |= 4); bubbleProperties(workInProgress); - JSCompiler_inline_result = !1; + type = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) - return workInProgress.flags & 65536 ? workInProgress : null; + (type = !0); + if (!type) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; - renderLanes = null !== type; - type = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$155 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$155 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + type = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (type = newProps.alternate.memoizedState.cachePool.pool); var cache$156 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$156 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$156 !== previousCache$155 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$156 = newProps.memoizedState.cachePool.pool); + cache$156 !== type && (newProps.flags |= 2048); } - renderLanes !== type && + renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), - renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3)))); + renderLanes && (workInProgress.child.flags |= 8192)); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -10435,8 +10412,8 @@ function completeWork(current, workInProgress, renderLanes) { type = workInProgress.memoizedState; if (null === type) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = type.rendering; - if (null === JSCompiler_inline_result) + cache$156 = type.rendering; + if (null === cache$156) if (newProps) cutOffTailIfNeeded(type, !1); else { if ( @@ -10444,19 +10421,19 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$156 = findFirstSuspended(current); + if (null !== cache$156) { workInProgress.flags |= 128; cutOffTailIfNeeded(type, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$156.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); workInProgress.subtreeFlags = 0; current = renderLanes; - for (newProps = workInProgress.child; null !== newProps; ) - resetWorkInProgress(newProps, current), - (newProps = newProps.sibling); + for (renderLanes = workInProgress.child; null !== renderLanes; ) + resetWorkInProgress(renderLanes, current), + (renderLanes = renderLanes.sibling); push( suspenseStackCursor, (suspenseStackCursor.current & 1) | 2 @@ -10474,10 +10451,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$156)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -10488,7 +10462,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !0), null === type.tail && "hidden" === type.tailMode && - !JSCompiler_inline_result.alternate && + !cache$156.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -10501,13 +10475,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !1), (workInProgress.lanes = 8388608)); type.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$156.sibling = workInProgress.child), + (workInProgress.child = cache$156)) : ((current = type.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (type.last = JSCompiler_inline_result)); + ? (current.sibling = cache$156) + : (workInProgress.child = cache$156), + (type.last = cache$156)); } if (null !== type.tail) return ( @@ -10543,7 +10517,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), 23 !== workInProgress.tag && @@ -10560,24 +10534,24 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.flags |= 8192)) : bubbleProperties(workInProgress), null !== workInProgress.updateQueue && (workInProgress.flags |= 4), - (newProps = null), + (renderLanes = null), null !== current && null !== current.memoizedState && null !== current.memoizedState.cachePool && - (newProps = current.memoizedState.cachePool.pool), - (renderLanes = null), + (renderLanes = current.memoizedState.cachePool.pool), + (newProps = null), null !== workInProgress.memoizedState && null !== workInProgress.memoizedState.cachePool && - (renderLanes = workInProgress.memoizedState.cachePool.pool), - renderLanes !== newProps && (workInProgress.flags |= 2048), + (newProps = workInProgress.memoizedState.cachePool.pool), + newProps !== renderLanes && (workInProgress.flags |= 2048), popTransition(workInProgress, current), null ); case 24: return ( - (newProps = null), - null !== current && (newProps = current.memoizedState.cache), - workInProgress.memoizedState.cache !== newProps && + (renderLanes = null), + null !== current && (renderLanes = current.memoizedState.cache), + workInProgress.memoizedState.cache !== renderLanes && (workInProgress.flags |= 2048), popProvider(CacheContext), bubbleProperties(workInProgress), @@ -10627,7 +10601,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if (null !== current && null !== current.dehydrated) { if (null === workInProgress.alternate) @@ -10647,7 +10621,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), popTransition(workInProgress, current), (current = workInProgress.flags), @@ -10696,7 +10670,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -10706,7 +10680,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); popTransition(interruptedWork, current); break; @@ -13510,11 +13484,6 @@ function handleThrow(root, thrownValue) { (workInProgressRootFatalError = thrownValue)); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -13523,18 +13492,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher(container) { container = getRootNode(container); @@ -13781,6 +13746,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -15569,17 +15540,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1772 = { +var devToolsConfig$jscomp$inline_1751 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-48274a43a-20230104", + version: "18.3.0-www-classic-c2d655207-20230104", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2153 = { - bundleType: devToolsConfig$jscomp$inline_1772.bundleType, - version: devToolsConfig$jscomp$inline_1772.version, - rendererPackageName: devToolsConfig$jscomp$inline_1772.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1772.rendererConfig, +var internals$jscomp$inline_2136 = { + bundleType: devToolsConfig$jscomp$inline_1751.bundleType, + version: devToolsConfig$jscomp$inline_1751.version, + rendererPackageName: devToolsConfig$jscomp$inline_1751.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1751.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15595,26 +15566,26 @@ var internals$jscomp$inline_2153 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1772.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1751.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2154 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2137 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2154.isDisabled && - hook$jscomp$inline_2154.supportsFiber + !hook$jscomp$inline_2137.isDisabled && + hook$jscomp$inline_2137.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2154.inject( - internals$jscomp$inline_2153 + (rendererID = hook$jscomp$inline_2137.inject( + internals$jscomp$inline_2136 )), - (injectedHook = hook$jscomp$inline_2154); + (injectedHook = hook$jscomp$inline_2137); } catch (err) {} } assign(Internals, { @@ -15844,4 +15815,4 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-48274a43a-20230104"; +exports.version = "18.3.0-next-c2d655207-20230104"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 0747e6829e..00ddccf8a2 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -2717,14 +2717,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$246; if (canUseDOM) { - var isSupported$jscomp$inline_410 = "oninput" in document; - if (!isSupported$jscomp$inline_410) { - var element$jscomp$inline_411 = document.createElement("div"); - element$jscomp$inline_411.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_410 = - "function" === typeof element$jscomp$inline_411.oninput; + var isSupported$jscomp$inline_408 = "oninput" in document; + if (!isSupported$jscomp$inline_408) { + var element$jscomp$inline_409 = document.createElement("div"); + element$jscomp$inline_409.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_408 = + "function" === typeof element$jscomp$inline_409.oninput; } - JSCompiler_inline_result$jscomp$246 = isSupported$jscomp$inline_410; + JSCompiler_inline_result$jscomp$246 = isSupported$jscomp$inline_408; } else JSCompiler_inline_result$jscomp$246 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$246 && @@ -3061,19 +3061,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_451 = 0; - i$jscomp$inline_451 < simpleEventPluginEvents.length; - i$jscomp$inline_451++ + var i$jscomp$inline_449 = 0; + i$jscomp$inline_449 < simpleEventPluginEvents.length; + i$jscomp$inline_449++ ) { - var eventName$jscomp$inline_452 = - simpleEventPluginEvents[i$jscomp$inline_451], - domEventName$jscomp$inline_453 = eventName$jscomp$inline_452.toLowerCase(), - capitalizedEvent$jscomp$inline_454 = - eventName$jscomp$inline_452[0].toUpperCase() + - eventName$jscomp$inline_452.slice(1); + var eventName$jscomp$inline_450 = + simpleEventPluginEvents[i$jscomp$inline_449], + domEventName$jscomp$inline_451 = eventName$jscomp$inline_450.toLowerCase(), + capitalizedEvent$jscomp$inline_452 = + eventName$jscomp$inline_450[0].toUpperCase() + + eventName$jscomp$inline_450.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_453, - "on" + capitalizedEvent$jscomp$inline_454 + domEventName$jscomp$inline_451, + "on" + capitalizedEvent$jscomp$inline_452 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -6566,47 +6566,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -8663,7 +8654,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { : (workInProgress.lanes = 1073741824), null ); - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); } current = nextProps.children; didSuspend = nextProps.fallback; @@ -9952,13 +9943,13 @@ function completeWork(current, workInProgress, renderLanes) { case 1: return bubbleProperties(workInProgress), null; case 3: - newProps = workInProgress.stateNode; + renderLanes = workInProgress.stateNode; enableTransitionTracing && null !== workInProgressTransitions && (workInProgress.flags |= 2048); - renderLanes = null; - null !== current && (renderLanes = current.memoizedState.cache); - workInProgress.memoizedState.cache !== renderLanes && + newProps = null; + null !== current && (newProps = current.memoizedState.cache); + workInProgress.memoizedState.cache !== newProps && (workInProgress.flags |= 2048); popProvider(CacheContext); enableTransitionTracing && @@ -9967,9 +9958,9 @@ function completeWork(current, workInProgress, renderLanes) { enableTransitionTracing && pop(transitionStack); popHostContainer(); resetWorkInProgressVersions(); - newProps.pendingContext && - ((newProps.context = newProps.pendingContext), - (newProps.pendingContext = null)); + renderLanes.pendingContext && + ((renderLanes.context = renderLanes.pendingContext), + (renderLanes.pendingContext = null)); if (null === current || null === current.child) popHydrationState(workInProgress) ? markUpdate(workInProgress) @@ -10087,15 +10078,15 @@ function completeWork(current, workInProgress, renderLanes) { current = rootInstanceStackCursor.current; if (popHydrationState(workInProgress)) { current = workInProgress.stateNode; - newProps = workInProgress.memoizedProps; + renderLanes = workInProgress.memoizedProps; current[internalInstanceKey] = workInProgress; - if ((renderLanes = current.nodeValue !== newProps)) + if ((newProps = current.nodeValue !== renderLanes)) if (((type = hydrationParentFiber), null !== type)) switch (type.tag) { case 3: checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); break; @@ -10104,11 +10095,11 @@ function completeWork(current, workInProgress, renderLanes) { !0 !== type.memoizedProps.suppressHydrationWarning && checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); } - renderLanes && markUpdate(workInProgress); + newProps && markUpdate(workInProgress); } else (current = (9 === current.nodeType ? current @@ -10120,8 +10111,8 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - type = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && @@ -10132,68 +10123,54 @@ function completeWork(current, workInProgress, renderLanes) { null !== nextHydratableInstance && 0 !== (workInProgress.mode & 1) && 0 === (workInProgress.flags & 128) - ) { - warnIfUnhydratedTailNodes(); - resetHydrationState(); - workInProgress.flags |= 98560; - var JSCompiler_inline_result = !1; - } else if ( - ((JSCompiler_inline_result = popHydrationState(workInProgress)), - null !== type && null !== type.dehydrated) + ) + warnIfUnhydratedTailNodes(), + resetHydrationState(), + (workInProgress.flags |= 98560), + (type = !1); + else if ( + ((type = popHydrationState(workInProgress)), + null !== newProps && null !== newProps.dehydrated) ) { if (null === current) { - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(318)); - JSCompiler_inline_result = workInProgress.memoizedState; - JSCompiler_inline_result = - null !== JSCompiler_inline_result - ? JSCompiler_inline_result.dehydrated - : null; - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(317)); - JSCompiler_inline_result[internalInstanceKey] = workInProgress; + if (!type) throw Error(formatProdErrorMessage(318)); + type = workInProgress.memoizedState; + type = null !== type ? type.dehydrated : null; + if (!type) throw Error(formatProdErrorMessage(317)); + type[internalInstanceKey] = workInProgress; } else resetHydrationState(), 0 === (workInProgress.flags & 128) && (workInProgress.memoizedState = null), (workInProgress.flags |= 4); bubbleProperties(workInProgress); - JSCompiler_inline_result = !1; + type = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) - return workInProgress.flags & 65536 ? workInProgress : null; + (type = !0); + if (!type) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; - renderLanes = null !== type; - type = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$156 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$156 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + type = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (type = newProps.alternate.memoizedState.cachePool.pool); var cache$157 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$157 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$157 !== previousCache$156 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$157 = newProps.memoizedState.cachePool.pool); + cache$157 !== type && (newProps.flags |= 2048); } - renderLanes !== type && + renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), - renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3)))); + renderLanes && (workInProgress.child.flags |= 8192)); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -10222,8 +10199,8 @@ function completeWork(current, workInProgress, renderLanes) { type = workInProgress.memoizedState; if (null === type) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = type.rendering; - if (null === JSCompiler_inline_result) + cache$157 = type.rendering; + if (null === cache$157) if (newProps) cutOffTailIfNeeded(type, !1); else { if ( @@ -10231,19 +10208,19 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$157 = findFirstSuspended(current); + if (null !== cache$157) { workInProgress.flags |= 128; cutOffTailIfNeeded(type, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$157.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); workInProgress.subtreeFlags = 0; current = renderLanes; - for (newProps = workInProgress.child; null !== newProps; ) - resetWorkInProgress(newProps, current), - (newProps = newProps.sibling); + for (renderLanes = workInProgress.child; null !== renderLanes; ) + resetWorkInProgress(renderLanes, current), + (renderLanes = renderLanes.sibling); push( suspenseStackCursor, (suspenseStackCursor.current & 1) | 2 @@ -10261,10 +10238,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$157)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -10275,7 +10249,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !0), null === type.tail && "hidden" === type.tailMode && - !JSCompiler_inline_result.alternate && + !cache$157.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -10288,13 +10262,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !1), (workInProgress.lanes = 8388608)); type.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$157.sibling = workInProgress.child), + (workInProgress.child = cache$157)) : ((current = type.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (type.last = JSCompiler_inline_result)); + ? (current.sibling = cache$157) + : (workInProgress.child = cache$157), + (type.last = cache$157)); } if (null !== type.tail) return ( @@ -10330,7 +10304,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), 23 !== workInProgress.tag && @@ -10347,24 +10321,24 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.flags |= 8192)) : bubbleProperties(workInProgress), null !== workInProgress.updateQueue && (workInProgress.flags |= 4), - (newProps = null), + (renderLanes = null), null !== current && null !== current.memoizedState && null !== current.memoizedState.cachePool && - (newProps = current.memoizedState.cachePool.pool), - (renderLanes = null), + (renderLanes = current.memoizedState.cachePool.pool), + (newProps = null), null !== workInProgress.memoizedState && null !== workInProgress.memoizedState.cachePool && - (renderLanes = workInProgress.memoizedState.cachePool.pool), - renderLanes !== newProps && (workInProgress.flags |= 2048), + (newProps = workInProgress.memoizedState.cachePool.pool), + newProps !== renderLanes && (workInProgress.flags |= 2048), popTransition(workInProgress, current), null ); case 24: return ( - (newProps = null), - null !== current && (newProps = current.memoizedState.cache), - workInProgress.memoizedState.cache !== newProps && + (renderLanes = null), + null !== current && (renderLanes = current.memoizedState.cache), + workInProgress.memoizedState.cache !== renderLanes && (workInProgress.flags |= 2048), popProvider(CacheContext), bubbleProperties(workInProgress), @@ -10411,7 +10385,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if (null !== current && null !== current.dehydrated) { if (null === workInProgress.alternate) @@ -10431,7 +10405,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), popTransition(workInProgress, current), (current = workInProgress.flags), @@ -10474,7 +10448,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -10484,7 +10458,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); popTransition(interruptedWork, current); break; @@ -13288,11 +13262,6 @@ function handleThrow(root, thrownValue) { (workInProgressRootFatalError = thrownValue)); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -13301,18 +13270,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher(container) { container = getRootNode(container); @@ -13559,6 +13524,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -15130,17 +15101,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1740 = { +var devToolsConfig$jscomp$inline_1719 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-48274a43a-20230104", + version: "18.3.0-www-modern-c2d655207-20230104", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2128 = { - bundleType: devToolsConfig$jscomp$inline_1740.bundleType, - version: devToolsConfig$jscomp$inline_1740.version, - rendererPackageName: devToolsConfig$jscomp$inline_1740.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1740.rendererConfig, +var internals$jscomp$inline_2111 = { + bundleType: devToolsConfig$jscomp$inline_1719.bundleType, + version: devToolsConfig$jscomp$inline_1719.version, + rendererPackageName: devToolsConfig$jscomp$inline_1719.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1719.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15157,26 +15128,26 @@ var internals$jscomp$inline_2128 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1740.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1719.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2129 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2112 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2129.isDisabled && - hook$jscomp$inline_2129.supportsFiber + !hook$jscomp$inline_2112.isDisabled && + hook$jscomp$inline_2112.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2129.inject( - internals$jscomp$inline_2128 + (rendererID = hook$jscomp$inline_2112.inject( + internals$jscomp$inline_2111 )), - (injectedHook = hook$jscomp$inline_2129); + (injectedHook = hook$jscomp$inline_2112); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -15352,4 +15323,4 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-48274a43a-20230104"; +exports.version = "18.3.0-next-c2d655207-20230104"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 1192f91535..c8702770d9 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -3715,14 +3715,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$288; if (canUseDOM) { - var isSupported$jscomp$inline_544 = "oninput" in document; - if (!isSupported$jscomp$inline_544) { - var element$jscomp$inline_545 = document.createElement("div"); - element$jscomp$inline_545.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_544 = - "function" === typeof element$jscomp$inline_545.oninput; + var isSupported$jscomp$inline_542 = "oninput" in document; + if (!isSupported$jscomp$inline_542) { + var element$jscomp$inline_543 = document.createElement("div"); + element$jscomp$inline_543.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_542 = + "function" === typeof element$jscomp$inline_543.oninput; } - JSCompiler_inline_result$jscomp$288 = isSupported$jscomp$inline_544; + JSCompiler_inline_result$jscomp$288 = isSupported$jscomp$inline_542; } else JSCompiler_inline_result$jscomp$288 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$288 && @@ -3888,19 +3888,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_557 = 0; - i$jscomp$inline_557 < simpleEventPluginEvents.length; - i$jscomp$inline_557++ + var i$jscomp$inline_555 = 0; + i$jscomp$inline_555 < simpleEventPluginEvents.length; + i$jscomp$inline_555++ ) { - var eventName$jscomp$inline_558 = - simpleEventPluginEvents[i$jscomp$inline_557], - domEventName$jscomp$inline_559 = eventName$jscomp$inline_558.toLowerCase(), - capitalizedEvent$jscomp$inline_560 = - eventName$jscomp$inline_558[0].toUpperCase() + - eventName$jscomp$inline_558.slice(1); + var eventName$jscomp$inline_556 = + simpleEventPluginEvents[i$jscomp$inline_555], + domEventName$jscomp$inline_557 = eventName$jscomp$inline_556.toLowerCase(), + capitalizedEvent$jscomp$inline_558 = + eventName$jscomp$inline_556[0].toUpperCase() + + eventName$jscomp$inline_556.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_559, - "on" + capitalizedEvent$jscomp$inline_560 + domEventName$jscomp$inline_557, + "on" + capitalizedEvent$jscomp$inline_558 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -6863,47 +6863,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -9094,7 +9085,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { : (workInProgress.lanes = 1073741824), null ); - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); } current = nextProps.children; didSuspend = nextProps.fallback; @@ -10445,13 +10436,13 @@ function completeWork(current, workInProgress, renderLanes) { null ); case 3: - newProps = workInProgress.stateNode; + renderLanes = workInProgress.stateNode; enableTransitionTracing && null !== workInProgressTransitions && (workInProgress.flags |= 2048); - renderLanes = null; - null !== current && (renderLanes = current.memoizedState.cache); - workInProgress.memoizedState.cache !== renderLanes && + newProps = null; + null !== current && (newProps = current.memoizedState.cache); + workInProgress.memoizedState.cache !== newProps && (workInProgress.flags |= 2048); popProvider(CacheContext); enableTransitionTracing && @@ -10462,9 +10453,9 @@ function completeWork(current, workInProgress, renderLanes) { pop(didPerformWorkStackCursor); pop(contextStackCursor$1); resetWorkInProgressVersions(); - newProps.pendingContext && - ((newProps.context = newProps.pendingContext), - (newProps.pendingContext = null)); + renderLanes.pendingContext && + ((renderLanes.context = renderLanes.pendingContext), + (renderLanes.pendingContext = null)); if (null === current || null === current.child) popHydrationState(workInProgress) ? markUpdate(workInProgress) @@ -10582,15 +10573,15 @@ function completeWork(current, workInProgress, renderLanes) { current = rootInstanceStackCursor.current; if (popHydrationState(workInProgress)) { current = workInProgress.stateNode; - newProps = workInProgress.memoizedProps; + renderLanes = workInProgress.memoizedProps; current[internalInstanceKey] = workInProgress; - if ((renderLanes = current.nodeValue !== newProps)) + if ((newProps = current.nodeValue !== renderLanes)) if (((type = hydrationParentFiber), null !== type)) switch (type.tag) { case 3: checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); break; @@ -10599,11 +10590,11 @@ function completeWork(current, workInProgress, renderLanes) { !0 !== type.memoizedProps.suppressHydrationWarning && checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); } - renderLanes && markUpdate(workInProgress); + newProps && markUpdate(workInProgress); } else (current = (9 === current.nodeType ? current @@ -10615,8 +10606,8 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - type = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && @@ -10627,33 +10618,27 @@ function completeWork(current, workInProgress, renderLanes) { null !== nextHydratableInstance && 0 !== (workInProgress.mode & 1) && 0 === (workInProgress.flags & 128) - ) { - warnIfUnhydratedTailNodes(); - resetHydrationState(); - workInProgress.flags |= 98560; - var JSCompiler_inline_result = !1; - } else if ( - ((JSCompiler_inline_result = popHydrationState(workInProgress)), - null !== type && null !== type.dehydrated) + ) + warnIfUnhydratedTailNodes(), + resetHydrationState(), + (workInProgress.flags |= 98560), + (type = !1); + else if ( + ((type = popHydrationState(workInProgress)), + null !== newProps && null !== newProps.dehydrated) ) { if (null === current) { - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(318)); - JSCompiler_inline_result = workInProgress.memoizedState; - JSCompiler_inline_result = - null !== JSCompiler_inline_result - ? JSCompiler_inline_result.dehydrated - : null; - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(317)); - JSCompiler_inline_result[internalInstanceKey] = workInProgress; + if (!type) throw Error(formatProdErrorMessage(318)); + type = workInProgress.memoizedState; + type = null !== type ? type.dehydrated : null; + if (!type) throw Error(formatProdErrorMessage(317)); + type[internalInstanceKey] = workInProgress; bubbleProperties(workInProgress); 0 !== (workInProgress.mode & 2) && + null !== newProps && + ((type = workInProgress.child), null !== type && - ((JSCompiler_inline_result = workInProgress.child), - null !== JSCompiler_inline_result && - (workInProgress.treeBaseDuration -= - JSCompiler_inline_result.treeBaseDuration)); + (workInProgress.treeBaseDuration -= type.treeBaseDuration)); } else resetHydrationState(), 0 === (workInProgress.flags & 128) && @@ -10661,18 +10646,16 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.flags |= 4), bubbleProperties(workInProgress), 0 !== (workInProgress.mode & 2) && + null !== newProps && + ((type = workInProgress.child), null !== type && - ((JSCompiler_inline_result = workInProgress.child), - null !== JSCompiler_inline_result && - (workInProgress.treeBaseDuration -= - JSCompiler_inline_result.treeBaseDuration)); - JSCompiler_inline_result = !1; + (workInProgress.treeBaseDuration -= type.treeBaseDuration)); + type = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) - return workInProgress.flags & 65536 ? workInProgress : null; + (type = !0); + if (!type) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return ( @@ -10681,32 +10664,24 @@ function completeWork(current, workInProgress, renderLanes) { transferActualDuration(workInProgress), workInProgress ); - renderLanes = null !== type; - type = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$166 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$166 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + type = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (type = newProps.alternate.memoizedState.cachePool.pool); var cache$167 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$167 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$167 !== previousCache$166 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$167 = newProps.memoizedState.cachePool.pool); + cache$167 !== type && (newProps.flags |= 2048); } - renderLanes !== type && + renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), - renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3)))); + renderLanes && (workInProgress.child.flags |= 8192)); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -10744,8 +10719,8 @@ function completeWork(current, workInProgress, renderLanes) { type = workInProgress.memoizedState; if (null === type) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = type.rendering; - if (null === JSCompiler_inline_result) + cache$167 = type.rendering; + if (null === cache$167) if (newProps) cutOffTailIfNeeded(type, !1); else { if ( @@ -10753,19 +10728,19 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$167 = findFirstSuspended(current); + if (null !== cache$167) { workInProgress.flags |= 128; cutOffTailIfNeeded(type, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$167.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); workInProgress.subtreeFlags = 0; current = renderLanes; - for (newProps = workInProgress.child; null !== newProps; ) - resetWorkInProgress(newProps, current), - (newProps = newProps.sibling); + for (renderLanes = workInProgress.child; null !== renderLanes; ) + resetWorkInProgress(renderLanes, current), + (renderLanes = renderLanes.sibling); push( suspenseStackCursor, (suspenseStackCursor.current & 1) | 2 @@ -10783,10 +10758,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$167)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -10797,7 +10769,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !0), null === type.tail && "hidden" === type.tailMode && - !JSCompiler_inline_result.alternate && + !cache$167.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -10810,13 +10782,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !1), (workInProgress.lanes = 8388608)); type.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$167.sibling = workInProgress.child), + (workInProgress.child = cache$167)) : ((current = type.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (type.last = JSCompiler_inline_result)); + ? (current.sibling = cache$167) + : (workInProgress.child = cache$167), + (type.last = cache$167)); } if (null !== type.tail) return ( @@ -10852,7 +10824,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), 23 !== workInProgress.tag && @@ -10869,24 +10841,24 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.flags |= 8192)) : bubbleProperties(workInProgress), null !== workInProgress.updateQueue && (workInProgress.flags |= 4), - (newProps = null), + (renderLanes = null), null !== current && null !== current.memoizedState && null !== current.memoizedState.cachePool && - (newProps = current.memoizedState.cachePool.pool), - (renderLanes = null), + (renderLanes = current.memoizedState.cachePool.pool), + (newProps = null), null !== workInProgress.memoizedState && null !== workInProgress.memoizedState.cachePool && - (renderLanes = workInProgress.memoizedState.cachePool.pool), - renderLanes !== newProps && (workInProgress.flags |= 2048), + (newProps = workInProgress.memoizedState.cachePool.pool), + newProps !== renderLanes && (workInProgress.flags |= 2048), popTransition(workInProgress, current), null ); case 24: return ( - (newProps = null), - null !== current && (newProps = current.memoizedState.cache), - workInProgress.memoizedState.cache !== newProps && + (renderLanes = null), + null !== current && (renderLanes = current.memoizedState.cache), + workInProgress.memoizedState.cache !== renderLanes && (workInProgress.flags |= 2048), popProvider(CacheContext), bubbleProperties(workInProgress), @@ -10939,7 +10911,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if (null !== current && null !== current.dehydrated) { if (null === workInProgress.alternate) @@ -10962,7 +10934,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), popTransition(workInProgress, current), (current = workInProgress.flags), @@ -11014,7 +10986,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -11024,7 +10996,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); popTransition(interruptedWork, current); break; @@ -14143,11 +14115,6 @@ function handleThrow(root, thrownValue) { ))); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -14156,18 +14123,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher(container) { container = getRootNode(container); @@ -14455,6 +14418,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -16341,10 +16310,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1846 = { +var devToolsConfig$jscomp$inline_1825 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-48274a43a-20230104", + version: "18.3.0-www-classic-c2d655207-20230104", rendererPackageName: "react-dom" }; (function(internals) { @@ -16362,10 +16331,10 @@ var devToolsConfig$jscomp$inline_1846 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1846.bundleType, - version: devToolsConfig$jscomp$inline_1846.version, - rendererPackageName: devToolsConfig$jscomp$inline_1846.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1846.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1825.bundleType, + version: devToolsConfig$jscomp$inline_1825.version, + rendererPackageName: devToolsConfig$jscomp$inline_1825.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1825.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16381,14 +16350,14 @@ var devToolsConfig$jscomp$inline_1846 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1846.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1825.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -16617,7 +16586,7 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-48274a43a-20230104"; +exports.version = "18.3.0-next-c2d655207-20230104"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 45050471bc..4282dba919 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -2861,14 +2861,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$267; if (canUseDOM) { - var isSupported$jscomp$inline_431 = "oninput" in document; - if (!isSupported$jscomp$inline_431) { - var element$jscomp$inline_432 = document.createElement("div"); - element$jscomp$inline_432.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_431 = - "function" === typeof element$jscomp$inline_432.oninput; + var isSupported$jscomp$inline_429 = "oninput" in document; + if (!isSupported$jscomp$inline_429) { + var element$jscomp$inline_430 = document.createElement("div"); + element$jscomp$inline_430.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_429 = + "function" === typeof element$jscomp$inline_430.oninput; } - JSCompiler_inline_result$jscomp$267 = isSupported$jscomp$inline_431; + JSCompiler_inline_result$jscomp$267 = isSupported$jscomp$inline_429; } else JSCompiler_inline_result$jscomp$267 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$267 && @@ -3205,19 +3205,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_472 = 0; - i$jscomp$inline_472 < simpleEventPluginEvents.length; - i$jscomp$inline_472++ + var i$jscomp$inline_470 = 0; + i$jscomp$inline_470 < simpleEventPluginEvents.length; + i$jscomp$inline_470++ ) { - var eventName$jscomp$inline_473 = - simpleEventPluginEvents[i$jscomp$inline_472], - domEventName$jscomp$inline_474 = eventName$jscomp$inline_473.toLowerCase(), - capitalizedEvent$jscomp$inline_475 = - eventName$jscomp$inline_473[0].toUpperCase() + - eventName$jscomp$inline_473.slice(1); + var eventName$jscomp$inline_471 = + simpleEventPluginEvents[i$jscomp$inline_470], + domEventName$jscomp$inline_472 = eventName$jscomp$inline_471.toLowerCase(), + capitalizedEvent$jscomp$inline_473 = + eventName$jscomp$inline_471[0].toUpperCase() + + eventName$jscomp$inline_471.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_474, - "on" + capitalizedEvent$jscomp$inline_475 + domEventName$jscomp$inline_472, + "on" + capitalizedEvent$jscomp$inline_473 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -6710,47 +6710,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -8885,7 +8876,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { : (workInProgress.lanes = 1073741824), null ); - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); } current = nextProps.children; didSuspend = nextProps.fallback; @@ -10228,13 +10219,13 @@ function completeWork(current, workInProgress, renderLanes) { case 1: return bubbleProperties(workInProgress), null; case 3: - newProps = workInProgress.stateNode; + renderLanes = workInProgress.stateNode; enableTransitionTracing && null !== workInProgressTransitions && (workInProgress.flags |= 2048); - renderLanes = null; - null !== current && (renderLanes = current.memoizedState.cache); - workInProgress.memoizedState.cache !== renderLanes && + newProps = null; + null !== current && (newProps = current.memoizedState.cache); + workInProgress.memoizedState.cache !== newProps && (workInProgress.flags |= 2048); popProvider(CacheContext); enableTransitionTracing && @@ -10243,9 +10234,9 @@ function completeWork(current, workInProgress, renderLanes) { enableTransitionTracing && pop(transitionStack); popHostContainer(); resetWorkInProgressVersions(); - newProps.pendingContext && - ((newProps.context = newProps.pendingContext), - (newProps.pendingContext = null)); + renderLanes.pendingContext && + ((renderLanes.context = renderLanes.pendingContext), + (renderLanes.pendingContext = null)); if (null === current || null === current.child) popHydrationState(workInProgress) ? markUpdate(workInProgress) @@ -10363,15 +10354,15 @@ function completeWork(current, workInProgress, renderLanes) { current = rootInstanceStackCursor.current; if (popHydrationState(workInProgress)) { current = workInProgress.stateNode; - newProps = workInProgress.memoizedProps; + renderLanes = workInProgress.memoizedProps; current[internalInstanceKey] = workInProgress; - if ((renderLanes = current.nodeValue !== newProps)) + if ((newProps = current.nodeValue !== renderLanes)) if (((type = hydrationParentFiber), null !== type)) switch (type.tag) { case 3: checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); break; @@ -10380,11 +10371,11 @@ function completeWork(current, workInProgress, renderLanes) { !0 !== type.memoizedProps.suppressHydrationWarning && checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); } - renderLanes && markUpdate(workInProgress); + newProps && markUpdate(workInProgress); } else (current = (9 === current.nodeType ? current @@ -10396,8 +10387,8 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - type = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && @@ -10408,33 +10399,27 @@ function completeWork(current, workInProgress, renderLanes) { null !== nextHydratableInstance && 0 !== (workInProgress.mode & 1) && 0 === (workInProgress.flags & 128) - ) { - warnIfUnhydratedTailNodes(); - resetHydrationState(); - workInProgress.flags |= 98560; - var JSCompiler_inline_result = !1; - } else if ( - ((JSCompiler_inline_result = popHydrationState(workInProgress)), - null !== type && null !== type.dehydrated) + ) + warnIfUnhydratedTailNodes(), + resetHydrationState(), + (workInProgress.flags |= 98560), + (type = !1); + else if ( + ((type = popHydrationState(workInProgress)), + null !== newProps && null !== newProps.dehydrated) ) { if (null === current) { - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(318)); - JSCompiler_inline_result = workInProgress.memoizedState; - JSCompiler_inline_result = - null !== JSCompiler_inline_result - ? JSCompiler_inline_result.dehydrated - : null; - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(317)); - JSCompiler_inline_result[internalInstanceKey] = workInProgress; + if (!type) throw Error(formatProdErrorMessage(318)); + type = workInProgress.memoizedState; + type = null !== type ? type.dehydrated : null; + if (!type) throw Error(formatProdErrorMessage(317)); + type[internalInstanceKey] = workInProgress; bubbleProperties(workInProgress); 0 !== (workInProgress.mode & 2) && + null !== newProps && + ((type = workInProgress.child), null !== type && - ((JSCompiler_inline_result = workInProgress.child), - null !== JSCompiler_inline_result && - (workInProgress.treeBaseDuration -= - JSCompiler_inline_result.treeBaseDuration)); + (workInProgress.treeBaseDuration -= type.treeBaseDuration)); } else resetHydrationState(), 0 === (workInProgress.flags & 128) && @@ -10442,18 +10427,16 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.flags |= 4), bubbleProperties(workInProgress), 0 !== (workInProgress.mode & 2) && + null !== newProps && + ((type = workInProgress.child), null !== type && - ((JSCompiler_inline_result = workInProgress.child), - null !== JSCompiler_inline_result && - (workInProgress.treeBaseDuration -= - JSCompiler_inline_result.treeBaseDuration)); - JSCompiler_inline_result = !1; + (workInProgress.treeBaseDuration -= type.treeBaseDuration)); + type = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) - return workInProgress.flags & 65536 ? workInProgress : null; + (type = !0); + if (!type) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return ( @@ -10462,32 +10445,24 @@ function completeWork(current, workInProgress, renderLanes) { transferActualDuration(workInProgress), workInProgress ); - renderLanes = null !== type; - type = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$167 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$167 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + type = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (type = newProps.alternate.memoizedState.cachePool.pool); var cache$168 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$168 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$168 !== previousCache$167 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$168 = newProps.memoizedState.cachePool.pool); + cache$168 !== type && (newProps.flags |= 2048); } - renderLanes !== type && + renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), - renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3)))); + renderLanes && (workInProgress.child.flags |= 8192)); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -10521,8 +10496,8 @@ function completeWork(current, workInProgress, renderLanes) { type = workInProgress.memoizedState; if (null === type) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = type.rendering; - if (null === JSCompiler_inline_result) + cache$168 = type.rendering; + if (null === cache$168) if (newProps) cutOffTailIfNeeded(type, !1); else { if ( @@ -10530,19 +10505,19 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$168 = findFirstSuspended(current); + if (null !== cache$168) { workInProgress.flags |= 128; cutOffTailIfNeeded(type, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$168.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); workInProgress.subtreeFlags = 0; current = renderLanes; - for (newProps = workInProgress.child; null !== newProps; ) - resetWorkInProgress(newProps, current), - (newProps = newProps.sibling); + for (renderLanes = workInProgress.child; null !== renderLanes; ) + resetWorkInProgress(renderLanes, current), + (renderLanes = renderLanes.sibling); push( suspenseStackCursor, (suspenseStackCursor.current & 1) | 2 @@ -10560,10 +10535,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$168)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -10574,7 +10546,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !0), null === type.tail && "hidden" === type.tailMode && - !JSCompiler_inline_result.alternate && + !cache$168.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -10587,13 +10559,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !1), (workInProgress.lanes = 8388608)); type.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$168.sibling = workInProgress.child), + (workInProgress.child = cache$168)) : ((current = type.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (type.last = JSCompiler_inline_result)); + ? (current.sibling = cache$168) + : (workInProgress.child = cache$168), + (type.last = cache$168)); } if (null !== type.tail) return ( @@ -10629,7 +10601,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), 23 !== workInProgress.tag && @@ -10646,24 +10618,24 @@ function completeWork(current, workInProgress, renderLanes) { (workInProgress.flags |= 8192)) : bubbleProperties(workInProgress), null !== workInProgress.updateQueue && (workInProgress.flags |= 4), - (newProps = null), + (renderLanes = null), null !== current && null !== current.memoizedState && null !== current.memoizedState.cachePool && - (newProps = current.memoizedState.cachePool.pool), - (renderLanes = null), + (renderLanes = current.memoizedState.cachePool.pool), + (newProps = null), null !== workInProgress.memoizedState && null !== workInProgress.memoizedState.cachePool && - (renderLanes = workInProgress.memoizedState.cachePool.pool), - renderLanes !== newProps && (workInProgress.flags |= 2048), + (newProps = workInProgress.memoizedState.cachePool.pool), + newProps !== renderLanes && (workInProgress.flags |= 2048), popTransition(workInProgress, current), null ); case 24: return ( - (newProps = null), - null !== current && (newProps = current.memoizedState.cache), - workInProgress.memoizedState.cache !== newProps && + (renderLanes = null), + null !== current && (renderLanes = current.memoizedState.cache), + workInProgress.memoizedState.cache !== renderLanes && (workInProgress.flags |= 2048), popProvider(CacheContext), bubbleProperties(workInProgress), @@ -10713,7 +10685,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if (null !== current && null !== current.dehydrated) { if (null === workInProgress.alternate) @@ -10736,7 +10708,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), popTransition(workInProgress, current), (current = workInProgress.flags), @@ -10782,7 +10754,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -10792,7 +10764,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); popTransition(interruptedWork, current); break; @@ -13911,11 +13883,6 @@ function handleThrow(root, thrownValue) { ))); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -13924,18 +13891,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher(container) { container = getRootNode(container); @@ -14223,6 +14186,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -15892,10 +15861,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1814 = { +var devToolsConfig$jscomp$inline_1793 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-48274a43a-20230104", + version: "18.3.0-www-modern-c2d655207-20230104", rendererPackageName: "react-dom" }; (function(internals) { @@ -15913,10 +15882,10 @@ var devToolsConfig$jscomp$inline_1814 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1814.bundleType, - version: devToolsConfig$jscomp$inline_1814.version, - rendererPackageName: devToolsConfig$jscomp$inline_1814.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1814.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1793.bundleType, + version: devToolsConfig$jscomp$inline_1793.version, + rendererPackageName: devToolsConfig$jscomp$inline_1793.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1793.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15933,14 +15902,14 @@ var devToolsConfig$jscomp$inline_1814 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1814.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1793.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function(children, container) { @@ -16115,7 +16084,7 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-48274a43a-20230104"; +exports.version = "18.3.0-next-c2d655207-20230104"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index dec7009049..0e8ca9f7d3 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); -var ReactVersion = "18.3.0-www-classic-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-classic-c2d655207-20230104"; // This refers to a WWW module. var warningWWW = require("warning"); diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index 690a6a87cb..0f6ea0a5ec 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-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-modern-c2d655207-20230104"; // This refers to a WWW module. var warningWWW = require("warning"); diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index c1aecfadb7..ac68329674 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -3633,4 +3633,4 @@ exports.renderToString = function(children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-classic-48274a43a-20230104"; +exports.version = "18.3.0-www-classic-c2d655207-20230104"; diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js index d75b28dbce..f890a83ad0 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js @@ -3546,4 +3546,4 @@ exports.renderToString = function(children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-modern-48274a43a-20230104"; +exports.version = "18.3.0-www-modern-c2d655207-20230104"; diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 4a071fdaa2..a3ff607641 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -12434,71 +12434,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -12510,6 +12507,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -12523,6 +12535,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -17360,6 +17377,42 @@ function throwException( if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -22402,24 +22455,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -28403,16 +28439,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -28424,28 +28455,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -28517,6 +28542,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -28670,6 +28697,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); @@ -31160,7 +31191,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-classic-c2d655207-20230104"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index ffd06abf2a..841e6bdf4b 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -19909,71 +19909,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -19985,6 +19982,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -19998,6 +20010,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -24801,6 +24818,42 @@ function throwException( if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -29818,24 +29871,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -35691,16 +35727,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -35712,28 +35743,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -35805,6 +35830,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -35958,6 +35985,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); @@ -38448,7 +38479,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-modern-c2d655207-20230104"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 9dcee5220e..a2f914718f 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -3400,47 +3400,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -5292,7 +5283,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { : (workInProgress.lanes = 1073741824), null ); - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); } current = nextProps.children; didSuspend = nextProps.fallback; @@ -6370,19 +6361,19 @@ function completeWork(current, workInProgress, renderLanes) { null ); case 3: - newProps = workInProgress.stateNode; - renderLanes = null; - null !== current && (renderLanes = current.memoizedState.cache); - workInProgress.memoizedState.cache !== renderLanes && + renderLanes = workInProgress.stateNode; + newProps = null; + null !== current && (newProps = current.memoizedState.cache); + workInProgress.memoizedState.cache !== newProps && (workInProgress.flags |= 2048); popProvider(CacheContext); popHostContainer(); pop(didPerformWorkStackCursor); pop(contextStackCursor); resetWorkInProgressVersions(); - newProps.pendingContext && - ((newProps.context = newProps.pendingContext), - (newProps.pendingContext = null)); + renderLanes.pendingContext && + ((renderLanes.context = renderLanes.pendingContext), + (renderLanes.pendingContext = null)); if (null === current || null === current.child) popHydrationState(workInProgress) ? markUpdate(workInProgress) @@ -6497,15 +6488,15 @@ function completeWork(current, workInProgress, renderLanes) { current = rootInstanceStackCursor.current; if (popHydrationState(workInProgress)) { current = workInProgress.stateNode; - newProps = workInProgress.memoizedProps; + renderLanes = workInProgress.memoizedProps; current[internalInstanceKey] = workInProgress; - if ((renderLanes = current.nodeValue !== newProps)) + if ((newProps = current.nodeValue !== renderLanes)) if (((type = hydrationParentFiber), null !== type)) switch (type.tag) { case 3: checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); break; @@ -6514,11 +6505,11 @@ function completeWork(current, workInProgress, renderLanes) { !0 !== type.memoizedProps.suppressHydrationWarning && checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); } - renderLanes && markUpdate(workInProgress); + newProps && markUpdate(workInProgress); } else (current = (9 === current.nodeType ? current @@ -6530,8 +6521,8 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - type = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && @@ -6542,67 +6533,54 @@ function completeWork(current, workInProgress, renderLanes) { null !== nextHydratableInstance && 0 !== (workInProgress.mode & 1) && 0 === (workInProgress.flags & 128) - ) { - warnIfUnhydratedTailNodes(); - resetHydrationState(); - workInProgress.flags |= 98560; - var JSCompiler_inline_result = !1; - } else if ( - ((JSCompiler_inline_result = popHydrationState(workInProgress)), - null !== type && null !== type.dehydrated) + ) + warnIfUnhydratedTailNodes(), + resetHydrationState(), + (workInProgress.flags |= 98560), + (type = !1); + else if ( + ((type = popHydrationState(workInProgress)), + null !== newProps && null !== newProps.dehydrated) ) { if (null === current) { - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(318)); - JSCompiler_inline_result = workInProgress.memoizedState; - JSCompiler_inline_result = - null !== JSCompiler_inline_result - ? JSCompiler_inline_result.dehydrated - : null; - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(317)); - JSCompiler_inline_result[internalInstanceKey] = workInProgress; + if (!type) throw Error(formatProdErrorMessage(318)); + type = workInProgress.memoizedState; + type = null !== type ? type.dehydrated : null; + if (!type) throw Error(formatProdErrorMessage(317)); + type[internalInstanceKey] = workInProgress; } else resetHydrationState(), 0 === (workInProgress.flags & 128) && (workInProgress.memoizedState = null), (workInProgress.flags |= 4); bubbleProperties(workInProgress); - JSCompiler_inline_result = !1; + type = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) - return workInProgress.flags & 65536 ? workInProgress : null; + (type = !0); + if (!type) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; - renderLanes = null !== type; - type = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$98 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$98 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + type = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (type = newProps.alternate.memoizedState.cachePool.pool); var cache$99 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$99 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$99 !== previousCache$98 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$99 = newProps.memoizedState.cachePool.pool); + cache$99 !== type && (newProps.flags |= 2048); } - renderLanes !== type && + renderLanes !== current && renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3))); + (workInProgress.child.flags |= 8192); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -6635,8 +6613,8 @@ function completeWork(current, workInProgress, renderLanes) { type = workInProgress.memoizedState; if (null === type) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = type.rendering; - if (null === JSCompiler_inline_result) + cache$99 = type.rendering; + if (null === cache$99) if (newProps) cutOffTailIfNeeded(type, !1); else { if ( @@ -6644,19 +6622,19 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$99 = findFirstSuspended(current); + if (null !== cache$99) { workInProgress.flags |= 128; cutOffTailIfNeeded(type, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$99.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); workInProgress.subtreeFlags = 0; current = renderLanes; - for (newProps = workInProgress.child; null !== newProps; ) - resetWorkInProgress(newProps, current), - (newProps = newProps.sibling); + for (renderLanes = workInProgress.child; null !== renderLanes; ) + resetWorkInProgress(renderLanes, current), + (renderLanes = renderLanes.sibling); push( suspenseStackCursor, (suspenseStackCursor.current & 1) | 2 @@ -6674,10 +6652,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$99)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -6688,7 +6663,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !0), null === type.tail && "hidden" === type.tailMode && - !JSCompiler_inline_result.alternate && + !cache$99.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -6701,13 +6676,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !1), (workInProgress.lanes = 8388608)); type.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$99.sibling = workInProgress.child), + (workInProgress.child = cache$99)) : ((current = type.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (type.last = JSCompiler_inline_result)); + ? (current.sibling = cache$99) + : (workInProgress.child = cache$99), + (type.last = cache$99)); } if (null !== type.tail) return ( @@ -6743,7 +6718,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), null !== current @@ -6757,24 +6732,24 @@ function completeWork(current, workInProgress, renderLanes) { workInProgress.subtreeFlags & 6 && (workInProgress.flags |= 8192)) : bubbleProperties(workInProgress), null !== workInProgress.updateQueue && (workInProgress.flags |= 4), - (newProps = null), + (renderLanes = null), null !== current && null !== current.memoizedState && null !== current.memoizedState.cachePool && - (newProps = current.memoizedState.cachePool.pool), - (renderLanes = null), + (renderLanes = current.memoizedState.cachePool.pool), + (newProps = null), null !== workInProgress.memoizedState && null !== workInProgress.memoizedState.cachePool && - (renderLanes = workInProgress.memoizedState.cachePool.pool), - renderLanes !== newProps && (workInProgress.flags |= 2048), + (newProps = workInProgress.memoizedState.cachePool.pool), + newProps !== renderLanes && (workInProgress.flags |= 2048), null !== current && pop(resumedCache), null ); case 24: return ( - (newProps = null), - null !== current && (newProps = current.memoizedState.cache), - workInProgress.memoizedState.cache !== newProps && + (renderLanes = null), + null !== current && (renderLanes = current.memoizedState.cache), + workInProgress.memoizedState.cache !== renderLanes && (workInProgress.flags |= 2048), popProvider(CacheContext), bubbleProperties(workInProgress), @@ -6813,7 +6788,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if (null !== current && null !== current.dehydrated) { if (null === workInProgress.alternate) @@ -6833,7 +6808,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), null !== current && pop(resumedCache), (current = workInProgress.flags), @@ -6872,7 +6847,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -6882,7 +6857,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); null !== current && pop(resumedCache); break; @@ -9392,11 +9367,6 @@ function handleThrow(root, thrownValue) { (workInProgressRootFatalError = thrownValue)); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -9405,18 +9375,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher(container) { container = getRootNode(container); @@ -9652,6 +9618,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -11353,17 +11325,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates ]; -var devToolsConfig$jscomp$inline_1540 = { +var devToolsConfig$jscomp$inline_1519 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-48274a43a-20230104", + version: "18.3.0-www-classic-c2d655207-20230104", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2066 = { - bundleType: devToolsConfig$jscomp$inline_1540.bundleType, - version: devToolsConfig$jscomp$inline_1540.version, - rendererPackageName: devToolsConfig$jscomp$inline_1540.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1540.rendererConfig, +var internals$jscomp$inline_2049 = { + bundleType: devToolsConfig$jscomp$inline_1519.bundleType, + version: devToolsConfig$jscomp$inline_1519.version, + rendererPackageName: devToolsConfig$jscomp$inline_1519.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1519.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -11379,26 +11351,26 @@ var internals$jscomp$inline_2066 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1540.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1519.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2067 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2050 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2067.isDisabled && - hook$jscomp$inline_2067.supportsFiber + !hook$jscomp$inline_2050.isDisabled && + hook$jscomp$inline_2050.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2067.inject( - internals$jscomp$inline_2066 + (rendererID = hook$jscomp$inline_2050.inject( + internals$jscomp$inline_2049 )), - (injectedHook = hook$jscomp$inline_2067); + (injectedHook = hook$jscomp$inline_2050); } catch (err) {} } var Dispatcher$1 = Internals.Dispatcher, @@ -13017,19 +12989,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$307; + var JSCompiler_inline_result$jscomp$305; if (canUseDOM) { - var isSupported$jscomp$inline_1639 = "oninput" in document; - if (!isSupported$jscomp$inline_1639) { - var element$jscomp$inline_1640 = document.createElement("div"); - element$jscomp$inline_1640.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1639 = - "function" === typeof element$jscomp$inline_1640.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$307 = isSupported$jscomp$inline_1639; - } else JSCompiler_inline_result$jscomp$307 = !1; + JSCompiler_inline_result$jscomp$305 = isSupported$jscomp$inline_1618; + } else JSCompiler_inline_result$jscomp$305 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$307 && + JSCompiler_inline_result$jscomp$305 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13166,19 +13138,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1652 = 0; - i$jscomp$inline_1652 < simpleEventPluginEvents.length; - i$jscomp$inline_1652++ + var i$jscomp$inline_1631 = 0; + i$jscomp$inline_1631 < simpleEventPluginEvents.length; + i$jscomp$inline_1631++ ) { - var eventName$jscomp$inline_1653 = - simpleEventPluginEvents[i$jscomp$inline_1652], - domEventName$jscomp$inline_1654 = eventName$jscomp$inline_1653.toLowerCase(), - capitalizedEvent$jscomp$inline_1655 = - eventName$jscomp$inline_1653[0].toUpperCase() + - eventName$jscomp$inline_1653.slice(1); + var eventName$jscomp$inline_1632 = + simpleEventPluginEvents[i$jscomp$inline_1631], + domEventName$jscomp$inline_1633 = eventName$jscomp$inline_1632.toLowerCase(), + capitalizedEvent$jscomp$inline_1634 = + eventName$jscomp$inline_1632[0].toUpperCase() + + eventName$jscomp$inline_1632.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1654, - "on" + capitalizedEvent$jscomp$inline_1655 + domEventName$jscomp$inline_1633, + "on" + capitalizedEvent$jscomp$inline_1634 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14875,4 +14847,4 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-48274a43a-20230104"; +exports.version = "18.3.0-next-c2d655207-20230104"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index d60b89d476..527016eae7 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -2548,14 +2548,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$224; if (canUseDOM) { - var isSupported$jscomp$inline_378 = "oninput" in document; - if (!isSupported$jscomp$inline_378) { - var element$jscomp$inline_379 = document.createElement("div"); - element$jscomp$inline_379.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_378 = - "function" === typeof element$jscomp$inline_379.oninput; + var isSupported$jscomp$inline_376 = "oninput" in document; + if (!isSupported$jscomp$inline_376) { + var element$jscomp$inline_377 = document.createElement("div"); + element$jscomp$inline_377.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_376 = + "function" === typeof element$jscomp$inline_377.oninput; } - JSCompiler_inline_result$jscomp$224 = isSupported$jscomp$inline_378; + JSCompiler_inline_result$jscomp$224 = isSupported$jscomp$inline_376; } else JSCompiler_inline_result$jscomp$224 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$224 && @@ -2892,19 +2892,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_419 = 0; - i$jscomp$inline_419 < simpleEventPluginEvents.length; - i$jscomp$inline_419++ + var i$jscomp$inline_417 = 0; + i$jscomp$inline_417 < simpleEventPluginEvents.length; + i$jscomp$inline_417++ ) { - var eventName$jscomp$inline_420 = - simpleEventPluginEvents[i$jscomp$inline_419], - domEventName$jscomp$inline_421 = eventName$jscomp$inline_420.toLowerCase(), - capitalizedEvent$jscomp$inline_422 = - eventName$jscomp$inline_420[0].toUpperCase() + - eventName$jscomp$inline_420.slice(1); + var eventName$jscomp$inline_418 = + simpleEventPluginEvents[i$jscomp$inline_417], + domEventName$jscomp$inline_419 = eventName$jscomp$inline_418.toLowerCase(), + capitalizedEvent$jscomp$inline_420 = + eventName$jscomp$inline_418[0].toUpperCase() + + eventName$jscomp$inline_418.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_421, - "on" + capitalizedEvent$jscomp$inline_422 + domEventName$jscomp$inline_419, + "on" + capitalizedEvent$jscomp$inline_420 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -6406,47 +6406,38 @@ function popHiddenContext() { pop(currentTreeHiddenStackCursor); pop(prevRenderLanesStackCursor); } -var suspenseHandlerStackCursor = createCursor(null); -function isBadSuspenseFallback(current, nextProps) { - return (null !== current && - null === current.memoizedState && - null === currentTreeHiddenStackCursor.current) || - !0 === nextProps.unstable_avoidThisFallback - ? !0 - : !1; -} +var suspenseHandlerStackCursor = createCursor(null), + shellBoundary = null; function pushPrimaryTreeSuspenseHandler(handler) { - var handlerOnStack = suspenseHandlerStackCursor.current, - JSCompiler_temp; - if ( - (JSCompiler_temp = - !0 === handler.pendingProps.unstable_avoidThisFallback && - null !== handlerOnStack) - ) - null === handlerOnStack.alternate || - null !== currentTreeHiddenStackCursor.current - ? 13 === handlerOnStack.tag && - !0 === handlerOnStack.memoizedProps.unstable_avoidThisFallback - ? (JSCompiler_temp = !0) - : ((JSCompiler_temp = handler.memoizedState), - (JSCompiler_temp = - null !== JSCompiler_temp && null !== JSCompiler_temp.dehydrated - ? !0 - : !1)) - : (JSCompiler_temp = !0), - (JSCompiler_temp = !JSCompiler_temp); - JSCompiler_temp - ? push(suspenseHandlerStackCursor, handlerOnStack) - : push(suspenseHandlerStackCursor, handler); + var current = handler.alternate; + !0 !== handler.pendingProps.unstable_avoidThisFallback || + (null !== current && null === currentTreeHiddenStackCursor.current) + ? (push(suspenseHandlerStackCursor, handler), + null === shellBoundary && + (null === current || null !== currentTreeHiddenStackCursor.current + ? (shellBoundary = handler) + : null !== current.memoizedState && (shellBoundary = handler))) + : null === shellBoundary + ? push(suspenseHandlerStackCursor, handler) + : push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } function pushOffscreenSuspenseHandler(fiber) { - 22 === fiber.tag - ? push(suspenseHandlerStackCursor, fiber) - : reuseSuspenseHandlerOnStack(); + if (22 === fiber.tag) { + if ((push(suspenseHandlerStackCursor, fiber), null === shellBoundary)) { + var current = fiber.alternate; + null !== current && + null !== current.memoizedState && + (shellBoundary = fiber); + } + } else reuseSuspenseHandlerOnStack(); } function reuseSuspenseHandlerOnStack() { push(suspenseHandlerStackCursor, suspenseHandlerStackCursor.current); } +function popSuspenseHandler(fiber) { + pop(suspenseHandlerStackCursor); + shellBoundary === fiber && (shellBoundary = null); +} var suspenseStackCursor = createCursor(0); function findFirstSuspended(row) { for (var node = row; null !== node; ) { @@ -8248,7 +8239,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { : (workInProgress.lanes = 1073741824), null ); - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); } current = nextProps.children; didSuspend = nextProps.fallback; @@ -9318,17 +9309,17 @@ function completeWork(current, workInProgress, renderLanes) { case 1: return bubbleProperties(workInProgress), null; case 3: - newProps = workInProgress.stateNode; - renderLanes = null; - null !== current && (renderLanes = current.memoizedState.cache); - workInProgress.memoizedState.cache !== renderLanes && + renderLanes = workInProgress.stateNode; + newProps = null; + null !== current && (newProps = current.memoizedState.cache); + workInProgress.memoizedState.cache !== newProps && (workInProgress.flags |= 2048); popProvider(CacheContext); popHostContainer(); resetWorkInProgressVersions(); - newProps.pendingContext && - ((newProps.context = newProps.pendingContext), - (newProps.pendingContext = null)); + renderLanes.pendingContext && + ((renderLanes.context = renderLanes.pendingContext), + (renderLanes.pendingContext = null)); if (null === current || null === current.child) popHydrationState(workInProgress) ? markUpdate(workInProgress) @@ -9443,15 +9434,15 @@ function completeWork(current, workInProgress, renderLanes) { current = rootInstanceStackCursor.current; if (popHydrationState(workInProgress)) { current = workInProgress.stateNode; - newProps = workInProgress.memoizedProps; + renderLanes = workInProgress.memoizedProps; current[internalInstanceKey] = workInProgress; - if ((renderLanes = current.nodeValue !== newProps)) + if ((newProps = current.nodeValue !== renderLanes)) if (((type = hydrationParentFiber), null !== type)) switch (type.tag) { case 3: checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); break; @@ -9460,11 +9451,11 @@ function completeWork(current, workInProgress, renderLanes) { !0 !== type.memoizedProps.suppressHydrationWarning && checkForUnmatchedText( current.nodeValue, - newProps, + renderLanes, 0 !== (type.mode & 1) ); } - renderLanes && markUpdate(workInProgress); + newProps && markUpdate(workInProgress); } else (current = (9 === current.nodeType ? current @@ -9476,8 +9467,8 @@ function completeWork(current, workInProgress, renderLanes) { bubbleProperties(workInProgress); return null; case 13: - pop(suspenseHandlerStackCursor); - type = workInProgress.memoizedState; + popSuspenseHandler(workInProgress); + newProps = workInProgress.memoizedState; if ( null === current || (null !== current.memoizedState && @@ -9488,67 +9479,54 @@ function completeWork(current, workInProgress, renderLanes) { null !== nextHydratableInstance && 0 !== (workInProgress.mode & 1) && 0 === (workInProgress.flags & 128) - ) { - warnIfUnhydratedTailNodes(); - resetHydrationState(); - workInProgress.flags |= 98560; - var JSCompiler_inline_result = !1; - } else if ( - ((JSCompiler_inline_result = popHydrationState(workInProgress)), - null !== type && null !== type.dehydrated) + ) + warnIfUnhydratedTailNodes(), + resetHydrationState(), + (workInProgress.flags |= 98560), + (type = !1); + else if ( + ((type = popHydrationState(workInProgress)), + null !== newProps && null !== newProps.dehydrated) ) { if (null === current) { - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(318)); - JSCompiler_inline_result = workInProgress.memoizedState; - JSCompiler_inline_result = - null !== JSCompiler_inline_result - ? JSCompiler_inline_result.dehydrated - : null; - if (!JSCompiler_inline_result) - throw Error(formatProdErrorMessage(317)); - JSCompiler_inline_result[internalInstanceKey] = workInProgress; + if (!type) throw Error(formatProdErrorMessage(318)); + type = workInProgress.memoizedState; + type = null !== type ? type.dehydrated : null; + if (!type) throw Error(formatProdErrorMessage(317)); + type[internalInstanceKey] = workInProgress; } else resetHydrationState(), 0 === (workInProgress.flags & 128) && (workInProgress.memoizedState = null), (workInProgress.flags |= 4); bubbleProperties(workInProgress); - JSCompiler_inline_result = !1; + type = !1; } else null !== hydrationErrors && (queueRecoverableErrors(hydrationErrors), (hydrationErrors = null)), - (JSCompiler_inline_result = !0); - if (!JSCompiler_inline_result) - return workInProgress.flags & 65536 ? workInProgress : null; + (type = !0); + if (!type) return workInProgress.flags & 65536 ? workInProgress : null; } if (0 !== (workInProgress.flags & 128)) return (workInProgress.lanes = renderLanes), workInProgress; - renderLanes = null !== type; - type = null !== current && null !== current.memoizedState; + renderLanes = null !== newProps; + current = null !== current && null !== current.memoizedState; if (renderLanes) { - JSCompiler_inline_result = workInProgress.child; - var previousCache$144 = null; - null !== JSCompiler_inline_result.alternate && - null !== JSCompiler_inline_result.alternate.memoizedState && - null !== JSCompiler_inline_result.alternate.memoizedState.cachePool && - (previousCache$144 = - JSCompiler_inline_result.alternate.memoizedState.cachePool.pool); + newProps = workInProgress.child; + type = null; + null !== newProps.alternate && + null !== newProps.alternate.memoizedState && + null !== newProps.alternate.memoizedState.cachePool && + (type = newProps.alternate.memoizedState.cachePool.pool); var cache$145 = null; - null !== JSCompiler_inline_result.memoizedState && - null !== JSCompiler_inline_result.memoizedState.cachePool && - (cache$145 = JSCompiler_inline_result.memoizedState.cachePool.pool); - cache$145 !== previousCache$144 && - (JSCompiler_inline_result.flags |= 2048); + null !== newProps.memoizedState && + null !== newProps.memoizedState.cachePool && + (cache$145 = newProps.memoizedState.cachePool.pool); + cache$145 !== type && (newProps.flags |= 2048); } - renderLanes !== type && + renderLanes !== current && renderLanes && - ((workInProgress.child.flags |= 8192), - 0 !== (workInProgress.mode & 1) && - (isBadSuspenseFallback(current, newProps) - ? renderDidSuspendDelayIfPossible() - : 0 === workInProgressRootExitStatus && - (workInProgressRootExitStatus = 3))); + (workInProgress.child.flags |= 8192); null !== workInProgress.updateQueue && (workInProgress.flags |= 4); null !== workInProgress.updateQueue && null != workInProgress.memoizedProps.suspenseCallback && @@ -9577,8 +9555,8 @@ function completeWork(current, workInProgress, renderLanes) { type = workInProgress.memoizedState; if (null === type) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - JSCompiler_inline_result = type.rendering; - if (null === JSCompiler_inline_result) + cache$145 = type.rendering; + if (null === cache$145) if (newProps) cutOffTailIfNeeded(type, !1); else { if ( @@ -9586,19 +9564,19 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - JSCompiler_inline_result = findFirstSuspended(current); - if (null !== JSCompiler_inline_result) { + cache$145 = findFirstSuspended(current); + if (null !== cache$145) { workInProgress.flags |= 128; cutOffTailIfNeeded(type, !1); - current = JSCompiler_inline_result.updateQueue; + current = cache$145.updateQueue; null !== current && ((workInProgress.updateQueue = current), (workInProgress.flags |= 4)); workInProgress.subtreeFlags = 0; current = renderLanes; - for (newProps = workInProgress.child; null !== newProps; ) - resetWorkInProgress(newProps, current), - (newProps = newProps.sibling); + for (renderLanes = workInProgress.child; null !== renderLanes; ) + resetWorkInProgress(renderLanes, current), + (renderLanes = renderLanes.sibling); push( suspenseStackCursor, (suspenseStackCursor.current & 1) | 2 @@ -9616,10 +9594,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if ( - ((current = findFirstSuspended(JSCompiler_inline_result)), - null !== current) - ) { + if (((current = findFirstSuspended(cache$145)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -9630,7 +9605,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !0), null === type.tail && "hidden" === type.tailMode && - !JSCompiler_inline_result.alternate && + !cache$145.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -9643,13 +9618,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(type, !1), (workInProgress.lanes = 8388608)); type.isBackwards - ? ((JSCompiler_inline_result.sibling = workInProgress.child), - (workInProgress.child = JSCompiler_inline_result)) + ? ((cache$145.sibling = workInProgress.child), + (workInProgress.child = cache$145)) : ((current = type.last), null !== current - ? (current.sibling = JSCompiler_inline_result) - : (workInProgress.child = JSCompiler_inline_result), - (type.last = JSCompiler_inline_result)); + ? (current.sibling = cache$145) + : (workInProgress.child = cache$145), + (type.last = cache$145)); } if (null !== type.tail) return ( @@ -9685,7 +9660,7 @@ function completeWork(current, workInProgress, renderLanes) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), (newProps = null !== workInProgress.memoizedState), null !== current @@ -9699,24 +9674,24 @@ function completeWork(current, workInProgress, renderLanes) { workInProgress.subtreeFlags & 6 && (workInProgress.flags |= 8192)) : bubbleProperties(workInProgress), null !== workInProgress.updateQueue && (workInProgress.flags |= 4), - (newProps = null), + (renderLanes = null), null !== current && null !== current.memoizedState && null !== current.memoizedState.cachePool && - (newProps = current.memoizedState.cachePool.pool), - (renderLanes = null), + (renderLanes = current.memoizedState.cachePool.pool), + (newProps = null), null !== workInProgress.memoizedState && null !== workInProgress.memoizedState.cachePool && - (renderLanes = workInProgress.memoizedState.cachePool.pool), - renderLanes !== newProps && (workInProgress.flags |= 2048), + (newProps = workInProgress.memoizedState.cachePool.pool), + newProps !== renderLanes && (workInProgress.flags |= 2048), null !== current && pop(resumedCache), null ); case 24: return ( - (newProps = null), - null !== current && (newProps = current.memoizedState.cache), - workInProgress.memoizedState.cache !== newProps && + (renderLanes = null), + null !== current && (renderLanes = current.memoizedState.cache), + workInProgress.memoizedState.cache !== renderLanes && (workInProgress.flags |= 2048), popProvider(CacheContext), bubbleProperties(workInProgress), @@ -9752,7 +9727,7 @@ function unwindWork(current, workInProgress) { case 5: return popHostContext(workInProgress), null; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(workInProgress); current = workInProgress.memoizedState; if (null !== current && null !== current.dehydrated) { if (null === workInProgress.alternate) @@ -9772,7 +9747,7 @@ function unwindWork(current, workInProgress) { case 22: case 23: return ( - pop(suspenseHandlerStackCursor), + popSuspenseHandler(workInProgress), popHiddenContext(), null !== current && pop(resumedCache), (current = workInProgress.flags), @@ -9805,7 +9780,7 @@ function unwindInterruptedWork(current, interruptedWork) { popHostContainer(); break; case 13: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); break; case 19: pop(suspenseStackCursor); @@ -9815,7 +9790,7 @@ function unwindInterruptedWork(current, interruptedWork) { break; case 22: case 23: - pop(suspenseHandlerStackCursor); + popSuspenseHandler(interruptedWork); popHiddenContext(); null !== current && pop(resumedCache); break; @@ -12286,11 +12261,6 @@ function handleThrow(root, thrownValue) { (workInProgressRootFatalError = thrownValue)); } function shouldAttemptToSuspendUntilDataResolves() { - if ( - (workInProgressRootRenderLanes & 125829120) === - workInProgressRootRenderLanes - ) - return !0; if ( 0 !== (workInProgressRootSkippedLanes & 268435455) || 0 !== (workInProgressRootInterleavedUpdatedLanes & 268435455) @@ -12299,18 +12269,14 @@ function shouldAttemptToSuspendUntilDataResolves() { if ( (workInProgressRootRenderLanes & 8388480) === workInProgressRootRenderLanes - ) { - var suspenseHandler = suspenseHandlerStackCursor.current; - return null === suspenseHandler || - 13 !== suspenseHandler.tag || - isBadSuspenseFallback( - suspenseHandler.alternate, - suspenseHandler.memoizedProps - ) - ? !0 - : !1; - } - return !1; + ) + return null === shellBoundary; + var handler = suspenseHandlerStackCursor.current; + return null !== handler && + (workInProgressRootRenderLanes & 125829120) === + workInProgressRootRenderLanes + ? handler === shellBoundary + : !1; } function pushDispatcher(container) { container = getRootNode(container); @@ -12546,6 +12512,12 @@ function unwindSuspendedUnitOfWork(unitOfWork, thrownValue) { if (null !== suspenseBoundary) { switch (suspenseBoundary.tag) { case 13: + unitOfWork.mode & 1 && + (null === shellBoundary + ? renderDidSuspendDelayIfPossible() + : null === suspenseBoundary.alternate && + 0 === workInProgressRootExitStatus && + (workInProgressRootExitStatus = 3)); suspenseBoundary.flags &= -257; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -13985,17 +13957,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1695 = { +var devToolsConfig$jscomp$inline_1674 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-48274a43a-20230104", + version: "18.3.0-www-modern-c2d655207-20230104", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2091 = { - bundleType: devToolsConfig$jscomp$inline_1695.bundleType, - version: devToolsConfig$jscomp$inline_1695.version, - rendererPackageName: devToolsConfig$jscomp$inline_1695.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1695.rendererConfig, +var internals$jscomp$inline_2074 = { + bundleType: devToolsConfig$jscomp$inline_1674.bundleType, + version: devToolsConfig$jscomp$inline_1674.version, + rendererPackageName: devToolsConfig$jscomp$inline_1674.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1674.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -14012,26 +13984,26 @@ var internals$jscomp$inline_2091 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1695.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1674.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-48274a43a-20230104" + reconcilerVersion: "18.3.0-next-c2d655207-20230104" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2092 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2075 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2092.isDisabled && - hook$jscomp$inline_2092.supportsFiber + !hook$jscomp$inline_2075.isDisabled && + hook$jscomp$inline_2075.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2092.inject( - internals$jscomp$inline_2091 + (rendererID = hook$jscomp$inline_2075.inject( + internals$jscomp$inline_2074 )), - (injectedHook = hook$jscomp$inline_2092); + (injectedHook = hook$jscomp$inline_2075); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -14342,4 +14314,4 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-48274a43a-20230104"; +exports.version = "18.3.0-next-c2d655207-20230104"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index cf7558b528..28d7cc87a4 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -5841,71 +5841,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -5917,6 +5914,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -5930,6 +5942,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -10853,6 +10870,42 @@ function throwException( if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -15592,24 +15645,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -20986,16 +21022,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -21007,28 +21038,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -21098,6 +21123,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -21251,6 +21278,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); @@ -23859,7 +23890,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-classic-c2d655207-20230104"; var didWarnAboutNestedUpdates; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index b3d8353ac1..dcbf889c23 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -5841,71 +5841,68 @@ function isCurrentTreeHidden() { // suspends, i.e. it's the nearest `catch` block on the stack. -var suspenseHandlerStackCursor = createCursor(null); +var suspenseHandlerStackCursor = createCursor(null); // Represents the outermost boundary that is not visible in the current tree. +// Everything above this is the "shell". When this is null, it means we're +// rendering in the shell of the app. If it's non-null, it means we're rendering +// deeper than the shell, inside a new tree that wasn't already visible. +// +// The main way we use this concept is to determine whether showing a fallback +// would result in a desirable or undesirable loading state. Activing a fallback +// in the shell is considered an undersirable loading state, because it would +// mean hiding visible (albeit stale) content in the current tree — we prefer to +// show the stale content, rather than switch to a fallback. But showing a +// fallback in a new tree is fine, because there's no stale content to +// prefer instead. -function shouldAvoidedBoundaryCapture(workInProgress, handlerOnStack, props) { - { - // If the parent is already showing content, and we're not inside a hidden - // tree, then we should show the avoided fallback. - if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) { - return true; - } // If the handler on the stack is also an avoided boundary, then we should - // favor this inner one. - - if ( - handlerOnStack.tag === SuspenseComponent && - handlerOnStack.memoizedProps.unstable_avoidThisFallback === true - ) { - return true; - } // If this avoided boundary is dehydrated, then it should capture. - - var suspenseState = workInProgress.memoizedState; - - if (suspenseState !== null && suspenseState.dehydrated !== null) { - return true; - } - } // If none of those cases apply, then we should avoid this fallback and show - // the outer one instead. - - return false; -} - -function isBadSuspenseFallback(current, nextProps) { - // Check if this is a "bad" fallback state or a good one. A bad fallback state - // is one that we only show as a last resort; if this is a transition, we'll - // block it from displaying, and wait for more data to arrive. - if (current !== null) { - var prevState = current.memoizedState; - var isShowingFallback = prevState !== null; - - if (!isShowingFallback && !isCurrentTreeHidden()) { - // It's bad to switch to a fallback if content is already visible - return true; - } - } - - if (nextProps.unstable_avoidThisFallback === true) { - // Experimental: Some fallbacks are always bad - return true; - } - - return false; +var shellBoundary = null; +function getShellBoundary() { + return shellBoundary; } function pushPrimaryTreeSuspenseHandler(handler) { - var props = handler.pendingProps; - var handlerOnStack = suspenseHandlerStackCursor.current; + // TODO: Pass as argument + var current = handler.alternate; + var props = handler.pendingProps; // Experimental feature: Some Suspense boundaries are marked as having an + // undesirable fallback state. These have special behavior where we only + // activate the fallback if there's no other boundary on the stack that we can + // use instead. if ( - props.unstable_avoidThisFallback === true && - handlerOnStack !== null && - !shouldAvoidedBoundaryCapture(handler, handlerOnStack) + props.unstable_avoidThisFallback === true && // If an avoided boundary is already visible, it behaves identically to + // a regular Suspense boundary. + (current === null || isCurrentTreeHidden()) ) { - // This boundary should not capture if something suspends. Reuse the - // existing handler on the stack. - push(suspenseHandlerStackCursor, handlerOnStack, handler); - } else { - // Push this handler onto the stack. - push(suspenseHandlerStackCursor, handler, handler); + if (shellBoundary === null) { + // We're rendering in the shell. There's no parent Suspense boundary that + // can provide a desirable fallback state. We'll use this boundary. + push(suspenseHandlerStackCursor, handler, handler); // However, because this is not a desirable fallback, the children are + // still considered part of the shell. So we intentionally don't assign + // to `shellBoundary`. + } else { + // There's already a parent Suspense boundary that can provide a desirable + // fallback state. Prefer that one. + var handlerOnStack = suspenseHandlerStackCursor.current; + push(suspenseHandlerStackCursor, handlerOnStack, handler); + } + + return; + } // TODO: If the parent Suspense handler already suspended, there's no reason + // to push a nested Suspense handler, because it will get replaced by the + // outer fallback, anyway. Consider this as a future optimization. + + push(suspenseHandlerStackCursor, handler, handler); + + if (shellBoundary === null) { + if (current === null || isCurrentTreeHidden()) { + // This boundary is not visible in the current UI. + shellBoundary = handler; + } else { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This boundary is showing a fallback in the current UI. + shellBoundary = handler; + } + } } } function pushFallbackTreeSuspenseHandler(fiber) { @@ -5917,6 +5914,21 @@ function pushFallbackTreeSuspenseHandler(fiber) { function pushOffscreenSuspenseHandler(fiber) { if (fiber.tag === OffscreenComponent) { push(suspenseHandlerStackCursor, fiber, fiber); + + if (shellBoundary !== null); + else { + var current = fiber.alternate; + + if (current !== null) { + var prevState = current.memoizedState; + + if (prevState !== null) { + // This is the first boundary in the stack that's already showing + // a fallback. So everything outside is considered the shell. + shellBoundary = fiber; + } + } + } } else { // This is a LegacyHidden component. reuseSuspenseHandlerOnStack(fiber); @@ -5930,6 +5942,11 @@ function getSuspenseHandler() { } function popSuspenseHandler(fiber) { pop(suspenseHandlerStackCursor, fiber); + + if (shellBoundary === fiber) { + // Popping back into the shell. + shellBoundary = null; + } } // SuspenseList context // TODO: Move to a separate module? We may change the SuspenseList // implementation to hide/show in the commit phase, anyway. @@ -10853,6 +10870,42 @@ function throwException( if (suspenseBoundary !== null) { switch (suspenseBoundary.tag) { case SuspenseComponent: { + // If this suspense boundary is not already showing a fallback, mark + // the in-progress render as suspended. We try to perform this logic + // as soon as soon as possible during the render phase, so the work + // loop can know things like whether it's OK to switch to other tasks, + // or whether it can wait for data to resolve before continuing. + // TODO: Most of these checks are already performed when entering a + // Suspense boundary. We should track the information on the stack so + // we don't have to recompute it on demand. This would also allow us + // to unify with `use` which needs to perform this logic even sooner, + // before `throwException` is called. + if (sourceFiber.mode & ConcurrentMode) { + if (getShellBoundary() === null) { + // Suspended in the "shell" of the app. This is an undesirable + // loading state. We should avoid committing this tree. + renderDidSuspendDelayIfPossible(); + } else { + // If we suspended deeper than the shell, we don't need to delay + // the commmit. However, we still call renderDidSuspend if this is + // a new boundary, to tell the work loop that a new fallback has + // appeared during this render. + // TODO: Theoretically we should be able to delete this branch. + // It's currently used for two things: 1) to throttle the + // appearance of successive loading states, and 2) in + // SuspenseList, to determine whether the children include any + // pending fallbacks. For 1, we should apply throttling to all + // retries, not just ones that render an additional fallback. For + // 2, we should check subtreeFlags instead. Then we can delete + // this branch. + var current = suspenseBoundary.alternate; + + if (current === null) { + renderDidSuspend(); + } + } + } + suspenseBoundary.flags &= ~ForceClientRender; markSuspenseBoundaryShouldCapture( suspenseBoundary, @@ -15592,24 +15645,7 @@ function completeWork(current, workInProgress, renderLanes) { if (nextDidTimeout) { var _offscreenFiber2 = workInProgress.child; - _offscreenFiber2.flags |= Visibility; // TODO: This will still suspend a synchronous tree if anything - // in the concurrent tree already suspended during this render. - // This is a known bug. - - if ((workInProgress.mode & ConcurrentMode) !== NoMode) { - // TODO: Move this back to throwException because this is too late - // if this is a large tree which is common for initial loads. We - // don't know if we should restart a render or not until we get - // this marker, and this is too late. - // If this render already had a ping or lower pri updates, - // and this is the first time we know we're going to suspend we - // should be able to immediately restart from within throwException. - if (isBadSuspenseFallback(current, newProps)) { - renderDidSuspendDelayIfPossible(); - } else { - renderDidSuspend(); - } - } + _offscreenFiber2.flags |= Visibility; } } @@ -20986,16 +21022,11 @@ function handleThrow(root, thrownValue) { } function shouldAttemptToSuspendUntilDataResolves() { - // TODO: We should be able to move the - // renderDidSuspend/renderDidSuspendDelayIfPossible logic into this function, - // instead of repeating it in the complete phase. Or something to that effect. - if (includesOnlyRetries(workInProgressRootRenderLanes)) { - // We can always wait during a retry. - return true; - } // Check if there are other pending updates that might possibly unblock this + // Check if there are other pending updates that might possibly unblock this // component from suspending. This mirrors the check in // renderDidSuspendDelayIfPossible. We should attempt to unify them somehow. - + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. if ( includesNonIdleWork(workInProgressRootSkippedLanes) || includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes) @@ -21007,28 +21038,22 @@ function shouldAttemptToSuspendUntilDataResolves() { // finishConcurrentRender, and rely just on this one. if (includesOnlyTransitions(workInProgressRootRenderLanes)) { - var suspenseHandler = getSuspenseHandler(); + // If we're rendering inside the "shell" of the app, it's better to suspend + // rendering and wait for the data to resolve. Otherwise, we should switch + // to a fallback and continue rendering. + return getShellBoundary() === null; + } - if (suspenseHandler !== null && suspenseHandler.tag === SuspenseComponent) { - var currentSuspenseHandler = suspenseHandler.alternate; - var nextProps = suspenseHandler.memoizedProps; + var handler = getSuspenseHandler(); - if (isBadSuspenseFallback(currentSuspenseHandler, nextProps)) { - // The nearest Suspense boundary is already showing content. We should - // avoid replacing it with a fallback, and instead wait until the - // data finishes loading. - return true; - } else { - // This is not a bad fallback condition. We should show a fallback - // immediately instead of waiting for the data to resolve. This includes - // when suspending inside new trees. - return false; - } - } // During a transition, if there is no Suspense boundary (i.e. suspending in - // the "shell" of an application), or if we're inside a hidden tree, then - // we should wait until the data finishes loading. - - return true; + if (handler === null); + else { + if (includesOnlyRetries(workInProgressRootRenderLanes)) { + // During a retry, we can suspend rendering if the nearest Suspense boundary + // is the boundary of the "shell", because we're guaranteed not to block + // any new content from appearing. + return handler === getShellBoundary(); + } } // For all other Lanes besides Transitions and Retries, we should not wait // for the data to load. // TODO: We should wait during Offscreen prerendering, too. @@ -21098,6 +21123,8 @@ function renderDidSuspendDelayIfPossible() { // (inside this function), since by suspending at the end of the render // phase introduces a potential mistake where we suspend lanes that were // pinged or updated while we were rendering. + // TODO: Consider unwinding immediately, using the + // SuspendedOnHydration mechanism. markRootSuspended$1(workInProgressRoot, workInProgressRootRenderLanes); } } @@ -21251,6 +21278,10 @@ function renderRootConcurrent(root, lanes) { break; } // The work loop is suspended on data. We should wait for it to // resolve before continuing to render. + // TODO: Handle the case where the promise resolves synchronously. + // Usually this is handled when we instrument the promise to add a + // `status` field, but if the promise already has a status, we won't + // have added a listener until right here. var onResolution = function() { ensureRootIsScheduled(root, now()); @@ -23859,7 +23890,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-48274a43a-20230104"; +var ReactVersion = "18.3.0-www-modern-c2d655207-20230104"; var didWarnAboutNestedUpdates;