JSX Token Type Inspector

Build a tool that parses JSX code and reports statistics about the custom JSX token types encountered during parsing.

Requirements

Your tool should accept JSX source code as input and analyze the token types generated by the parser. The output should provide counts of each JSX-specific token type.

Implement a function analyzeJsxTokens(sourceCode) that:

1. Parses the provided JSX source code
2. Tracks all JSX-specific token types encountered during tokenization
3. Returns an object containing counts for each JSX token type

The return value should be an object with the following structure:

{
  jsxName: <number>,      // Count of JSX name tokens
  jsxText: <number>,      // Count of JSX text tokens
  jsxTagStart: <number>,  // Count of JSX tag start tokens
  jsxTagEnd: <number>     // Count of JSX tag end tokens
}

Test Cases

• Given the input <div>Hello</div>, the function returns { jsxName: 2, jsxText: 1, jsxTagStart: 2, jsxTagEnd: 2 } @test
• Given the input <Component attr="value" />, the function returns { jsxName: 2, jsxText: 0, jsxTagStart: 1, jsxTagEnd: 1 } @test
• Given the input <Parent><Child /></Parent>, the function returns { jsxName: 3, jsxText: 0, jsxTagStart: 3, jsxTagEnd: 3 } @test

Implementation

@generates

API

/**
 * Analyzes JSX source code and returns counts of each JSX-specific token type.
 *
 * @param {string} sourceCode - The JSX source code to analyze
 * @returns {Object} An object with counts for jsxName, jsxText, jsxTagStart, and jsxTagEnd tokens
 */
function analyzeJsxTokens(sourceCode) {
  // IMPLEMENTATION HERE
}

module.exports = { analyzeJsxTokens };

Dependencies { .dependencies }

acorn { .dependency }

JavaScript parser that provides the base parsing functionality.

acorn-jsx { .dependency }

JSX parsing plugin for Acorn that provides JSX-specific token types.