[utils] Add support for forwardRef components in getDisplayName #14429
Conversation
| @@ -51,6 +51,7 @@ module.exports = { | |||
| 'react/no-find-dom-node': 'off', | |||
|
|
|||
| 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want. | |||
| 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], | |||
There was a problem hiding this comment.
This is also required for react-dev-tools to generate a meaningful display name for forwardRef components. The correct exception would be to allow them only in forwardRef.
eps1lon
force-pushed
the
feat/utils/getDisplayName/enable-forwardRef
branch
from
e1f5ebd to
6a03bd6
Compare
| @@ -28,13 +28,13 @@ module.exports = [ | |||
| name: 'The size of the @material-ui/core modules', | |||
| webpack: true, | |||
| path: 'packages/material-ui/build/index.js', | |||
| limit: '91.3 KB', | |||
| limit: '91.2 KB', | |||
| @@ -28,7 +28,6 @@ describe('<MenuList />', () => { | |||
| }); | |||
|
|
|||
| it('should render a List', () => { | |||
| assert.strictEqual(wrapper.name(), 'List'); | |||
There was a problem hiding this comment.
Not sure why you would test here for that specific component. Would ul be enough or some html element that matches those semantics?
| }, | ||
| { | ||
| name: 'The size of the @material-ui/styles modules', | ||
| webpack: true, | ||
| path: 'packages/material-ui-styles/build/index.js', | ||
| limit: '16.3 KB', | ||
| limit: '16.4 KB', |
There was a problem hiding this comment.
For some reason @material-ui/utils appears in the styles bundle. Tree shaking is working fine but the dependency is not removed in a production bundle. It doesn't appear in the core bundle though.
There was a problem hiding this comment.
It does not appear in the esm bundle. I would keep this for now and revisit what bundles we monitor for size later.
Cherry picked logic from reacts
shared/getComponentNameto handleforwardRefcomponents.Allows to skip setting
displayNamemanually which also affected production bundles. We can remove this logic while retaining a meaningfuldisplayNamein a dev environment.I suspect that this also helps folks that used display name selectors in enzyme and problematic testing habits. They should now get original e.g.
Backdropfunction component instead of theforwardRefwrapper.