From 9fff64d1119f4df4ddf867b0a3a0fe92e7bb8d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Jun 2017 23:00:21 +0200
Subject: [PATCH] New rule `order-in-components` (#42)

* Add new rule "order-in-components"

* Add initial implementation of `order-in-components` rule

* Update test scripts

* Improve order-in-components rule, add more test scenarios

* Update readme

* Update order-in-components docs

* Update rule logic and fix tests

* Fix order logic

* Check for arguments existance

* Apply order-in-components rule only to exported ObjectExpressions in .vue and .jsx files

* Disable recommended setting in `order-in-components` rule
---
 README.md                              |   1 +
 docs/rules/order-in-components.md      |  87 ++++++++
 lib/recommended-rules.js               |   1 +
 lib/rules/order-in-components.js       | 148 +++++++++++++
 package-lock.json                      |   2 +-
 package.json                           |   4 +-
 tests/lib/rules/order-in-components.js | 278 +++++++++++++++++++++++++
 7 files changed, 518 insertions(+), 3 deletions(-)
 create mode 100644 docs/rules/order-in-components.md
 create mode 100644 lib/rules/order-in-components.js
 create mode 100644 tests/lib/rules/order-in-components.js

diff --git a/README.md b/README.md
index bd50cf3e7..f9fb1eae9 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,7 @@ The `--fix` option on the command line automatically fixes problems reported by
 | :white_check_mark: | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element. |
 |  | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplicate arguments. |
 | :white_check_mark: | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>`. |
+|  | [order-in-components](./docs/rules/order-in-components.md) | Keep order of properties in components |
 | :white_check_mark: | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements. |
 | :white_check_mark: | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives. |
 
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
new file mode 100644
index 000000000..4e4e71dfe
--- /dev/null
+++ b/docs/rules/order-in-components.md
@@ -0,0 +1,87 @@
+# Keep proper order of properties in your components (order-in-components)
+
+This rule makes sure you keep declared order of properties in components.
+
+## :book: Rule Details
+
+Recommended order of properties is as follows:
+
+1. Options / Misc (`name`, `delimiters`, `functional`, `model`)
+2. Options / Assets (`components`, `directives`, `filters`)
+3. Options / Composition (`parent`, `mixins`, `extends`, `provide`, `inject`)
+4. `el`
+5. `template`
+6. `props`
+7. `propsData`
+8. `data`
+9. `computed`
+10. `watch`
+11. `lifecycleHooks`
+12. `methods`
+13. `render`
+14. `renderError`
+
+Note that `lifecycleHooks` is not a regular property - it indicates the group of all lifecycle hooks just to simplify the configuration.
+
+Examples of **incorrect** code for this rule:
+
+```js
+
+export default {
+  name: 'app',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+  props: {
+    propA: Number,
+  },
+}
+
+```
+
+Examples of **correct** code for this rule:
+
+```js
+
+export default {
+  name: 'app',
+  props: {
+    propA: Number,
+  },
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  },
+}
+
+```
+
+### Options
+
+If you want you can change the order providing the optional configuration in your `.eslintrc` file. Setting responsible for the above order looks like this:
+
+```
+vue/order-in-components: [2, {
+  order: [
+    ['name', 'delimiters', 'functional', 'model'],
+    ['components', 'directives', 'filters'],
+    ['parent', 'mixins', 'extends', 'provide', 'inject'],
+    'el',
+    'template',
+    'props',
+    'propsData',
+    'data',
+    'computed',
+    'watch',
+    'lifecycle_hooks',
+    'methods',
+    'render',
+    'renderError'
+  ]
+}]
+```
+
+If you want some of properties to be treated equally in order you can group them into arrays, like we did with `name`, `delimiters`, `funcitonal` and `model`.
diff --git a/lib/recommended-rules.js b/lib/recommended-rules.js
index c000b8c45..3fb25f032 100644
--- a/lib/recommended-rules.js
+++ b/lib/recommended-rules.js
@@ -26,6 +26,7 @@ module.exports = {
   "vue/no-invalid-v-text": "error",
   "vue/no-parsing-error": "error",
   "vue/no-textarea-mustache": "error",
+  "vue/order-in-components": "off",
   "vue/require-component-is": "error",
   "vue/require-v-for-key": "error",
   "vue/v-bind-style": "off",
diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
new file mode 100644
index 000000000..56cf55d0f
--- /dev/null
+++ b/lib/rules/order-in-components.js
@@ -0,0 +1,148 @@
+/**
+ * @fileoverview Keep order of properties in components
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+const defaultOrder = [
+  ['name', 'delimiters', 'functional', 'model'],
+  ['components', 'directives', 'filters'],
+  ['parent', 'mixins', 'extends', 'provide', 'inject'],
+  'el',
+  'template',
+  'props',
+  'propsData',
+  'data',
+  'computed',
+  'watch',
+  'LIFECYCLE_HOOKS',
+  'methods',
+  'render',
+  'renderError'
+]
+
+const groups = {
+  LIFECYCLE_HOOKS: [
+    'beforeCreate',
+    'created',
+    'beforeMount',
+    'mounted',
+    'beforeUpdate',
+    'updated',
+    'activated',
+    'deactivated',
+    'beforeDestroy',
+    'destroyed'
+  ]
+}
+
+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()
+
+  order.forEach((property, i) => {
+    if (Array.isArray(property)) {
+      property.forEach(p => orderMap.set(p, i))
+    } else {
+      orderMap.set(property, i)
+    }
+  })
+
+  return orderMap
+}
+
+function checkOrder (propertiesNodes, orderMap, context) {
+  const properties = propertiesNodes.map(property => property.key)
+
+  properties.forEach((property, i) => {
+    const propertiesAbove = properties.slice(0, i)
+    const unorderedProperties = propertiesAbove
+      .filter(p => orderMap.get(p.name) > orderMap.get(property.name))
+      .sort((p1, p2) => orderMap.get(p1.name) > orderMap.get(p2.name))
+
+    const firstUnorderedProperty = unorderedProperties[0]
+
+    if (firstUnorderedProperty) {
+      const line = firstUnorderedProperty.loc.start.line
+      context.report({
+        node: property,
+        message: `The "${property.name}" property should be above the "${firstUnorderedProperty.name}" property on line ${line}.`
+      })
+    }
+  })
+}
+
+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)
+    }
+  }
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  create,
+  meta: {
+    docs: {
+      description: 'Keep order of properties in components',
+      category: 'Best Practices',
+      recommended: false
+    },
+    fixable: null,
+    schema: []
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 89fa33c39..0e32937db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vue",
-  "version": "3.0.1",
+  "version": "3.1.3",
   "lockfileVersion": 1,
   "dependencies": {
     "@types/node": {
diff --git a/package.json b/package.json
index 745c6c776..f545b9003 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "main": "lib/index.js",
   "scripts": {
     "start": "npm run test:simple -- --watch --growl",
-    "test:base": "mocha \"tests/lib/**/*.js\" \"tests/integrations/*.js\" --timeout 60000",
+    "test:base": "mocha \"tests/lib/**/*.js\"",
     "test:simple": "npm run test:base -- --reporter nyan",
-    "test": "nyc npm run test:base",
+    "test": "nyc npm run test:base -- \"tests/integrations/*.js\" --timeout 60000",
     "lint": "eslint .",
     "pretest": "npm run lint",
     "preversion": "npm run update && npm test",
diff --git a/tests/lib/rules/order-in-components.js b/tests/lib/rules/order-in-components.js
new file mode 100644
index 000000000..cca4f5736
--- /dev/null
+++ b/tests/lib/rules/order-in-components.js
@@ -0,0 +1,278 @@
+/**
+ * @fileoverview Keep order of properties in components
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+const rule = require('../../../lib/rules/order-in-components')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester()
+
+ruleTester.run('order-in-components', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          name: 'app',
+          props: {
+            propA: Number,
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        }
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {}
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default 'example-text'
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
+    {
+      filename: 'test.jsx',
+      code: `
+        export default {
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        }
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
+    {
+      filename: 'test.js',
+      code: `
+        Vue.component('smart-list', {
+          name: 'app',
+          components: {},
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          }
+        })
+      `,
+      parserOptions: { ecmaVersion: 6 }
+    },
+    {
+      filename: 'test.js',
+      code: `
+        Vue.component('example')
+      `,
+      parserOptions: { ecmaVersion: 6 }
+    },
+    {
+      filename: 'test.js',
+      code: `
+        const { component } = Vue;
+        component('smart-list', {
+          name: 'app',
+          components: {},
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          }
+        })
+      `,
+      parserOptions: { ecmaVersion: 6 }
+    },
+    {
+      filename: 'test.js',
+      code: `
+        new Vue({
+          name: 'app',
+          components: {},
+          el: '#app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          }
+        })
+      `,
+      parserOptions: { ecmaVersion: 6 }
+    },
+    {
+      filename: 'test.js',
+      code: `
+        new Vue()
+      `,
+      parserOptions: { ecmaVersion: 6 }
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        }
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      errors: [{
+        message: 'The "props" property should be above the "data" property on line 4.',
+        line: 9
+      }]
+    },
+    {
+      filename: 'test.jsx',
+      code: `
+        export default {
+          render (h) {
+            return (
+              <span>{ this.msg }</span>
+            )
+          },
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        }
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true }},
+      errors: [{
+        message: 'The "name" property should be above the "render" property on line 3.',
+        line: 8
+      }, {
+        message: 'The "data" property should be above the "render" property on line 3.',
+        line: 9
+      }, {
+        message: 'The "props" property should be above the "data" property on line 9.',
+        line: 14
+      }]
+    },
+    {
+      filename: 'test.js',
+      code: `
+        Vue.component('smart-list', {
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          components: {},
+          template: '<div></div>'
+        })
+      `,
+      parserOptions: { ecmaVersion: 6 },
+      errors: [{
+        message: 'The "components" property should be above the "data" property on line 4.',
+        line: 9
+      }, {
+        message: 'The "template" property should be above the "data" property on line 4.',
+        line: 10
+      }]
+    },
+    {
+      filename: 'test.js',
+      code: `
+        const { component } = Vue;
+        component('smart-list', {
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          components: {},
+          template: '<div></div>'
+        })
+      `,
+      parserOptions: { ecmaVersion: 6 },
+      errors: [{
+        message: 'The "components" property should be above the "data" property on line 5.',
+        line: 10
+      }, {
+        message: 'The "template" property should be above the "data" property on line 5.',
+        line: 11
+      }]
+    },
+    {
+      filename: 'test.js',
+      code: `
+        new Vue({
+          el: '#app',
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          components: {},
+          template: '<div></div>'
+        })
+      `,
+      parserOptions: { ecmaVersion: 6 },
+      errors: [{
+        message: 'The "name" property should be above the "el" property on line 3.',
+        line: 4
+      }, {
+        message: 'The "components" property should be above the "el" property on line 3.',
+        line: 10
+      }, {
+        message: 'The "template" property should be above the "data" property on line 5.',
+        line: 11
+      }]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+            return {
+              isActive: false,
+            };
+          },
+          methods: {
+            toggleMenu() {
+              this.isActive = !this.isActive;
+            },
+            closeMenu() {
+              this.isActive = false;
+            }
+          },
+          name: 'burger',
+        };
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' },
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 16
+      }]
+    }
+  ]
+})