tessl/npm-acorn-jsx
tessl install tessl/npm-acorn-jsx@5.3.0JSX parsing plugin for the Acorn JavaScript parser that enables fast parsing of React JSX syntax
Agent Success
Agent success rate when using this tile
76%
Improvement
Agent success rate improvement when using this tile compared to baseline
1.69x
Baseline
Agent success rate without this tile
45%
task.mdevals/scenario-10/
JSX Attribute Expression Validator
Build a tool that analyzes JSX code to extract and validate expression container attributes. The tool should parse JSX elements and identify attributes that use JavaScript expressions (e.g., onClick={handler}, style={styleObject}), then provide analysis about these expressions.
Dependencies { .dependencies }
acorn-jsx { .dependency }
Provides JSX parsing capabilities for JavaScript code.
Requirements
Your implementation should:
- Parse JSX code and extract all attributes that use expression containers (attributes with values wrapped in
{}) - For each expression container attribute found, extract:
- The attribute name
- The expression type (e.g., Identifier, MemberExpression, ObjectExpression, etc.)
- The source text of the expression
- Generate a summary report listing all expression container attributes grouped by element
Input Format
The input will be valid JavaScript code containing JSX elements.
Output Format
Return a JSON object with the following structure:
{
"elements": [
{
"elementName": "Component",
"attributes": [
{
"name": "onClick",
"expressionType": "Identifier",
"expression": "handler"
}
]
}
]
}Test Cases
Test Case 1: Simple expression container attributes @test
Input:
const element = <button onClick={handleClick} disabled={isDisabled}>Click me</button>;Expected output:
{
"elements": [
{
"elementName": "button",
"attributes": [
{
"name": "onClick",
"expressionType": "Identifier",
"expression": "handleClick"
},
{
"name": "disabled",
"expressionType": "Identifier",
"expression": "isDisabled"
}
]
}
]
}Test Case 2: Complex expressions in attributes @test
Input:
const component = <div style={theme.colors.primary} onClick={() => console.log('clicked')}>Content</div>;Expected output:
{
"elements": [
{
"elementName": "div",
"attributes": [
{
"name": "style",
"expressionType": "MemberExpression",
"expression": "theme.colors.primary"
},
{
"name": "onClick",
"expressionType": "ArrowFunctionExpression",
"expression": "() => console.log('clicked')"
}
]
}
]
}Test Case 3: Object literal in attribute @test
Input:
const element = <Component config={{enabled: true, count: 5}} />;Expected output:
{
"elements": [
{
"elementName": "Component",
"attributes": [
{
"name": "config",
"expressionType": "ObjectExpression",
"expression": "{enabled: true, count: 5}"
}
]
}
]
}Implementation
Create a file parser.js that exports a function analyzeExpressionAttributes(code) which takes JSX code as a string and returns the analysis results as a JSON object.
Create a file parser.test.js that contains the test cases above.
