Missing name for this in <this.Component />

[backus]

This is sort of a clone of #307. The fix for that PR fixed <this.state.Component /> but not <this.Component />

What version of TypeScript are you using?

2.3.2

What version of typescript-eslint-parser are you using?

4.0.0

What code were you trying to parse?

import * as React from "react";

export class Comment extends React.Component {
  render() {
    return (
      <div>
        <this.Author />
      </div>
    );
  }

  Author = () => {
    return <span>John Doe</span>;
  };
}

What did you expect to happen?

To have "name": "this" on JSXIdentifier.

What happened?

The identifier for this does not have a name:

"object": {
  "type": "JSXIdentifier",
  "range": [
    1,
    5
  ],
  "loc": {
    "start": {
      "line": 1,
      "column": 1
    },
    "end": {
      "line": 1,
      "column": 5
    }
  }
}

Script I used to get the AST:

var parser = require("typescript-eslint-parser");

const parsed = parser.parse("<this.Foo />", {
  loc: true,
  range: true,
  tokens: true,
  comment: true,
  useJSXTextNode: true,
  ecmaFeatures: { jsx: true },
  // Override logger function with noop,
  // to avoid unsupported version errors being logged
  loggerFn: () => {}
});

delete parsed.tokens;

console.log(JSON.stringify(parsed));

[soda0289]

Thanks for the report. I can reproduce this problem.