Add component names to ViewTransition autoName in DEV #33092
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Comparing: e5a8de8...09459d3 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
kassens
reviewed
May 5, 2025
packages/react-reconciler/src/ReactFiberViewTransitionComponent.js
Outdated
Show resolved
Hide resolved
|
The difference between hydrating/client animation names was removed in #33094 so I don't think we need to be concerned about a mismatch in the current implementation. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When debugging ViewTransition, it can be difficult to use the Animations dev tools if you have multiple active ViewTransitions without specific names. We can make this a bit easier by adding the name of the owner component to the generated name in DEV. At least then you can have a high level idea of where the active animations are coming from and if they're relevant to the one you're debugging.
This implementation shortens the name, replaced invalid characters, and surrounds it in underscores as part of the existing generated name. I'm not tied to the specific replacement symbol or wrapper characters. Also if we can't get an owner component name, we could just leave it out instead of supplying the "unknown" string.