Update JSX component highlighting to use semantic tag scope

Kunall Banerjee created 1 month ago

Changes JSX component identifiers from generic `@type` to the more
specific `@tag.component` scope in both JavaScript and TypeScript
syntax highlighting. This allows themes to style React/JSX components
distinctly from regular types.

The only thing to be aware of is the **visual change for JSX/TSX
users**: components that were previously teal (via `@type`) will now
inherit whatever their theme's `tag` color is. For themes like Ayu,
Gruvbox, and One (perhaps other built-in themes too?) that define `tag`
with a color, components will pick that up. For themes that leave `tag`
unstyled (including the fallback theme), components will lose their teal
color. That’s a deliberate trade-off with these changes.

Change summary

crates/languages/src/javascript/highlights.scm | 18 +++++++++---------
crates/languages/src/tsx/highlights.scm        | 18 +++++++++---------
2 files changed, 18 insertions(+), 18 deletions(-)

Detailed changes

crates/languages/src/javascript/highlights.scm

@@ -328,26 +328,26 @@
 ; JSX elements
 (jsx_opening_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_self_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_opening_element

crates/languages/src/tsx/highlights.scm

@@ -389,26 +389,26 @@
 
 (jsx_opening_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_self_closing_element
   [
-    (identifier) @type
+    (identifier) @tag.component
     (member_expression
-      object: (identifier) @type
-      property: (property_identifier) @type)
+      object: (identifier) @tag.component
+      property: (property_identifier) @tag.component)
   ])
 
 (jsx_opening_element