Add getComputedProperties logic & refactor order-in-components

Author: michalsnik

lib/rules/order-in-components.js

@@ -4,6 +4,8 @@
  */
 'use strict'
 
+const utils = require('../utils')
+
 const defaultOrder = [
   ['name', 'delimiters', 'functional', 'model'],
   ['components', 'directives', 'filters'],
@@ -36,38 +38,6 @@ const groups = {
   ]
 }
 
-function isComponentFile (node, path) {
-  const isVueFile = path.endsWith('.vue') || path.endsWith('.jsx')
-  return isVueFile && node.declaration.type === 'ObjectExpression'
-}
-
-function isVueComponent (node) {
-  const callee = node.callee
-
-  const isFullVueComponent = node.type === 'CallExpression' &&
-    callee.type === 'MemberExpression' &&
-    callee.object.type === 'Identifier' &&
-    callee.object.name === 'Vue' &&
-    callee.property.type === 'Identifier' &&
-    callee.property.name === 'component' &&
-    node.arguments.length &&
-    node.arguments.slice(-1)[0].type === 'ObjectExpression'
-
-  const isDestructedVueComponent = callee.type === 'Identifier' &&
-    callee.name === 'component'
-
-  return isFullVueComponent || isDestructedVueComponent
-}
-
-function isVueInstance (node) {
-  const callee = node.callee
-  return node.type === 'NewExpression' &&
-    callee.type === 'Identifier' &&
-    callee.name === 'Vue' &&
-    node.arguments.length &&
-    node.arguments[0].type === 'ObjectExpression'
-}
-
 function getOrderMap (order) {
   const orderMap = new Map()
 
@@ -106,28 +76,13 @@ function checkOrder (propertiesNodes, orderMap, context) {
 function create (context) {
   const options = context.options[0] || {}
   const order = options.order || defaultOrder
-  const filePath = context.getFilename()
 
   const extendedOrder = order.map(property => groups[property] || property)
   const orderMap = getOrderMap(extendedOrder)
 
-  return {
-    ExportDefaultDeclaration (node) {
-      // export default {} in .vue || .jsx
-      if (!isComponentFile(node, filePath)) return
-      checkOrder(node.declaration.properties, orderMap, context)
-    },
-    CallExpression (node) {
-      // Vue.component('xxx', {}) || component('xxx', {})
-      if (!isVueComponent(node)) return
-      checkOrder(node.arguments.slice(-1)[0].properties, orderMap, context)
-    },
-    NewExpression (node) {
-      // new Vue({})
-      if (!isVueInstance(node)) return
-      checkOrder(node.arguments[0].properties, orderMap, context)
-    }
-  }
+  return utils.executeOnVueComponent(context, (properties) => {
+    checkOrder(properties, orderMap, context)
+  })
 }
 
 // ------------------------------------------------------------------------------

lib/utils/index.js

@@ -241,5 +241,114 @@ module.exports = {
     assert(typeof name === 'string')
 
     return VOID_ELEMENT_NAMES.has(name.toLowerCase())
+  },
+
+    /**
+     * Check whether the given node is a Vue component based
+     * on the filename and default export type
+     * export default {} in .vue || .jsx
+     * @param {ASTNode} node Node to check
+     * @param {string} path File name with extension
+     * @returns {boolean}
+     */
+  isVueComponentFile (node, path) {
+    const isVueFile = path.endsWith('.vue') || path.endsWith('.jsx')
+    return isVueFile &&
+      node.type === 'ExportDefaultDeclaration' &&
+      node.declaration.type === 'ObjectExpression'
+  },
+
+    /**
+     * Check whether given node is Vue component
+     * Vue.component('xxx', {}) || component('xxx', {})
+     * @param {ASTNode} node Node to check
+     * @returns {boolean}
+     */
+  isVueComponent (node) {
+    const callee = node.callee
+
+    const isFullVueComponent = node.type === 'CallExpression' &&
+      callee.type === 'MemberExpression' &&
+      callee.object.type === 'Identifier' &&
+      callee.object.name === 'Vue' &&
+      callee.property.type === 'Identifier' &&
+      callee.property.name === 'component' &&
+      node.arguments.length &&
+      node.arguments.slice(-1)[0].type === 'ObjectExpression'
+
+    const isDestructedVueComponent = callee.type === 'Identifier' &&
+      callee.name === 'component'
+
+    return isFullVueComponent || isDestructedVueComponent
+  },
+
+    /**
+     * Check whether given node is new Vue instance
+     * new Vue({})
+     * @param {ASTNode} node Node to check
+     * @returns {boolean}
+     */
+  isVueInstance (node) {
+    const callee = node.callee
+    return node.type === 'NewExpression' &&
+      callee.type === 'Identifier' &&
+      callee.name === 'Vue' &&
+      node.arguments.length &&
+      node.arguments[0].type === 'ObjectExpression'
+  },
+
+  executeOnVueComponent (context, cb) {
+    const filePath = context.getFilename()
+    const _this = this
+
+    return {
+      'ExportDefaultDeclaration:exit' (node) {
+        // export default {} in .vue || .jsx
+        if (!_this.isVueComponentFile(node, filePath)) return
+        cb(node.declaration.properties)
+      },
+      'CallExpression:exit' (node) {
+        // Vue.component('xxx', {}) || component('xxx', {})
+        if (!_this.isVueComponent(node)) return
+        cb(node.arguments.slice(-1)[0].properties)
+      },
+      'NewExpression:exit' (node) {
+        // new Vue({})
+        if (!_this.isVueInstance(node)) return
+        cb(node.arguments[0].properties)
+      }
+    }
+  },
+
+  getComputedProperties (componentProperties) {
+    const computedPropertiesNode = componentProperties
+      .filter(p =>
+        p.key.type === 'Identifier' &&
+        p.key.name === 'computed' &&
+        p.value.type === 'ObjectExpression'
+      )[0]
+
+    if (!computedPropertiesNode) { return [] }
+
+    const computedProperties = computedPropertiesNode.value.properties
+
+    return computedProperties.map(cp => {
+      const key = cp.key.name
+      let value
+
+      if (cp.value.type === 'FunctionExpression') {
+        value = cp.value.body
+      } else if (cp.value.type === 'ObjectExpression') {
+        value = cp.value.properties
+          .filter(p =>
+            p.key.type === 'Identifier' &&
+            p.key.name === 'get' &&
+            p.value.type === 'FunctionExpression'
+          )
+          .map(p => p.value.body)[0]
+      }
+
+      return { key, value }
+    })
   }
 }