Babel plugin: Set display name
Sets the display name of unnamed decorated functions assigned to a constant reference.
Installation
npm install babel-plugin-set-display-name
Usage
{
"plugins": ["babel-plugin-set-display-name"]
}
Options
If setName
is set to true
, also sets the name
property of the function using Object.defineProperty
. This enables seeing the intended function name in Node.js as well.
{
"plugins": [["babel-plugin-set-display-name", { "setName": true }]]
}
Motivation
Functions are often decorated at the same time they are declared. This is often the case for React components, especially when used with Recompose:
const Div = compose(pure)(({ value }) => <div>{value}</div>)
However, in doing so, all components become unnamed, and error logs mention generic names (e.g., "Component") instead of "Div" in the example above.
This plugin only makes sense during development mode, and applies to any decorated function (not just React components) assigned to a const
reference.
Example
In
export const Div = React.memo(({ value }) => <div>{value}</div>)
Out
export const Div = React.memo(
((name, callable) => {
callable.displayName = name
return callable
})('Div', ({ value }) => <div>{value}</div>),
)