From 57fd488de458a4bd3ec159376e3b4945b78ecbaf Mon Sep 17 00:00:00 2001 From: gnoff Date: Sat, 25 Mar 2023 02:22:24 +0000 Subject: [PATCH] [Float][Fiber] Implement waitForCommitToBeReady for stylesheet resources (#26450) Before a commit is finished if any new stylesheet resources are going to mount and we are capable of delaying the commit we will do the following 1. Wait for all preloads for newly created stylesheet resources to load 2. Once all preloads are finished we insert the stylesheet instances for these resources and wait for them all to load 3. Once all stylesheets have loaded we complete the commit In this PR I also removed the synchronous loadingstate tracking in the fizz runtime. It was not necessary to support the implementation on not used by the fizz runtime itself. It makes the inline script slightly smaller In this PR I also integrated ReactDOMFloatClient with ReactDOMHostConfig. It leads to better code factoring, something I already did on the server a while back. To make the diff a little easier to follow i make these changes in a single commit so you can look at the change after that commit if helpful There is a 500ms timeout which will finish the commit even if all suspended host instances have not finished loading yet At the moment error and load events are treated the same and we're really tracking whether the host instance is finished attempting to load. DiffTrain build for commit https://github.com/facebook/react/commit/73b6435ca4e0c3ae3aac8126509a82420a84f0d7. --- .../cjs/ReactTestRenderer-dev.js | 134 +++++++++++++++--- .../cjs/ReactTestRenderer-prod.js | 107 ++++++++++---- .../cjs/ReactTestRenderer-profiling.js | 107 ++++++++++---- .../RKJSModules/vendor/react/cjs/React-dev.js | 2 +- .../vendor/react/cjs/React-prod.js | 2 +- .../vendor/react/cjs/React-profiling.js | 2 +- .../Libraries/Renderer/REVISION | 2 +- .../implementations/ReactFabric-dev.fb.js | 134 +++++++++++++++--- .../implementations/ReactFabric-prod.fb.js | 105 ++++++++++---- .../ReactFabric-profiling.fb.js | 91 +++++++++--- .../ReactNativeRenderer-dev.fb.js | 134 +++++++++++++++--- .../ReactNativeRenderer-prod.fb.js | 107 ++++++++++---- .../ReactNativeRenderer-profiling.fb.js | 93 +++++++++--- 13 files changed, 810 insertions(+), 210 deletions(-) diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js index 3cbe59fe53..197d87804b 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js @@ -1834,20 +1834,31 @@ function lanesToEventPriority(lanes) { // Renderers that don't support hydration // can re-export everything from this module. -function shim() { +function shim$1() { throw new Error( "The current renderer does not support hydration. " + "This error is likely caused by a bug in React. " + "Please file an issue." ); } // Hydration (when unsupported) -var isSuspenseInstancePending = shim; -var isSuspenseInstanceFallback = shim; -var getSuspenseInstanceFallbackErrorDetails = shim; -var registerSuspenseInstanceRetry = shim; -var clearSuspenseBoundary = shim; -var clearSuspenseBoundaryFromContainer = shim; -var errorHydratingContainer = shim; +var isSuspenseInstancePending = shim$1; +var isSuspenseInstanceFallback = shim$1; +var getSuspenseInstanceFallbackErrorDetails = shim$1; +var registerSuspenseInstanceRetry = shim$1; +var clearSuspenseBoundary = shim$1; +var clearSuspenseBoundaryFromContainer = shim$1; +var errorHydratingContainer = shim$1; + +// Renderers that don't support hydration +// can re-export everything from this module. +function shim() { + throw new Error( + "The current renderer does not support Resources. " + + "This error is likely caused by a bug in React. " + + "Please file an issue." + ); +} // Resources (when unsupported) +var suspendResource = shim; var NO_CONTEXT = {}; var UPDATE_SIGNAL = {}; @@ -2012,6 +2023,9 @@ function unhideInstance(instance, props) { function unhideTextInstance(textInstance, text) { textInstance.isHidden = false; } +function maySuspendCommit(type, props) { + return false; +} function preloadInstance(type, props) { // Return true to indicate it's already loaded return true; @@ -4296,6 +4310,13 @@ function trackUsedThenable(thenableState, thenable, index) { } } } +function suspendCommit() { + // This extra indirection only exists so it can handle passing + // noopSuspenseyCommitThenable through to throwException. + // TODO: Factor the thenable check out of throwException + suspendedThenable = noopSuspenseyCommitThenable; + throw SuspenseyCommitException; +} // This is used to track the actual thenable that suspended so it can be // passed to the rest of the Suspense implementation — which, for historical // reasons, expects to receive a thenable. @@ -14594,16 +14615,28 @@ function preloadInstanceAndSuspendIfNeeded( props, renderLanes ) { - // Ask the renderer if this instance should suspend the commit. - { - // If this flag was set previously, we can remove it. The flag represents - // whether this particular set of props might ever need to suspend. The - // safest thing to do is for maySuspendCommit to always return true, but - // if the renderer is reasonably confident that the underlying resource - // won't be evicted, it can return false as a performance optimization. - workInProgress.flags &= ~SuspenseyCommit; - return; - } // Mark this fiber with a flag. We use this right before the commit phase to + workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same + // check that `useDeferredValue` does to determine whether it needs to + // defer. This is partly for gradual adoption purposes (i.e. shouldn't start + // suspending until you opt in with startTransition or Suspense) but it + // also happens to be the desired behavior for the concrete use cases we've + // thought of so far, like CSS loading, fonts, images, etc. + // TODO: We may decide to expose a way to force a fallback even during a + // sync update. + + if (!includesOnlyNonUrgentLanes(renderLanes)); + else { + // Preload the instance + var isReady = preloadInstance(); + + if (!isReady) { + if (shouldRemainOnPreviousScreen()); + else { + // Trigger a fallback rather than block the render. + suspendCommit(); + } + } + } } function scheduleRetryEffect(workInProgress, retryQueue) { @@ -15011,6 +15044,8 @@ function completeWork(current, workInProgress, renderLanes) { popHostContext(workInProgress); var _type = workInProgress.type; + var _maySuspend = maySuspendCommit(); + if (current !== null && workInProgress.stateNode != null) { updateHostComponent(current, workInProgress, _type, newProps); @@ -15071,7 +15106,17 @@ function completeWork(current, workInProgress, renderLanes) { // will resume rendering as if the work-in-progress completed. So it must // fully complete. - preloadInstanceAndSuspendIfNeeded(workInProgress); + if (_maySuspend) { + preloadInstanceAndSuspendIfNeeded( + workInProgress, + _type, + newProps, + renderLanes + ); + } else { + workInProgress.flags &= ~SuspenseyCommit; + } + return null; } @@ -18929,6 +18974,50 @@ function commitPassiveUnmountEffects(finishedWork) { commitPassiveUnmountOnFiber(finishedWork); resetCurrentFiber(); } +function accumulateSuspenseyCommit(finishedWork) { + accumulateSuspenseyCommitOnFiber(finishedWork); +} + +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & SuspenseyCommit) { + var child = parentFiber.child; + + while (child !== null) { + accumulateSuspenseyCommitOnFiber(child); + child = child.sibling; + } + } +} + +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case HostHoistable: { + recursivelyAccumulateSuspenseyCommit(fiber); + + if (fiber.flags & SuspenseyCommit) { + if (fiber.memoizedState !== null) { + suspendResource(); + } + } + + break; + } + + case HostComponent: { + recursivelyAccumulateSuspenseyCommit(fiber); + + break; + } + + case HostRoot: + case HostPortal: + // eslint-disable-next-line-no-fallthrough + + default: { + recursivelyAccumulateSuspenseyCommit(fiber); + } + } +} function detachAlternateSiblings(parentFiber) { // A fiber was deleted from this parent fiber, but it's still part of the @@ -20259,6 +20348,11 @@ function commitRootWhenReady( lanes ) { if (includesOnlyNonUrgentLanes(lanes)) { + // the suspensey resources. The renderer is responsible for accumulating + // all the load events. This all happens in a single synchronous + // transaction, so it track state in its own module scope. + + accumulateSuspenseyCommit(finishedWork); // At the end, ask the renderer if it's ready to commit, or if we should // suspend. If it's not ready, it will return a callback to subscribe to // a ready event. @@ -23649,7 +23743,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-175962c10-20230325"; +var ReactVersion = "18.3.0-next-73b6435ca-20230324"; // Might add PROFILE later. diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js index 90c678424d..f4d11e86e5 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js @@ -526,7 +526,7 @@ function lanesToEventPriority(lanes) { : 8 : 2; } -function shim() { +function shim$1() { throw Error( "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue." ); @@ -1985,7 +1985,7 @@ function findFirstSuspended(row) { for (var node = row; null !== node; ) { if (13 === node.tag) { var state = node.memoizedState; - if (null !== state && (null === state.dehydrated || shim() || shim())) + if (null !== state && (null === state.dehydrated || shim$1() || shim$1())) return node; } else if (19 === node.tag && void 0 !== node.memoizedProps.revealOrder) { if (0 !== (node.flags & 128)) return node; @@ -3798,9 +3798,9 @@ function updateDehydratedSuspenseComponent( renderLanes, null ); - if (shim()) + if (shim$1()) return ( - (suspenseState = shim().digest), + (suspenseState = shim$1().digest), (nextProps = Error( "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering." )), @@ -3879,12 +3879,12 @@ function updateDehydratedSuspenseComponent( null ); } - if (shim()) + if (shim$1()) return ( (workInProgress.flags |= 128), (workInProgress.child = current.child), retryDehydratedSuspenseBoundary.bind(null, current), - shim(), + shim$1(), null ); current = mountSuspensePrimaryChildren(workInProgress, nextProps.children); @@ -5183,7 +5183,7 @@ function commitDeletionEffectsOnFiber( finishedRoot.children.splice(deletedFiber, 1)); break; case 18: - null !== hostParent && shim(); + null !== hostParent && shim$1(); break; case 4: prevHostParent = hostParent; @@ -6038,6 +6038,28 @@ function recursivelyTraverseAtomicPassiveEffects( parentFiber = parentFiber.sibling; } } +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & 16777216) + for (parentFiber = parentFiber.child; null !== parentFiber; ) + accumulateSuspenseyCommitOnFiber(parentFiber), + (parentFiber = parentFiber.sibling); +} +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case 26: + recursivelyAccumulateSuspenseyCommit(fiber); + if (fiber.flags & 16777216 && null !== fiber.memoizedState) + throw Error( + "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue." + ); + break; + case 5: + recursivelyAccumulateSuspenseyCommit(fiber); + break; + default: + recursivelyAccumulateSuspenseyCommit(fiber); + } +} function detachAlternateSiblings(parentFiber) { var previousFiber = parentFiber.alternate; if ( @@ -6418,7 +6440,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { case 1: throw Error("Root did not complete. This is a bug in React."); case 2: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 3: markRootSuspended(root, lanes); @@ -6441,7 +6469,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 4: markRootSuspended(root, lanes); @@ -6485,10 +6519,22 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 5: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; default: throw Error("Unknown root exit status."); @@ -6531,7 +6577,14 @@ function queueRecoverableErrors(errors) { errors ); } -function commitRootWhenReady(root) { +function commitRootWhenReady( + root, + finishedWork, + recoverableErrors, + transitions, + lanes +) { + 0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork); commitRoot( root, workInProgressRootRecoverableErrors, @@ -8565,19 +8618,19 @@ function wrapFiber(fiber) { fiberToWrapper.set(fiber, wrapper)); return wrapper; } -var devToolsConfig$jscomp$inline_1029 = { +var devToolsConfig$jscomp$inline_1002 = { findFiberByHostInstance: function () { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-next-175962c10-20230325", + version: "18.3.0-next-73b6435ca-20230324", rendererPackageName: "react-test-renderer" }; -var internals$jscomp$inline_1217 = { - bundleType: devToolsConfig$jscomp$inline_1029.bundleType, - version: devToolsConfig$jscomp$inline_1029.version, - rendererPackageName: devToolsConfig$jscomp$inline_1029.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1029.rendererConfig, +var internals$jscomp$inline_1193 = { + bundleType: devToolsConfig$jscomp$inline_1002.bundleType, + version: devToolsConfig$jscomp$inline_1002.version, + rendererPackageName: devToolsConfig$jscomp$inline_1002.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1002.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -8594,26 +8647,26 @@ var internals$jscomp$inline_1217 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1029.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1002.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-175962c10-20230325" + reconcilerVersion: "18.3.0-next-73b6435ca-20230324" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1218 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1194 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1218.isDisabled && - hook$jscomp$inline_1218.supportsFiber + !hook$jscomp$inline_1194.isDisabled && + hook$jscomp$inline_1194.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1218.inject( - internals$jscomp$inline_1217 + (rendererID = hook$jscomp$inline_1194.inject( + internals$jscomp$inline_1193 )), - (injectedHook = hook$jscomp$inline_1218); + (injectedHook = hook$jscomp$inline_1194); } catch (err) {} } exports._Scheduler = Scheduler; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js index 9eed1152fb..f9eccf2046 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js @@ -544,7 +544,7 @@ function lanesToEventPriority(lanes) { : 8 : 2; } -function shim() { +function shim$1() { throw Error( "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue." ); @@ -2003,7 +2003,7 @@ function findFirstSuspended(row) { for (var node = row; null !== node; ) { if (13 === node.tag) { var state = node.memoizedState; - if (null !== state && (null === state.dehydrated || shim() || shim())) + if (null !== state && (null === state.dehydrated || shim$1() || shim$1())) return node; } else if (19 === node.tag && void 0 !== node.memoizedProps.revealOrder) { if (0 !== (node.flags & 128)) return node; @@ -3892,9 +3892,9 @@ function updateDehydratedSuspenseComponent( renderLanes, null ); - if (shim()) + if (shim$1()) return ( - (suspenseState = shim().digest), + (suspenseState = shim$1().digest), (nextProps = Error( "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering." )), @@ -3973,12 +3973,12 @@ function updateDehydratedSuspenseComponent( null ); } - if (shim()) + if (shim$1()) return ( (workInProgress.flags |= 128), (workInProgress.child = current.child), retryDehydratedSuspenseBoundary.bind(null, current), - shim(), + shim$1(), null ); current = mountSuspensePrimaryChildren(workInProgress, nextProps.children); @@ -5459,7 +5459,7 @@ function commitDeletionEffectsOnFiber( finishedRoot.children.splice(deletedFiber, 1)); break; case 18: - null !== hostParent && shim(); + null !== hostParent && shim$1(); break; case 4: prevHostParent = hostParent; @@ -6354,6 +6354,28 @@ function recursivelyTraverseAtomicPassiveEffects( parentFiber = parentFiber.sibling; } } +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & 16777216) + for (parentFiber = parentFiber.child; null !== parentFiber; ) + accumulateSuspenseyCommitOnFiber(parentFiber), + (parentFiber = parentFiber.sibling); +} +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case 26: + recursivelyAccumulateSuspenseyCommit(fiber); + if (fiber.flags & 16777216 && null !== fiber.memoizedState) + throw Error( + "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue." + ); + break; + case 5: + recursivelyAccumulateSuspenseyCommit(fiber); + break; + default: + recursivelyAccumulateSuspenseyCommit(fiber); + } +} function detachAlternateSiblings(parentFiber) { var previousFiber = parentFiber.alternate; if ( @@ -6755,7 +6777,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { case 1: throw Error("Root did not complete. This is a bug in React."); case 2: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 3: markRootSuspended(root, lanes); @@ -6778,7 +6806,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 4: markRootSuspended(root, lanes); @@ -6822,10 +6856,22 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 5: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; default: throw Error("Unknown root exit status."); @@ -6868,7 +6914,14 @@ function queueRecoverableErrors(errors) { errors ); } -function commitRootWhenReady(root) { +function commitRootWhenReady( + root, + finishedWork, + recoverableErrors, + transitions, + lanes +) { + 0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork); commitRoot( root, workInProgressRootRecoverableErrors, @@ -8990,19 +9043,19 @@ function wrapFiber(fiber) { fiberToWrapper.set(fiber, wrapper)); return wrapper; } -var devToolsConfig$jscomp$inline_1072 = { +var devToolsConfig$jscomp$inline_1045 = { findFiberByHostInstance: function () { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-next-175962c10-20230325", + version: "18.3.0-next-73b6435ca-20230324", rendererPackageName: "react-test-renderer" }; -var internals$jscomp$inline_1258 = { - bundleType: devToolsConfig$jscomp$inline_1072.bundleType, - version: devToolsConfig$jscomp$inline_1072.version, - rendererPackageName: devToolsConfig$jscomp$inline_1072.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1072.rendererConfig, +var internals$jscomp$inline_1234 = { + bundleType: devToolsConfig$jscomp$inline_1045.bundleType, + version: devToolsConfig$jscomp$inline_1045.version, + rendererPackageName: devToolsConfig$jscomp$inline_1045.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1045.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9019,26 +9072,26 @@ var internals$jscomp$inline_1258 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1072.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1045.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-175962c10-20230325" + reconcilerVersion: "18.3.0-next-73b6435ca-20230324" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1259 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1235 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1259.isDisabled && - hook$jscomp$inline_1259.supportsFiber + !hook$jscomp$inline_1235.isDisabled && + hook$jscomp$inline_1235.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1259.inject( - internals$jscomp$inline_1258 + (rendererID = hook$jscomp$inline_1235.inject( + internals$jscomp$inline_1234 )), - (injectedHook = hook$jscomp$inline_1259); + (injectedHook = hook$jscomp$inline_1235); } catch (err) {} } exports._Scheduler = Scheduler; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js index 5d32eacb89..1a57800a92 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-next-175962c10-20230325"; +var ReactVersion = "18.3.0-next-73b6435ca-20230324"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js index ab1ff278a8..4c2d70f05e 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js @@ -639,4 +639,4 @@ exports.useSyncExternalStore = function ( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-next-175962c10-20230325"; +exports.version = "18.3.0-next-73b6435ca-20230324"; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js index e177d752c6..423dc49510 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js @@ -642,7 +642,7 @@ exports.useSyncExternalStore = function ( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-next-175962c10-20230325"; +exports.version = "18.3.0-next-73b6435ca-20230324"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION index cf4ebbb334..d4688db04f 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION @@ -1 +1 @@ -175962c10c53e5adfcfc02a3d6cc3f487d5a78a0 +73b6435ca4e0c3ae3aac8126509a82420a84f0d7 diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js index 8bc5135d32..d9710a12d7 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js @@ -4804,29 +4804,40 @@ function lanesToEventPriority(lanes) { // Renderers that don't support mutation // can re-export everything from this module. -function shim$1() { +function shim$2() { throw new Error( "The current renderer does not support mutation. " + "This error is likely caused by a bug in React. " + "Please file an issue." ); } // Mutation (when unsupported) -var commitMount = shim$1; +var commitMount = shim$2; // Renderers that don't support hydration // can re-export everything from this module. -function shim() { +function shim$1() { throw new Error( "The current renderer does not support hydration. " + "This error is likely caused by a bug in React. " + "Please file an issue." ); } // Hydration (when unsupported) -var isSuspenseInstancePending = shim; -var isSuspenseInstanceFallback = shim; -var getSuspenseInstanceFallbackErrorDetails = shim; -var registerSuspenseInstanceRetry = shim; -var errorHydratingContainer = shim; +var isSuspenseInstancePending = shim$1; +var isSuspenseInstanceFallback = shim$1; +var getSuspenseInstanceFallbackErrorDetails = shim$1; +var registerSuspenseInstanceRetry = shim$1; +var errorHydratingContainer = shim$1; + +// Renderers that don't support hydration +// can re-export everything from this module. +function shim() { + throw new Error( + "The current renderer does not support Resources. " + + "This error is likely caused by a bug in React. " + + "Please file an issue." + ); +} // Resources (when unsupported) +var suspendResource = shim; var _nativeFabricUIManage = nativeFabricUIManager, createNode = _nativeFabricUIManage.createNode, @@ -5076,6 +5087,9 @@ function finalizeContainerChildren(container, newChildren) { completeRoot(container, newChildren); } function replaceContainerChildren(container, newChildren) {} +function maySuspendCommit(type, props) { + return false; +} function preloadInstance(type, props) { return true; } @@ -8006,6 +8020,13 @@ function trackUsedThenable(thenableState, thenable, index) { } } } +function suspendCommit() { + // This extra indirection only exists so it can handle passing + // noopSuspenseyCommitThenable through to throwException. + // TODO: Factor the thenable check out of throwException + suspendedThenable = noopSuspenseyCommitThenable; + throw SuspenseyCommitException; +} // This is used to track the actual thenable that suspended so it can be // passed to the rest of the Suspense implementation — which, for historical // reasons, expects to receive a thenable. @@ -18674,16 +18695,28 @@ function preloadInstanceAndSuspendIfNeeded( props, renderLanes ) { - // Ask the renderer if this instance should suspend the commit. - { - // If this flag was set previously, we can remove it. The flag represents - // whether this particular set of props might ever need to suspend. The - // safest thing to do is for maySuspendCommit to always return true, but - // if the renderer is reasonably confident that the underlying resource - // won't be evicted, it can return false as a performance optimization. - workInProgress.flags &= ~SuspenseyCommit; - return; - } // Mark this fiber with a flag. We use this right before the commit phase to + workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same + // check that `useDeferredValue` does to determine whether it needs to + // defer. This is partly for gradual adoption purposes (i.e. shouldn't start + // suspending until you opt in with startTransition or Suspense) but it + // also happens to be the desired behavior for the concrete use cases we've + // thought of so far, like CSS loading, fonts, images, etc. + // TODO: We may decide to expose a way to force a fallback even during a + // sync update. + + if (!includesOnlyNonUrgentLanes(renderLanes)); + else { + // Preload the instance + var isReady = preloadInstance(); + + if (!isReady) { + if (shouldRemainOnPreviousScreen()); + else { + // Trigger a fallback rather than block the render. + suspendCommit(); + } + } + } } function scheduleRetryEffect(workInProgress, retryQueue) { @@ -19088,6 +19121,8 @@ function completeWork(current, workInProgress, renderLanes) { popHostContext(workInProgress); var _type = workInProgress.type; + var _maySuspend = maySuspendCommit(); + if (current !== null && workInProgress.stateNode != null) { updateHostComponent(current, workInProgress, _type, newProps); @@ -19148,7 +19183,17 @@ function completeWork(current, workInProgress, renderLanes) { // will resume rendering as if the work-in-progress completed. So it must // fully complete. - preloadInstanceAndSuspendIfNeeded(workInProgress); + if (_maySuspend) { + preloadInstanceAndSuspendIfNeeded( + workInProgress, + _type, + newProps, + renderLanes + ); + } else { + workInProgress.flags &= ~SuspenseyCommit; + } + return null; } @@ -22056,6 +22101,50 @@ function commitPassiveUnmountEffects(finishedWork) { commitPassiveUnmountOnFiber(finishedWork); resetCurrentFiber(); } +function accumulateSuspenseyCommit(finishedWork) { + accumulateSuspenseyCommitOnFiber(finishedWork); +} + +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & SuspenseyCommit) { + var child = parentFiber.child; + + while (child !== null) { + accumulateSuspenseyCommitOnFiber(child); + child = child.sibling; + } + } +} + +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case HostHoistable: { + recursivelyAccumulateSuspenseyCommit(fiber); + + if (fiber.flags & SuspenseyCommit) { + if (fiber.memoizedState !== null) { + suspendResource(); + } + } + + break; + } + + case HostComponent: { + recursivelyAccumulateSuspenseyCommit(fiber); + + break; + } + + case HostRoot: + case HostPortal: + // eslint-disable-next-line-no-fallthrough + + default: { + recursivelyAccumulateSuspenseyCommit(fiber); + } + } +} function detachAlternateSiblings(parentFiber) { // A fiber was deleted from this parent fiber, but it's still part of the @@ -23322,6 +23411,11 @@ function commitRootWhenReady( lanes ) { if (includesOnlyNonUrgentLanes(lanes)) { + // the suspensey resources. The renderer is responsible for accumulating + // all the load events. This all happens in a single synchronous + // transaction, so it track state in its own module scope. + + accumulateSuspenseyCommit(finishedWork); // At the end, ask the renderer if it's ready to commit, or if we should // suspend. If it's not ready, it will return a callback to subscribe to // a ready event. @@ -26914,7 +27008,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-175962c10-20230325"; +var ReactVersion = "18.3.0-next-73b6435ca-20230324"; function createPortal$1( children, diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js index 1c50cc7bfb..7acd5d418a 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js @@ -1566,7 +1566,7 @@ function lanesToEventPriority(lanes) { : 8 : 2; } -function shim() { +function shim$1() { throw Error( "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue." ); @@ -3350,7 +3350,7 @@ function findFirstSuspended(row) { for (var node = row; null !== node; ) { if (13 === node.tag) { var state = node.memoizedState; - if (null !== state && (null === state.dehydrated || shim() || shim())) + if (null !== state && (null === state.dehydrated || shim$1() || shim$1())) return node; } else if (19 === node.tag && void 0 !== node.memoizedProps.revealOrder) { if (0 !== (node.flags & 128)) return node; @@ -5295,9 +5295,9 @@ function updateDehydratedSuspenseComponent( renderLanes, null ); - if (shim()) + if (shim$1()) return ( - (suspenseState = shim().digest), + (suspenseState = shim$1().digest), (nextProps = Error( "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering." )), @@ -5376,12 +5376,12 @@ function updateDehydratedSuspenseComponent( null ); } - if (shim()) + if (shim$1()) return ( (workInProgress.flags |= 128), (workInProgress.child = current.child), retryDehydratedSuspenseBoundary.bind(null, current), - shim(), + shim$1(), null ); current = mountSuspensePrimaryChildren(workInProgress, nextProps.children); @@ -7172,6 +7172,28 @@ function recursivelyTraverseReconnectPassiveEffects( parentFiber = parentFiber.sibling; } } +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & 16777216) + for (parentFiber = parentFiber.child; null !== parentFiber; ) + accumulateSuspenseyCommitOnFiber(parentFiber), + (parentFiber = parentFiber.sibling); +} +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case 26: + recursivelyAccumulateSuspenseyCommit(fiber); + if (fiber.flags & 16777216 && null !== fiber.memoizedState) + throw Error( + "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue." + ); + break; + case 5: + recursivelyAccumulateSuspenseyCommit(fiber); + break; + default: + recursivelyAccumulateSuspenseyCommit(fiber); + } +} function detachAlternateSiblings(parentFiber) { var previousFiber = parentFiber.alternate; if ( @@ -7536,7 +7558,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { case 1: throw Error("Root did not complete. This is a bug in React."); case 2: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 3: markRootSuspended(root, lanes); @@ -7559,7 +7587,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 4: markRootSuspended(root, lanes); @@ -7603,10 +7637,22 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 5: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; default: throw Error("Unknown root exit status."); @@ -7649,7 +7695,14 @@ function queueRecoverableErrors(errors) { errors ); } -function commitRootWhenReady(root) { +function commitRootWhenReady( + root, + finishedWork, + recoverableErrors, + transitions, + lanes +) { + 0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork); commitRoot( root, workInProgressRootRecoverableErrors, @@ -9434,10 +9487,10 @@ batchedUpdatesImpl = function (fn, a) { } }; var roots = new Map(), - devToolsConfig$jscomp$inline_1049 = { + devToolsConfig$jscomp$inline_1022 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-next-175962c10-20230325", + version: "18.3.0-next-73b6435ca-20230324", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -9452,11 +9505,11 @@ var roots = new Map(), }.bind(null, findNodeHandle) } }; -var internals$jscomp$inline_1292 = { - bundleType: devToolsConfig$jscomp$inline_1049.bundleType, - version: devToolsConfig$jscomp$inline_1049.version, - rendererPackageName: devToolsConfig$jscomp$inline_1049.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1049.rendererConfig, +var internals$jscomp$inline_1268 = { + bundleType: devToolsConfig$jscomp$inline_1022.bundleType, + version: devToolsConfig$jscomp$inline_1022.version, + rendererPackageName: devToolsConfig$jscomp$inline_1022.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1022.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9472,26 +9525,26 @@ var internals$jscomp$inline_1292 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1049.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1022.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-175962c10-20230325" + reconcilerVersion: "18.3.0-next-73b6435ca-20230324" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1293 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1269 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1293.isDisabled && - hook$jscomp$inline_1293.supportsFiber + !hook$jscomp$inline_1269.isDisabled && + hook$jscomp$inline_1269.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1293.inject( - internals$jscomp$inline_1292 + (rendererID = hook$jscomp$inline_1269.inject( + internals$jscomp$inline_1268 )), - (injectedHook = hook$jscomp$inline_1293); + (injectedHook = hook$jscomp$inline_1269); } catch (err) {} } exports.createPortal = function (children, containerTag) { diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js index c78e088699..0bf5a90448 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js @@ -1694,7 +1694,7 @@ function lanesToEventPriority(lanes) { : 8 : 2; } -function shim() { +function shim$1() { throw Error( "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue." ); @@ -3478,7 +3478,7 @@ function findFirstSuspended(row) { for (var node = row; null !== node; ) { if (13 === node.tag) { var state = node.memoizedState; - if (null !== state && (null === state.dehydrated || shim() || shim())) + if (null !== state && (null === state.dehydrated || shim$1() || shim$1())) return node; } else if (19 === node.tag && void 0 !== node.memoizedProps.revealOrder) { if (0 !== (node.flags & 128)) return node; @@ -5515,9 +5515,9 @@ function updateDehydratedSuspenseComponent( renderLanes, null ); - if (shim()) + if (shim$1()) return ( - (suspenseState = shim().digest), + (suspenseState = shim$1().digest), (nextProps = Error( "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering." )), @@ -5596,12 +5596,12 @@ function updateDehydratedSuspenseComponent( null ); } - if (shim()) + if (shim$1()) return ( (workInProgress.flags |= 128), (workInProgress.child = current.child), retryDehydratedSuspenseBoundary.bind(null, current), - shim(), + shim$1(), null ); current = mountSuspensePrimaryChildren(workInProgress, nextProps.children); @@ -7678,6 +7678,28 @@ function recursivelyTraverseReconnectPassiveEffects( parentFiber = parentFiber.sibling; } } +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & 16777216) + for (parentFiber = parentFiber.child; null !== parentFiber; ) + accumulateSuspenseyCommitOnFiber(parentFiber), + (parentFiber = parentFiber.sibling); +} +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case 26: + recursivelyAccumulateSuspenseyCommit(fiber); + if (fiber.flags & 16777216 && null !== fiber.memoizedState) + throw Error( + "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue." + ); + break; + case 5: + recursivelyAccumulateSuspenseyCommit(fiber); + break; + default: + recursivelyAccumulateSuspenseyCommit(fiber); + } +} function detachAlternateSiblings(parentFiber) { var previousFiber = parentFiber.alternate; if ( @@ -8064,7 +8086,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { case 1: throw Error("Root did not complete. This is a bug in React."); case 2: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 3: markRootSuspended(root, lanes); @@ -8087,7 +8115,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 4: markRootSuspended(root, lanes); @@ -8131,10 +8165,22 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 5: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; default: throw Error("Unknown root exit status."); @@ -8177,7 +8223,14 @@ function queueRecoverableErrors(errors) { errors ); } -function commitRootWhenReady(root) { +function commitRootWhenReady( + root, + finishedWork, + recoverableErrors, + transitions, + lanes +) { + 0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork); commitRoot( root, workInProgressRootRecoverableErrors, @@ -10142,10 +10195,10 @@ batchedUpdatesImpl = function (fn, a) { } }; var roots = new Map(), - devToolsConfig$jscomp$inline_1128 = { + devToolsConfig$jscomp$inline_1101 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-next-175962c10-20230325", + version: "18.3.0-next-73b6435ca-20230324", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -10174,10 +10227,10 @@ var roots = new Map(), } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1128.bundleType, - version: devToolsConfig$jscomp$inline_1128.version, - rendererPackageName: devToolsConfig$jscomp$inline_1128.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1128.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1101.bundleType, + version: devToolsConfig$jscomp$inline_1101.version, + rendererPackageName: devToolsConfig$jscomp$inline_1101.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1101.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10193,14 +10246,14 @@ var roots = new Map(), return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1128.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1101.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-175962c10-20230325" + reconcilerVersion: "18.3.0-next-73b6435ca-20230324" }); exports.createPortal = function (children, containerTag) { return createPortal$1( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js index a20204830f..fa03d57aa1 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js @@ -5666,20 +5666,31 @@ function lanesToEventPriority(lanes) { // Renderers that don't support hydration // can re-export everything from this module. -function shim() { +function shim$1() { throw new Error( "The current renderer does not support hydration. " + "This error is likely caused by a bug in React. " + "Please file an issue." ); } // Hydration (when unsupported) -var isSuspenseInstancePending = shim; -var isSuspenseInstanceFallback = shim; -var getSuspenseInstanceFallbackErrorDetails = shim; -var registerSuspenseInstanceRetry = shim; -var clearSuspenseBoundary = shim; -var clearSuspenseBoundaryFromContainer = shim; -var errorHydratingContainer = shim; +var isSuspenseInstancePending = shim$1; +var isSuspenseInstanceFallback = shim$1; +var getSuspenseInstanceFallbackErrorDetails = shim$1; +var registerSuspenseInstanceRetry = shim$1; +var clearSuspenseBoundary = shim$1; +var clearSuspenseBoundaryFromContainer = shim$1; +var errorHydratingContainer = shim$1; + +// Renderers that don't support hydration +// can re-export everything from this module. +function shim() { + throw new Error( + "The current renderer does not support Resources. " + + "This error is likely caused by a bug in React. " + + "Please file an issue." + ); +} // Resources (when unsupported) +var suspendResource = shim; var getViewConfigForType = ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get; // Unused @@ -6025,6 +6036,9 @@ function unhideInstance(instance, props) { function unhideTextInstance(textInstance, text) { throw new Error("Not yet implemented."); } +function maySuspendCommit(type, props) { + return false; +} function preloadInstance(type, props) { // Return true to indicate it's already loaded return true; @@ -8350,6 +8364,13 @@ function trackUsedThenable(thenableState, thenable, index) { } } } +function suspendCommit() { + // This extra indirection only exists so it can handle passing + // noopSuspenseyCommitThenable through to throwException. + // TODO: Factor the thenable check out of throwException + suspendedThenable = noopSuspenseyCommitThenable; + throw SuspenseyCommitException; +} // This is used to track the actual thenable that suspended so it can be // passed to the rest of the Suspense implementation — which, for historical // reasons, expects to receive a thenable. @@ -18831,16 +18852,28 @@ function preloadInstanceAndSuspendIfNeeded( props, renderLanes ) { - // Ask the renderer if this instance should suspend the commit. - { - // If this flag was set previously, we can remove it. The flag represents - // whether this particular set of props might ever need to suspend. The - // safest thing to do is for maySuspendCommit to always return true, but - // if the renderer is reasonably confident that the underlying resource - // won't be evicted, it can return false as a performance optimization. - workInProgress.flags &= ~SuspenseyCommit; - return; - } // Mark this fiber with a flag. We use this right before the commit phase to + workInProgress.flags |= SuspenseyCommit; // Check if we're rendering at a "non-urgent" priority. This is the same + // check that `useDeferredValue` does to determine whether it needs to + // defer. This is partly for gradual adoption purposes (i.e. shouldn't start + // suspending until you opt in with startTransition or Suspense) but it + // also happens to be the desired behavior for the concrete use cases we've + // thought of so far, like CSS loading, fonts, images, etc. + // TODO: We may decide to expose a way to force a fallback even during a + // sync update. + + if (!includesOnlyNonUrgentLanes(renderLanes)); + else { + // Preload the instance + var isReady = preloadInstance(); + + if (!isReady) { + if (shouldRemainOnPreviousScreen()); + else { + // Trigger a fallback rather than block the render. + suspendCommit(); + } + } + } } function scheduleRetryEffect(workInProgress, retryQueue) { @@ -19231,6 +19264,8 @@ function completeWork(current, workInProgress, renderLanes) { popHostContext(workInProgress); var _type = workInProgress.type; + var _maySuspend = maySuspendCommit(); + if (current !== null && workInProgress.stateNode != null) { updateHostComponent(current, workInProgress, _type, newProps); @@ -19297,7 +19332,17 @@ function completeWork(current, workInProgress, renderLanes) { // will resume rendering as if the work-in-progress completed. So it must // fully complete. - preloadInstanceAndSuspendIfNeeded(workInProgress); + if (_maySuspend) { + preloadInstanceAndSuspendIfNeeded( + workInProgress, + _type, + newProps, + renderLanes + ); + } else { + workInProgress.flags &= ~SuspenseyCommit; + } + return null; } @@ -22594,6 +22639,50 @@ function commitPassiveUnmountEffects(finishedWork) { commitPassiveUnmountOnFiber(finishedWork); resetCurrentFiber(); } +function accumulateSuspenseyCommit(finishedWork) { + accumulateSuspenseyCommitOnFiber(finishedWork); +} + +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & SuspenseyCommit) { + var child = parentFiber.child; + + while (child !== null) { + accumulateSuspenseyCommitOnFiber(child); + child = child.sibling; + } + } +} + +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case HostHoistable: { + recursivelyAccumulateSuspenseyCommit(fiber); + + if (fiber.flags & SuspenseyCommit) { + if (fiber.memoizedState !== null) { + suspendResource(); + } + } + + break; + } + + case HostComponent: { + recursivelyAccumulateSuspenseyCommit(fiber); + + break; + } + + case HostRoot: + case HostPortal: + // eslint-disable-next-line-no-fallthrough + + default: { + recursivelyAccumulateSuspenseyCommit(fiber); + } + } +} function detachAlternateSiblings(parentFiber) { // A fiber was deleted from this parent fiber, but it's still part of the @@ -23862,6 +23951,11 @@ function commitRootWhenReady( lanes ) { if (includesOnlyNonUrgentLanes(lanes)) { + // the suspensey resources. The renderer is responsible for accumulating + // all the load events. This all happens in a single synchronous + // transaction, so it track state in its own module scope. + + accumulateSuspenseyCommit(finishedWork); // At the end, ask the renderer if it's ready to commit, or if we should // suspend. If it's not ready, it will return a callback to subscribe to // a ready event. @@ -27454,7 +27548,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-175962c10-20230325"; +var ReactVersion = "18.3.0-next-73b6435ca-20230324"; function createPortal$1( children, diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js index 08c957d6d9..92667de375 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js @@ -1948,7 +1948,7 @@ function lanesToEventPriority(lanes) { : 8 : 2; } -function shim() { +function shim$1() { throw Error( "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue." ); @@ -3440,7 +3440,7 @@ function findFirstSuspended(row) { for (var node = row; null !== node; ) { if (13 === node.tag) { var state = node.memoizedState; - if (null !== state && (null === state.dehydrated || shim() || shim())) + if (null !== state && (null === state.dehydrated || shim$1() || shim$1())) return node; } else if (19 === node.tag && void 0 !== node.memoizedProps.revealOrder) { if (0 !== (node.flags & 128)) return node; @@ -5375,9 +5375,9 @@ function updateDehydratedSuspenseComponent( renderLanes, null ); - if (shim()) + if (shim$1()) return ( - (suspenseState = shim().digest), + (suspenseState = shim$1().digest), (nextProps = Error( "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering." )), @@ -5456,12 +5456,12 @@ function updateDehydratedSuspenseComponent( null ); } - if (shim()) + if (shim$1()) return ( (workInProgress.flags |= 128), (workInProgress.child = current.child), retryDehydratedSuspenseBoundary.bind(null, current), - shim(), + shim$1(), null ); current = mountSuspensePrimaryChildren(workInProgress, nextProps.children); @@ -6680,7 +6680,7 @@ function commitDeletionEffectsOnFiber( ))); break; case 18: - null !== hostParent && shim(); + null !== hostParent && shim$1(); break; case 4: prevHostParent = hostParent; @@ -7434,6 +7434,28 @@ function recursivelyTraverseReconnectPassiveEffects( parentFiber = parentFiber.sibling; } } +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & 16777216) + for (parentFiber = parentFiber.child; null !== parentFiber; ) + accumulateSuspenseyCommitOnFiber(parentFiber), + (parentFiber = parentFiber.sibling); +} +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case 26: + recursivelyAccumulateSuspenseyCommit(fiber); + if (fiber.flags & 16777216 && null !== fiber.memoizedState) + throw Error( + "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue." + ); + break; + case 5: + recursivelyAccumulateSuspenseyCommit(fiber); + break; + default: + recursivelyAccumulateSuspenseyCommit(fiber); + } +} function detachAlternateSiblings(parentFiber) { var previousFiber = parentFiber.alternate; if ( @@ -7785,7 +7807,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { case 1: throw Error("Root did not complete. This is a bug in React."); case 2: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 3: markRootSuspended(root, lanes); @@ -7808,7 +7836,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 4: markRootSuspended(root, lanes); @@ -7852,10 +7886,22 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 5: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; default: throw Error("Unknown root exit status."); @@ -7898,7 +7944,14 @@ function queueRecoverableErrors(errors) { errors ); } -function commitRootWhenReady(root) { +function commitRootWhenReady( + root, + finishedWork, + recoverableErrors, + transitions, + lanes +) { + 0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork); commitRoot( root, workInProgressRootRecoverableErrors, @@ -9690,10 +9743,10 @@ batchedUpdatesImpl = function (fn, a) { } }; var roots = new Map(), - devToolsConfig$jscomp$inline_1108 = { + devToolsConfig$jscomp$inline_1081 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "18.3.0-next-175962c10-20230325", + version: "18.3.0-next-73b6435ca-20230324", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -9708,11 +9761,11 @@ var roots = new Map(), }.bind(null, findNodeHandle) } }; -var internals$jscomp$inline_1358 = { - bundleType: devToolsConfig$jscomp$inline_1108.bundleType, - version: devToolsConfig$jscomp$inline_1108.version, - rendererPackageName: devToolsConfig$jscomp$inline_1108.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1108.rendererConfig, +var internals$jscomp$inline_1334 = { + bundleType: devToolsConfig$jscomp$inline_1081.bundleType, + version: devToolsConfig$jscomp$inline_1081.version, + rendererPackageName: devToolsConfig$jscomp$inline_1081.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1081.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -9728,26 +9781,26 @@ var internals$jscomp$inline_1358 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1108.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1081.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-175962c10-20230325" + reconcilerVersion: "18.3.0-next-73b6435ca-20230324" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1359 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1335 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1359.isDisabled && - hook$jscomp$inline_1359.supportsFiber + !hook$jscomp$inline_1335.isDisabled && + hook$jscomp$inline_1335.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1359.inject( - internals$jscomp$inline_1358 + (rendererID = hook$jscomp$inline_1335.inject( + internals$jscomp$inline_1334 )), - (injectedHook = hook$jscomp$inline_1359); + (injectedHook = hook$jscomp$inline_1335); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js index 4855422f83..3f7f03eb64 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js @@ -2076,7 +2076,7 @@ function lanesToEventPriority(lanes) { : 8 : 2; } -function shim() { +function shim$1() { throw Error( "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue." ); @@ -3568,7 +3568,7 @@ function findFirstSuspended(row) { for (var node = row; null !== node; ) { if (13 === node.tag) { var state = node.memoizedState; - if (null !== state && (null === state.dehydrated || shim() || shim())) + if (null !== state && (null === state.dehydrated || shim$1() || shim$1())) return node; } else if (19 === node.tag && void 0 !== node.memoizedProps.revealOrder) { if (0 !== (node.flags & 128)) return node; @@ -5595,9 +5595,9 @@ function updateDehydratedSuspenseComponent( renderLanes, null ); - if (shim()) + if (shim$1()) return ( - (suspenseState = shim().digest), + (suspenseState = shim$1().digest), (nextProps = Error( "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering." )), @@ -5676,12 +5676,12 @@ function updateDehydratedSuspenseComponent( null ); } - if (shim()) + if (shim$1()) return ( (workInProgress.flags |= 128), (workInProgress.child = current.child), retryDehydratedSuspenseBoundary.bind(null, current), - shim(), + shim$1(), null ); current = mountSuspensePrimaryChildren(workInProgress, nextProps.children); @@ -7123,7 +7123,7 @@ function commitDeletionEffectsOnFiber( ))); break; case 18: - null !== hostParent && shim(); + null !== hostParent && shim$1(); break; case 4: prevHostParent = hostParent; @@ -7940,6 +7940,28 @@ function recursivelyTraverseReconnectPassiveEffects( parentFiber = parentFiber.sibling; } } +function recursivelyAccumulateSuspenseyCommit(parentFiber) { + if (parentFiber.subtreeFlags & 16777216) + for (parentFiber = parentFiber.child; null !== parentFiber; ) + accumulateSuspenseyCommitOnFiber(parentFiber), + (parentFiber = parentFiber.sibling); +} +function accumulateSuspenseyCommitOnFiber(fiber) { + switch (fiber.tag) { + case 26: + recursivelyAccumulateSuspenseyCommit(fiber); + if (fiber.flags & 16777216 && null !== fiber.memoizedState) + throw Error( + "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue." + ); + break; + case 5: + recursivelyAccumulateSuspenseyCommit(fiber); + break; + default: + recursivelyAccumulateSuspenseyCommit(fiber); + } +} function detachAlternateSiblings(parentFiber) { var previousFiber = parentFiber.alternate; if ( @@ -8313,7 +8335,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { case 1: throw Error("Root did not complete. This is a bug in React."); case 2: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 3: markRootSuspended(root, lanes); @@ -8336,7 +8364,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 4: markRootSuspended(root, lanes); @@ -8380,10 +8414,22 @@ function performConcurrentWorkOnRoot(root, didTimeout) { ); break; } - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; case 5: - commitRootWhenReady(root); + commitRootWhenReady( + root, + didTimeout, + workInProgressRootRecoverableErrors, + workInProgressTransitions, + lanes + ); break; default: throw Error("Unknown root exit status."); @@ -8426,7 +8472,14 @@ function queueRecoverableErrors(errors) { errors ); } -function commitRootWhenReady(root) { +function commitRootWhenReady( + root, + finishedWork, + recoverableErrors, + transitions, + lanes +) { + 0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork); commitRoot( root, workInProgressRootRecoverableErrors, @@ -10398,10 +10451,10 @@ batchedUpdatesImpl = function (fn, a) { } }; var roots = new Map(), - devToolsConfig$jscomp$inline_1187 = { + devToolsConfig$jscomp$inline_1160 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "18.3.0-next-175962c10-20230325", + version: "18.3.0-next-73b6435ca-20230324", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -10430,10 +10483,10 @@ var roots = new Map(), } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1187.bundleType, - version: devToolsConfig$jscomp$inline_1187.version, - rendererPackageName: devToolsConfig$jscomp$inline_1187.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1187.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1160.bundleType, + version: devToolsConfig$jscomp$inline_1160.version, + rendererPackageName: devToolsConfig$jscomp$inline_1160.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1160.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10449,14 +10502,14 @@ var roots = new Map(), return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1187.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1160.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-175962c10-20230325" + reconcilerVersion: "18.3.0-next-73b6435ca-20230324" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { computeComponentStackForErrorReporting: function (reactTag) {