fix: wrong vue-directives regexp (#5586)

ajaxorg · Jun 10, 2024 · 5f89a33 · 5f89a33
1 parent 6e217a7
commit 5f89a33
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 6 deletions.
diff --git a/demo/kitchen-sink/docs/vue.vue b/demo/kitchen-sink/docs/vue.vue
@@ -15,6 +15,18 @@ Things to verify:
         @click.prevent="onClick('hello')">
       Hello
     </span>
+    <router-link v-bind:to="item.url"/>
+    <!-- v-bind with dynamic key -->
+    <div v-bind:[key]="value"></div>
+
+    <!-- v-bind shorthand with dynamic key -->
+    <div :[key]="value"></div>
+
+    <!-- v-on with dynamic event -->
+    <div v-on:[event]="handler"></div>
+
+    <!-- v-on shorthand with dynamic event -->
+    <div @[event]="handler"></div>
   </div>
 </template>
 

diff --git a/src/mode/_test/tokens_vue.json b/src/mode/_test/tokens_vue.json
@@ -115,6 +115,118 @@
   ["meta.tag.punctuation.end-tag-open.xml","</"],
   ["meta.tag.tag-name.xml","span"],
   ["meta.tag.punctuation.tag-close.xml",">"]
+],[
+   "start",
+  ["text.xml","    "],
+  ["meta.tag.punctuation.tag-open.xml","<"],
+  ["meta.tag.tag-name.xml","router-link"],
+  ["text.tag-whitespace.xml"," "],
+  ["entity.other.attribute-name.xml","v-"],
+  ["entity.other.attribute-name.xml","bind"],
+  ["entity.other.attribute-name.xml",":to"],
+  ["punctuation.separator.key-value.xml","="],
+  ["string","\""],
+  ["identifier","item"],
+  ["punctuation.operator","."],
+  ["identifier","url"],
+  ["string","\""],
+  ["meta.tag.punctuation.tag-close.xml","/>"]
+],[
+   "start",
+  ["text.xml","    "],
+  ["comment.start.xml","<!--"],
+  ["comment.xml"," v-bind with dynamic key "],
+  ["comment.end.xml","-->"]
+],[
+   "start",
+  ["text.xml","    "],
+  ["meta.tag.punctuation.tag-open.xml","<"],
+  ["meta.tag.tag-name.xml","div"],
+  ["text.tag-whitespace.xml"," "],
+  ["entity.other.attribute-name.xml","v-"],
+  ["entity.other.attribute-name.xml","bind"],
+  ["entity.other.attribute-name.xml",":[key]"],
+  ["punctuation.separator.key-value.xml","="],
+  ["string","\""],
+  ["identifier","value"],
+  ["string","\""],
+  ["meta.tag.punctuation.tag-close.xml",">"],
+  ["meta.tag.punctuation.end-tag-open.xml","</"],
+  ["meta.tag.tag-name.xml","div"],
+  ["meta.tag.punctuation.tag-close.xml",">"]
+],[
+   "start"
+],[
+   "start",
+  ["text.xml","    "],
+  ["comment.start.xml","<!--"],
+  ["comment.xml"," v-bind shorthand with dynamic key "],
+  ["comment.end.xml","-->"]
+],[
+   "start",
+  ["text.xml","    "],
+  ["meta.tag.punctuation.tag-open.xml","<"],
+  ["meta.tag.tag-name.xml","div"],
+  ["text.tag-whitespace.xml"," "],
+  ["punctuation.separator.key-value.xml",":"],
+  ["entity.other.attribute-name.xml","[key]"],
+  ["punctuation.separator.key-value.xml","="],
+  ["string","\""],
+  ["identifier","value"],
+  ["string","\""],
+  ["meta.tag.punctuation.tag-close.xml",">"],
+  ["meta.tag.punctuation.end-tag-open.xml","</"],
+  ["meta.tag.tag-name.xml","div"],
+  ["meta.tag.punctuation.tag-close.xml",">"]
+],[
+   "start"
+],[
+   "start",
+  ["text.xml","    "],
+  ["comment.start.xml","<!--"],
+  ["comment.xml"," v-on with dynamic event "],
+  ["comment.end.xml","-->"]
+],[
+   "start",
+  ["text.xml","    "],
+  ["meta.tag.punctuation.tag-open.xml","<"],
+  ["meta.tag.tag-name.xml","div"],
+  ["text.tag-whitespace.xml"," "],
+  ["entity.other.attribute-name.xml","v-"],
+  ["entity.other.attribute-name.xml","on"],
+  ["entity.other.attribute-name.xml",":[event]"],
+  ["punctuation.separator.key-value.xml","="],
+  ["string","\""],
+  ["identifier","handler"],
+  ["string","\""],
+  ["meta.tag.punctuation.tag-close.xml",">"],
+  ["meta.tag.punctuation.end-tag-open.xml","</"],
+  ["meta.tag.tag-name.xml","div"],
+  ["meta.tag.punctuation.tag-close.xml",">"]
+],[
+   "start"
+],[
+   "start",
+  ["text.xml","    "],
+  ["comment.start.xml","<!--"],
+  ["comment.xml"," v-on shorthand with dynamic event "],
+  ["comment.end.xml","-->"]
+],[
+   "start",
+  ["text.xml","    "],
+  ["meta.tag.punctuation.tag-open.xml","<"],
+  ["meta.tag.tag-name.xml","div"],
+  ["text.tag-whitespace.xml"," "],
+  ["punctuation.separator.key-value.xml","@"],
+  ["entity.other.attribute-name.xml","[event]"],
+  ["punctuation.separator.key-value.xml","="],
+  ["string","\""],
+  ["identifier","handler"],
+  ["string","\""],
+  ["meta.tag.punctuation.tag-close.xml",">"],
+  ["meta.tag.punctuation.end-tag-open.xml","</"],
+  ["meta.tag.tag-name.xml","div"],
+  ["meta.tag.punctuation.tag-close.xml",">"]
 ],[
    "start",
   ["text.xml","  "],
@@ -586,11 +698,10 @@
   ["string","\"0\""],
   ["text",";"]
 ],[
-   "jade-start",
-  ["text","  "]
+   "jade-start"
 ],[
    "jade-start",
-  ["source.js.embedded.jade","   -"],
+  ["source.js.embedded.jade","  -"],
   ["text"," "],
   ["storage.type","var"],
   ["text"," "],
@@ -609,11 +720,11 @@
   ["text","]"]
 ],[
    "jade-start",
-  ["meta.tag.any.jade","     each"],
+  ["meta.tag.any.jade","  each"],
   ["text"," item in items"]
 ],[
    "jade-start",
-  ["meta.tag.any.jade","      li"],
+  ["meta.tag.any.jade","    li"],
   ["text","= item"]
 ],[
    "start",

diff --git a/src/mode/vue_highlight_rules.js b/src/mode/vue_highlight_rules.js
@@ -84,7 +84,7 @@ var VueHighlightRules = function (options) {
     var self = this;
     VueRules.tag_stuff.unshift({//vue-directives 
         token: "string",
-        regex: /(?:\b(v-)|(:|@))([a-zA-Z\-.]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*(\s*)(=)(\s*)(["'])/,
+        regex: /(?:\b(v-)|(:|@))(\[?[a-zA-Z\-.]+\]?)(?:(\:\[?[a-zA-Z\-]+\]?))?(?:(\.[a-zA-Z\-]+))*(\s*)(=)(\s*)(["'])/,
         onMatch: function (value, currentState, stack) {
             var quote = value[value.length - 1];
             stack.unshift(quote, currentState);