Upgrade vue-eslint-parser and add support for v-bind same-name shorthand

Author: ota-meshi

lib/rules/html-quotes.js

@@ -51,6 +51,11 @@ module.exports = {
             return
           }
 
+          if (utils.isVBindSameNameShorthand(node)) {
+            // v-bind same-name shorthand (in Vue 3.4)
+            return
+          }
+
           const text = sourceCode.getText(node.value)
           const firstChar = text[0]
 

lib/utils/index.js

@@ -828,6 +828,8 @@ module.exports = {
    */
   hasDirective,
 
+  isVBindSameNameShorthand,
+
   /**
    * Returns the list of all registered components
    * @param {ObjectExpression} componentObject
@@ -3021,6 +3023,21 @@ function hasDirective(node, name, argument) {
   return Boolean(getDirective(node, name, argument))
 }
 
+/**
+ * Check whether the given directive node is v-bind same-name shorthand.
+ * @param {VAttribute | VDirective} node The directive node to check.
+ * @returns {boolean} `true` if the directive node is v-bind same-name shorthand.
+ */
+function isVBindSameNameShorthand(node) {
+  return (
+    node.directive &&
+    node.key.name.name === 'bind' &&
+    !!node.value &&
+    node.key.range[0] <= node.value.range[0] &&
+    node.value.range[1] <= node.key.range[1]
+  )
+}
+
 /**
  * Checks whether given defineProps call node has withDefaults.
  * @param {CallExpression} node The node of defineProps

package.json

@@ -59,7 +59,7 @@
     "nth-check": "^2.1.1",
     "postcss-selector-parser": "^6.0.13",
     "semver": "^7.5.4",
-    "vue-eslint-parser": "^9.3.1",
+    "vue-eslint-parser": "^9.4.0",
     "xml-name-validator": "^4.0.0"
   },
   "devDependencies": {

tests/lib/rules/html-button-has-type.js

@@ -203,16 +203,6 @@ ruleTester.run('html-button-has-type', rule, {
           column: 25
         }
       ]
-    },
-    {
-      filename: 'test.vue',
-      code: `<template><button v-bind:type>Hello World</button></template>`,
-      errors: [
-        {
-          message: 'A value must be set for button type attribute.',
-          column: 19
-        }
-      ]
     }
   ]
 })

tests/lib/rules/html-quotes.js

@@ -58,6 +58,15 @@ tester.run('html-quotes', rule, {
       code: '<template><div attr="foo\'bar"></div></template>',
       options: ['single', { avoidEscape: true }]
     },
+    // v-bind same-name shorthand (in Vue 3.4)
+    {
+      code: '<template><div :foo /></template>',
+      options: ['double']
+    },
+    {
+      code: '<template><div :foo /></template>',
+      options: ['single']
+    },
 
     // Invalid EOF
     {

tests/lib/rules/no-deprecated-slot-attribute.js

@@ -321,7 +321,7 @@ tester.run('no-deprecated-slot-attribute', rule, {
       output: `
       <template>
         <LinkList>
-          <template v-slot><a /></template>
+          <template v-slot:[slot]><a /></template>
         </LinkList>
       </template>`,
       errors: [

tests/lib/rules/no-unused-components.js

@@ -413,13 +413,6 @@ tester.run('no-unused-components', rule, {
         <component :is=""></component>
       </template>`
     },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <component :is></component>
-      </template>`
-    },
 
     // computed properties
     {
@@ -629,26 +622,6 @@ tester.run('no-unused-components', rule, {
         }
       ]
     },
-    {
-      filename: 'test.vue',
-      code: `
-      <template>
-        <component :is></component>
-      </template>
-      <script>
-        export default {
-          components: {
-            Foo,
-          },
-        }
-      </script>`,
-      errors: [
-        {
-          message: 'The "Foo" component has been registered but not used.',
-          line: 8
-        }
-      ]
-    },
 
     // computed properties
     {

tests/lib/rules/v-bind-style.js

@@ -106,6 +106,21 @@ tester.run('v-bind-style', rule, {
       output: '<template><div v-bind:foo.sync.prop="foo"></div></template>',
       options: ['longform'],
       errors: ["Expected 'v-bind:' instead of '.'."]
+    },
+    // v-bind same-name shorthand (in Vue 3.4)
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      output: '<template><div :foo /></template>',
+      options: ['shorthand'],
+      errors: ["Unexpected 'v-bind' before ':'."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      output: '<template><div v-bind:foo /></template>',
+      options: ['longform'],
+      errors: ["Expected 'v-bind' before ':'."]
     }
   ]
 })

tests/lib/rules/valid-v-bind.js

@@ -71,6 +71,15 @@ tester.run('valid-v-bind', rule, {
       filename: 'test.vue',
       code: "<template><input v-bind='$attrs' /></template>"
     },
+    // v-bind same-name shorthand (in Vue 3.4)
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>'
+    },
     // parsing error
     {
       filename: 'parsing-error.vue',
@@ -88,11 +97,6 @@ tester.run('valid-v-bind', rule, {
       code: '<template><div v-bind></div></template>',
       errors: ["'v-bind' directives require an attribute value."]
     },
-    {
-      filename: 'test.vue',
-      code: '<template><div v-bind:aaa></div></template>',
-      errors: ["'v-bind' directives require an attribute value."]
-    },
     {
       filename: 'test.vue',
       code: "<template><div :aaa.unknown='bbb'></div></template>",