React Display Names with JSX Runtimes

Ensure a small build helper can transpile React component sources while preserving display names when JSX is compiled in both classic and automatic runtimes.

Capabilities

Classic runtime transformation

• Given source const Button = createReactClass({ render() { return <span/>; } }); export default Button; and runtime set to "classic", the output includes a displayName: "Button" property inside the component factory and JSX compiled using the classic runtime (e.g. React.createElement). @test

Automatic runtime transformation

• Given source export default createReactClass({ render() { return <div/>; } }); and runtime set to "automatic", the output imports from react/jsx-runtime (no React import) and includes displayName: "Card" derived from the provided filename components/Card.jsx. @test

Filename-based default export naming

• When runtime is "classic" and the filename ends with index.jsx, default-exported component factories receive displayName from the parent directory name (e.g. /app/profile/index.jsx yields displayName: "profile"). @test

Implementation

@generates

API

export interface TransformRequest {
  source: string;
  runtime: "classic" | "automatic";
  filename?: string;
}

export function transpileWithDisplayNames(request: TransformRequest): string;

Dependencies { .dependencies }

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

Ensures component factory calls receive displayName during transformation.

@babel/plugin-transform-react-jsx { .dependency }

Compiles JSX for both classic and automatic runtimes.