Improve vue component detection & fix issue with mixin

vuejs · Nov 12, 2018 · 6eea288 · 6eea288
1 parent 5ed9a17
commit 6eea288
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 16 deletions.
diff --git 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
@@ -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', {})`,