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

Author: Gusted

Diff for: 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 for: 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 for: 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"},