From a23313928b138b65bb4c4d1912f4bfd6ff5bd8d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robin=20Pf=C3=A4ffle?=
<67913738+rpfaeffle@users.noreply.github.com>
Date: Mon, 12 Feb 2024 18:59:19 +0100
Subject: [PATCH] Add JSX and TSX syntax highlighting (#7686)
This PR fixes / adds support for syntax highlighting in JSX and TSX.
Previously to this PR the syntax highlighting was not really working.
HTML tags have not been displayed as such.
After:
Release Notes:
- Added support for JSX and TSX syntax highlighting
---
.../src/languages/javascript/highlights.scm | 12 +-
crates/zed/src/languages/tsx/highlights.scm | 232 +++++++++++++++++-
2 files changed, 242 insertions(+), 2 deletions(-)
mode change 120000 => 100644 crates/zed/src/languages/tsx/highlights.scm
diff --git a/crates/zed/src/languages/javascript/highlights.scm b/crates/zed/src/languages/javascript/highlights.scm
index 36ab21ca1ec854566ad716a13f5ab5725fa1acc9..42088f78472453cab656e315b02a52951735732b 100644
--- a/crates/zed/src/languages/javascript/highlights.scm
+++ b/crates/zed/src/languages/javascript/highlights.scm
@@ -214,4 +214,14 @@
"type"
"readonly"
"override"
-] @keyword
\ No newline at end of file
+] @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)
diff --git a/crates/zed/src/languages/tsx/highlights.scm b/crates/zed/src/languages/tsx/highlights.scm
deleted file mode 120000
index 226302a5d1605c7110145345be31d8e0cd96818a..0000000000000000000000000000000000000000
--- a/crates/zed/src/languages/tsx/highlights.scm
+++ /dev/null
@@ -1 +0,0 @@
-../typescript/highlights.scm
\ No newline at end of file
diff --git a/crates/zed/src/languages/tsx/highlights.scm b/crates/zed/src/languages/tsx/highlights.scm
new file mode 100644
index 0000000000000000000000000000000000000000..c73284226b6ee3c450a6b3c18b57848f315e9af6
--- /dev/null
+++ b/crates/zed/src/languages/tsx/highlights.scm
@@ -0,0 +1,231 @@
+; Variables
+
+(identifier) @variable
+
+; Properties
+
+(property_identifier) @property
+
+; Function and method calls
+
+(call_expression
+ function: (identifier) @function)
+
+(call_expression
+ function: (member_expression
+ property: (property_identifier) @function.method))
+
+; Function and method definitions
+
+(function
+ name: (identifier) @function)
+(function_declaration
+ name: (identifier) @function)
+(method_definition
+ name: (property_identifier) @function.method)
+
+(pair
+ key: (property_identifier) @function.method
+ value: [(function) (arrow_function)])
+
+(assignment_expression
+ left: (member_expression
+ property: (property_identifier) @function.method)
+ right: [(function) (arrow_function)])
+
+(variable_declarator
+ name: (identifier) @function
+ value: [(function) (arrow_function)])
+
+(assignment_expression
+ left: (identifier) @function
+ right: [(function) (arrow_function)])
+
+; Special identifiers
+
+((identifier) @constructor
+ (#match? @constructor "^[A-Z]"))
+
+((identifier) @type
+ (#match? @type "^[A-Z]"))
+(type_identifier) @type
+(predefined_type) @type.builtin
+
+([
+ (identifier)
+ (shorthand_property_identifier)
+ (shorthand_property_identifier_pattern)
+ ] @constant
+ (#match? @constant "^_*[A-Z_][A-Z\\d_]*$"))
+
+; Literals
+
+(this) @variable.special
+(super) @variable.special
+
+[
+ (null)
+ (undefined)
+] @constant.builtin
+
+[
+ (true)
+ (false)
+] @boolean
+
+(comment) @comment
+
+[
+ (string)
+ (template_string)
+] @string
+
+(regex) @string.regex
+(number) @number
+
+; Tokens
+
+[
+ ";"
+ "?."
+ "."
+ ","
+ ":"
+] @punctuation.delimiter
+
+[
+ "-"
+ "--"
+ "-="
+ "+"
+ "++"
+ "+="
+ "*"
+ "*="
+ "**"
+ "**="
+ "/"
+ "/="
+ "%"
+ "%="
+ "<"
+ "<="
+ "<<"
+ "<<="
+ "="
+ "=="
+ "==="
+ "!"
+ "!="
+ "!=="
+ "=>"
+ ">"
+ ">="
+ ">>"
+ ">>="
+ ">>>"
+ ">>>="
+ "~"
+ "^"
+ "&"
+ "|"
+ "^="
+ "&="
+ "|="
+ "&&"
+ "||"
+ "??"
+ "&&="
+ "||="
+ "??="
+] @operator
+
+[
+ "("
+ ")"
+ "["
+ "]"
+ "{"
+ "}"
+] @punctuation.bracket
+
+[
+ "as"
+ "async"
+ "await"
+ "break"
+ "case"
+ "catch"
+ "class"
+ "const"
+ "continue"
+ "debugger"
+ "default"
+ "delete"
+ "do"
+ "else"
+ "export"
+ "extends"
+ "finally"
+ "for"
+ "from"
+ "function"
+ "get"
+ "if"
+ "import"
+ "in"
+ "instanceof"
+ "let"
+ "new"
+ "of"
+ "return"
+ "satisfies"
+ "set"
+ "static"
+ "switch"
+ "target"
+ "throw"
+ "try"
+ "typeof"
+ "var"
+ "void"
+ "while"
+ "with"
+ "yield"
+] @keyword
+
+(template_substitution
+ "${" @punctuation.special
+ "}" @punctuation.special) @embedded
+
+(type_arguments
+ "<" @punctuation.bracket
+ ">" @punctuation.bracket)
+
+; Keywords
+
+[ "abstract"
+ "declare"
+ "enum"
+ "export"
+ "implements"
+ "interface"
+ "keyof"
+ "namespace"
+ "private"
+ "protected"
+ "public"
+ "type"
+ "readonly"
+ "override"
+] @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)