Vue: Handle more edge cases (#950)

Gusted · web-flow · commit 5f83664c2a65 · 2024-04-02T08:02:14.000+11:00
- 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)
diff --git 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
@@ -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
@@ -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"},
