From eb61d51ff4142e548584860d246dff613236f7f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Tue, 24 Jul 2018 11:38:01 +0200
Subject: [PATCH 1/3] Add no-string-prop-type rule - basic implementation

---
 docs/rules/no-string-prop-type.md      | 62 +++++++++++++++++++
 lib/rules/no-string-prop-type.js       | 77 ++++++++++++++++++++++++
 tests/lib/rules/no-string-prop-type.js | 83 ++++++++++++++++++++++++++
 3 files changed, 222 insertions(+)
 create mode 100644 docs/rules/no-string-prop-type.md
 create mode 100644 lib/rules/no-string-prop-type.js
 create mode 100644 tests/lib/rules/no-string-prop-type.js

diff --git a/docs/rules/no-string-prop-type.md b/docs/rules/no-string-prop-type.md
new file mode 100644
index 000000000..79446ec2d
--- /dev/null
+++ b/docs/rules/no-string-prop-type.md
@@ -0,0 +1,62 @@
+# disallow usage of strings as prop types (no-string-prop-type)
+
+...
+
+
+## Rule Details
+
+This rule aims to...
+
+Examples of **incorrect** code for this rule:
+
+```js
+export default {
+  props: {
+    myProp: "Number",
+    anotherProp: ["Number", "String"],
+    myFieldWithBadType: {
+      type: "Object",
+      default: function() {
+        return {}
+      },
+    },
+    myOtherFieldWithBadType: {
+      type: "Number",
+      default: 1,
+    },
+  }
+}
+```
+
+Examples of **correct** code for this rule:
+
+```js
+export default {
+  props: {
+    myProp: Number,
+    anotherProp: [Number, String],
+    myFieldWithBadType: {
+      type: Object,
+      default: function() {
+        return {}
+      },
+    },
+    myOtherFieldWithBadType: {
+      type: Number,
+      default: 1,
+    },
+  }
+}
+```
+
+### Options
+
+-
+
+## When Not To Use It
+
+-
+
+## Further Reading
+
+-
diff --git a/lib/rules/no-string-prop-type.js b/lib/rules/no-string-prop-type.js
new file mode 100644
index 000000000..3934bf8b9
--- /dev/null
+++ b/lib/rules/no-string-prop-type.js
@@ -0,0 +1,77 @@
+/**
+ * @fileoverview disallow usage of strings as prop types
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const message = '"type" property of prop should be of Object type, not String'
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'disallow usage of strings as prop types',
+      category: undefined,
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.5.0/docs/rules/no-string-prop-type.md'
+    },
+    fixable: 'code',  // or "code" or "whitespace"
+    schema: [
+      // fill in your schema
+    ]
+  },
+
+  create: function (context) {
+    const fix = node => fixer => {
+      return fixer.replaceText(node, node.value)
+    }
+
+    return utils.executeOnVueComponent(context, (obj) => {
+      const node = obj.properties.find(p =>
+        p.type === 'Property' &&
+        p.key.type === 'Identifier' &&
+        p.key.name === 'props' &&
+        p.value.type === 'ObjectExpression'
+      )
+
+      if (!node) return
+
+      node.value.properties.forEach(p => {
+        if (p.value.type === 'Literal') {
+          context.report({
+            node: p.value,
+            message,
+            fix: fix(p.value)
+          })
+        } else if (p.value.type === 'ArrayExpression') {
+          const wrongNode = p.value.elements.find(prop => prop.type === 'Literal')
+
+          if (wrongNode) {
+            context.report({
+              node: wrongNode,
+              message,
+              fix: fix(wrongNode)
+            })
+          }
+        } else if (p.value.type === 'ObjectExpression') {
+          const wrongNode = p.value.properties.find(prop =>
+            prop.type === 'Property' &&
+            prop.key.name === 'type' &&
+            prop.value.type === 'Literal'
+          )
+
+          if (wrongNode) {
+            context.report({
+              node: wrongNode.value,
+              message
+            })
+          }
+        }
+      })
+    })
+  }
+}
diff --git a/tests/lib/rules/no-string-prop-type.js b/tests/lib/rules/no-string-prop-type.js
new file mode 100644
index 000000000..b59fddbc0
--- /dev/null
+++ b/tests/lib/rules/no-string-prop-type.js
@@ -0,0 +1,83 @@
+/**
+ * @fileoverview disallow usage of strings as prop types
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-string-prop-type')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module'
+  }
+})
+ruleTester.run('no-string-prop-type', rule, {
+
+  valid: [
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+        export default {
+          props: {
+            myProp: Number,
+            anotherType: [Number, String],
+            extraProp: {
+              type: Number,
+              default: 10
+            }
+          }
+        }
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+      export default {
+        props: {
+          myProp: 'Number',
+          anotherType: ['Number', 'String'],
+          extraProp: {
+            type: 'Number',
+            default: 10
+          }
+        }
+      }
+      `,
+      output: `
+      export default {
+        props: {
+          myProp: Number,
+          anotherType: [Number, String],
+          extraProp: {
+            type: 'Number',
+            default: 10
+          }
+        }
+      }
+      `,
+      errors: [{
+        message: '"type" property of prop should be of Object type, not String',
+        line: 4
+      }, {
+        message: '"type" property of prop should be of Object type, not String',
+        line: 5
+      }, {
+        message: '"type" property of prop should be of Object type, not String',
+        line: 7
+      }]
+    }
+  ]
+})

From da2898c11ea98dcac7cc983251ab62fe0f8fbc6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Fri, 3 Aug 2018 18:49:05 +0200
Subject: [PATCH 2/3] Rename rule

---
 README.md                                     |  1 +
 ...pe.md => require-prop-type-constructor.md} | 20 +----
 lib/index.js                                  |  1 +
 lib/rules/no-string-prop-type.js              | 77 ------------------
 lib/rules/require-prop-type-constructor.js    | 81 +++++++++++++++++++
 ...pe.js => require-prop-type-constructor.js} | 29 +++++--
 6 files changed, 109 insertions(+), 100 deletions(-)
 rename docs/rules/{no-string-prop-type.md => require-prop-type-constructor.md} (66%)
 delete mode 100644 lib/rules/no-string-prop-type.js
 create mode 100644 lib/rules/require-prop-type-constructor.js
 rename tests/lib/rules/{no-string-prop-type.js => require-prop-type-constructor.js} (64%)

diff --git a/README.md b/README.md
index 7870ed231..2da249f5e 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 | :wrench: | [vue/component-name-in-template-casing](./docs/rules/component-name-in-template-casing.md) | enforce specific casing for the component naming style in template |
+| :wrench: | [vue/require-prop-type-constructor](./docs/rules/require-prop-type-constructor.md) | require prop type to be a constructor |
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
 
 ### Deprecated
diff --git a/docs/rules/no-string-prop-type.md b/docs/rules/require-prop-type-constructor.md
similarity index 66%
rename from docs/rules/no-string-prop-type.md
rename to docs/rules/require-prop-type-constructor.md
index 79446ec2d..9c4f55025 100644
--- a/docs/rules/no-string-prop-type.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -1,11 +1,11 @@
-# disallow usage of strings as prop types (no-string-prop-type)
+# require prop type to be a constructor (vue/require-prop-type-constructor)
 
-...
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
+This rule makes sure that the types used to defined props are constructors.
 
-## Rule Details
 
-This rule aims to...
+## Rule Details
 
 Examples of **incorrect** code for this rule:
 
@@ -48,15 +48,3 @@ export default {
   }
 }
 ```
-
-### Options
-
--
-
-## When Not To Use It
-
--
-
-## Further Reading
-
--
diff --git a/lib/index.js b/lib/index.js
index 702fd41e0..0785c63b0 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -40,6 +40,7 @@ module.exports = {
     'prop-name-casing': require('./rules/prop-name-casing'),
     'require-component-is': require('./rules/require-component-is'),
     'require-default-prop': require('./rules/require-default-prop'),
+    'require-prop-type-constructor': require('./rules/require-prop-type-constructor'),
     'require-prop-types': require('./rules/require-prop-types'),
     'require-render-return': require('./rules/require-render-return'),
     'require-v-for-key': require('./rules/require-v-for-key'),
diff --git a/lib/rules/no-string-prop-type.js b/lib/rules/no-string-prop-type.js
deleted file mode 100644
index 3934bf8b9..000000000
--- a/lib/rules/no-string-prop-type.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * @fileoverview disallow usage of strings as prop types
- * @author Michał Sajnóg
- */
-'use strict'
-
-const utils = require('../utils')
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-const message = '"type" property of prop should be of Object type, not String'
-
-module.exports = {
-  meta: {
-    docs: {
-      description: 'disallow usage of strings as prop types',
-      category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.5.0/docs/rules/no-string-prop-type.md'
-    },
-    fixable: 'code',  // or "code" or "whitespace"
-    schema: [
-      // fill in your schema
-    ]
-  },
-
-  create: function (context) {
-    const fix = node => fixer => {
-      return fixer.replaceText(node, node.value)
-    }
-
-    return utils.executeOnVueComponent(context, (obj) => {
-      const node = obj.properties.find(p =>
-        p.type === 'Property' &&
-        p.key.type === 'Identifier' &&
-        p.key.name === 'props' &&
-        p.value.type === 'ObjectExpression'
-      )
-
-      if (!node) return
-
-      node.value.properties.forEach(p => {
-        if (p.value.type === 'Literal') {
-          context.report({
-            node: p.value,
-            message,
-            fix: fix(p.value)
-          })
-        } else if (p.value.type === 'ArrayExpression') {
-          const wrongNode = p.value.elements.find(prop => prop.type === 'Literal')
-
-          if (wrongNode) {
-            context.report({
-              node: wrongNode,
-              message,
-              fix: fix(wrongNode)
-            })
-          }
-        } else if (p.value.type === 'ObjectExpression') {
-          const wrongNode = p.value.properties.find(prop =>
-            prop.type === 'Property' &&
-            prop.key.name === 'type' &&
-            prop.value.type === 'Literal'
-          )
-
-          if (wrongNode) {
-            context.report({
-              node: wrongNode.value,
-              message
-            })
-          }
-        }
-      })
-    })
-  }
-}
diff --git a/lib/rules/require-prop-type-constructor.js b/lib/rules/require-prop-type-constructor.js
new file mode 100644
index 000000000..c852f0f61
--- /dev/null
+++ b/lib/rules/require-prop-type-constructor.js
@@ -0,0 +1,81 @@
+/**
+ * @fileoverview require prop type to be a constructor
+ * @author Michał Sajnóg
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const message = 'The "{{name}}" property should be a constructor.'
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'require prop type to be a constructor',
+      category: undefined, // essential
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.1/docs/rules/require-prop-type-constructor.md'
+    },
+    fixable: 'code',  // or "code" or "whitespace"
+    schema: []
+  },
+
+  create (context) {
+    const fix = node => fixer => {
+      return fixer.replaceText(node, node.value)
+    }
+
+    const checkPropertyNode = (p) => {
+      if (p.value.type === 'Literal') {
+        context.report({
+          node: p.value,
+          message,
+          data: {
+            name: utils.getStaticPropertyName(p.key)
+          },
+          fix: fix(p.value)
+        })
+      } else if (p.value.type === 'ArrayExpression') {
+        p.value.elements
+          .filter(prop => prop.type === 'Literal')
+          .forEach(prop => context.report({
+            node: prop,
+            message,
+            data: {
+              name: utils.getStaticPropertyName(p.key)
+            },
+            fix: fix(prop)
+          }))
+      }
+    }
+
+    return utils.executeOnVueComponent(context, (obj) => {
+      const node = obj.properties.find(p =>
+        p.type === 'Property' &&
+        p.key.type === 'Identifier' &&
+        p.key.name === 'props' &&
+        p.value.type === 'ObjectExpression'
+      )
+
+      if (!node) return
+
+      node.value.properties.forEach(p => {
+        if (p.value.type === 'Literal' || p.value.type === 'ArrayExpression') {
+          checkPropertyNode(p)
+        } else if (p.value.type === 'ObjectExpression') {
+          const typeProperty = p.value.properties.find(prop =>
+            prop.type === 'Property' &&
+            prop.key.name === 'type'
+          )
+
+          if (!typeProperty) return
+
+          checkPropertyNode(typeProperty)
+        }
+      })
+    })
+  }
+}
diff --git a/tests/lib/rules/no-string-prop-type.js b/tests/lib/rules/require-prop-type-constructor.js
similarity index 64%
rename from tests/lib/rules/no-string-prop-type.js
rename to tests/lib/rules/require-prop-type-constructor.js
index b59fddbc0..75bc0e081 100644
--- a/tests/lib/rules/no-string-prop-type.js
+++ b/tests/lib/rules/require-prop-type-constructor.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview disallow usage of strings as prop types
+ * @fileoverview require prop type to be a constructor
  * @author Michał Sajnóg
  */
 'use strict'
@@ -8,7 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-const rule = require('../../../lib/rules/no-string-prop-type')
+const rule = require('../../../lib/rules/require-prop-type-constructor')
 const RuleTester = require('eslint').RuleTester
 
 // ------------------------------------------------------------------------------
@@ -21,7 +21,7 @@ var ruleTester = new RuleTester({
     sourceType: 'module'
   }
 })
-ruleTester.run('no-string-prop-type', rule, {
+ruleTester.run('require-prop-type-constructor', rule, {
 
   valid: [
     {
@@ -34,6 +34,9 @@ ruleTester.run('no-string-prop-type', rule, {
             extraProp: {
               type: Number,
               default: 10
+            },
+            lastProp: {
+              type: [Number, Boolean]
             }
           }
         }
@@ -52,6 +55,9 @@ ruleTester.run('no-string-prop-type', rule, {
           extraProp: {
             type: 'Number',
             default: 10
+          },
+          lastProp: {
+            type: ['Boolean']
           }
         }
       }
@@ -62,21 +68,30 @@ ruleTester.run('no-string-prop-type', rule, {
           myProp: Number,
           anotherType: [Number, String],
           extraProp: {
-            type: 'Number',
+            type: Number,
             default: 10
+          },
+          lastProp: {
+            type: [Boolean]
           }
         }
       }
       `,
       errors: [{
-        message: '"type" property of prop should be of Object type, not String',
+        message: 'The "myProp" property should be a constructor.',
         line: 4
       }, {
-        message: '"type" property of prop should be of Object type, not String',
+        message: 'The "anotherType" property should be a constructor.',
+        line: 5
+      }, {
+        message: 'The "anotherType" property should be a constructor.',
         line: 5
       }, {
-        message: '"type" property of prop should be of Object type, not String',
+        message: 'The "type" property should be a constructor.',
         line: 7
+      }, {
+        message: 'The "type" property should be a constructor.',
+        line: 11
       }]
     }
   ]

From b79f0cb955b6106458b5f6d5db877aedc68e6c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Fri, 3 Aug 2018 19:31:32 +0200
Subject: [PATCH 3/3] Add more tests, update docs

---
 docs/rules/require-prop-type-constructor.md   | 12 ++++++-
 lib/rules/require-prop-type-constructor.js    | 25 ++++++++++---
 .../rules/require-prop-type-constructor.js    | 36 +++++++++++++++++++
 3 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 9c4f55025..f5a5f3ba4 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -2,8 +2,18 @@
 
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
-This rule makes sure that the types used to defined props are constructors.
+This rule reports prop types that can't be presumed as constructors.
 
+It's impossible to catch every possible case and know whether the prop type is a constructor or not, hence this rule black list few types of nodes, instead of white-listing correct ones.
+
+The following types are forbidden and will be reported:
+
+- Literal
+- TemplateLiteral
+- BinaryExpression
+- UpdateExpression
+
+It will catch most commonly made mistakes which are using strings instead of constructors.
 
 ## Rule Details
 
diff --git a/lib/rules/require-prop-type-constructor.js b/lib/rules/require-prop-type-constructor.js
index c852f0f61..ce2a2da1e 100644
--- a/lib/rules/require-prop-type-constructor.js
+++ b/lib/rules/require-prop-type-constructor.js
@@ -12,6 +12,15 @@ const utils = require('../utils')
 
 const message = 'The "{{name}}" property should be a constructor.'
 
+const forbiddenTypes = [
+  'Literal',
+  'TemplateLiteral',
+  'BinaryExpression',
+  'UpdateExpression'
+]
+
+const isForbiddenType = nodeType => forbiddenTypes.indexOf(nodeType) > -1
+
 module.exports = {
   meta: {
     docs: {
@@ -25,11 +34,19 @@ module.exports = {
 
   create (context) {
     const fix = node => fixer => {
-      return fixer.replaceText(node, node.value)
+      if (node.type === 'Literal') {
+        return fixer.replaceText(node, node.value)
+      } else if (
+        node.type === 'TemplateLiteral' &&
+        node.expressions.length === 0 &&
+        node.quasis.length === 1
+      ) {
+        return fixer.replaceText(node, node.quasis[0].value.cooked)
+      }
     }
 
     const checkPropertyNode = (p) => {
-      if (p.value.type === 'Literal') {
+      if (isForbiddenType(p.value.type)) {
         context.report({
           node: p.value,
           message,
@@ -40,7 +57,7 @@ module.exports = {
         })
       } else if (p.value.type === 'ArrayExpression') {
         p.value.elements
-          .filter(prop => prop.type === 'Literal')
+          .filter(prop => isForbiddenType(prop.type))
           .forEach(prop => context.report({
             node: prop,
             message,
@@ -63,7 +80,7 @@ module.exports = {
       if (!node) return
 
       node.value.properties.forEach(p => {
-        if (p.value.type === 'Literal' || p.value.type === 'ArrayExpression') {
+        if (isForbiddenType(p.value.type) || p.value.type === 'ArrayExpression') {
           checkPropertyNode(p)
         } else if (p.value.type === 'ObjectExpression') {
           const typeProperty = p.value.properties.find(prop =>
diff --git a/tests/lib/rules/require-prop-type-constructor.js b/tests/lib/rules/require-prop-type-constructor.js
index 75bc0e081..f0740385b 100644
--- a/tests/lib/rules/require-prop-type-constructor.js
+++ b/tests/lib/rules/require-prop-type-constructor.js
@@ -93,6 +93,42 @@ ruleTester.run('require-prop-type-constructor', rule, {
         message: 'The "type" property should be a constructor.',
         line: 11
       }]
+    },
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+      export default {
+        props: {
+          a: \`String\`,
+          b: Foo + '',
+          c: 1,
+          d: true,
+        }
+      }
+      `,
+      output: `
+      export default {
+        props: {
+          a: String,
+          b: Foo + '',
+          c: 1,
+          d: true,
+        }
+      }
+      `,
+      errors: [{
+        message: 'The "a" property should be a constructor.',
+        line: 4
+      }, {
+        message: 'The "b" property should be a constructor.',
+        line: 5
+      }, {
+        message: 'The "c" property should be a constructor.',
+        line: 6
+      }, {
+        message: 'The "d" property should be a constructor.',
+        line: 7
+      }]
     }
   ]
 })