update no-unsupported-features

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/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

@@ -3026,13 +3026,13 @@ function hasDirective(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.
+ * @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 &&
+ node.value?.expression?.type === 'Identifier' &&
  node.key.range[0] <= node.value.range[0] &&
  node.value.range[1] <= node.key.range[1]
  )

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
+ }
+ ]
+ }
+ ]
+})