Keep original component name when building to JS

[tuananhlai]

Provide a general summary of the feature here

It'd be helpful if the name of components shown in React DevTools include the original component name. It'd make it easier for developer to debug their application.

https://syueo.csb.app/

🤔 Expected Behavior?

@react-spectrum and @react-aria's components shown in React DevTools has meaningful name.

😯 Current Behavior

@react-spectrum and @react-aria's components shown in React DevTools has auto-generated name. It's quite difficult to tell what component it is from the name alone.

💁 Possible Solution

No response

🔦 Context

I was trying to debug a component created using @react-aria's hooks and components, but the name makes it hard for me to distinguish them from each others.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

These are mapped to hashes in order to avoid name collisions (See parcel-bundler/parcel#6092). I think we could use displayName, but I'm not convinced this is worth maintaining, giving the number of components we have.

EDIT: Although I'm not sure displayName even makes it into the build.

[tuananhlai]

These are mapped to hashes in order to avoid name collisions (See parcel-bundler/parcel#6092). I think we could use displayName, but I'm not convinced this is worth maintaining, giving the number of components we have.

EDIT: Although I'm not sure displayName even makes it into the build.

I think using a hash to avoid name collisions is a good solution, but can we also include the original name in the final result? For example $dfd8c70b928eb1b3$I18nProvider instead of $dfd8c70b928eb1b3$export$1a38b4ad7f578e1d.

[armaanahluwalia]

Hey guys. We're using react-aria-components but I believe for the reasons mentioned above, the components are showing up like $72e60046c03fbe42$var$GridListRow in our React devtools. Apart from looking super strange, it also makes debugging a lot harder for people. Could you at least somehow prefix something like RAC- or something like that so we know its an external library we can kind of ignore? Or if you can think of anything else we can do as users?

[dcastil]

Would it be feasible to switch from Parcel to Rollup to build the react-spectrum packages? I use Rollup to build tailwind-merge (Rollup config) and it preserves all internal names, only adding small bits to variables that would otherwise clash, keeping them human-readable.