Support ChainExpression AST node type for optional chaining

[junoatwork]

Symptom:

Began seeing The prop value with an expression type of ChainExpression could not be resolved. Please file issue to get this fixed immediately. in eslint output after upgrading.

ECMAscript Optional Chaining shipped, resulting in various changes to parsers and javascript/typescript tools to support it. Initially there were different, non-standard names for the AST nodes to represent it. Over this year, consensus has settled out, including in the parser that eslint uses, estree (see estree/estree#204 ).

jsx-ast-utils should be updated to support the new AST nodes.

Versions:

[email protected]
[email protected] (via [email protected], [email protected])

Minimal test case

Component.jsx

import React from 'react';

export function Component() {
  const x = {};
  return (
    <div role="button" key={x.y?.z}>
      hi
    </div>
  );
}

.eslintrc

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended'
  ],
  plugins: ['react', 'jsx-a11y'],
}

run

eslint ./Component.jsx

Related:

• The prop value with an expression type of OptionalCallExpression could not be resolved #98
• Add optional chaining estree/estree#204 - parser spec change
• Update: optional chaining support (fixes #12642) eslint/eslint#13416 - support added in eslint 7.5.0
• Bug: eslint-plugin-react-hooks (4.1.2) - The prop value with an expression type of ChainExpression could not be resolved facebook/react#19940 - google search result

Example AST (via console.log):

{
  type: 'JSXExpressionContainer',
  expression: {
    type: 'ChainExpression',
    expression: {
      type: 'MemberExpression',
      object: [Object],
      property: [Object],
      computed: false,
      optional: true,
      range: [Array],
      loc: [Object],
      parent: [Circular]
    },
    range: [ 6299, 6313 ],
    loc: { start: [Object], end: [Object] },
    parent: [Circular]
  },
  range: [ 6298, 6314 ],
  loc: { start: { line: 205, column: 29 }, end: { line: 205, column: 45 } },
  parent: {
    type: 'JSXAttribute',
    name: {
      type: 'JSXIdentifier',
      name: 'href',
      range: [Array],
      loc: [Object],
      parent: [Circular]
    },
    value: [Circular],
    range: [ 6293, 6314 ],
    loc: { start: [Object], end: [Object] },
    parent: {
      type: 'JSXOpeningElement',
      typeParameters: undefined,
      selfClosing: false,
      name: [Object],
      attributes: [Array],
      range: [Array],
      loc: [Object],
      parent: [Object]
    }
  }
}

[ljharb]

See #102.