* rename getPropsProperties to getComponentProps

* fix false error in `require-prop-types` when is set to empty array
* `require-prop-types` will return now errors about each prop from ArrayExpression
* add more tests

Author: armano2

lib/rules/prop-name-casing.js

@@ -36,11 +36,10 @@ function create (context) {
   // ----------------------------------------------------------------------
 
   return utils.executeOnVue(context, (obj) => {
-    const items = utils.getPropsProperties(obj)
-      .props
-      .filter(cp => cp.key.type === 'Literal' || (cp.key.type === 'Identifier' && !cp.node.computed))
+    const props = utils.getComponentProps(obj)
+      .filter(cp => cp.key && cp.key.type === 'Literal' || (cp.key.type === 'Identifier' && !cp.node.computed))
 
-    for (const item of items) {
+    for (const item of props) {
       const propName = item.key.type === 'Literal' ? item.key.value : item.key.name
       if (typeof propName !== 'string') {
         // (boolean | null | number | RegExp) Literal

lib/rules/require-default-prop.js

@@ -133,9 +133,8 @@ module.exports = {
     // ----------------------------------------------------------------------
 
     return utils.executeOnVue(context, (obj) => {
-      const props = utils.getPropsProperties(obj)
-        .props
-        .filter(prop => prop.value && !prop.node.shorthand)
+      const props = utils.getComponentProps(obj)
+        .filter(prop => prop.key && prop.value && !prop.node.shorthand)
 
       const propsWithoutDefault = findPropsWithoutDefaultValue(props)
       const propsToReport = excludeBooleanProps(propsWithoutDefault)

lib/rules/require-prop-type-constructor.js

@@ -70,11 +70,10 @@ module.exports = {
     }
 
     return utils.executeOnVueComponent(context, (obj) => {
-      const properties = utils.getPropsProperties(obj)
-        .props
-        .filter(cp => cp.value)
+      const props = utils.getComponentProps(obj)
+        .filter(cp => cp.key && cp.value)
 
-      for (const p of properties) {
+      for (const p of props) {
         if (isForbiddenType(p.value) || p.value.type === 'ArrayExpression') {
           checkPropertyNode(p.key, p.value)
         } else if (p.value.type === 'ObjectExpression') {

lib/rules/require-prop-types.js

@@ -59,7 +59,7 @@ module.exports = {
           node,
           message: 'Prop "{{name}}" should define at least its type.',
           data: {
-            name: utils.getStaticPropertyName(key)
+            name: utils.getStaticPropertyName(key || node) || '***'
           }
         })
       }
@@ -70,17 +70,10 @@ module.exports = {
     // ----------------------------------------------------------------------
 
     return utils.executeOnVue(context, (obj) => {
-      const properties = utils.getPropsProperties(obj)
+      const props = utils.getComponentProps(obj)
 
-      if (properties.type === 'ArrayExpression') {
-        context.report({
-          node: properties.node,
-          message: 'Props should at least define their types.'
-        })
-      } else {
-        for (const cp of properties.props) {
-          checkProperty(cp.key, cp.value, cp.node)
-        }
+      for (const prop of props) {
+        checkProperty(prop.key, prop.value, prop.node)
       }
     })
   }

lib/rules/require-valid-default-prop.js

@@ -88,11 +88,10 @@ module.exports = {
     // ----------------------------------------------------------------------
 
     return utils.executeOnVue(context, obj => {
-      const properties = utils.getPropsProperties(obj)
-        .props
-        .filter(cp => cp.value && cp.value.type === 'ObjectExpression')
+      const props = utils.getComponentProps(obj)
+        .filter(cp => cp.key && cp.value && cp.value.type === 'ObjectExpression')
 
-      for (const prop of properties) {
+      for (const prop of props) {
         const type = getPropertyNode(prop.value, 'type')
         if (!type) continue
 

lib/utils/index.js

@@ -368,9 +368,9 @@ module.exports = {
   /**
    * Get all props by looking at all component's properties
    * @param {ObjectExpression} componentObject Object with component definition
-   * @return {Object} Array of props in format: { node: ASTNode, type: string, props: Array<{key: ASTNode, value: ASTNode | null, node: ASTNode}> }
+   * @return {Array} Array of component props in format: [{key?: String, value?: ASTNode, node: ASTNod}]
    */
-  getPropsProperties (componentObject) {
+  getComponentProps (componentObject) {
     const propsNode = componentObject.properties
       .find(p =>
         p.type === 'Property' &&
@@ -380,11 +380,7 @@ module.exports = {
       )
 
     if (!propsNode) {
-      return {
-        node: null,
-        type: null,
-        props: []
-      }
+      return []
     }
 
     let props
@@ -397,17 +393,13 @@ module.exports = {
         })
     } else {
       props = propsNode.value.elements
-        .filter(cp => cp.type === 'Literal' && typeof cp.value === 'string')
         .map(cp => {
-          return { key: cp, value: null, node: cp }
+          const key = cp.type === 'Literal' && typeof cp.value === 'string' ? cp : null
+          return { key, value: null, node: cp }
         })
     }
 
-    return {
-      node: propsNode,
-      type: propsNode.value.type,
-      props: props
-    }
+    return props
   },
 
   /**

tests/lib/rules/require-prop-types.js

@@ -114,6 +114,24 @@ ruleTester.run('require-prop-types', rule, {
       `,
       parserOptions: { ecmaVersion: 6, sourceType: 'module' }
     },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: []
+        }
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {}
+        }
+      `,
+      parserOptions: { ecmaVersion: 6, sourceType: 'module' }
+    },
     {
       filename: 'test.vue',
       code: `
@@ -149,25 +167,43 @@ ruleTester.run('require-prop-types', rule, {
       filename: 'test.vue',
       code: `
         export default {
-          props: ['foo']
+          props: ['foo', bar, \`baz\`, foo()]
         }
       `,
       parserOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [{
-        message: 'Props should at least define their types.',
+        message: 'Prop "foo" should define at least its type.',
+        line: 3
+      }, {
+        message: 'Prop "bar" should define at least its type.',
+        line: 3
+      }, {
+        message: 'Prop "baz" should define at least its type.',
+        line: 3
+      }, {
+        message: 'Prop "***" should define at least its type.',
         line: 3
       }]
     },
     {
       filename: 'test.js',
       code: `
         new Vue({
-          props: ['foo']
+          props: ['foo', bar, \`baz\`, foo()]
         })
       `,
       parserOptions: { ecmaVersion: 6, sourceType: 'module' },
       errors: [{
-        message: 'Props should at least define their types.',
+        message: 'Prop "foo" should define at least its type.',
+        line: 3
+      }, {
+        message: 'Prop "bar" should define at least its type.',
+        line: 3
+      }, {
+        message: 'Prop "baz" should define at least its type.',
+        line: 3
+      }, {
+        message: 'Prop "***" should define at least its type.',
         line: 3
       }]
     },

tests/lib/utils/index.js

@@ -248,29 +248,46 @@ describe('getRegisteredComponents', () => {
   })
 })
 
-describe('getComputedProperties', () => {
-  let node
+describe('getComponentProps', () => {
+  let props
 
   const parse = function (code) {
     const data = babelEslint.parse(code).body[0].declarations[0].init
-    return utils.getPropsProperties(data)
+    return utils.getComponentProps(data)
   }
 
   it('should return empty array when there is no props property', () => {
-    node = parse(`const test = {
+    props = parse(`const test = {
       name: 'test',
       data() {
         return {}
       }
     }`)
 
-    assert.notOk(node.type)
-    assert.notOk(node.node)
-    assert.equal(node.props.length, 0)
+    assert.equal(props.length, 0)
+  })
+
+  it('should return empty array when props property is empty array', () => {
+    props = parse(`const test = {
+      name: 'test',
+      props: []
+    }`)
+
+    assert.equal(props.length, 0)
+  })
+
+
+  it('should return empty array when props property is empty object array', () => {
+    props = parse(`const test = {
+      name: 'test',
+      props: {}
+    }`)
+
+    assert.equal(props.length, 0)
   })
 
   it('should return computed props', () => {
-    node = parse(`const test = {
+    props = parse(`const test = {
       name: 'test',
       data() {
         return {}
@@ -284,44 +301,50 @@ describe('getComputedProperties', () => {
       }
     }`)
 
-    assert.ok(node.node)
-    assert.equal(node.type, 'ObjectExpression', 'it detects correct type')
-    assert.equal(node.props.length, 4, 'it detects all props')
+    assert.equal(props.length, 4, 'it detects all props')
 
-    assert.ok(node.props[0].value)
-    assert.ok(node.props[0].key.type === 'Identifier')
-    assert.ok(node.props[0].node.type === 'Property')
-    assert.ok(node.props[0].value.type === 'Identifier')
+    assert.ok(props[0].key.type === 'Identifier')
+    assert.ok(props[0].node.type === 'Property')
+    assert.ok(props[0].value.type === 'Identifier')
 
-    assert.ok(node.props[1].value)
-    assert.ok(node.props[1].key.type === 'Identifier')
-    assert.ok(node.props[1].node.type === 'Property')
-    assert.ok(node.props[1].value.type === 'ObjectExpression')
+    assert.ok(props[1].key.type === 'Identifier')
+    assert.ok(props[1].node.type === 'Property')
+    assert.ok(props[1].value.type === 'ObjectExpression')
 
-    assert.ok(node.props[2].value)
-    assert.ok(node.props[2].key.type === 'Identifier')
-    assert.ok(node.props[2].node.type === 'Property')
-    assert.ok(node.props[2].value.type === 'ArrayExpression')
+    assert.ok(props[2].key.type === 'Identifier')
+    assert.ok(props[2].node.type === 'Property')
+    assert.ok(props[2].value.type === 'ArrayExpression')
 
-    assert.ok(node.props[3].value)
-    assert.ok(node.props[3].key.type === node.props[3].value.type)
-    assert.ok(node.props[3].node.type === 'Property')
+    assert.ok(props[3].key.type === props[3].value.type)
+    assert.ok(props[3].node.type === 'Property')
+    assert.ok(props[3].value.type === 'Identifier')
   })
 
   it('should return computed from array props', () => {
-    node = parse(`const test = {
+    props = parse(`const test = {
       name: 'test',
       data() {
         return {}
       },
       props: ['a', b, \`c\`, null]
     }`)
 
-    assert.ok(node.node)
-    assert.equal(node.type, 'ArrayExpression', 'it detects correct type')
-    assert.equal(node.props.length, 1, 'it detects all props')
+    assert.equal(props.length, 4, 'it detects all props')
+
+    assert.ok(props[0].node.type === 'Literal')
+    assert.deepEqual(props[0].key, props[0].node)
+    assert.notOk(props[0].value)
+
+    assert.ok(props[1].node.type === 'Identifier')
+    assert.notOk(props[1].key)
+    assert.notOk(props[1].value)
+
+    assert.ok(props[2].node.type === 'TemplateLiteral')
+    assert.notOk(props[2].key)
+    assert.notOk(props[2].value)
 
-    assert.notOk(node.props[0].value)
-    assert.ok(node.props[0].key.type === 'Literal')
+    assert.ok(props[3].node.type === 'Literal')
+    assert.notOk(props[3].key)
+    assert.notOk(props[3].value)
   })
 })