JSX Children Analyzer

A utility that analyzes JSX code to extract and categorize different types of children content.

Overview

Build a tool that parses JSX code and reports detailed information about the children found within JSX elements, distinguishing between text content, nested elements, and JavaScript expressions.

Requirements

Parse JSX code and identify all children within JSX elements. For each child found, determine its type and extract relevant information:

• Text children: Plain text content between JSX tags
• Element children: Nested JSX elements (both self-closing and with content)
• Expression children: JavaScript expressions wrapped in curly braces

The analyzer should handle complex scenarios including mixed children types within a single parent element.

Capabilities

Parse text children

• Parses <div>Hello World</div> and reports one text child with value "Hello World" @test
• Parses <p>Line 1\nLine 2</p> and reports one text child with value "Line 1\nLine 2" @test

Parse element children

• Parses <div><span /></div> and reports one element child of type "span" @test
• Parses <div><Component><span /></Component></div> and reports one element child of type "Component" (not counting nested grandchildren) @test

Parse expression children

• Parses <div>{value}</div> and reports one expression child @test
• Parses <div>{x ? <a /> : <b />}</div> and reports one expression child @test

Parse mixed children

• Parses <div>text {expr} <child /></div> and reports three children: one text, one expression, one element @test
• Parses <div>before<span>middle</span>after</div> and reports three children: text "before", element "span", text "after" @test

Implementation

@generates

API

/**
 * Analyzes JSX code and returns information about the top-level JSX element's children.
 *
 * @param {string} jsxCode - The JSX code to analyze (must contain a single JSX element)
 * @returns {Array} Array of children, where each child is an object with:
 *   - type: 'text' | 'element' | 'expression'
 *   - value: string (for text children - the text content)
 *   - elementType: string (for element children - the tag name)
 *   - hasExpression: boolean (for expression children - always true)
 */
function analyzeJSXChildren(jsxCode) {
  // Implementation here
}

module.exports = { analyzeJSXChildren };

Dependencies { .dependencies }

acorn-jsx { .dependency }

Provides JSX parsing support for JavaScript code.

@satisfied-by