JSX Nesting Depth Analyzer

Build a tool that analyzes JSX code to determine the maximum nesting depth of JSX elements within JavaScript expressions.

Problem Description

JSX allows JavaScript expressions to be embedded within elements using curly braces {...}, and those expressions can themselves contain JSX elements. This creates the possibility of deeply nested structures like:

<div>
  {condition ? <span>{<Component />}</span> : null}
</div>

Your task is to create a parser that can analyze JSX code and report the maximum depth of this kind of nesting.

Requirements

Create a module that exports a function analyzeJSXNesting(code) which:

1. Takes a string containing JSX code as input
2. Parses the JSX code to build an Abstract Syntax Tree (AST)
3. Traverses the AST to find all JSX elements that are nested within JavaScript expressions that are themselves within JSX elements
4. Returns an object with the following properties:
   • maxDepth: The maximum nesting depth found (integer)
   • locations: An array of objects describing each deeply nested location, where each object contains:
     • depth: The nesting depth at this location
     • line: The line number where the nested JSX starts
     • elementName: The name of the JSX element (e.g., "div", "Component")

Nesting Depth Definition

• A top-level JSX element has depth 0
• A JSX element inside an expression container (within another JSX element) has depth 1
• A JSX element inside an expression container that is itself inside a JSX element within an expression container has depth 2
• And so on...

Test Cases

• Given code <div>hello</div>, returns {maxDepth: 0, locations: []} @test
• Given code <div>{<span>nested</span>}</div>, returns {maxDepth: 1, locations: [{depth: 1, line: 1, elementName: "span"}]} @test
• Given code <div>{condition ? <span>yes</span> : <span>no</span>}</div>, returns {maxDepth: 1, locations: [{depth: 1, line: 1, elementName: "span"}, {depth: 1, line: 1, elementName: "span"}]} @test
• Given code <div>{<span>{<em>deep</em>}</span>}</div>, returns {maxDepth: 2, locations: [{depth: 1, line: 1, elementName: "span"}, {depth: 2, line: 1, elementName: "em"}]} @test

Implementation

@generates

API

/**
 * Analyzes JSX code to find the maximum nesting depth of JSX elements within expressions.
 *
 * @param {string} code - The JSX code to analyze
 * @returns {Object} Analysis results with maxDepth and locations properties
 */
function analyzeJSXNesting(code) {
  // Implementation here
}

module.exports = { analyzeJSXNesting };

Dependencies { .dependencies }

acorn { .dependency }

Provides JavaScript parsing functionality.

@satisfied-by

acorn-jsx { .dependency }

Extends Acorn parser with JSX parsing support.

@satisfied-by