babel-plugin-set-display-name

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>),
)