From 8f40bcc86c4b177660ab9051102d9c4ac9837bf2 Mon Sep 17 00:00:00 2001
From: chbk <chbk.git@gmail.com>
Date: Fri, 21 Feb 2025 22:54:16 +0100
Subject: [PATCH] Improve JavaScript and TypeScript syntax highlighting
 (#25328)

Release Notes:

  - Improved JavaScript and TypeScript syntax highlighting.

| Zed 0.174.6 | With this PR |
| --- | --- |
|
![Image](https://github.com/user-attachments/assets/a64f0abf-3b4e-4369-80c5-1d1381c925fc)
|
![Image](https://github.com/user-attachments/assets/f8224243-f4ab-4af9-8dd8-5062dd7ea743)
|

- `regex_flags`: `keyword.regex`, see the [Regex
PR](https://github.com/zed-industries/zed/pull/25332) for other Regex
scopes
- `@`: `punctuation.special`, as in Python
- `jsx_text`: `text.jsx`
- `=`: `operator` -> `punctuation.jsx.delimiter`, `punctuation` as in
[VS
Code](https://github.com/microsoft/vscode/blob/0fe195613ed9901f669cd0f799fe807f0189d029/extensions/html/syntaxes/html.tmLanguage.json#L78)
and
[Atom](https://github.com/atom/language-html/blob/ee750a014a003c3d6f10b91e3cd5f9bfa0f051e6/grammars/tree-sitter-html.cson#L47)
- added `jsx` scope to target JSX tokens specifically

```javascript
/**
 * @keyword comment
 */
@log
class X {
  render() {
    return (
      <div jsx_attribute="value">
        <Input onKeyPress={super.bind(this)}/>
        jsx_text
      </div>
    );
  }
}
const IDENTIFIER = true
```

---------

Co-authored-by: Marshall Bowers <git@maxdeviant.com>
---
 .../languages/src/javascript/highlights.scm   | 21 ++++++++++++-------
 crates/languages/src/tsx/highlights.scm       | 21 ++++++++++++-------
 .../languages/src/typescript/highlights.scm   |  3 +++
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/crates/languages/src/javascript/highlights.scm b/crates/languages/src/javascript/highlights.scm
index 711e2e5d48759f..9986390b4e4c71 100644
--- a/crates/languages/src/javascript/highlights.scm
+++ b/crates/languages/src/javascript/highlights.scm
@@ -82,6 +82,7 @@
 (escape_sequence) @string.escape
 
 (regex) @string.regex
+(regex_flags) @keyword.regex
 (number) @number
 
 ; Tokens
@@ -210,6 +211,8 @@
   "<" @punctuation.bracket
   ">" @punctuation.bracket)
 
+(decorator "@" @punctuation.special)
+
 ; Keywords
 
 [ "abstract"
@@ -229,11 +232,13 @@
 ] @keyword
 
 ; JSX elements
-(jsx_opening_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
-(jsx_closing_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
-(jsx_self_closing_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
-
-(jsx_attribute (property_identifier) @attribute)
-(jsx_opening_element (["<" ">"]) @punctuation.bracket)
-(jsx_closing_element (["</" ">"]) @punctuation.bracket)
-(jsx_self_closing_element (["<" "/>"]) @punctuation.bracket)
+(jsx_opening_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+(jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+(jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+
+(jsx_attribute (property_identifier) @attribute.jsx)
+(jsx_opening_element (["<" ">"]) @punctuation.bracket.jsx)
+(jsx_closing_element (["</" ">"]) @punctuation.bracket.jsx)
+(jsx_self_closing_element (["<" "/>"]) @punctuation.bracket.jsx)
+(jsx_attribute "=" @punctuation.delimiter.jsx)
+(jsx_text) @text.jsx
diff --git a/crates/languages/src/tsx/highlights.scm b/crates/languages/src/tsx/highlights.scm
index 323f58c5577f30..d21f0c2147b33f 100644
--- a/crates/languages/src/tsx/highlights.scm
+++ b/crates/languages/src/tsx/highlights.scm
@@ -86,6 +86,7 @@
 (escape_sequence) @string.escape
 
 (regex) @string.regex
+(regex_flags) @keyword.regex
 (number) @number
 
 ; Tokens
@@ -221,6 +222,8 @@
   "<" @punctuation.bracket
   ">" @punctuation.bracket)
 
+(decorator "@" @punctuation.special)
+
 ; Keywords
 
 [ "abstract"
@@ -240,11 +243,13 @@
 ] @keyword
 
 ; JSX elements
-(jsx_opening_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
-(jsx_closing_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
-(jsx_self_closing_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
-
-(jsx_attribute (property_identifier) @attribute)
-(jsx_opening_element (["<" ">"]) @punctuation.bracket)
-(jsx_closing_element (["</" ">"]) @punctuation.bracket)
-(jsx_self_closing_element (["<" "/>"]) @punctuation.bracket)
+(jsx_opening_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+(jsx_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+(jsx_self_closing_element (identifier) @tag.jsx (#match? @tag.jsx "^[a-z][^.]*$"))
+
+(jsx_attribute (property_identifier) @attribute.jsx)
+(jsx_opening_element (["<" ">"]) @punctuation.bracket.jsx)
+(jsx_closing_element (["</" ">"]) @punctuation.bracket.jsx)
+(jsx_self_closing_element (["<" "/>"]) @punctuation.bracket.jsx)
+(jsx_attribute "=" @punctuation.delimiter.jsx)
+(jsx_text) @text.jsx
diff --git a/crates/languages/src/typescript/highlights.scm b/crates/languages/src/typescript/highlights.scm
index 091ddfed9d02e9..bccb22fa9c743e 100644
--- a/crates/languages/src/typescript/highlights.scm
+++ b/crates/languages/src/typescript/highlights.scm
@@ -110,6 +110,7 @@
 (escape_sequence) @string.escape
 
 (regex) @string.regex
+(regex_flags) @keyword.regex
 (number) @number
 
 ; Tokens
@@ -199,6 +200,8 @@
   "<" @punctuation.bracket
   ">" @punctuation.bracket)
 
+(decorator "@" @punctuation.special)
+
 ; Keywords
 
 [