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

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>",