JSX Component Counter

Build a tool that analyzes JSX code to count different types of JSX elements and extract useful information about component usage.

Requirements

Your tool should parse JSX code and extract the following statistics:

1. Element Counts: Count the total number of JSX opening elements (both custom components and HTML elements). Count each opening tag once, including self-closing tags.
2. Component vs HTML Tags: Distinguish between custom components (PascalCase names like Button, UserProfile) and standard HTML tags (lowercase names like div, span)
3. Self-Closing Elements: Count elements that are self-closing (e.g., <img />, <Component />)
4. Element Names: Extract a sorted list of unique element names used in the code

The tool should handle:

• Standard JSX syntax including nested elements
• Self-closing tags
• Both function and class component syntax

Input/Output

Your solution should export a function that:

• Takes a string of JSX source code as input
• Returns an object with statistics about the JSX elements found

Test Cases

• Given JSX code with a single div element, returns count of 1 element and identifies it as an HTML tag @test
• Given JSX code with nested elements (div containing span and p), returns correct total count and element breakdown @test
• Given JSX code with custom components (UserProfile and Button), correctly identifies them as components (not HTML tags) @test
• Given JSX code with self-closing elements (<img />, <input />), correctly counts self-closing elements @test
• Given JSX code with mixed HTML and custom components, correctly categorizes each type @test

@generates

API

/**
 * Analyzes JSX source code and returns statistics about JSX elements
 *
 * @param {string} jsxCode - The JSX source code to analyze
 * @returns {Object} Statistics object containing:
 *   - totalElements: number of JSX elements found
 *   - htmlTags: number of standard HTML tags (lowercase)
 *   - customComponents: number of custom components (PascalCase)
 *   - selfClosing: number of self-closing elements
 *   - uniqueElements: array of unique element names
 */
function analyzeJSX(jsxCode) {
  // Implementation here
}

module.exports = { analyzeJSX };

Dependencies { .dependencies }

@babel/parser { .dependency }

Provides JavaScript and JSX parsing capabilities to convert source code into an abstract syntax tree (AST) for analysis.

@babel/traverse { .dependency }

Provides utilities to traverse and analyze the AST nodes to extract JSX element information.