jsx-ast-utils icon indicating copy to clipboard operation
jsx-ast-utils copied to clipboard

Support TemplateLiterals as direct JSX Attributes

Open sebthom opened this issue 10 months ago • 3 comments

I am trying to use eslint-plugin-jsx-a11y to lint Astro components via https://github.com/ota-meshi/eslint-plugin-astro but the JSX parser fails with:

> pnpm eslint src

Oops! Something went wrong! :(

ESLint: 9.18.0

Error: The prop must be a JSXAttribute collected by the AST parser.
Occurred while linting D:\website\src\components\Dropdown.astro:95
Rule: "jsx-a11y/aria-activedescendant-has-tabindex"
    at propName (D:\website\node_modules\.pnpm\[email protected]\node_modules\jsx-ast-utils\lib\propName.js:14:11)
    at D:\website\node_modules\.pnpm\[email protected]\node_modules\jsx-ast-utils\lib\getProp.js:50:58
    at Array.find (<anonymous>)
    at getProp (D:\website\node_modules\.pnpm\[email protected]\node_modules\jsx-ast-utils\lib\getProp.js:43:30)
    at JSXOpeningElement (D:\website\node_modules\.pnpm\[email protected][email protected][email protected]_\node_modules\eslint-plugin-jsx-a11y\lib\rules\aria-activedescendant-has-tabindex.js:38:38)
    at ruleErrorHandler (D:\website\node_modules\.pnpm\[email protected][email protected]\node_modules\eslint\lib\linter\linter.js:1098:48)
    at website\node_modules\.pnpm\[email protected][email protected]\node_modules\eslint\lib\linter\safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (website\node_modules\.pnpm\[email protected][email protected]\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (D:\website\node_modules\.pnpm\[email protected][email protected]\node_modules\eslint\lib\linter\node-event-generator.js:297:26)

The reason is that the JSX variant used by Astro supports TemplateLiterals directly as JSX attributes. I.e. you can declare

<Component prop=`some ${value}` />

instead of

<Component prop={`some ${value}`} />

This syntax is also in scope of the JSX 2.0 proposal https://github.com/facebook/jsx/issues/124

It would be great of jsx-ast-utils could optionally support this syntax.

sebthom avatar Jan 11 '25 13:01 sebthom