From 6eea2888b0526f7c213b3cc6c6d4ae41d9970763 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 12 Nov 2018 22:03:07 +0100
Subject: [PATCH] Improve vue component detection & fix issue with mixin

---
 lib/rules/component-definition-name-casing.js | 42 ++++++++-----
 .../rules/component-definition-name-casing.js | 61 +++++++++++++++++++
 2 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/lib/rules/component-definition-name-casing.js b/lib/rules/component-definition-name-casing.js
index d7d0ffa09..841afdaa8 100644
--- a/lib/rules/component-definition-name-casing.js
+++ b/lib/rules/component-definition-name-casing.js
@@ -50,23 +50,33 @@ module.exports = {
       }
     }
 
-    return utils.executeOnVue(context, (obj) => {
-      if (obj.parent && obj.parent.type === 'CallExpression' && obj.parent.arguments && obj.parent.arguments.length === 2) {
-        const argument = obj.parent.arguments[0]
-        if (argument.type === 'Literal') {
-          convertName(argument)
-        }
-      }
+    return Object.assign({},
+      {
+        "CallExpression > MemberExpression > Identifier[name='component']" (node) {
+          const parent = node.parent.parent
+          const calleeObject = utils.unwrapTypes(parent.callee.object)
 
-      const node = obj.properties
-        .find(item => (
-          item.type === 'Property' &&
-          item.key.name === 'name' &&
-          item.value.type === 'Literal'
-        ))
+          if (calleeObject.type === 'Identifier' && calleeObject.name === 'Vue') {
+            if (parent.arguments && parent.arguments.length === 2) {
+              const argument = parent.arguments[0]
+              if (argument.type === 'Literal') {
+                convertName(argument)
+              }
+            }
+          }
+        }
+      },
+      utils.executeOnVue(context, (obj) => {
+        const node = obj.properties
+          .find(item => (
+            item.type === 'Property' &&
+            item.key.name === 'name' &&
+            item.value.type === 'Literal'
+          ))
 
-      if (!node) return
-      convertName(node.value)
-    })
+        if (!node) return
+        convertName(node.value)
+      })
+    )
   }
 }
diff --git a/tests/lib/rules/component-definition-name-casing.js b/tests/lib/rules/component-definition-name-casing.js
index 26b40e160..2a50bbdf1 100644
--- a/tests/lib/rules/component-definition-name-casing.js
+++ b/tests/lib/rules/component-definition-name-casing.js
@@ -92,6 +92,44 @@ ruleTester.run('component-definition-name-casing', rule, {
       code: `Vue.component(fooBar, {})`,
       options: ['kebab-case'],
       parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.component('FooBar', component)`,
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.component('FooBar', component)`,
+      options: ['PascalCase'],
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.component('foo-bar', component)`,
+      options: ['kebab-case'],
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.component(fooBar, component)`,
+      options: ['kebab-case'],
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `Vue.mixin({})`,
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `foo({})`,
+      parserOptions
+    },
+    {
+      filename: 'test.vue',
+      code: `foo('foo-bar', {})`,
+      parserOptions
     }
   ],
 
@@ -231,6 +269,29 @@ ruleTester.run('component-definition-name-casing', rule, {
         line: 3
       }]
     },
+    {
+      filename: 'test.vue',
+      code: `Vue.component('foo-bar', component)`,
+      output: `Vue.component('FooBar', component)`,
+      parserOptions,
+      errors: [{
+        message: 'Property name "foo-bar" is not PascalCase.',
+        type: 'Literal',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `(Vue as VueConstructor<Vue>).component('foo-bar', component)`,
+      output: `(Vue as VueConstructor<Vue>).component('FooBar', component)`,
+      parserOptions,
+      parser: 'typescript-eslint-parser',
+      errors: [{
+        message: 'Property name "foo-bar" is not PascalCase.',
+        type: 'Literal',
+        line: 1
+      }]
+    },
     {
       filename: 'test.vue',
       code: `Vue.component('foo-bar', {})`,