Breaking: support new syntax in Vue.js 2.6 (#807)

Author: mysticatea

docs/rules/attributes-order.md

@@ -25,7 +25,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 - `GLOBAL`
   ex: 'id'
 - `UNIQUE`
-  ex: 'ref', 'key', 'slot'
+  ex: 'ref', 'key', 'v-slot', 'slot'
 - `TWO_WAY_BINDING`
   ex: 'v-model'
 - `OTHER_DIRECTIVES`

lib/rules/array-bracket-spacing.js

@@ -5,5 +5,8 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line
-module.exports = wrapCoreRule(require('eslint/lib/rules/array-bracket-spacing'))
+// eslint-disable-next-line no-invalid-meta
+module.exports = wrapCoreRule(
+  require('eslint/lib/rules/array-bracket-spacing'),
+  { skipDynamicArguments: true }
+)

lib/rules/attribute-hyphenation.js

@@ -92,7 +92,10 @@ module.exports = {
       VAttribute (node) {
         if (!utils.isCustomComponent(node.parent.parent)) return
 
-        const name = !node.directive ? node.key.rawName : node.key.name === 'bind' ? node.key.raw.argument : false
+        const name =
+          !node.directive ? node.key.rawName
+            : node.key.name.name === 'bind' ? node.key.argument && node.key.argument.rawName
+              : /* otherwise */ false
         if (!name || isIgnoredAttribute(name)) return
 
         reportIssue(node, name)

lib/rules/attributes-order.js

@@ -9,8 +9,13 @@ const utils = require('../utils')
 // Rule Definition
 // ------------------------------------------------------------------------------
 
-function getAttributeType (name, isDirective) {
-  if (isDirective) {
+function getAttributeType (attribute, sourceCode) {
+  const isBind = attribute.directive && attribute.key.name.name === 'bind'
+  const name = isBind
+    ? (attribute.key.argument ? sourceCode.getText(attribute.key.argument) : '')
+    : (attribute.directive ? attribute.key.name.name : attribute.key.name)
+
+  if (attribute.directive && !isBind) {
     if (name === 'for') {
       return 'LIST_RENDERING'
     } else if (name === 'if' || name === 'else-if' || name === 'else' || name === 'show' || name === 'cloak') {
@@ -23,6 +28,8 @@ function getAttributeType (name, isDirective) {
       return 'EVENTS'
     } else if (name === 'html' || name === 'text') {
       return 'CONTENT'
+    } else if (name === 'slot') {
+      return 'UNIQUE'
     } else {
       return 'OTHER_DIRECTIVES'
     }
@@ -38,10 +45,9 @@ function getAttributeType (name, isDirective) {
     }
   }
 }
-function getPosition (attribute, attributePosition) {
-  const attributeType = attribute.directive && attribute.key.name === 'bind'
-    ? getAttributeType(attribute.key.argument, false)
-    : getAttributeType(attribute.key.name, attribute.directive)
+
+function getPosition (attribute, attributePosition, sourceCode) {
+  const attributeType = getAttributeType(attribute, sourceCode)
   return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
 }
 
@@ -91,8 +97,8 @@ function create (context) {
       previousNode = null
     },
     'VAttribute' (node) {
-      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributePosition))) {
-        currentPosition = getPosition(node, attributePosition)
+      if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributePosition, sourceCode))) {
+        currentPosition = getPosition(node, attributePosition, sourceCode)
         previousNode = node
       } else {
         reportIssue(node, previousNode)

lib/rules/block-spacing.js

@@ -5,5 +5,8 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line
-module.exports = wrapCoreRule(require('eslint/lib/rules/block-spacing'))
+// eslint-disable-next-line no-invalid-meta
+module.exports = wrapCoreRule(
+  require('eslint/lib/rules/block-spacing'),
+  { skipDynamicArguments: true }
+)

lib/rules/brace-style.js

@@ -5,5 +5,9 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line
-module.exports = wrapCoreRule(require('eslint/lib/rules/brace-style'))
+// eslint-disable-next-line no-invalid-meta
+module.exports = wrapCoreRule(
+  require('eslint/lib/rules/brace-style'),
+  { skipDynamicArguments: true }
+)
+

lib/rules/key-spacing.js

@@ -5,5 +5,8 @@
 
 const { wrapCoreRule } = require('../utils')
 
-// eslint-disable-next-line
-module.exports = wrapCoreRule(require('eslint/lib/rules/key-spacing'))
+// eslint-disable-next-line no-invalid-meta
+module.exports = wrapCoreRule(
+  require('eslint/lib/rules/key-spacing'),
+  { skipDynamicArguments: true }
+)

lib/rules/max-attributes-per-line.js

@@ -67,6 +67,7 @@ module.exports = {
   },
 
   create: function (context) {
+    const sourceCode = context.getSourceCode()
     const configuration = parseOptions(context.options[0])
     const multilineMaximum = configuration.multiline
     const singlelinemMaximum = configuration.singleline
@@ -130,23 +131,6 @@ module.exports = {
       return defaults
     }
 
-    function getPropData (prop) {
-      let propType = 'Attribute'
-      let propName = prop.key.name
-
-      if (utils.isBindingAttribute(prop)) {
-        propType = 'Binding'
-        propName = prop.key.raw.argument
-      } else if (utils.isEventAttribute(prop)) {
-        propType = 'Event'
-        propName = prop.key.raw.argument
-      } else if (prop.directive) {
-        propType = 'Directive'
-      }
-
-      return { propType, propName }
-    }
-
     function showErrors (attributes) {
       attributes.forEach((prop, i) => {
         const fix = (fixer) => {
@@ -166,8 +150,8 @@ module.exports = {
         context.report({
           node: prop,
           loc: prop.loc,
-          message: '{{propType}} "{{propName}}" should be on a new line.',
-          data: getPropData(prop),
+          message: '\'{{name}}\' should be on a new line.',
+          data: { name: sourceCode.getText(prop.key) },
           fix
         })
       })

lib/rules/no-confusing-v-for-v-if.js

@@ -50,7 +50,7 @@ module.exports = {
 
   create (context) {
     return utils.defineTemplateBodyVisitor(context, {
-      "VAttribute[directive=true][key.name='if']" (node) {
+      "VAttribute[directive=true][key.name.name='if']" (node) {
         const element = node.parent.parent
 
         if (utils.hasDirective(element, 'for') && !isUsingIterationVar(node)) {

lib/rules/no-duplicate-attributes.js

@@ -24,8 +24,8 @@ function getName (attribute) {
   if (!attribute.directive) {
     return attribute.key.name
   }
-  if (attribute.key.name === 'bind') {
-    return attribute.key.argument || null
+  if (attribute.key.name.name === 'bind') {
+    return (attribute.key.argument && attribute.key.argument.name) || null
   }
   return null
 }