react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Keep original component name when building to JS

Open tuananhlai opened this issue 1 year ago • 3 comments

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/

スクリーンショット 2023-09-28 9 40 15

🤔 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

tuananhlai avatar Sep 28 '23 00:09 tuananhlai

These are mapped to hashes in order to avoid name collisions (See https://github.com/parcel-bundler/parcel/issues/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.

reidbarber avatar Sep 29 '23 16:09 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.

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.

tuananhlai avatar Sep 30 '23 03:09 tuananhlai

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?

armaanahluwalia avatar Feb 07 '24 18:02 armaanahluwalia

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.

dcastil avatar Aug 19 '24 12:08 dcastil