[Fiber] render boundary in fallback if it contains a new stylesheet d…

…uring sync update (#28965) Updates Suspensey instances and resources to preload even during urgent updates and to potentially suspend. The current implementation is unchanged for transitions but for sync updates if there is a suspense boundary above the resource/instance it will be rendered in fallback mode instead. Note: This behavior is not what we want for images once we make them suspense enabled. We will need to have forked behavior here to distinguish between stylesheets which should never commit when not loaded and images which should commit after a small delay DiffTrain build for [217b2cc](217b2cc)
facebook · May 21, 2024 · ca580d7 · ca580d7
1 parent bf98342
commit ca580d7
Show file tree

Hide file tree

Showing 21 changed files with 617 additions and 591 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-bf046e86531141d0eb9ffc1165f775a57ffb00f5
+217b2ccf160d7594a926d276a75c7312b299be4d
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -60,7 +60,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = '19.0.0-www-classic-bcc8c760';
+var ReactVersion = '19.0.0-www-classic-27733b1d';
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -2454,6 +2454,7 @@ var getInstanceFromScope = shim$1;
 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 preloadResource = shim;
 var suspendResource = shim;
 
 var pooledTransform = new Transform();
@@ -22576,7 +22577,7 @@ function finishConcurrentRender(root, exitStatus, finishedWork, lanes) {
 function commitRootWhenReady(root, finishedWork, recoverableErrors, transitions, didIncludeRenderPhaseUpdate, lanes, spawnedLane) {
   // TODO: Combine retry throttling with Suspensey commits. Right now they run
   // one after the other.
-  if (includesOnlyNonUrgentLanes(lanes)) {
+  if (finishedWork.subtreeFlags & ShouldSuspendCommit) {
     // 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.
@@ -23403,9 +23404,16 @@ function renderRootConcurrent(root, lanes) {
 
           case SuspendedOnInstanceAndReadyToContinue:
             {
+              var resource = null;
+
               switch (workInProgress.tag) {
-                case HostComponent:
                 case HostHoistable:
+                  {
+                    resource = workInProgress.memoizedState;
+                  }
+                // intentional fallthrough
+
+                case HostComponent:
                 case HostSingleton:
                   {
                     // Before unwinding the stack, check one more time if the
@@ -23416,7 +23424,7 @@ function renderRootConcurrent(root, lanes) {
                     var hostFiber = workInProgress;
                     var type = hostFiber.type;
                     var props = hostFiber.pendingProps;
-                    var isReady = preloadInstance(type, props);
+                    var isReady = resource ? preloadResource(resource) : preloadInstance(type, props);
 
                     if (isReady) {
                       // The data resolved. Resume the work loop as if nothing

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -60,7 +60,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = '19.0.0-www-modern-23dbd06a';
+var ReactVersion = '19.0.0-www-modern-bddd4eac';
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -2453,6 +2453,7 @@ var getInstanceFromScope = shim$1;
 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 preloadResource = shim;
 var suspendResource = shim;
 
 var pooledTransform = new Transform();
@@ -21935,7 +21936,7 @@ function finishConcurrentRender(root, exitStatus, finishedWork, lanes) {
 function commitRootWhenReady(root, finishedWork, recoverableErrors, transitions, didIncludeRenderPhaseUpdate, lanes, spawnedLane) {
   // TODO: Combine retry throttling with Suspensey commits. Right now they run
   // one after the other.
-  if (includesOnlyNonUrgentLanes(lanes)) {
+  if (finishedWork.subtreeFlags & ShouldSuspendCommit) {
     // 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.
@@ -22762,9 +22763,16 @@ function renderRootConcurrent(root, lanes) {
 
           case SuspendedOnInstanceAndReadyToContinue:
             {
+              var resource = null;
+
               switch (workInProgress.tag) {
-                case HostComponent:
                 case HostHoistable:
+                  {
+                    resource = workInProgress.memoizedState;
+                  }
+                // intentional fallthrough
+
+                case HostComponent:
                 case HostSingleton:
                   {
                     // Before unwinding the stack, check one more time if the
@@ -22775,7 +22783,7 @@ function renderRootConcurrent(root, lanes) {
                     var hostFiber = workInProgress;
                     var type = hostFiber.type;
                     var props = hostFiber.pendingProps;
-                    var isReady = preloadInstance(type, props);
+                    var isReady = resource ? preloadResource(resource) : preloadInstance(type, props);
 
                     if (isReady) {
                       // The data resolved. Resume the work loop as if nothing

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -9253,7 +9253,8 @@ function commitRootWhenReady(
   lanes,
   spawnedLane
 ) {
-  0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork);
+  finishedWork.subtreeFlags & 8192 &&
+    accumulateSuspenseyCommitOnFiber(finishedWork);
   commitRoot(
     root,
     recoverableErrors,
@@ -9563,7 +9564,8 @@ function renderRootConcurrent(root, lanes) {
             throwAndUnwindWorkLoop(root, lanes, thrownValue);
             break;
           case 2:
-            if (isThenableResolved(thrownValue)) {
+            var thenable = thrownValue;
+            if (isThenableResolved(thenable)) {
               workInProgressSuspendedReason = 0;
               workInProgressThrownValue = null;
               replaySuspendedUnitOfWork(lanes);
@@ -9575,7 +9577,7 @@ function renderRootConcurrent(root, lanes) {
                 (workInProgressSuspendedReason = 7);
               ensureRootIsScheduled(root);
             };
-            thrownValue.then(lanes, lanes);
+            thenable.then(lanes, lanes);
             break a;
           case 3:
             workInProgressSuspendedReason = 7;
@@ -9593,11 +9595,14 @@ function renderRootConcurrent(root, lanes) {
                 throwAndUnwindWorkLoop(root, lanes, thrownValue));
             break;
           case 5:
+            thenable = null;
             switch (workInProgress.tag) {
-              case 5:
               case 26:
+                thenable = workInProgress.memoizedState;
+              case 5:
               case 27:
                 lanes = workInProgress;
+                if (thenable) throw Error(formatProdErrorMessage(442));
                 workInProgressSuspendedReason = 0;
                 workInProgressThrownValue = null;
                 var sibling = lanes.sibling;
@@ -10625,19 +10630,19 @@ var slice = Array.prototype.slice,
     };
     return Text;
   })(React.Component),
-  devToolsConfig$jscomp$inline_1132 = {
+  devToolsConfig$jscomp$inline_1137 = {
     findFiberByHostInstance: function () {
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-classic-60c86372",
+    version: "19.0.0-www-classic-231f67a4",
     rendererPackageName: "react-art"
   };
-var internals$jscomp$inline_1340 = {
-  bundleType: devToolsConfig$jscomp$inline_1132.bundleType,
-  version: devToolsConfig$jscomp$inline_1132.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1132.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1132.rendererConfig,
+var internals$jscomp$inline_1349 = {
+  bundleType: devToolsConfig$jscomp$inline_1137.bundleType,
+  version: devToolsConfig$jscomp$inline_1137.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1137.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1137.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -10654,26 +10659,26 @@ var internals$jscomp$inline_1340 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1132.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1137.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-60c86372"
+  reconcilerVersion: "19.0.0-www-classic-231f67a4"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1341 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1350 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1341.isDisabled &&
-    hook$jscomp$inline_1341.supportsFiber
+    !hook$jscomp$inline_1350.isDisabled &&
+    hook$jscomp$inline_1350.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1341.inject(
-        internals$jscomp$inline_1340
+      (rendererID = hook$jscomp$inline_1350.inject(
+        internals$jscomp$inline_1349
       )),
-        (injectedHook = hook$jscomp$inline_1341);
+        (injectedHook = hook$jscomp$inline_1350);
     } 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
@@ -8781,7 +8781,8 @@ function commitRootWhenReady(
   lanes,
   spawnedLane
 ) {
-  0 === (lanes & 42) && accumulateSuspenseyCommitOnFiber(finishedWork);
+  finishedWork.subtreeFlags & 8192 &&
+    accumulateSuspenseyCommitOnFiber(finishedWork);
   commitRoot(
     root,
     recoverableErrors,
@@ -9091,7 +9092,8 @@ function renderRootConcurrent(root, lanes) {
             throwAndUnwindWorkLoop(root, lanes, thrownValue);
             break;
           case 2:
-            if (isThenableResolved(thrownValue)) {
+            var thenable = thrownValue;
+            if (isThenableResolved(thenable)) {
               workInProgressSuspendedReason = 0;
               workInProgressThrownValue = null;
               replaySuspendedUnitOfWork(lanes);
@@ -9103,7 +9105,7 @@ function renderRootConcurrent(root, lanes) {
                 (workInProgressSuspendedReason = 7);
               ensureRootIsScheduled(root);
             };
-            thrownValue.then(lanes, lanes);
+            thenable.then(lanes, lanes);
             break a;
           case 3:
             workInProgressSuspendedReason = 7;
@@ -9121,11 +9123,14 @@ function renderRootConcurrent(root, lanes) {
                 throwAndUnwindWorkLoop(root, lanes, thrownValue));
             break;
           case 5:
+            thenable = null;
             switch (workInProgress.tag) {
-              case 5:
               case 26:
+                thenable = workInProgress.memoizedState;
+              case 5:
               case 27:
                 lanes = workInProgress;
+                if (thenable) throw Error(formatProdErrorMessage(442));
                 workInProgressSuspendedReason = 0;
                 workInProgressThrownValue = null;
                 var sibling = lanes.sibling;
@@ -10104,19 +10109,19 @@ var slice = Array.prototype.slice,
     };
     return Text;
   })(React.Component),
-  devToolsConfig$jscomp$inline_1097 = {
+  devToolsConfig$jscomp$inline_1102 = {
     findFiberByHostInstance: function () {
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-modern-94d3d045",
+    version: "19.0.0-www-modern-2946f075",
     rendererPackageName: "react-art"
   };
-var internals$jscomp$inline_1327 = {
-  bundleType: devToolsConfig$jscomp$inline_1097.bundleType,
-  version: devToolsConfig$jscomp$inline_1097.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1097.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1097.rendererConfig,
+var internals$jscomp$inline_1336 = {
+  bundleType: devToolsConfig$jscomp$inline_1102.bundleType,
+  version: devToolsConfig$jscomp$inline_1102.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1102.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1102.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -10133,26 +10138,26 @@ var internals$jscomp$inline_1327 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1097.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1102.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-94d3d045"
+  reconcilerVersion: "19.0.0-www-modern-2946f075"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1328 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1337 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1328.isDisabled &&
-    hook$jscomp$inline_1328.supportsFiber
+    !hook$jscomp$inline_1337.isDisabled &&
+    hook$jscomp$inline_1337.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1328.inject(
-        internals$jscomp$inline_1327
+      (rendererID = hook$jscomp$inline_1337.inject(
+        internals$jscomp$inline_1336
       )),
-        (injectedHook = hook$jscomp$inline_1328);
+        (injectedHook = hook$jscomp$inline_1337);
     } catch (err) {}
 }
 var Path = Mode$1.Path;