JSX Attribute Analyzer

Build a tool that parses JSX code and extracts detailed information about element attributes.

Requirements

Your tool should parse JSX source code and generate a report containing:

1. Attribute Inventory: For each JSX element in the code, list all attributes present on that element
2. Attribute Types: Classify each attribute by its value type:
   • string-literal for string values like href="value"
   • expression for JavaScript expressions like onClick={handler}
   • jsx-element for JSX element values like icon=<Icon />
   • spread for spread attributes like {...props}
   • boolean for attributes with no value like disabled
3. Element Names: Include the name of each JSX element being analyzed

Input

Your tool should accept a string containing JSX source code.

Output

Return an array of objects, where each object represents a JSX element and contains:

• elementName: The name of the JSX element (string)
• attributes: An array of attribute objects, each with:
  • name: The attribute name (string, or null for spread attributes)
  • type: One of: "string-literal", "expression", "jsx-element", "spread", or "boolean"

Example

Given this input:

const app = <Button
  label="Click me"
  onClick={handleClick}
  icon=<Icon />
  {...otherProps}
  disabled
/>;

Your tool should return:

[
  {
    "elementName": "Button",
    "attributes": [
      {"name": "label", "type": "string-literal"},
      {"name": "onClick", "type": "expression"},
      {"name": "icon", "type": "jsx-element"},
      {"name": null, "type": "spread"},
      {"name": "disabled", "type": "boolean"}
    ]
  },
  {
    "elementName": "Icon",
    "attributes": []
  }
]

Test Cases

• Given JSX with string literal attributes, it correctly identifies them as string-literal type @test
• Given JSX with expression container attributes, it correctly identifies them as expression type @test
• Given JSX with spread attributes, it correctly identifies them as spread type with null name @test
• Given JSX with boolean attributes (no value), it correctly identifies them as boolean type @test

Implementation

@generates

API

/**
 * Analyzes JSX source code and extracts attribute information
 *
 * @param {string} sourceCode - JSX source code to analyze
 * @returns {Array<{elementName: string, attributes: Array<{name: string|null, type: string}>}>}
 */
function analyzeJSXAttributes(sourceCode) {
  // Implementation here
}

module.exports = { analyzeJSXAttributes };

Dependencies { .dependencies }

acorn-jsx { .dependency }

Provides JSX parsing support for generating abstract syntax trees.