Update vue/require-prop-type-constructor rule to support <script setup>

Author: ota-meshi

Diff for: lib/rules/require-prop-type-constructor.js

@@ -7,6 +7,11 @@
 const utils = require('../utils')
 const { isDef } = require('../utils')
 
+/**
+ * @typedef {import('../utils').ComponentArrayProp} ComponentArrayProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ */
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -76,8 +81,9 @@ module.exports = {
         )
     }
 
-    return utils.executeOnVueComponent(context, (obj) => {
-      for (const prop of utils.getComponentProps(obj)) {
+    /** @param {(ComponentArrayProp | ComponentObjectProp)[]} props */
+    function verifyProps(props) {
+      for (const prop of props) {
         if (!prop.value || prop.propName == null) {
           continue
         }
@@ -94,6 +100,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 for: lib/utils/index.js

@@ -1095,34 +1095,36 @@ 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)[]} */
-        let props = []
-        if (node.arguments.length >= 1) {
-          const defNode = getObjectOrArray(node.arguments[0])
-          if (defNode) {
-            props = getComponentPropsFromDefine(defNode)
+    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'
+        ) {
+          /** @type {(ComponentArrayProp | ComponentObjectProp)[]} */
+          let props = []
+          if (node.arguments.length >= 1) {
+            const defNode = getObjectOrArray(node.arguments[0])
+            if (defNode) {
+              props = getComponentPropsFromDefine(defNode)
+            }
           }
+          definePropsMap.set(node, props)
+          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 for: 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
+        }
+      ]
     }
   ]
 })