[Fiber] Track Appearing Named ViewTransition in the accumulateSuspens…

…eyCommit Phase (#32254) When a named ViewTransition component unmounts in one place and mounts in a different place we need to match these up so we know a pair has been created. Since the unmounts are tracked in the snapshot phase we need some way to track the mounts before that. Originally the way I did that is by reusing the render phase since there was no other phase in the commit before that. However, that's not quite correct. Just because something is visited in render doesn't mean it'll commit. E.g. if that tree ends up suspending or erroring. Which would lead to a false positive on match. The unmount shouldn't animate in that case. (Un)fortunately we have already added a traversal before the snapshot phase for tracking suspensey CSS. The `accumulateSuspenseyCommit` phase. This needs to find new mounts of Suspensey CSS or if there was a reappearing Offscreen boundary it needs to find any Suspensey CSS already inside that tree. This is exactly the same traversal we need to find newly appearing View Transition components. So we can just reuse that. DiffTrain build for [4b3728f](4b3728f)
facebook · Jan 30, 2025 · 084e7f2 · 084e7f2
1 parent 3faa55f
commit 084e7f2
Show file tree

Hide file tree

Showing 23 changed files with 590 additions and 807 deletions.
diff --git a/compiled-rn/VERSION_NATIVE_FB b/compiled-rn/VERSION_NATIVE_FB
@@ -1 +1 @@
-19.1.0-native-fb-2fe5b572-20250130
+19.1.0-native-fb-4b3728f0-20250130
diff --git a/...iled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js b/...iled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<03c740ecbee7841820d9e33fc0220680>>
+ * @generated SignedSource<<72ca7e17e4fb434a3af16bb4f42c2eee>>
  */
 
 "use strict";
@@ -428,5 +428,5 @@ __DEV__ &&
     exports.useFormStatus = function () {
       return resolveDispatcher().useHostTransitionStatus();
     };
-    exports.version = "19.1.0-native-fb-2fe5b572-20250130";
+    exports.version = "19.1.0-native-fb-4b3728f0-20250130";
   })();
diff --git a/...led-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js b/...led-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<90a667a52d5085bf11ffa2f70f4a860c>>
+ * @generated SignedSource<<8def3f8abeae965eb21062caf3412e9b>>
  */
 
 "use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.1.0-native-fb-2fe5b572-20250130";
+exports.version = "19.1.0-native-fb-4b3728f0-20250130";
diff --git a/...n/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js b/...n/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<90a667a52d5085bf11ffa2f70f4a860c>>
+ * @generated SignedSource<<8def3f8abeae965eb21062caf3412e9b>>
  */
 
 "use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.1.0-native-fb-2fe5b572-20250130";
+exports.version = "19.1.0-native-fb-4b3728f0-20250130";
diff --git a/...n/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js b/...n/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js
diff --git a/.../facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js b/.../facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<089cb5066cd3ad0678870d167a0168d5>>
+ * @generated SignedSource<<b88187312b21ec96d233aa6e221126a2>>
  */
 
 /*
@@ -10919,7 +10919,6 @@ var DefaultAsyncDispatcher = {
   workInProgressSuspendedRetryLanes = 0,
   workInProgressRootConcurrentErrors = null,
   workInProgressRootRecoverableErrors = null,
-  workInProgressAppearingViewTransitions = null,
   workInProgressRootDidIncludeRecursiveRenderUpdate = !1,
   globalMostRecentFallbackTime = 0,
   workInProgressRootRenderTargetTime = Infinity,
@@ -11119,7 +11118,6 @@ function performWorkOnRoot(root$jscomp$0, lanes, forceSync) {
               forceSync,
               workInProgressRootRecoverableErrors,
               workInProgressTransitions,
-              workInProgressAppearingViewTransitions,
               workInProgressRootDidIncludeRecursiveRenderUpdate,
               lanes,
               workInProgressDeferredLane,
@@ -11140,7 +11138,6 @@ function performWorkOnRoot(root$jscomp$0, lanes, forceSync) {
           forceSync,
           workInProgressRootRecoverableErrors,
           workInProgressTransitions,
-          workInProgressAppearingViewTransitions,
           workInProgressRootDidIncludeRecursiveRenderUpdate,
           lanes,
           workInProgressDeferredLane,
@@ -11163,7 +11160,6 @@ function commitRootWhenReady(
   finishedWork,
   recoverableErrors,
   transitions,
-  appearingViewTransitions,
   didIncludeRenderPhaseUpdate,
   lanes,
   spawnedLane,
@@ -11178,13 +11174,12 @@ function commitRootWhenReady(
   root.timeoutHandle = -1;
   suspendedCommitReason = finishedWork.subtreeFlags;
   if (
-    (suspendedCommitReason =
-      suspendedCommitReason & 8192 ||
-      16785408 === (suspendedCommitReason & 16785408))
+    suspendedCommitReason & 8192 ||
+    16785408 === (suspendedCommitReason & 16785408)
   )
     if (
       ((suspendedState = { stylesheets: null, count: 0, unsuspend: noop }),
-      suspendedCommitReason && accumulateSuspenseyCommitOnFiber(finishedWork),
+      accumulateSuspenseyCommitOnFiber(finishedWork),
       (suspendedCommitReason = waitForCommitToBeReady()),
       null !== suspendedCommitReason)
     ) {
@@ -11196,7 +11191,6 @@ function commitRootWhenReady(
           lanes,
           recoverableErrors,
           transitions,
-          appearingViewTransitions,
           didIncludeRenderPhaseUpdate,
           spawnedLane,
           updatedLanes,
@@ -11216,7 +11210,6 @@ function commitRootWhenReady(
     lanes,
     recoverableErrors,
     transitions,
-    appearingViewTransitions,
     didIncludeRenderPhaseUpdate,
     spawnedLane,
     updatedLanes,
@@ -11328,7 +11321,6 @@ function prepareFreshStack(root, lanes) {
   workInProgressRootRecoverableErrors = workInProgressRootConcurrentErrors =
     null;
   workInProgressRootDidIncludeRecursiveRenderUpdate = !1;
-  workInProgressAppearingViewTransitions = null;
   0 !== (lanes & 8) && (lanes |= lanes & 32);
   var allEntangledLanes = root.entangledLanes;
   if (0 !== allEntangledLanes)
@@ -11771,7 +11763,6 @@ function commitRoot(
   lanes,
   recoverableErrors,
   transitions,
-  appearingViewTransitions,
   didIncludeRenderPhaseUpdate,
   spawnedLane,
   updatedLanes,
@@ -11820,12 +11811,7 @@ function commitRoot(
       spawnedLane = executionContext;
       executionContext |= 4;
       try {
-        commitBeforeMutationEffects(
-          root,
-          finishedWork,
-          lanes,
-          appearingViewTransitions
-        );
+        commitBeforeMutationEffects(root, finishedWork, lanes);
       } finally {
         (executionContext = spawnedLane),
           (ReactDOMSharedInternals.p = transitions),
@@ -12512,20 +12498,20 @@ function extractEvents$1(
   }
 }
 for (
-  var i$jscomp$inline_1544 = 0;
-  i$jscomp$inline_1544 < simpleEventPluginEvents.length;
-  i$jscomp$inline_1544++
+  var i$jscomp$inline_1543 = 0;
+  i$jscomp$inline_1543 < simpleEventPluginEvents.length;
+  i$jscomp$inline_1543++
 ) {
-  var eventName$jscomp$inline_1545 =
-      simpleEventPluginEvents[i$jscomp$inline_1544],
-    domEventName$jscomp$inline_1546 =
-      eventName$jscomp$inline_1545.toLowerCase(),
-    capitalizedEvent$jscomp$inline_1547 =
-      eventName$jscomp$inline_1545[0].toUpperCase() +
-      eventName$jscomp$inline_1545.slice(1);
+  var eventName$jscomp$inline_1544 =
+      simpleEventPluginEvents[i$jscomp$inline_1543],
+    domEventName$jscomp$inline_1545 =
+      eventName$jscomp$inline_1544.toLowerCase(),
+    capitalizedEvent$jscomp$inline_1546 =
+      eventName$jscomp$inline_1544[0].toUpperCase() +
+      eventName$jscomp$inline_1544.slice(1);
   registerSimpleEvent(
-    domEventName$jscomp$inline_1546,
-    "on" + capitalizedEvent$jscomp$inline_1547
+    domEventName$jscomp$inline_1545,
+    "on" + capitalizedEvent$jscomp$inline_1546
   );
 }
 registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -16015,16 +16001,16 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
     0 === i && attemptExplicitHydrationTarget(target);
   }
 };
-var isomorphicReactPackageVersion$jscomp$inline_1787 = React.version;
+var isomorphicReactPackageVersion$jscomp$inline_1786 = React.version;
 if (
-  "19.1.0-native-fb-2fe5b572-20250130" !==
-  isomorphicReactPackageVersion$jscomp$inline_1787
+  "19.1.0-native-fb-4b3728f0-20250130" !==
+  isomorphicReactPackageVersion$jscomp$inline_1786
 )
   throw Error(
     formatProdErrorMessage(
       527,
-      isomorphicReactPackageVersion$jscomp$inline_1787,
-      "19.1.0-native-fb-2fe5b572-20250130"
+      isomorphicReactPackageVersion$jscomp$inline_1786,
+      "19.1.0-native-fb-4b3728f0-20250130"
     )
   );
 ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16044,24 +16030,24 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
     null === componentOrElement ? null : componentOrElement.stateNode;
   return componentOrElement;
 };
-var internals$jscomp$inline_2243 = {
+var internals$jscomp$inline_2242 = {
   bundleType: 0,
-  version: "19.1.0-native-fb-2fe5b572-20250130",
+  version: "19.1.0-native-fb-4b3728f0-20250130",
   rendererPackageName: "react-dom",
   currentDispatcherRef: ReactSharedInternals,
-  reconcilerVersion: "19.1.0-native-fb-2fe5b572-20250130"
+  reconcilerVersion: "19.1.0-native-fb-4b3728f0-20250130"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_2244 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_2243 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_2244.isDisabled &&
-    hook$jscomp$inline_2244.supportsFiber
+    !hook$jscomp$inline_2243.isDisabled &&
+    hook$jscomp$inline_2243.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_2244.inject(
-        internals$jscomp$inline_2243
+      (rendererID = hook$jscomp$inline_2243.inject(
+        internals$jscomp$inline_2242
       )),
-        (injectedHook = hook$jscomp$inline_2244);
+        (injectedHook = hook$jscomp$inline_2243);
     } catch (err) {}
 }
 exports.createRoot = function (container, options) {
@@ -16155,4 +16141,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
   listenToAllSupportedEvents(container);
   return new ReactDOMHydrationRoot(initialChildren);
 };
-exports.version = "19.1.0-native-fb-2fe5b572-20250130";
+exports.version = "19.1.0-native-fb-4b3728f0-20250130";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		19.1.0-native-fb-2fe5b572-20250130
		19.1.0-native-fb-4b3728f0-20250130