JSX Attribute Validator

Build a validation tool that analyzes JSX code and detects invalid attribute expressions.

Requirements

Your tool should parse JSX source code and identify attributes that have empty expression containers. When such invalid syntax is found, the tool should report an error with a descriptive message indicating the problem.

The validator should:

• Accept JSX source code as input
• Parse the JSX syntax to build an abstract syntax tree
• Detect attributes with empty expression containers (e.g., attribute={})
• Return validation results indicating whether the code is valid or contains errors
• For invalid code, provide an error message that clearly describes the issue

Implementation

@generates

Implement a function validateJSX that takes a string of JSX source code and returns a validation result object with the following structure:

{
  valid: boolean,      // true if no errors, false otherwise
  error: string | null // error message if invalid, null otherwise
}

Test Cases

• When given JSX code with an empty expression in an attribute (e.g., <div attr={} />), the validator returns valid: false with an appropriate error message @test
• When given valid JSX code with proper attribute expressions (e.g., <div attr={value} />), the validator returns valid: true with no error @test
• When given JSX code with empty expression containers in children (e.g., <div>{}</div>), the validator returns valid: true since this is allowed in JSX @test

API

/**
 * Validates JSX source code for empty expression containers in attributes
 *
 * @param {string} jsxCode - The JSX source code to validate
 * @returns {Object} Validation result with 'valid' boolean and 'error' string
 */
function validateJSX(jsxCode) {
  // Implementation here
}

module.exports = { validateJSX };

Dependencies { .dependencies }

acorn { .dependency }

JavaScript parser that provides the base parsing functionality.

acorn-jsx { .dependency }

JSX parsing plugin for Acorn that adds JSX syntax support and validation.