From 25050e80272f7d05796251a38a9276263990f763 Mon Sep 17 00:00:00 2001
From: d1y <chenhonzhou@gmail.com>
Date: Wed, 5 Jun 2024 05:04:54 +0800
Subject: [PATCH] vue: Improve syntax highlighting (#11482)

close #8989

Before:

<img width="690" alt="image"
src="https://github.com/zed-industries/zed/assets/45585937/02b6f703-d54a-4e08-82f8-4ed624f37a64">

After:

<img width="571" alt="image"
src="https://github.com/zed-industries/zed/assets/45585937/9abd39d0-c4e8-426e-b0d8-62e26090332a">


Release Notes:

- Improve vue highlighting
---
 extensions/vue/languages/vue/highlights.scm |  4 +-
 extensions/vue/languages/vue/injections.scm | 57 ++++++++++++++++++++-
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/extensions/vue/languages/vue/highlights.scm b/extensions/vue/languages/vue/highlights.scm
index 1a80c84f68..548f57d267 100644
--- a/extensions/vue/languages/vue/highlights.scm
+++ b/extensions/vue/languages/vue/highlights.scm
@@ -7,8 +7,8 @@
 ((tag_name) @type
  (#match? @type "^[A-Z]"))
 
-((directive_name) @keyword
- (#match? @keyword "^v-"))
+(directive_name) @keyword
+(directive_argument) @constant
 
 (start_tag) @tag
 (end_tag) @tag
diff --git a/extensions/vue/languages/vue/injections.scm b/extensions/vue/languages/vue/injections.scm
index 9084e373f2..0cb0ec1804 100644
--- a/extensions/vue/languages/vue/injections.scm
+++ b/extensions/vue/languages/vue/injections.scm
@@ -1,7 +1,60 @@
-(script_element
-  (raw_text) @content
+; <script>
+((script_element
+    (start_tag) @_no_lang
+    (raw_text) @content)
+  (#not-match? @_no_lang "lang=")
   (#set! "language" "javascript"))
 
+; <script lang="js">
+((script_element
+  (start_tag
+    (attribute
+      (attribute_name) @_lang
+      (quoted_attribute_value
+        (attribute_value) @_js)))
+  (raw_text) @content)
+  (#eq? @_lang "lang")
+  (#eq? @_js "js")
+  (#set! "language" "javascript"))
+
+; <script lang="ts">
+((script_element
+  (start_tag
+    (attribute
+      (attribute_name) @_lang
+      (quoted_attribute_value
+        (attribute_value) @_ts)))
+  (raw_text) @content)
+  (#eq? @_lang "lang")
+  (#eq? @_ts "ts")
+  (#set! "language" "typescript"))
+
+; <script lang="tsx">
+; <script lang="jsx">
+; Zed built-in tsx, we mark it as tsx ^:)
+(script_element
+  (start_tag
+    (attribute
+      (attribute_name) @_attr
+      (quoted_attribute_value
+        (attribute_value) @language)))
+  (#eq? @_attr "lang")
+  (#any-of? @language "tsx" "jsx")
+  (raw_text) @content)
+
+
+; {{ }}
+((interpolation
+  (raw_text) @content)
+  (#set! "language" "typescript"))
+
+; v-
+(directive_attribute
+  (quoted_attribute_value
+    (attribute_value) @content
+    (#set! "language" "typescript")))
+
+; TODO: support less/sass/scss
 (style_element
   (raw_text) @content
   (#set! "language" "css"))