Skip to content

Add component names to ViewTransition autoName in DEV #33092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

jackpope
Copy link
Contributor

@jackpope jackpope commented May 1, 2025

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.

Screenshot 2025-05-01 at 4 55 12 PM

@react-sizebot
Copy link

Comparing: 0ed6ceb...086e496

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB +0.16% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 528.27 kB 528.27 kB = 93.14 kB 93.14 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.11% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 633.90 kB 633.90 kB = 111.33 kB 111.33 kB
facebook-www/ReactDOM-prod.classic.js = 671.68 kB 671.68 kB = 117.77 kB 117.77 kB
facebook-www/ReactDOM-prod.modern.js = 661.96 kB 661.96 kB = 116.21 kB 116.21 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.36% 794.41 kB 797.24 kB +0.64% 123.56 kB 124.36 kB

Generated by 🚫 dangerJS against 086e496

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants