Support setting Context displayName in `@babel/plugin-transform-react-display-name`

Feature Request

• I would like to work on this feature!
• I have bandwidth to work on this feature in the near future. 🙁

Is your feature request related to a problem? Please describe.

Here’s an example of React DevTools with a few context providers and consumers:

You’ll notice that the context consumer and provider rendered under ThemeProvider have generic Context.Consumer and Context.Provider display names, but there’s also a Router.Provider and Router.Consumer in there which are much more clear.

They accomplish this by setting the context’s displayName value.

Here are some test cases:

import React from 'react'

const MyContext = React.createContext()
MyContext.displayName = 'MyContext'

Describe the solution you’d like

I’d like @babel/plugin-transform-react-display-name to support automatically setting the displayName property for contexts.

Describe alternatives you’ve considered

I can set it manually. Not desirable. Or I could write my own babel plugin, but then others wouldn’t benefit from it if they either don’t know about the plugin or can’t install it. Also, this seems to make a lot of sense to be included here to me.

Teachability, Documentation, Adoption, Migration Strategy

No need, it’ll just magically start working and people will be pleasantly surprised.

[existentialism]

Related: https://github.com/babel/babel/issues/8748

[nicolo-ribaudo]

Oh wow, I had no idea that our plugin was so outdated.

@roncohen Would you be open to adding this feature to babel-plugin-add-react-displayname, and then merging babel-plugin-add-react-displayname to the official Babel plugin?