JSX is not highlighted in files with jsx extension

[Gelio]

While working on #125 I noticed that JSX elements are not highlighted in files with the jsx extension (filetype=javascriptreact).

Steps to reproduce

For a file test.jsx:

import styles from "./App.module.css";

const App = () => {
  return (
    <div class={styles.App} data-comparison={1 < 2 && 1 > 2}>
      <header class={1 + 2 * (1 + 2) && styles.header}>
        <span>I should be highlighted</span>
      </header>
    </div>
  );
};

export default App;

with extended_mode enabled, the JSX tags are not highlighted by nvim-ts-rainbow. Parentheses are highlighted by nvim-ts-rainbow and have different colors.

Expected behavior

JSX tags are highlighted by nvim-ts-rainbow.

This works well for files with the tsx extension (see #125), but jsx extension is ignored.

Here is the expected look of this file (I did :set filetype=typescriptreact to achieve it):

Investigation

I did some digging around and noticed that the parsername for the javascriptreact filetype is javascript. For tsx and typescriptreact, it is tsx.

The jsx-highlighting queries are defined for the jsx parser. It may be the case that the jsx parser is not used for the jsx files because it uses the javascript parser now.

Thus, I believe we should remove any code that references the jsx parser and instead add highlighting jsx to the javascript parser.

[p00f]

Thus, I believe we should remove any code that references the jsx parser and instead add highlighting jsx to the javascript parser.

Can you do this? I'm not the best person to test this, someone who actually uses it can see all the edge cases.

Thanks!

[Gelio]

Sure, I'll see what I can do later today or tomorrow