or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-babel-plugin-transform-react-display-name

Babel plugin that automatically adds displayName properties to React class components created with createClass

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-plugin-transform-react-display-name@6.25.x

To install, run

npx @tessl/cli install tessl/npm-babel-plugin-transform-react-display-name@6.25.0

index.mddocs/

Babel Plugin Transform React Display Name

Babel plugin that automatically adds displayName properties to React class components created using React.createClass (React <= 15) or createReactClass (React 16+). This plugin intelligently infers display names from variable assignments, object properties, export default declarations, or file names, helping developers with React DevTools debugging by ensuring all class components have meaningful display names.

Package Information

  • Package Name: babel-plugin-transform-react-display-name
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-plugin-transform-react-display-name

Core Imports

For Babel configuration usage:

// .babelrc
{
  "plugins": ["transform-react-display-name"]
}

For programmatic usage:

const transformReactDisplayName = require("babel-plugin-transform-react-display-name");

ES Modules:

import transformReactDisplayName from "babel-plugin-transform-react-display-name";

Basic Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-react-display-name"]
}

Via CLI

babel --plugins transform-react-display-name script.js

Via Node API

const babel = require("babel-core");

babel.transform(code, {
  plugins: ["transform-react-display-name"]
});

Transformation Examples

Input:

var Foo = React.createClass({}); // React <= 15
var Bar = createReactClass({});  // React 16+

export default React.createClass({});

const components = {
  Header: createReactClass({}),
  Footer: React.createClass({})
};

Output:

var Foo = React.createClass({
  displayName: "Foo"
});
var Bar = createReactClass({
  displayName: "Bar"
});

export default React.createClass({
  displayName: "ComponentName" // inferred from filename
});

const components = {
  Header: createReactClass({
    displayName: "Header"
  }),
  Footer: React.createClass({
    displayName: "Footer"
  })
};

Capabilities

Plugin Factory Function

The main export is a Babel plugin factory function that creates the transformation plugin.

/**
 * Babel plugin factory function that creates a plugin to automatically add displayName to React class components
 * @param {Object} babel - Babel API object containing types utilities
 * @param {Object} babel.types - Babel types utility (aliased as 't')
 * @returns {Object} Babel plugin object with visitor methods
 */
function transformReactDisplayName({ types: t }): BabelPlugin;

interface BabelPlugin {
  visitor: {
    ExportDefaultDeclaration: (path: NodePath, state: PluginState) => void;
    CallExpression: (path: NodePath) => void;
  };
}

Usage Example:

const babel = require("babel-core");
const plugin = require("babel-plugin-transform-react-display-name");

const result = babel.transform(sourceCode, {
  plugins: [plugin]
});

Transformation Behavior

Display Name Inference

The plugin automatically infers display names from various code patterns:

  • Variable declarations: var ComponentName = createClass({}) → displayName: "ComponentName"
  • Object properties: { ComponentName: createClass({}) } → displayName: "ComponentName"
  • Assignment expressions: obj.ComponentName = createClass({}) → displayName: "ComponentName"
  • Export default with filename: export default createClass({}) → displayName: "[filename]"
  • Index files: For index.js files, uses parent directory name as display name

Additional transformation examples:

// Assignment expressions
foo = createReactClass({});
// → foo = createReactClass({ displayName: "foo" });

// Object properties
({
  Header: createReactClass({})
});
// → ({ Header: createReactClass({ displayName: "Header" }) });

// Nested member expressions
obj.ComponentName = React.createClass({});
// → obj.ComponentName = React.createClass({ displayName: "ComponentName" });

Safety Checks

  • Existing displayName: Skips transformation if displayName property already exists
  • Valid patterns: Only transforms valid React.createClass and createReactClass calls
  • Single argument: Only processes calls with exactly one object argument
  • Object expressions: Only transforms calls with object literal arguments

Supported Patterns

The plugin recognizes these React class creation patterns:

  • React.createClass({}) - Legacy React <= 15 syntax
  • createReactClass({}) - React 16+ standalone package syntax

Both patterns support the same display name inference logic and safety checks.

Types

// Internal visitor context (provided by Babel)
interface NodePath {
  node: Object;              // Current AST node
  find: (callback: (path: NodePath) => boolean) => NodePath;
  isAssignmentExpression: () => boolean;
  isObjectProperty: () => boolean;
  isVariableDeclarator: () => boolean;
  isStatement: () => boolean;
}

interface PluginState {
  file: {
    opts: {
      filename: string;  // Current file path
      basename: string;  // Current file basename
    };
  };
}

// AST Node types handled by the plugin
interface CallExpression {
  type: "CallExpression";
  callee: MemberExpression | Identifier;
  arguments: ObjectExpression[];
}

interface ObjectExpression {
  type: "ObjectExpression";
  properties: ObjectProperty[];
}

interface ObjectProperty {
  type: "ObjectProperty";
  key: Identifier | Literal;
  value: any;
}

Error Handling

The plugin includes built-in safety mechanisms:

  • Invalid calls: Silently ignores non-createClass function calls
  • Wrong arguments: Skips calls without exactly one argument
  • Non-object arguments: Ignores calls where the first argument is not an object literal
  • Existing displayName: Preserves existing displayName properties without modification
  • Invalid identifiers: Only processes valid JavaScript identifiers for display names

The plugin is designed to be safe and non-destructive, only adding displayName properties when it can safely infer appropriate names.