From d33880c230195603aa80484942e268944ebd6e17 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Mon, 1 Apr 2024 13:50:26 +0200
Subject: [PATCH] Vue: Handle more edge cases

- 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.
- Explicitely mark `=` as an operator token.
- Tests added.
- Ref: https://codeberg.org/forgejo/forgejo/issues/2945
---
 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"},