Warn for duplicate ViewTransition names

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -109,6 +109,7 @@ import {
   ForceClientRender,
   DidCapture,
   AffectedParentLayout,
+  ViewTransitionNamedStatic,
 } from './ReactFiberFlags';
 import {
   commitStartTime,
@@ -254,6 +255,10 @@ import {
   pushMutationContext,
   popMutationContext,
 } from './ReactFiberMutationTracking';
+import {
+  trackNamedViewTransition,
+  untrackNamedViewTransition,
+} from './ReactFiberDuplicateViewTransitions';
 
 // Used during the commit phase to track the state of the Offscreen component stack.
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
@@ -738,6 +743,11 @@ function commitLayoutEffectOnFiber(
     }
     case ViewTransitionComponent: {
       if (enableViewTransition) {
+        if (__DEV__) {
+          if (flags & ViewTransitionNamedStatic) {
+            trackNamedViewTransition(finishedWork);
+          }
+        }
         recursivelyTraverseLayoutEffects(
           finishedRoot,
           finishedWork,
@@ -1551,11 +1561,34 @@ function commitDeletionEffectsOnFiber(
       }
       break;
     }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        if (__DEV__) {
+          if (deletedFiber.flags & ViewTransitionNamedStatic) {
+            untrackNamedViewTransition(deletedFiber);
+          }
+        }
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        return;
+      }
+      // Fallthrough
+    }
     case Fragment: {
       if (enableFragmentRefs) {
         if (!offscreenSubtreeWasHidden) {
           safelyDetachRef(deletedFiber, nearestMountedAncestor);
         }
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
+        );
+        return;
       }
       // Fallthrough
     }
@@ -2594,6 +2627,11 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
     }
     case ViewTransitionComponent: {
       if (enableViewTransition) {
+        if (__DEV__) {
+          if (finishedWork.flags & ViewTransitionNamedStatic) {
+            untrackNamedViewTransition(finishedWork);
+          }
+        }
         safelyDetachRef(finishedWork, finishedWork.return);
       }
       recursivelyTraverseDisappearLayoutEffects(finishedWork);
@@ -2803,6 +2841,11 @@ export function reappearLayoutEffects(
           finishedWork,
           includeWorkInProgressEffects,
         );
+        if (__DEV__) {
+          if (flags & ViewTransitionNamedStatic) {
+            trackNamedViewTransition(finishedWork);
+          }
+        }
         safelyAttachRef(finishedWork, finishedWork.return);
         break;
       }

packages/react-reconciler/src/ReactFiberDuplicateViewTransitions.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactInternalTypes';
+import type {ViewTransitionProps} from './ReactFiberViewTransitionComponent';
+import {runWithFiberInDEV} from './ReactCurrentFiber';
+
+// Use in DEV to track mounted named ViewTransitions. This is used to warn for
+// duplicate names. This should technically be tracked per Document because you could
+// have two different documents that can have separate namespaces, but to keep things
+// simple we just use a global Map. Technically it should also include any manually
+// assigned view-transition-name outside React too.
+const mountedNamedViewTransitions: Map<string, Fiber> = __DEV__
+  ? new Map()
+  : (null: any);
+const didWarnAboutName: {[string]: boolean} = __DEV__ ? {} : (null: any);
+
+export function trackNamedViewTransition(fiber: Fiber): void {
+  if (__DEV__) {
+    const name = (fiber.memoizedProps: ViewTransitionProps).name;
+    if (name != null && name !== 'auto') {
+      const existing = mountedNamedViewTransitions.get(name);
+      if (existing !== undefined) {
+        if (existing !== fiber && existing !== fiber.alternate) {
+          if (!didWarnAboutName[name]) {
+            didWarnAboutName[name] = true;
+            const stringifiedName = JSON.stringify(name);
+            runWithFiberInDEV(fiber, () => {
+              console.error(
+                'There are two <ViewTransition name=%s> components with the same name mounted ' +
+                  'at the same time. This is not supported and will cause View Transitions ' +
+                  'to error. Try to use a more unique name e.g. by using a namespace prefix ' +
+                  'and adding the id of an item to the name.',
+                stringifiedName,
+              );
+            });
+            runWithFiberInDEV(existing, () => {
+              console.error(
+                'The existing <ViewTransition name=%s> duplicate has this stack trace.',
+                stringifiedName,
+              );
+            });
+          }
+        }
+      } else {
+        mountedNamedViewTransitions.set(name, fiber);
+      }
+    }
+  }
+}
+
+export function untrackNamedViewTransition(fiber: Fiber): void {
+  if (__DEV__) {
+    const name = (fiber.memoizedProps: ViewTransitionProps).name;
+    if (name != null && name !== 'auto') {
+      const existing = mountedNamedViewTransitions.get(name);
+      if (
+        existing !== undefined &&
+        (existing === fiber || existing === fiber.alternate)
+      ) {
+        mountedNamedViewTransitions.delete(name);
+      }
+    }
+  }
+}