From 5f83664c2a65729309867921ba2b61c4e78dc9a7 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Mon, 1 Apr 2024 23:02:14 +0200
Subject: [PATCH] Vue: Handle more edge cases (#950)

- The parsing of `v-` directives expected that this always ended in
`">`, however it is possible that there are other attributes after an
`v-` directive also it made the assumption that there couldn't be any
spaces in the value of the directive. Therefore it could result in
incorrect lexing where almost the whole file could be marked as an
LiteralString.
- Handle `-` in HTML element names.
- Explicitly mark `=` as an operator token.
- Tests added.
- Ref: https://codeberg.org/forgejo/forgejo/issues/2945

## Before
![Screen Shot 2024-04-01 at 13 58
18](https://github.com/alecthomas/chroma/assets/25481501/e33d87fe-7788-40ca-a3c5-bbd964b91cb5)

## After
![Screen Shot 2024-04-01 at 23 01
17](https://github.com/alecthomas/chroma/assets/25481501/b6b0fec0-6dfc-4dfe-93cd-8a7c42a05ef7)
---
 lexers/embedded/vue.xml      | 10 ++++++----
 lexers/testdata/vue.actual   |  6 ++++++
 lexers/testdata/vue.expected | 28 ++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/lexers/embedded/vue.xml b/lexers/embedded/vue.xml
index 751802075..ec3508359 100644
--- a/lexers/embedded/vue.xml
+++ b/lexers/embedded/vue.xml
@@ -83,9 +83,10 @@
           <token type="LiteralString"/>
         </bygroups>
       </rule>
-      <rule pattern="(:[\S]+)(=&#34;[\S]+&#34;)">
+      <rule pattern="(:[\S]+)(=)(&#34;[\S]+&#34;)">
         <bygroups>
           <token type="NameTag"/>
+          <token type="Operator"/>
           <token type="LiteralString"/>
         </bygroups>
       </rule>
@@ -104,9 +105,10 @@
           <token type="Punctuation"/>
         </bygroups>
       </rule>
-      <rule pattern="(v-[\w]+)(=&#34;[\S]+&#34;)(&gt;)">
+      <rule pattern="(v-[\w]+)(=)(&#34;[\S ]+&#34;)(&gt;|\s)">
         <bygroups>
           <token type="NameTag"/>
+          <token type="Operator"/>
           <token type="LiteralString"/>
           <token type="Punctuation"/>
         </bygroups>
@@ -258,14 +260,14 @@
       </rule>
     </state>
     <state name="vue">
-      <rule pattern="(&lt;)([\w]+)">
+      <rule pattern="(&lt;)([\w-]+)">
         <bygroups>
           <token type="Punctuation"/>
           <token type="NameTag"/>
         </bygroups>
         <push state="tag"/>
       </rule>
-      <rule pattern="(&lt;)(/)([\w]+)(&gt;)">
+      <rule pattern="(&lt;)(/)([\w-]+)(&gt;)">
         <bygroups>
           <token type="Punctuation"/>
           <token type="Punctuation"/>
diff --git a/lexers/testdata/vue.actual b/lexers/testdata/vue.actual
index 237970d7f..2ca8bdd5c 100644
--- a/lexers/testdata/vue.actual
+++ b/lexers/testdata/vue.actual
@@ -1,5 +1,11 @@
 <template>
     <button class="button">This is MyButton</button>
+    <ul-extendded v-if="examples.length" bordered>
+        <li
+            v-for="example in examples"
+            :key="`${example.id}`"
+        />
+    </ul-extendded>
 </template>
 
 <script>
diff --git a/lexers/testdata/vue.expected b/lexers/testdata/vue.expected
index 8136f53d7..418a2d7f7 100644
--- a/lexers/testdata/vue.expected
+++ b/lexers/testdata/vue.expected
@@ -18,6 +18,34 @@
   {"type":"Punctuation","value":"\u003c/"},
   {"type":"NameTag","value":"button"},
   {"type":"Punctuation","value":"\u003e"},
+  {"type":"Text","value":"\n    "},
+  {"type":"Punctuation","value":"\u003c"},
+  {"type":"NameTag","value":"ul-extendded"},
+  {"type":"Text","value":" "},
+  {"type":"NameTag","value":"v-if"},
+  {"type":"Operator","value":"="},
+  {"type":"LiteralString","value":"\"examples.length\""},
+  {"type":"Punctuation","value":" "},
+  {"type":"NameAttribute","value":"bordered"},
+  {"type":"Punctuation","value":"\u003e"},
+  {"type":"Text","value":"\n        "},
+  {"type":"Punctuation","value":"\u003c"},
+  {"type":"NameTag","value":"li"},
+  {"type":"Text","value":"\n            "},
+  {"type":"NameTag","value":"v-for"},
+  {"type":"Operator","value":"="},
+  {"type":"LiteralString","value":"\"example in examples\""},
+  {"type":"Punctuation","value":"\n"},
+  {"type":"Text","value":"            "},
+  {"type":"NameTag","value":":key"},
+  {"type":"Operator","value":"="},
+  {"type":"LiteralString","value":"\"`${example.id}`\""},
+  {"type":"Text","value":"\n        "},
+  {"type":"Punctuation","value":"/\u003e"},
+  {"type":"Text","value":"\n    "},
+  {"type":"Punctuation","value":"\u003c/"},
+  {"type":"NameTag","value":"ul-extendded"},
+  {"type":"Punctuation","value":"\u003e"},
   {"type":"Text","value":"\n"},
   {"type":"Punctuation","value":"\u003c/"},
   {"type":"NameTag","value":"template"},