Upgrade vue-eslint-parser and add support for v-bind same-name shorthand (#2357)

Author: ota-meshi

docs/rules/no-unsupported-features.md

@@ -29,6 +29,8 @@ This rule reports unsupported Vue.js syntax on the specified version.
 - `version` ... The `version` option accepts [the valid version range of `node-semver`](https://github.com/npm/node-semver#range-grammar). Set the version of Vue.js you are using. This option is required.
 - `ignores` ... You can use this `ignores` option to ignore the given features.
 The `"ignores"` option accepts an array of the following strings.
+  - Vue.js 3.4.0+
+    - `"v-bind-same-name-shorthand"` ... `v-bind` same-name shorthand.
   - Vue.js 3.3.0+
     - `"define-slots"` ... `defineSlots()` macro.
     - `"define-options"` ... `defineOptions()` macro.

lib/rules/html-quotes.js

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

lib/rules/no-unsupported-features.js

@@ -35,7 +35,9 @@ const FEATURES = {
   'v-bind-attr-modifier': require('./syntaxes/v-bind-attr-modifier'),
   // Vue.js 3.3.0+
   'define-options': require('./syntaxes/define-options'),
-  'define-slots': require('./syntaxes/define-slots')
+  'define-slots': require('./syntaxes/define-slots'),
+  // Vue.js 3.4.0+
+  'v-bind-same-name-shorthand': require('./syntaxes/v-bind-same-name-shorthand')
 }
 
 const SYNTAX_NAMES = /** @type {(keyof FEATURES)[]} */ (Object.keys(FEATURES))
@@ -124,7 +126,10 @@ module.exports = {
       forbiddenDefineOptions:
         '`defineOptions()` macros are not supported until Vue.js "3.3.0".',
       forbiddenDefineSlots:
-        '`defineSlots()` macros are not supported until Vue.js "3.3.0".'
+        '`defineSlots()` macros are not supported until Vue.js "3.3.0".',
+      // Vue.js 3.4.0+
+      forbiddenVBindSameNameShorthand:
+        '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".'
     }
   },
   /** @param {RuleContext} context */

lib/rules/syntaxes/v-bind-same-name-shorthand.js

@@ -0,0 +1,34 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils')
+
+module.exports = {
+  supported: '>=3.4.0',
+  /** @param {RuleContext} context @returns {TemplateListener} */
+  createTemplateBodyVisitor(context) {
+    /**
+     * Verify the directive node
+     * @param {VDirective} node The directive node to check
+     * @returns {void}
+     */
+    function checkDirective(node) {
+      if (utils.isVBindSameNameShorthand(node)) {
+        context.report({
+          node,
+          messageId: 'forbiddenVBindSameNameShorthand',
+          // fix to use `:x="x"` (downgrade)
+          fix: (fixer) =>
+            fixer.insertTextAfter(node, `="${node.value.expression.name}"`)
+        })
+      }
+    }
+
+    return {
+      "VAttribute[directive=true][key.name.name='bind']": checkDirective
+    }
+  }
+}

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 {node is VDirective & { value: VExpressionContainer & { expression: Identifier } }} `true` if the directive node is v-bind same-name shorthand.
+ */
+function isVBindSameNameShorthand(node) {
+  return (
+    node.directive &&
+    node.key.name.name === 'bind' &&
+    node.value?.expression?.type === 'Identifier' &&
+    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 (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-unsupported-features/v-bind-same-name-shorthand.js

@@ -0,0 +1,95 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder(
+  'v-bind-same-name-shorthand',
+  '^3.3.0'
+)
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2019
+  }
+})
+
+tester.run('no-unsupported-features/v-bind-same-name-shorthand', rule, {
+  valid: [
+    {
+      code: `
+      <template>
+        <div :x />
+      </template>`,
+      options: buildOptions({ version: '3.4.0' })
+    },
+    {
+      code: `
+      <template>
+      <div :x="x" />
+      </template>`,
+      options: buildOptions()
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <div :x />
+      </template>`,
+      output: `
+      <template>
+        <div :x="x" />
+      </template>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div :x />
+      </template>`,
+      output: `
+      <template>
+        <div :x="x" />
+      </template>`,
+      options: buildOptions({ version: '2.7.0' }),
+      errors: [
+        {
+          message:
+            '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div :data-x />
+      </template>`,
+      output: `
+      <template>
+        <div :data-x="dataX" />
+      </template>`,
+      options: buildOptions(),
+      errors: [
+        {
+          message:
+            '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+          line: 3
+        }
+      ]
+    }
+  ]
+})