After being annoyed with https://github.com/p00f/nvim-ts-rainbow/issues/118 for quite some time, I decided to take a stab at fixing it. I believe I arrived at an implementation that fixes the problem and avoids highlighting props in TSX and JSX tags. Only the tag names and the tag delimiters (<, >, </, and />) are highlighted.
As a bonus, I added support for highlighting self-closing elements. They are a separate treesitter node type that should be taken into account when computing the levels as well.
Verification
I've used the following TSX file:
import type { Component } from "solid-js";
import logo from "./logo.svg";
import styles from "./App.module.css";
const App: Component = () => {
return (
<div class={styles.App} data-comparison={1 < 2 && 1 > 2}>
<header class={styles.header}>
<img src={logo} width={5} class={styles.logo} alt="logo" />
<div>
Another <b>Level</b>
</div>
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<div>
Another{" "}
<b>
level{" "}
<em>
With some em{" "}
<span data-comparison={1 < 2 && 1 > 2}>
And another one {">"} aabc / abc
</span>
<img src="self-closing" />
<span children={<span>Nested</span>} />
</em>
</b>{" "}
of <b>components</b>
</div>
<a
class={styles.link}
href="https://github.com/solidjs/solid"
target="_blank"
rel="noopener noreferrer"
>
Learn Solid
</a>
</header>
</div>
);
};
export default App;
I didn't find any problems there at first glance.
no false-positive highlights for > and < that are not part of JSX elements on lines 7, 22, and 23
self-closing tags are highlighted (lines 9, 25, 26)
props are not highlighted by nvim-ts-rainbow
JSX delimiters are highlighted the same way the element name is
Highlighting jsx files (javascriptreact)
During testing I noticed that JSX in jsx files (the ones with the jsx extension) is not highlighted the same way it is in tsx files. I reported https://github.com/p00f/nvim-ts-rainbow/issues/126 as it seems separate from the problem this PR solves
Hey! Thanks for this awesome plugin!
After being annoyed with https://github.com/p00f/nvim-ts-rainbow/issues/118 for quite some time, I decided to take a stab at fixing it. I believe I arrived at an implementation that fixes the problem and avoids highlighting props in TSX and JSX tags. Only the tag names and the tag delimiters (
<
,>
,</
, and/>
) are highlighted.As a bonus, I added support for highlighting self-closing elements. They are a separate treesitter node type that should be taken into account when computing the levels as well.
Verification
I've used the following TSX file:
I didn't find any problems there at first glance.
>
and<
that are not part of JSX elements on lines 7, 22, and 23nvim-ts-rainbow
Highlighting jsx files (
javascriptreact
)During testing I noticed that JSX in
jsx
files (the ones with thejsx
extension) is not highlighted the same way it is intsx
files. I reported https://github.com/p00f/nvim-ts-rainbow/issues/126 as it seems separate from the problem this PR solves