Update vue/require-prop-type-constructor rule to support <script setup> (#1536)

ota-meshi · web-flow · commit 774056c72c64 · 2021-07-03T08:31:57.000+09:00
* Update `vue/require-prop-type-constructor` rule to support `&lt;script setup&gt;`

* fix tsc error
diff --git a/lib/rules/require-prop-type-constructor.js b/lib/rules/require-prop-type-constructor.js
@@ -7,6 +7,12 @@
 const utils = require('../utils')
 const { isDef } = require('../utils')
 
+/**
+ * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
+ */
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -76,8 +82,9 @@ module.exports = {
         )
     }
 
-    return utils.executeOnVueComponent(context, (obj) => {
-      for (const prop of utils.getComponentProps(obj)) {
+    /** @param {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp)[]} props */
+    function verifyProps(props) {
+      for (const prop of props) {
         if (!prop.value || prop.propName == null) {
           continue
         }
@@ -94,6 +101,17 @@ module.exports = {
           checkPropertyNode(prop.propName, typeProperty.value)
         }
       }
-    })
+    }
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefinePropsEnter(_node, props) {
+          verifyProps(props)
+        }
+      }),
+      utils.executeOnVueComponent(context, (obj) => {
+        verifyProps(utils.getComponentProps(obj))
+      })
+    )
   }
 }
diff --git a/lib/utils/index.js b/lib/utils/index.js
@@ -1103,42 +1103,43 @@ module.exports = {
       return null
     }
 
-    const definePropsMap = new Map()
-    /**
-     * @param {CallExpression} node
-     */
-    scriptSetupVisitor.CallExpression = (node) => {
-      if (
-        inScriptSetup(node) &&
-        node.callee.type === 'Identifier' &&
-        node.callee.name === 'defineProps'
-      ) {
-        /** @type {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp)[]} */
-        let props = []
-        if (node.arguments.length >= 1) {
-          const defNode = getObjectOrArray(node.arguments[0])
-          if (defNode) {
-            props = getComponentPropsFromDefine(defNode)
-          }
-        } else if (
-          node.typeParameters &&
-          node.typeParameters.params.length >= 1
+    if (visitor.onDefinePropsEnter || visitor.onDefinePropsExit) {
+      const definePropsMap = new Map()
+      /**
+       * @param {CallExpression} node
+       */
+      scriptSetupVisitor.CallExpression = (node) => {
+        if (
+          inScriptSetup(node) &&
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'defineProps'
         ) {
-          props = getComponentPropsFromTypeDefine(
-            context,
-            node.typeParameters.params[0]
-          )
+          /** @type {(ComponentArrayProp | ComponentObjectProp | ComponentTypeProp)[]} */
+          let props = []
+          if (node.arguments.length >= 1) {
+            const defNode = getObjectOrArray(node.arguments[0])
+            if (defNode) {
+              props = getComponentPropsFromDefine(defNode)
+            }
+          } else if (
+            node.typeParameters &&
+            node.typeParameters.params.length >= 1
+          ) {
+            props = getComponentPropsFromTypeDefine(
+              context,
+              node.typeParameters.params[0]
+            )
+          }
+          callVisitor('onDefinePropsEnter', node, props)
         }
-        definePropsMap.set(node, props)
-        callVisitor('onDefinePropsEnter', node, props)
+        callVisitor('CallExpression', node)
       }
-      callVisitor('CallExpression', node)
-    }
-    scriptSetupVisitor['CallExpression:exit'] = (node) => {
-      callVisitor('CallExpression:exit', node)
-      if (definePropsMap.has(node)) {
-        callVisitor('onDefinePropsExit', node, definePropsMap.get(node))
-        definePropsMap.delete(node)
+      scriptSetupVisitor['CallExpression:exit'] = (node) => {
+        callVisitor('CallExpression:exit', node)
+        if (definePropsMap.has(node)) {
+          callVisitor('onDefinePropsExit', node, definePropsMap.get(node))
+          definePropsMap.delete(node)
+        }
       }
     }
 
diff --git a/tests/lib/rules/require-prop-type-constructor.js b/tests/lib/rules/require-prop-type-constructor.js
@@ -355,6 +355,36 @@ ruleTester.run('require-prop-type-constructor', rule, {
           line: 18
         }
       ]
+    },
+    {
+      filename: 'SomeComponent.vue',
+      code: `
+      <script setup>
+      defineProps({
+        a: {
+          type: 'String',
+          default: 'abc'
+        },
+      })
+      </script>
+      `,
+      output: `
+      <script setup>
+      defineProps({
+        a: {
+          type: String,
+          default: 'abc'
+        },
+      })
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      errors: [
+        {
+          message: 'The "a" property should be a constructor.',
+          line: 5
+        }
+      ]
     }
   ]
 })
