Add displayNames to React components #2132
Conversation
🦋 Changeset detectedLatest commit: 0b22c3e The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 0b22c3e:
|
| @@ -142,3 +142,7 @@ export const ClassNames: React.AbstractComponent< | |||
| } | |||
| return ele | |||
| }) | |||
|
|
|||
| if (process.env.NODE_ENV !== 'production') { | |||
| ClassNames.displayName = 'EmotionClassNames' | |||
There was a problem hiding this comment.
Shouldn't this be just ClassNames? It would reflect the actual name and match the inferred name if only this would be inferrable here.
| @@ -136,3 +136,7 @@ export let Global: React.AbstractComponent< | |||
|
|
|||
| return null | |||
| }) | |||
|
|
|||
| if (process.env.NODE_ENV !== 'production') { | |||
| Global.displayName = 'EmotionGlobal' | |||
There was a problem hiding this comment.
Same as here: https://github.com/emotion-js/emotion/pull/2132/files#r530285457
Please note that I'm open for discussion about this.
There was a problem hiding this comment.
I prefixed it with Emotion for following reasons:
- It shows up when I search for
emotionin React devtools which might help me find emotion-related components. - It is more specific than
Global. If someone new to a codebase sees this component in the devtools and searches forEmotionGlobalon Google, they find the correct docs immediately. - It doesn't seem to have any disadvantages. When I search for
Global, I still find this component.
But I don't have a big opinion on this. I'm happy to change them to their exact name if you think it makes more sense.
packages/react/src/context.js
Outdated
| let withEmotionCache = function withEmotionCache<Props, Ref: React.Ref<*>>( | ||
| func: (props: Props, cache: EmotionCache, ref: Ref) => React.Node | ||
| ): React.AbstractComponent<Props> { | ||
| let withEmotionCache = function withEmotionCache< |
There was a problem hiding this comment.
I don't think changes here are required - withEmotionCache is purely internal and you have already covered all cases that use it.
What:
Add displayNames to Global, ClassNames and component returned from
withEmotionCacheto prevent components being labeled as Anonymous. Display names are not added in production.Why:
Easier for devs to orient themselves in React devtools and tests, also easier to find Emotion-related components through search.
How:
Manually attaching
displayNameto Global and ClassNames components and the component returned from withEmotionCache.Note to
withEmotionCache:In React devtools this component will appear as
MyComponentwith the modifiersForwardRefandWithEmotionCache.Component in React Components tab:
Component in detail view of React Components tab:
Checklist: