Support TemplateLiterals as direct JSX Attributes

[sebthom]

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\jsx-ast-utils@3.3.5\node_modules\jsx-ast-utils\lib\propName.js:14:11)
    at D:\website\node_modules\.pnpm\jsx-ast-utils@3.3.5\node_modules\jsx-ast-utils\lib\getProp.js:50:58
    at Array.find (<anonymous>)
    at getProp (D:\website\node_modules\.pnpm\jsx-ast-utils@3.3.5\node_modules\jsx-ast-utils\lib\getProp.js:43:30)
    at JSXOpeningElement (D:\website\node_modules\.pnpm\eslint-plugin-jsx-a11y@6.10.2_eslint@9.18.0_jiti@2.4.2_\node_modules\eslint-plugin-jsx-a11y\lib\rules\aria-activedescendant-has-tabindex.js:38:38)
    at ruleErrorHandler (D:\website\node_modules\.pnpm\eslint@9.18.0_jiti@2.4.2\node_modules\eslint\lib\linter\linter.js:1098:48)
    at website\node_modules\.pnpm\eslint@9.18.0_jiti@2.4.2\node_modules\eslint\lib\linter\safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (website\node_modules\.pnpm\eslint@9.18.0_jiti@2.4.2\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (D:\website\node_modules\.pnpm\eslint@9.18.0_jiti@2.4.2\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 facebook/jsx#124

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

[ljharb]

That isn’t a proposal, it’s an RFC from 4 years ago with very little likelihood of advancement.

I’m happy to add support for it as something Astro-specific, but the PR would need to include tests using Astro.

[sebthom]

I fixed/worked around it locally with pnpm patch like this:

diff --git a/lib/propName.js b/lib/propName.js
index 5057886ea651b6d89bb7b85364b43736aedb3f1f..9d5c5abebbf531a57ef80f25a01d8df1c8bc8a7d 100644
--- a/lib/propName.js
+++ b/lib/propName.js
@@ -10,7 +10,7 @@ exports.default = propName;
function propName() {
  var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

-  if (!prop.type || prop.type !== 'JSXAttribute') {
+  if (!prop.type || (prop.type !== 'JSXAttribute' && prop.type !== 'AstroTemplateLiteralAttribute')) {
    throw new Error('The prop must be a JSXAttribute collected by the AST parser.');
  }

[ljharb]

The fix isn’t the hard part, unfortunately; the tests are.