From 806f024380b6a9e1e0ec2f1e16f4a4e88f0c5310 Mon Sep 17 00:00:00 2001 From: sammy-SC Date: Mon, 12 Dec 2022 14:07:29 +0000 Subject: [PATCH] Offscreen add attach (#25603) `Offscreen.attach` is imperative API to signal to Offscreen that its updates should be high priority and effects should be mounted. Coupled with `Offscreen.detach` it gives ability to manually control Offscreen. Unlike with mode `visible` and `hidden`, it is developers job to make sure contents of Offscreen are not visible to users. `Offscreen.attach` only works if mode is `manual`. Example uses: ```jsx let offscreenRef = useRef(null); // ------ // Offscreen is attached by default. // For example user scrolls away and Offscreen subtree is not visible anymore. offscreenRef.current.detach(); // User scrolls back and Offscreen subtree is visible again. offscreenRef.current.attach(); ``` Co-authored-by: Andrew Clark DiffTrain build for [996e4c0d56dabab382ca932cd5b8517e63020999](https://github.com/facebook/react/commit/996e4c0d56dabab382ca932cd5b8517e63020999) [View git log for this commit](https://github.com/facebook/react/commits/996e4c0d56dabab382ca932cd5b8517e63020999) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/REVISION_TRANSFORMS | 2 +- compiled/facebook-www/React-dev.classic.js | 2 +- compiled/facebook-www/React-dev.modern.js | 2 +- compiled/facebook-www/React-prod.classic.js | 2 +- compiled/facebook-www/React-prod.modern.js | 2 +- .../facebook-www/React-profiling.classic.js | 2 +- .../facebook-www/React-profiling.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 82 ++++--- compiled/facebook-www/ReactART-dev.modern.js | 82 ++++--- .../facebook-www/ReactART-prod.classic.js | 195 ++++++++------- compiled/facebook-www/ReactART-prod.modern.js | 195 ++++++++------- compiled/facebook-www/ReactDOM-dev.classic.js | 75 ++++-- compiled/facebook-www/ReactDOM-dev.modern.js | 75 ++++-- .../facebook-www/ReactDOM-prod.classic.js | 202 +++++++++------- compiled/facebook-www/ReactDOM-prod.modern.js | 202 +++++++++------- .../ReactDOM-profiling.classic.js | 199 ++++++++------- .../facebook-www/ReactDOM-profiling.modern.js | 199 ++++++++------- .../ReactDOMForked-dev.classic.js | 75 ++++-- .../facebook-www/ReactDOMForked-dev.modern.js | 75 ++++-- .../ReactDOMForked-prod.classic.js | 202 +++++++++------- .../ReactDOMForked-prod.modern.js | 202 +++++++++------- .../ReactDOMForked-profiling.classic.js | 199 ++++++++------- .../ReactDOMForked-profiling.modern.js | 199 ++++++++------- .../ReactDOMServer-dev.classic.js | 2 +- .../facebook-www/ReactDOMServer-dev.modern.js | 2 +- .../ReactDOMServer-prod.classic.js | 2 +- .../ReactDOMServer-prod.modern.js | 2 +- .../ReactDOMTesting-dev.classic.js | 76 ++++-- .../ReactDOMTesting-dev.modern.js | 76 ++++-- .../ReactDOMTesting-prod.classic.js | 228 +++++++++--------- .../ReactDOMTesting-prod.modern.js | 228 +++++++++--------- .../ReactTestRenderer-dev.classic.js | 80 +++--- .../ReactTestRenderer-dev.modern.js | 80 +++--- 34 files changed, 1880 insertions(+), 1370 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index 9d90147480f2c..40a68e4f05322 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -b14d7fa4b88dad5f0017d084e462952c700aa2ad +996e4c0d56dabab382ca932cd5b8517e63020999 diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS index 9d90147480f2c..40a68e4f05322 100644 --- a/compiled/facebook-www/REVISION_TRANSFORMS +++ b/compiled/facebook-www/REVISION_TRANSFORMS @@ -1 +1 @@ -b14d7fa4b88dad5f0017d084e462952c700aa2ad +996e4c0d56dabab382ca932cd5b8517e63020999 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 47597dec3f8e1..edd3cc7ee5a0f 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-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; // 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 2f9efd97a7afb..e8f4c8186123a 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-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; // 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 c1564f6f19c2b..a6b85c03d3787 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-b14d7fa4b-20221209"; +exports.version = "18.3.0-www-classic-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index 9635fdd0e44a6..15cd5e85220cd 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-b14d7fa4b-20221209"; +exports.version = "18.3.0-www-modern-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index 5ae57c3205fda..ff9c18959462b 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-b14d7fa4b-20221209"; +exports.version = "18.3.0-www-classic-996e4c0d5-20221212"; /* 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 84d0007bacf9c..136e16a1fee0c 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-b14d7fa4b-20221209"; +exports.version = "18.3.0-www-modern-996e4c0d5-20221212"; /* 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 84b127952033c..ea8aec39d5c2b 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-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -2530,17 +2530,6 @@ function shim$1() { var prepareScopeUpdate = shim$1; var getInstanceFromScope = shim$1; -// Renderers that don't support microtasks -// can re-export everything from this module. -function shim$2() { - throw new Error( - "The current renderer does not support microtasks. " + - "This error is likely caused by a bug in React. " + - "Please file an issue." - ); -} // Test selectors (when unsupported) -var scheduleMicrotask = shim$2; - var pooledTransform = new Transform(); var NO_CONTEXT = {}; var UPDATE_SIGNAL = {}; @@ -13106,13 +13095,15 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); if ( nextProps.mode === "hidden" || - nextProps.mode === "unstable-defer-without-hiding" || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached + nextProps.mode === "unstable-defer-without-hiding" || + nextIsDetached ) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -20800,22 +20791,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -21170,14 +21185,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -27211,12 +27231,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -27230,12 +27254,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { var instance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; fiber.stateNode = instance; diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 80f060d7b61a8..8a78a32e3e079 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-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -2527,17 +2527,6 @@ function shim$1() { var prepareScopeUpdate = shim$1; var getInstanceFromScope = shim$1; -// Renderers that don't support microtasks -// can re-export everything from this module. -function shim$2() { - throw new Error( - "The current renderer does not support microtasks. " + - "This error is likely caused by a bug in React. " + - "Please file an issue." - ); -} // Test selectors (when unsupported) -var scheduleMicrotask = shim$2; - var pooledTransform = new Transform(); var NO_CONTEXT = {}; var UPDATE_SIGNAL = {}; @@ -12834,13 +12823,15 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); if ( nextProps.mode === "hidden" || - nextProps.mode === "unstable-defer-without-hiding" || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached + nextProps.mode === "unstable-defer-without-hiding" || + nextIsDetached ) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -20489,22 +20480,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -20859,14 +20874,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -26900,12 +26920,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -26919,12 +26943,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { var instance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; fiber.stateNode = instance; diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index a02894888ed42..536e3ac6b57dc 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -3713,12 +3713,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -3766,14 +3767,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -6518,12 +6519,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - if (0 !== (executionContext & 6)) throw Error(formatProdErrorMessage(386)); - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -6699,11 +6712,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; } else recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + root = finishedWork.stateNode; + root._current = finishedWork; + root._visibility &= -3; + root._visibility |= root._pendingVisibility & 2; if ( flags & 8192 && - ((root = finishedWork.stateNode), - (root._visibility = suspenseCallback + ((root._visibility = suspenseCallback ? root._visibility & -2 : root._visibility | 1), suspenseCallback && @@ -6836,49 +6851,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -7452,25 +7469,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -9519,12 +9536,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -9536,12 +9557,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -9777,19 +9802,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1168 = { + devToolsConfig$jscomp$inline_1165 = { findFiberByHostInstance: function() { return null; }, bundleType: 0, - version: "18.3.0-www-classic-b14d7fa4b-20221209", + version: "18.3.0-www-classic-996e4c0d5-20221212", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1336 = { - bundleType: devToolsConfig$jscomp$inline_1168.bundleType, - version: devToolsConfig$jscomp$inline_1168.version, - rendererPackageName: devToolsConfig$jscomp$inline_1168.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1168.rendererConfig, +var internals$jscomp$inline_1338 = { + bundleType: devToolsConfig$jscomp$inline_1165.bundleType, + version: devToolsConfig$jscomp$inline_1165.version, + rendererPackageName: devToolsConfig$jscomp$inline_1165.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1165.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9806,26 +9831,26 @@ var internals$jscomp$inline_1336 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1168.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1165.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1337 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1339 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1337.isDisabled && - hook$jscomp$inline_1337.supportsFiber + !hook$jscomp$inline_1339.isDisabled && + hook$jscomp$inline_1339.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1337.inject( - internals$jscomp$inline_1336 + (rendererID = hook$jscomp$inline_1339.inject( + internals$jscomp$inline_1338 )), - (injectedHook = hook$jscomp$inline_1337); + (injectedHook = hook$jscomp$inline_1339); } 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 c57e67b6ffa60..4f4924a85c820 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -3506,12 +3506,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -3559,14 +3560,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -6252,12 +6253,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - if (0 !== (executionContext & 6)) throw Error(formatProdErrorMessage(386)); - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -6433,11 +6446,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; } else recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + root = finishedWork.stateNode; + root._current = finishedWork; + root._visibility &= -3; + root._visibility |= root._pendingVisibility & 2; if ( flags & 8192 && - ((root = finishedWork.stateNode), - (root._visibility = suspenseCallback + ((root._visibility = suspenseCallback ? root._visibility & -2 : root._visibility | 1), suspenseCallback && @@ -6570,49 +6585,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -7186,25 +7203,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -9226,12 +9243,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -9243,12 +9264,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -9444,19 +9469,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1157 = { + devToolsConfig$jscomp$inline_1154 = { findFiberByHostInstance: function() { return null; }, bundleType: 0, - version: "18.3.0-www-modern-b14d7fa4b-20221209", + version: "18.3.0-www-modern-996e4c0d5-20221212", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1327 = { - bundleType: devToolsConfig$jscomp$inline_1157.bundleType, - version: devToolsConfig$jscomp$inline_1157.version, - rendererPackageName: devToolsConfig$jscomp$inline_1157.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1157.rendererConfig, +var internals$jscomp$inline_1329 = { + bundleType: devToolsConfig$jscomp$inline_1154.bundleType, + version: devToolsConfig$jscomp$inline_1154.version, + rendererPackageName: devToolsConfig$jscomp$inline_1154.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1154.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9473,26 +9498,26 @@ var internals$jscomp$inline_1327 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1157.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1154.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1328 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1330 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1328.isDisabled && - hook$jscomp$inline_1328.supportsFiber + !hook$jscomp$inline_1330.isDisabled && + hook$jscomp$inline_1330.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1328.inject( - internals$jscomp$inline_1327 + (rendererID = hook$jscomp$inline_1330.inject( + internals$jscomp$inline_1329 )), - (injectedHook = hook$jscomp$inline_1328); + (injectedHook = hook$jscomp$inline_1330); } 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 a0f31c56b3714..08fa3d1d6cfb7 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -27444,13 +27444,15 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); if ( nextProps.mode === "hidden" || - nextProps.mode === "unstable-defer-without-hiding" || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached + nextProps.mode === "unstable-defer-without-hiding" || + nextIsDetached ) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -35588,26 +35590,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(function() { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -36030,14 +36052,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -42254,12 +42281,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -42273,12 +42304,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { var instance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; fiber.stateNode = instance; @@ -42530,7 +42565,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 3986c6a3f5463..b189199ac737b 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -27207,13 +27207,15 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); if ( nextProps.mode === "hidden" || - nextProps.mode === "unstable-defer-without-hiding" || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached + nextProps.mode === "unstable-defer-without-hiding" || + nextIsDetached ) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -35312,26 +35314,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(function() { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -35754,14 +35776,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -41978,12 +42005,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -41997,12 +42028,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { var instance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; fiber.stateNode = instance; @@ -42254,7 +42289,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 8cf94b22f3d9c..1efaa879ddd2c 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -8391,12 +8391,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8444,14 +8445,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -11663,17 +11664,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -11958,11 +11966,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -12126,49 +12136,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -12750,25 +12762,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -15000,12 +15012,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -15017,12 +15033,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -15534,17 +15554,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1773 = { +var devToolsConfig$jscomp$inline_1770 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-b14d7fa4b-20221209", + version: "18.3.0-www-classic-996e4c0d5-20221212", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2154 = { - bundleType: devToolsConfig$jscomp$inline_1773.bundleType, - version: devToolsConfig$jscomp$inline_1773.version, - rendererPackageName: devToolsConfig$jscomp$inline_1773.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1773.rendererConfig, +var internals$jscomp$inline_2157 = { + bundleType: devToolsConfig$jscomp$inline_1770.bundleType, + version: devToolsConfig$jscomp$inline_1770.version, + rendererPackageName: devToolsConfig$jscomp$inline_1770.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1770.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15560,26 +15580,26 @@ var internals$jscomp$inline_2154 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1773.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1770.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2158 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2155.isDisabled && - hook$jscomp$inline_2155.supportsFiber + !hook$jscomp$inline_2158.isDisabled && + hook$jscomp$inline_2158.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2155.inject( - internals$jscomp$inline_2154 + (rendererID = hook$jscomp$inline_2158.inject( + internals$jscomp$inline_2157 )), - (injectedHook = hook$jscomp$inline_2155); + (injectedHook = hook$jscomp$inline_2158); } catch (err) {} } assign(Internals, { @@ -15809,4 +15829,4 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index eaff0f678b66e..95a2d95e64af6 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -8228,12 +8228,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8281,14 +8282,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -11441,17 +11442,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -11736,11 +11744,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -11904,49 +11914,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -12528,25 +12540,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -14753,12 +14765,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -14770,12 +14786,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -15095,17 +15115,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1741 = { +var devToolsConfig$jscomp$inline_1738 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b14d7fa4b-20221209", + version: "18.3.0-www-modern-996e4c0d5-20221212", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2129 = { - bundleType: devToolsConfig$jscomp$inline_1741.bundleType, - version: devToolsConfig$jscomp$inline_1741.version, - rendererPackageName: devToolsConfig$jscomp$inline_1741.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1741.rendererConfig, +var internals$jscomp$inline_2132 = { + bundleType: devToolsConfig$jscomp$inline_1738.bundleType, + version: devToolsConfig$jscomp$inline_1738.version, + rendererPackageName: devToolsConfig$jscomp$inline_1738.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1738.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15122,26 +15142,26 @@ var internals$jscomp$inline_2129 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1741.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1738.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2130 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2133 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2130.isDisabled && - hook$jscomp$inline_2130.supportsFiber + !hook$jscomp$inline_2133.isDisabled && + hook$jscomp$inline_2133.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2130.inject( - internals$jscomp$inline_2129 + (rendererID = hook$jscomp$inline_2133.inject( + internals$jscomp$inline_2132 )), - (injectedHook = hook$jscomp$inline_2130); + (injectedHook = hook$jscomp$inline_2133); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -15317,4 +15337,4 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 0538c317b0f56..d6fec4b6ea9b2 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -8611,12 +8611,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8664,14 +8665,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -12183,17 +12184,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -12507,11 +12515,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -12681,54 +12691,55 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - if (shouldProfile(finishedWork)) - try { - startLayoutEffectTimer(), - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - } finally { - recordLayoutEffectDuration(finishedWork); - } - else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - callComponentWillUnmountWithTimer(finishedWork, instance); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + if (shouldProfile(finishedWork)) + try { + startLayoutEffectTimer(), + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + } finally { + recordLayoutEffectDuration(finishedWork); + } + else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + callComponentWillUnmountWithTimer(current, instance); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -13341,25 +13352,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookPassiveUnmountEffects(finishedWork, finishedWork.return, 8); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookPassiveUnmountEffects(deletions, deletions.return, 8); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -15761,12 +15772,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -15778,12 +15793,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -16305,10 +16324,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1847 = { +var devToolsConfig$jscomp$inline_1844 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-b14d7fa4b-20221209", + version: "18.3.0-www-classic-996e4c0d5-20221212", rendererPackageName: "react-dom" }; (function(internals) { @@ -16326,10 +16345,10 @@ var devToolsConfig$jscomp$inline_1847 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1847.bundleType, - version: devToolsConfig$jscomp$inline_1847.version, - rendererPackageName: devToolsConfig$jscomp$inline_1847.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1847.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1844.bundleType, + version: devToolsConfig$jscomp$inline_1844.version, + rendererPackageName: devToolsConfig$jscomp$inline_1844.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1844.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16345,14 +16364,14 @@ var devToolsConfig$jscomp$inline_1847 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1847.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1844.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -16581,7 +16600,7 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; /* 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 ad8107a71922f..ba08b083d0ebd 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -8444,12 +8444,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8497,14 +8498,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -11951,17 +11952,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -12275,11 +12283,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -12449,54 +12459,55 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - if (shouldProfile(finishedWork)) - try { - startLayoutEffectTimer(), - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - } finally { - recordLayoutEffectDuration(finishedWork); - } - else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - callComponentWillUnmountWithTimer(finishedWork, instance); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + if (shouldProfile(finishedWork)) + try { + startLayoutEffectTimer(), + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + } finally { + recordLayoutEffectDuration(finishedWork); + } + else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + callComponentWillUnmountWithTimer(current, instance); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -13109,25 +13120,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookPassiveUnmountEffects(finishedWork, finishedWork.return, 8); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookPassiveUnmountEffects(deletions, deletions.return, 8); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -15504,12 +15515,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -15521,12 +15536,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -15856,10 +15875,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1815 = { +var devToolsConfig$jscomp$inline_1812 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b14d7fa4b-20221209", + version: "18.3.0-www-modern-996e4c0d5-20221212", rendererPackageName: "react-dom" }; (function(internals) { @@ -15877,10 +15896,10 @@ var devToolsConfig$jscomp$inline_1815 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1815.bundleType, - version: devToolsConfig$jscomp$inline_1815.version, - rendererPackageName: devToolsConfig$jscomp$inline_1815.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1815.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1812.bundleType, + version: devToolsConfig$jscomp$inline_1812.version, + rendererPackageName: devToolsConfig$jscomp$inline_1812.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1812.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15897,14 +15916,14 @@ var devToolsConfig$jscomp$inline_1815 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1815.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1812.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function(children, container) { @@ -16079,7 +16098,7 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMForked-dev.classic.js b/compiled/facebook-www/ReactDOMForked-dev.classic.js index a0f31c56b3714..08fa3d1d6cfb7 100644 --- a/compiled/facebook-www/ReactDOMForked-dev.classic.js +++ b/compiled/facebook-www/ReactDOMForked-dev.classic.js @@ -27444,13 +27444,15 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); if ( nextProps.mode === "hidden" || - nextProps.mode === "unstable-defer-without-hiding" || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached + nextProps.mode === "unstable-defer-without-hiding" || + nextIsDetached ) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -35588,26 +35590,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(function() { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -36030,14 +36052,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -42254,12 +42281,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -42273,12 +42304,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { var instance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; fiber.stateNode = instance; @@ -42530,7 +42565,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOMForked-dev.modern.js b/compiled/facebook-www/ReactDOMForked-dev.modern.js index 3986c6a3f5463..b189199ac737b 100644 --- a/compiled/facebook-www/ReactDOMForked-dev.modern.js +++ b/compiled/facebook-www/ReactDOMForked-dev.modern.js @@ -27207,13 +27207,15 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); if ( nextProps.mode === "hidden" || - nextProps.mode === "unstable-defer-without-hiding" || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached + nextProps.mode === "unstable-defer-without-hiding" || + nextIsDetached ) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -35312,26 +35314,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(function() { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -35754,14 +35776,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -41978,12 +42005,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -41997,12 +42028,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { var instance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; fiber.stateNode = instance; @@ -42254,7 +42289,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOMForked-prod.classic.js b/compiled/facebook-www/ReactDOMForked-prod.classic.js index 8cf94b22f3d9c..1efaa879ddd2c 100644 --- a/compiled/facebook-www/ReactDOMForked-prod.classic.js +++ b/compiled/facebook-www/ReactDOMForked-prod.classic.js @@ -8391,12 +8391,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8444,14 +8445,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -11663,17 +11664,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -11958,11 +11966,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -12126,49 +12136,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -12750,25 +12762,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -15000,12 +15012,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -15017,12 +15033,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -15534,17 +15554,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1773 = { +var devToolsConfig$jscomp$inline_1770 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-b14d7fa4b-20221209", + version: "18.3.0-www-classic-996e4c0d5-20221212", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2154 = { - bundleType: devToolsConfig$jscomp$inline_1773.bundleType, - version: devToolsConfig$jscomp$inline_1773.version, - rendererPackageName: devToolsConfig$jscomp$inline_1773.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1773.rendererConfig, +var internals$jscomp$inline_2157 = { + bundleType: devToolsConfig$jscomp$inline_1770.bundleType, + version: devToolsConfig$jscomp$inline_1770.version, + rendererPackageName: devToolsConfig$jscomp$inline_1770.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1770.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15560,26 +15580,26 @@ var internals$jscomp$inline_2154 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1773.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1770.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2158 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2155.isDisabled && - hook$jscomp$inline_2155.supportsFiber + !hook$jscomp$inline_2158.isDisabled && + hook$jscomp$inline_2158.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2155.inject( - internals$jscomp$inline_2154 + (rendererID = hook$jscomp$inline_2158.inject( + internals$jscomp$inline_2157 )), - (injectedHook = hook$jscomp$inline_2155); + (injectedHook = hook$jscomp$inline_2158); } catch (err) {} } assign(Internals, { @@ -15809,4 +15829,4 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOMForked-prod.modern.js b/compiled/facebook-www/ReactDOMForked-prod.modern.js index eaff0f678b66e..95a2d95e64af6 100644 --- a/compiled/facebook-www/ReactDOMForked-prod.modern.js +++ b/compiled/facebook-www/ReactDOMForked-prod.modern.js @@ -8228,12 +8228,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8281,14 +8282,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -11441,17 +11442,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -11736,11 +11744,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -11904,49 +11914,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -12528,25 +12540,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -14753,12 +14765,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -14770,12 +14786,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -15095,17 +15115,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1741 = { +var devToolsConfig$jscomp$inline_1738 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b14d7fa4b-20221209", + version: "18.3.0-www-modern-996e4c0d5-20221212", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2129 = { - bundleType: devToolsConfig$jscomp$inline_1741.bundleType, - version: devToolsConfig$jscomp$inline_1741.version, - rendererPackageName: devToolsConfig$jscomp$inline_1741.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1741.rendererConfig, +var internals$jscomp$inline_2132 = { + bundleType: devToolsConfig$jscomp$inline_1738.bundleType, + version: devToolsConfig$jscomp$inline_1738.version, + rendererPackageName: devToolsConfig$jscomp$inline_1738.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1738.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15122,26 +15142,26 @@ var internals$jscomp$inline_2129 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1741.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1738.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2130 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2133 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2130.isDisabled && - hook$jscomp$inline_2130.supportsFiber + !hook$jscomp$inline_2133.isDisabled && + hook$jscomp$inline_2133.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2130.inject( - internals$jscomp$inline_2129 + (rendererID = hook$jscomp$inline_2133.inject( + internals$jscomp$inline_2132 )), - (injectedHook = hook$jscomp$inline_2130); + (injectedHook = hook$jscomp$inline_2133); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -15317,4 +15337,4 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOMForked-profiling.classic.js b/compiled/facebook-www/ReactDOMForked-profiling.classic.js index 0538c317b0f56..d6fec4b6ea9b2 100644 --- a/compiled/facebook-www/ReactDOMForked-profiling.classic.js +++ b/compiled/facebook-www/ReactDOMForked-profiling.classic.js @@ -8611,12 +8611,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8664,14 +8665,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -12183,17 +12184,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -12507,11 +12515,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -12681,54 +12691,55 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - if (shouldProfile(finishedWork)) - try { - startLayoutEffectTimer(), - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - } finally { - recordLayoutEffectDuration(finishedWork); - } - else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - callComponentWillUnmountWithTimer(finishedWork, instance); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + if (shouldProfile(finishedWork)) + try { + startLayoutEffectTimer(), + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + } finally { + recordLayoutEffectDuration(finishedWork); + } + else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + callComponentWillUnmountWithTimer(current, instance); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -13341,25 +13352,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookPassiveUnmountEffects(finishedWork, finishedWork.return, 8); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookPassiveUnmountEffects(deletions, deletions.return, 8); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -15761,12 +15772,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -15778,12 +15793,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -16305,10 +16324,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1847 = { +var devToolsConfig$jscomp$inline_1844 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-b14d7fa4b-20221209", + version: "18.3.0-www-classic-996e4c0d5-20221212", rendererPackageName: "react-dom" }; (function(internals) { @@ -16326,10 +16345,10 @@ var devToolsConfig$jscomp$inline_1847 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1847.bundleType, - version: devToolsConfig$jscomp$inline_1847.version, - rendererPackageName: devToolsConfig$jscomp$inline_1847.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1847.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1844.bundleType, + version: devToolsConfig$jscomp$inline_1844.version, + rendererPackageName: devToolsConfig$jscomp$inline_1844.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1844.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16345,14 +16364,14 @@ var devToolsConfig$jscomp$inline_1847 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1847.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1844.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -16581,7 +16600,7 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMForked-profiling.modern.js b/compiled/facebook-www/ReactDOMForked-profiling.modern.js index ad8107a71922f..ba08b083d0ebd 100644 --- a/compiled/facebook-www/ReactDOMForked-profiling.modern.js +++ b/compiled/facebook-www/ReactDOMForked-profiling.modern.js @@ -8444,12 +8444,13 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); if ( "hidden" === nextProps.mode || "unstable-defer-without-hiding" === nextProps.mode || - workInProgress.stateNode._visibility & 2 + nextIsDetached ) { if (0 !== (workInProgress.flags & 128)) { nextChildren = @@ -8497,14 +8498,14 @@ function updateOffscreenComponent(current, workInProgress, renderLanes) { ); } else if (null !== prevState) { nextProps = prevState.cachePool; - var transitions = null; + nextIsDetached = null; if (enableTransitionTracing) { var instance = workInProgress.stateNode; null !== instance && null != instance._transitions && - (transitions = Array.from(instance._transitions)); + (nextIsDetached = Array.from(instance._transitions)); } - pushTransition(workInProgress, nextProps, transitions); + pushTransition(workInProgress, nextProps, nextIsDetached); pushHiddenContext(workInProgress, prevState); reuseSuspenseHandlerOnStack(); workInProgress.memoizedState = null; @@ -11951,17 +11952,24 @@ function getRetryCache(finishedWork) { } } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (instance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((instance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); @@ -12275,11 +12283,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -12449,54 +12459,55 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - if (shouldProfile(finishedWork)) - try { - startLayoutEffectTimer(), - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - } finally { - recordLayoutEffectDuration(finishedWork); - } - else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - callComponentWillUnmountWithTimer(finishedWork, instance); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + if (shouldProfile(finishedWork)) + try { + startLayoutEffectTimer(), + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + } finally { + recordLayoutEffectDuration(finishedWork); + } + else commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + callComponentWillUnmountWithTimer(current, instance); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -13109,25 +13120,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookPassiveUnmountEffects(finishedWork, finishedWork.return, 8); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookPassiveUnmountEffects(deletions, deletions.return, 8); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -15504,12 +15515,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; pendingProps.stateNode = primaryChildInstance; @@ -15521,12 +15536,16 @@ function createFiberFromLegacyHidden(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var instance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _transitions: null, _retryCache: null, _current: null, detach: function() { return detachOffscreenInstance(instance); + }, + attach: function() { + return attachOffscreenInstance(instance); } }; pendingProps.stateNode = instance; @@ -15856,10 +15875,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1815 = { +var devToolsConfig$jscomp$inline_1812 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b14d7fa4b-20221209", + version: "18.3.0-www-modern-996e4c0d5-20221212", rendererPackageName: "react-dom" }; (function(internals) { @@ -15877,10 +15896,10 @@ var devToolsConfig$jscomp$inline_1815 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1815.bundleType, - version: devToolsConfig$jscomp$inline_1815.version, - rendererPackageName: devToolsConfig$jscomp$inline_1815.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1815.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1812.bundleType, + version: devToolsConfig$jscomp$inline_1812.version, + rendererPackageName: devToolsConfig$jscomp$inline_1812.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1812.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15897,14 +15916,14 @@ var devToolsConfig$jscomp$inline_1815 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1815.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1812.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function(children, container) { @@ -16079,7 +16098,7 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; /* 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 a51ffd9961c14..f2d796fd17dcd 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -18,7 +18,7 @@ if (__DEV__) { var React = require("react"); -var ReactVersion = "18.3.0-www-classic-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; // 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 a4aee0a798a77..924b52eeb1eb2 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -18,7 +18,7 @@ if (__DEV__) { var React = require("react"); -var ReactVersion = "18.3.0-www-modern-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; // 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 902fa265f720a..5dba8238bdee4 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -3632,4 +3632,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-b14d7fa4b-20221209"; +exports.version = "18.3.0-www-classic-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js index 17eb1b3eed523..87de2dad055c1 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js @@ -3545,4 +3545,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-b14d7fa4b-20221209"; +exports.version = "18.3.0-www-modern-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index f977ccd736d63..cdfe7f75e7aa9 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -25760,14 +25760,12 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); - if ( - nextProps.mode === "hidden" || - enableLegacyHidden || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached - ) { + if (nextProps.mode === "hidden" || enableLegacyHidden || nextIsDetached) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -32527,26 +32525,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(function() { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -32939,14 +32957,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -35845,9 +35868,6 @@ function flushRoot(root, lanes) { } } } -function getExecutionContext() { - return executionContext; -} function batchedUpdates$1(fn, a) { var prevExecutionContext = executionContext; executionContext |= BatchedContext; @@ -38640,12 +38660,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -38807,7 +38831,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 01160118b5f66..29a4b2af6897b 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -25361,14 +25361,12 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); - if ( - nextProps.mode === "hidden" || - enableLegacyHidden || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached - ) { + if (nextProps.mode === "hidden" || enableLegacyHidden || nextIsDetached) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -32089,26 +32087,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(function() { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -32501,14 +32519,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -35407,9 +35430,6 @@ function flushRoot(root, lanes) { } } } -function getExecutionContext() { - return executionContext; -} function batchedUpdates$1(fn, a) { var prevExecutionContext = executionContext; executionContext |= BatchedContext; @@ -38202,12 +38222,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -38369,7 +38393,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; function createPortal( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index c154ba4e67dfa..eabcd00ee4d99 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -3608,14 +3608,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$248; if (canUseDOM) { - var isSupported$jscomp$inline_504 = "oninput" in document; - if (!isSupported$jscomp$inline_504) { - var element$jscomp$inline_505 = document.createElement("div"); - element$jscomp$inline_505.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_504 = - "function" === typeof element$jscomp$inline_505.oninput; + var isSupported$jscomp$inline_506 = "oninput" in document; + if (!isSupported$jscomp$inline_506) { + var element$jscomp$inline_507 = document.createElement("div"); + element$jscomp$inline_507.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_506 = + "function" === typeof element$jscomp$inline_507.oninput; } - JSCompiler_inline_result$jscomp$248 = isSupported$jscomp$inline_504; + JSCompiler_inline_result$jscomp$248 = isSupported$jscomp$inline_506; } else JSCompiler_inline_result$jscomp$248 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$248 && @@ -3781,19 +3781,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_517 = 0; - i$jscomp$inline_517 < simpleEventPluginEvents.length; - i$jscomp$inline_517++ + var i$jscomp$inline_519 = 0; + i$jscomp$inline_519 < simpleEventPluginEvents.length; + i$jscomp$inline_519++ ) { - var eventName$jscomp$inline_518 = - simpleEventPluginEvents[i$jscomp$inline_517], - domEventName$jscomp$inline_519 = eventName$jscomp$inline_518.toLowerCase(), - capitalizedEvent$jscomp$inline_520 = - eventName$jscomp$inline_518[0].toUpperCase() + - eventName$jscomp$inline_518.slice(1); + var eventName$jscomp$inline_520 = + simpleEventPluginEvents[i$jscomp$inline_519], + domEventName$jscomp$inline_521 = eventName$jscomp$inline_520.toLowerCase(), + capitalizedEvent$jscomp$inline_522 = + eventName$jscomp$inline_520[0].toUpperCase() + + eventName$jscomp$inline_520.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_519, - "on" + capitalizedEvent$jscomp$inline_520 + domEventName$jscomp$inline_521, + "on" + capitalizedEvent$jscomp$inline_522 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -8052,9 +8052,10 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); - if ("hidden" === nextProps.mode || workInProgress.stateNode._visibility & 2) { + if ("hidden" === nextProps.mode || nextIsDetached) { if (0 !== (workInProgress.flags & 128)) { renderLanes = null !== prevState ? prevState.baseLanes | renderLanes : renderLanes; @@ -10841,19 +10842,6 @@ function getRetryCache(finishedWork) { throw Error(formatProdErrorMessage(435, finishedWork.tag)); } } -function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); -} function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); wakeables.forEach(function(wakeable) { @@ -11137,11 +11125,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -11305,49 +11295,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -11782,25 +11774,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -13956,12 +13948,30 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { - return detachOffscreenInstance(primaryChildInstance); + var fiber = primaryChildInstance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (primaryChildInstance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((primaryChildInstance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } + }, + attach: function() { + var fiber = primaryChildInstance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (primaryChildInstance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((primaryChildInstance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } }; pendingProps.stateNode = primaryChildInstance; @@ -14442,17 +14452,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1699 = { +var devToolsConfig$jscomp$inline_1706 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-b14d7fa4b-20221209", + version: "18.3.0-www-classic-996e4c0d5-20221212", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2091 = { - bundleType: devToolsConfig$jscomp$inline_1699.bundleType, - version: devToolsConfig$jscomp$inline_1699.version, - rendererPackageName: devToolsConfig$jscomp$inline_1699.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1699.rendererConfig, +var internals$jscomp$inline_2104 = { + bundleType: devToolsConfig$jscomp$inline_1706.bundleType, + version: devToolsConfig$jscomp$inline_1706.version, + rendererPackageName: devToolsConfig$jscomp$inline_1706.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1706.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -14468,26 +14478,26 @@ var internals$jscomp$inline_2091 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1699.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1706.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2092 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2105 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2092.isDisabled && - hook$jscomp$inline_2092.supportsFiber + !hook$jscomp$inline_2105.isDisabled && + hook$jscomp$inline_2105.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2092.inject( - internals$jscomp$inline_2091 + (rendererID = hook$jscomp$inline_2105.inject( + internals$jscomp$inline_2104 )), - (injectedHook = hook$jscomp$inline_2092); + (injectedHook = hook$jscomp$inline_2105); } catch (err) {} } assign(Internals, { @@ -14852,4 +14862,4 @@ exports.unstable_renderSubtreeIntoContainer = function( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index dd05c7c781969..12d4fd9c55db7 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -2547,14 +2547,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$224; if (canUseDOM) { - 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; + 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; } - JSCompiler_inline_result$jscomp$224 = isSupported$jscomp$inline_376; + JSCompiler_inline_result$jscomp$224 = isSupported$jscomp$inline_378; } else JSCompiler_inline_result$jscomp$224 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$224 && @@ -2891,19 +2891,19 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_417 = 0; - i$jscomp$inline_417 < simpleEventPluginEvents.length; - i$jscomp$inline_417++ + var i$jscomp$inline_419 = 0; + i$jscomp$inline_419 < simpleEventPluginEvents.length; + i$jscomp$inline_419++ ) { - 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); + 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); registerSimpleEvent( - domEventName$jscomp$inline_419, - "on" + capitalizedEvent$jscomp$inline_420 + domEventName$jscomp$inline_421, + "on" + capitalizedEvent$jscomp$inline_422 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -7844,9 +7844,10 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps, nextChildren = nextProps.children, + nextIsDetached = 0 !== (workInProgress.stateNode._pendingVisibility & 2), prevState = null !== current ? current.memoizedState : null; markRef(current, workInProgress); - if ("hidden" === nextProps.mode || workInProgress.stateNode._visibility & 2) { + if ("hidden" === nextProps.mode || nextIsDetached) { if (0 !== (workInProgress.flags & 128)) { renderLanes = null !== prevState ? prevState.baseLanes | renderLanes : renderLanes; @@ -10574,19 +10575,6 @@ function getRetryCache(finishedWork) { throw Error(formatProdErrorMessage(435, finishedWork.tag)); } } -function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; - if (null === currentOffscreenFiber) throw Error(formatProdErrorMessage(456)); - 0 !== (executionContext & 6) - ? scheduleMicrotask(function() { - instance._visibility |= 2; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); - }) - : ((instance._visibility |= 2), - disappearLayoutEffects(currentOffscreenFiber), - disconnectPassiveEffect(currentOffscreenFiber)); -} function attachSuspenseRetryListeners(finishedWork, wakeables) { var retryCache = getRetryCache(finishedWork); wakeables.forEach(function(wakeable) { @@ -10870,11 +10858,13 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (offscreenSubtreeIsHidden = propValue)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); - finishedWork.stateNode._current = finishedWork; + propValue = finishedWork.stateNode; + propValue._current = finishedWork; + propValue._visibility &= -3; + propValue._visibility |= propValue._pendingVisibility & 2; if ( flags & 8192 && - ((propValue = finishedWork.stateNode), - (propValue._visibility = isCustomComponentTag + ((propValue._visibility = isCustomComponentTag ? propValue._visibility & -2 : propValue._visibility | 1), isCustomComponentTag && @@ -11038,49 +11028,51 @@ function recursivelyTraverseLayoutEffects(root, parentFiber) { commitLayoutEffectOnFiber(root, parentFiber.alternate, parentFiber), (parentFiber = parentFiber.sibling); } -function disappearLayoutEffects(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 14: - case 15: - commitHookEffectListUnmount(4, finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 1: - safelyDetachRef(finishedWork, finishedWork.return); - var instance = finishedWork.stateNode; - if ("function" === typeof instance.componentWillUnmount) { - var nearestMountedAncestor = finishedWork.return; - try { - (instance.props = finishedWork.memoizedProps), - (instance.state = finishedWork.memoizedState), +function recursivelyTraverseDisappearLayoutEffects(parentFiber) { + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + var finishedWork = parentFiber; + switch (finishedWork.tag) { + case 0: + case 11: + case 14: + case 15: + commitHookEffectListUnmount(4, finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 1: + safelyDetachRef(finishedWork, finishedWork.return); + var instance = finishedWork.stateNode; + if ("function" === typeof instance.componentWillUnmount) { + var current = finishedWork, + nearestMountedAncestor = finishedWork.return; + try { + var current$jscomp$0 = current; + instance.props = current$jscomp$0.memoizedProps; + instance.state = current$jscomp$0.memoizedState; instance.componentWillUnmount(); - } catch (error) { - captureCommitPhaseError(finishedWork, nearestMountedAncestor, error); + } catch (error) { + captureCommitPhaseError(current, nearestMountedAncestor, error); + } } - } - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 26: - case 27: - case 5: - safelyDetachRef(finishedWork, finishedWork.return); - recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - case 22: - safelyDetachRef(finishedWork, finishedWork.return); - null === finishedWork.memoizedState && recursivelyTraverseDisappearLayoutEffects(finishedWork); - break; - default: - recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 26: + case 27: + case 5: + safelyDetachRef(finishedWork, finishedWork.return); + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + case 22: + safelyDetachRef(finishedWork, finishedWork.return); + null === finishedWork.memoizedState && + recursivelyTraverseDisappearLayoutEffects(finishedWork); + break; + default: + recursivelyTraverseDisappearLayoutEffects(finishedWork); + } + parentFiber = parentFiber.sibling; } } -function recursivelyTraverseDisappearLayoutEffects(parentFiber) { - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disappearLayoutEffects(parentFiber), (parentFiber = parentFiber.sibling); -} function recursivelyTraverseReappearLayoutEffects( finishedRoot$jscomp$0, parentFiber, @@ -11515,25 +11507,25 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber) { } detachAlternateSiblings(parentFiber); } - for (parentFiber = parentFiber.child; null !== parentFiber; ) - disconnectPassiveEffect(parentFiber), (parentFiber = parentFiber.sibling); -} -function disconnectPassiveEffect(finishedWork) { - switch (finishedWork.tag) { - case 0: - case 11: - case 15: - commitHookEffectListUnmount(8, finishedWork, finishedWork.return); - recursivelyTraverseDisconnectPassiveEffects(finishedWork); - break; - case 22: - var instance = finishedWork.stateNode; - instance._visibility & 4 && - ((instance._visibility &= -5), - recursivelyTraverseDisconnectPassiveEffects(finishedWork)); - break; - default: - recursivelyTraverseDisconnectPassiveEffects(finishedWork); + for (parentFiber = parentFiber.child; null !== parentFiber; ) { + deletions = parentFiber; + switch (deletions.tag) { + case 0: + case 11: + case 15: + commitHookEffectListUnmount(8, deletions, deletions.return); + recursivelyTraverseDisconnectPassiveEffects(deletions); + break; + case 22: + i = deletions.stateNode; + i._visibility & 4 && + ((i._visibility &= -5), + recursivelyTraverseDisconnectPassiveEffects(deletions)); + break; + default: + recursivelyTraverseDisconnectPassiveEffects(deletions); + } + parentFiber = parentFiber.sibling; } } function commitPassiveUnmountEffectsInsideOfDeletedTree_begin( @@ -13664,12 +13656,30 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { pendingProps.lanes = lanes; var primaryChildInstance = { _visibility: 1, + _pendingVisibility: 1, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { - return detachOffscreenInstance(primaryChildInstance); + var fiber = primaryChildInstance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 === (primaryChildInstance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((primaryChildInstance._pendingVisibility |= 2), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } + }, + attach: function() { + var fiber = primaryChildInstance._current; + if (null === fiber) throw Error(formatProdErrorMessage(456)); + if (0 !== (primaryChildInstance._pendingVisibility & 2)) { + var root = enqueueConcurrentRenderForLane(fiber, 1); + null !== root && + ((primaryChildInstance._pendingVisibility &= -3), + scheduleUpdateOnFiber(root, fiber, 1, -1)); + } } }; pendingProps.stateNode = primaryChildInstance; @@ -13962,17 +13972,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1686 = { +var devToolsConfig$jscomp$inline_1693 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b14d7fa4b-20221209", + version: "18.3.0-www-modern-996e4c0d5-20221212", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2082 = { - bundleType: devToolsConfig$jscomp$inline_1686.bundleType, - version: devToolsConfig$jscomp$inline_1686.version, - rendererPackageName: devToolsConfig$jscomp$inline_1686.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1686.rendererConfig, +var internals$jscomp$inline_2095 = { + bundleType: devToolsConfig$jscomp$inline_1693.bundleType, + version: devToolsConfig$jscomp$inline_1693.version, + rendererPackageName: devToolsConfig$jscomp$inline_1693.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1693.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -13989,26 +13999,26 @@ var internals$jscomp$inline_2082 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1686.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1693.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-b14d7fa4b-20221209" + reconcilerVersion: "18.3.0-next-996e4c0d5-20221212" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2083 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2096 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2083.isDisabled && - hook$jscomp$inline_2083.supportsFiber + !hook$jscomp$inline_2096.isDisabled && + hook$jscomp$inline_2096.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2083.inject( - internals$jscomp$inline_2082 + (rendererID = hook$jscomp$inline_2096.inject( + internals$jscomp$inline_2095 )), - (injectedHook = hook$jscomp$inline_2083); + (injectedHook = hook$jscomp$inline_2096); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -14319,4 +14329,4 @@ exports.unstable_flushControlled = function(fn) { } }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-next-b14d7fa4b-20221209"; +exports.version = "18.3.0-next-996e4c0d5-20221212"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index cd24c722aa650..a5f79ca8d95ce 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -1948,17 +1948,6 @@ var clearSuspenseBoundary = shim; var clearSuspenseBoundaryFromContainer = shim; var errorHydratingContainer = shim; -// Renderers that don't support microtasks -// can re-export everything from this module. -function shim$1() { - throw new Error( - "The current renderer does not support microtasks. " + - "This error is likely caused by a bug in React. " + - "Please file an issue." - ); -} // Test selectors (when unsupported) -var scheduleMicrotask = shim$1; - var NO_CONTEXT = {}; var UPDATE_SIGNAL = {}; var nodeToInstanceMap = new WeakMap(); @@ -11385,14 +11374,12 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); - if ( - nextProps.mode === "hidden" || - enableLegacyHidden || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached - ) { + if (nextProps.mode === "hidden" || enableLegacyHidden || nextIsDetached) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -17992,22 +17979,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -18330,14 +18341,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -23623,12 +23639,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -23781,7 +23801,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-classic-996e4c0d5-20221212"; var didWarnAboutNestedUpdates; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index c440dbdba68ba..488984c3f29c0 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -1948,17 +1948,6 @@ var clearSuspenseBoundary = shim; var clearSuspenseBoundaryFromContainer = shim; var errorHydratingContainer = shim; -// Renderers that don't support microtasks -// can re-export everything from this module. -function shim$1() { - throw new Error( - "The current renderer does not support microtasks. " + - "This error is likely caused by a bug in React. " + - "Please file an issue." - ); -} // Test selectors (when unsupported) -var scheduleMicrotask = shim$1; - var NO_CONTEXT = {}; var UPDATE_SIGNAL = {}; var nodeToInstanceMap = new WeakMap(); @@ -11385,14 +11374,12 @@ function updateSimpleMemoComponent( function updateOffscreenComponent(current, workInProgress, renderLanes) { var nextProps = workInProgress.pendingProps; var nextChildren = nextProps.children; + var nextIsDetached = + (workInProgress.stateNode._pendingVisibility & OffscreenDetached) !== 0; var prevState = current !== null ? current.memoizedState : null; markRef(current, workInProgress); - if ( - nextProps.mode === "hidden" || - enableLegacyHidden || // TODO: remove read from stateNode. - workInProgress.stateNode._visibility & OffscreenDetached - ) { + if (nextProps.mode === "hidden" || enableLegacyHidden || nextIsDetached) { // Rendering a hidden tree. var didSuspend = (workInProgress.flags & DidCapture) !== NoFlags; @@ -17992,22 +17979,46 @@ function getRetryCache(finishedWork) { } function detachOffscreenInstance(instance) { - var currentOffscreenFiber = instance._current; + var fiber = instance._current; - if (currentOffscreenFiber === null) { + if (fiber === null) { throw new Error( "Calling Offscreen.detach before instance handle has been set." ); } - var executionContext = getExecutionContext(); + if ((instance._pendingVisibility & OffscreenDetached) !== NoFlags) { + // The instance is already detached, this is a noop. + return; + } // TODO: There is an opportunity to optimise this by not entering commit phase + // and unmounting effects directly. - if ((executionContext & (RenderContext | CommitContext)) !== NoContext) { - scheduleMicrotask(); - } else { - instance._visibility |= OffscreenDetached; - disappearLayoutEffects(currentOffscreenFiber); - disconnectPassiveEffect(currentOffscreenFiber); + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility |= OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); + } +} +function attachOffscreenInstance(instance) { + var fiber = instance._current; + + if (fiber === null) { + throw new Error( + "Calling Offscreen.detach before instance handle has been set." + ); + } + + if ((instance._pendingVisibility & OffscreenDetached) === NoFlags) { + // The instance is already attached, this is a noop. + return; + } + + var root = enqueueConcurrentRenderForLane(fiber, SyncLane); + + if (root !== null) { + instance._pendingVisibility &= ~OffscreenDetached; + scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp); } } @@ -18330,14 +18341,19 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { recursivelyTraverseMutationEffects(root, finishedWork); } - commitReconciliationEffects(finishedWork); // TODO: Add explicit effect flag to set _current. + commitReconciliationEffects(finishedWork); + var offscreenInstance = finishedWork.stateNode; // TODO: Add explicit effect flag to set _current. + + offscreenInstance._current = finishedWork; // Offscreen stores pending changes to visibility in `_pendingVisibility`. This is + // to support batching of `attach` and `detach` calls. - finishedWork.stateNode._current = finishedWork; + offscreenInstance._visibility &= ~OffscreenDetached; + offscreenInstance._visibility |= + offscreenInstance._pendingVisibility & OffscreenDetached; if (flags & Visibility) { - var offscreenInstance = finishedWork.stateNode; // Track the current state on the Offscreen instance so we can + // Track the current state on the Offscreen instance so we can // read it during an event - if (_isHidden) { offscreenInstance._visibility &= ~OffscreenVisible; } else { @@ -23623,12 +23639,16 @@ function createFiberFromOffscreen(pendingProps, mode, lanes, key) { fiber.lanes = lanes; var primaryChildInstance = { _visibility: OffscreenVisible, + _pendingVisibility: OffscreenVisible, _pendingMarkers: null, _retryCache: null, _transitions: null, _current: null, detach: function() { return detachOffscreenInstance(primaryChildInstance); + }, + attach: function() { + return attachOffscreenInstance(primaryChildInstance); } }; fiber.stateNode = primaryChildInstance; @@ -23781,7 +23801,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-b14d7fa4b-20221209"; +var ReactVersion = "18.3.0-www-modern-996e4c0d5-20221212"; var didWarnAboutNestedUpdates;