Default Export Display Name Transformer

Ensure default-exported React components receive a displayName derived from their file path.

Capabilities

Infers displayName from filename

• A default-exported React component without a displayName gains one matching the file stem (e.g., Card.js => "Card"). @test

Uses parent folder for index files

• When the file name is index (e.g., components/index.jsx), the injected displayName matches the parent folder name. @test

Respects existing displayName

• If a component already defines displayName, the transform leaves it unchanged even when the file or folder implies a different name. @test

Implementation

@generates

API

/**
 * Adds displayName to default-exported React components based on the file path.
 *
 * @param {string} sourceCode - JavaScript/JSX source containing a default export.
 * @param {string} filePath - Path to the source file (used to derive the displayName).
 * @returns {string} Babel-transformed source with injected displayName when missing.
 */
export function addDisplayNamesForDefaultExport(sourceCode, filePath);

Dependencies { .dependencies }

@babel/core { .dependency }

Runs the transform pipeline for the provided source.

@babel/plugin-transform-react-display-name { .dependency }

Injects React displayName values, including inferring a default export name from the file name and the parent directory when the file is named like index.js.