JSX Spread Attribute Analyzer

Build a utility that analyzes JSX code to extract and report on spread attributes usage.

Overview

Your task is to create a tool that parses JSX source code and identifies all spread attributes ({...expression}) used in JSX elements. The tool should extract the spread expressions and report their positions and the elements they appear in.

Requirements

Input

The tool should accept a string containing JSX source code.

Output

The tool should return an array of objects, where each object contains:

• elementName: The name of the JSX element containing the spread attribute (string)
• spreadExpression: The expression inside the spread (string, without the {...} wrapper)
• line: The line number where the spread attribute appears (number)

Behavior

1. Parse the provided JSX code to generate an Abstract Syntax Tree (AST)
2. Traverse the AST to find all JSX elements
3. For each element, identify any spread attributes in its opening element
4. Extract the spread expression text and element information
5. Return the results as an array of objects

Test Cases

• Given JSX <div {...props} />, it returns an array with one entry containing elementName "div", spreadExpression "props", and the line number @test
• Given JSX <Component {...config} className="test" />, it correctly identifies the spread attribute before the regular attribute @test
• Given JSX with multiple spreads <div {...a} {...b} />, it returns two separate entries for both spread attributes @test
• Given JSX with nested elements where the inner element has a spread <outer><inner {...props} /></outer>, it correctly identifies the spread in the inner element @test

Implementation

@generates

API

/**
 * Analyzes JSX code to find all spread attributes
 *
 * @param {string} jsxCode - The JSX source code to analyze
 * @returns {Array<{elementName: string, spreadExpression: string, line: number}>} Array of spread attribute information
 */
function analyzeSpreadAttributes(jsxCode) {
  // Implementation here
}

module.exports = { analyzeSpreadAttributes };

Dependencies { .dependencies }

acorn-jsx { .dependency }

Provides JSX parsing support for generating ASTs from JSX code.