Add support for props destructure to vue/require-default-prop rule

Author: ota-meshi

Diff for: lib/rules/require-default-prop.js

@@ -7,6 +7,7 @@
 /**
  * @typedef {import('../utils').ComponentProp} ComponentProp
  * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
  * @typedef {ComponentObjectProp & { value: ObjectExpression} } ComponentObjectPropObject
  */
 
@@ -137,18 +138,23 @@ module.exports = {
 
     /**
      * @param {ComponentProp[]} props
-     * @param {boolean} [withDefaults]
-     * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+     * @param {(prop: ComponentObjectProp|ComponentTypeProp)=>boolean} [ignore]
      */
-    function processProps(props, withDefaults, withDefaultsExpressions) {
+    function processProps(props, ignore) {
       for (const prop of props) {
-        if (prop.type === 'object' && !prop.node.shorthand) {
+        if (prop.type === 'object') {
+          if (prop.node.shorthand) {
+            continue
+          }
           if (!isWithoutDefaultValue(prop)) {
             continue
           }
           if (isBooleanProp(prop)) {
             continue
           }
+          if (ignore?.(prop)) {
+            continue
+          }
           const propName =
             prop.propName == null
               ? `[${context.getSourceCode().getText(prop.node.key)}]`
@@ -161,38 +167,57 @@ module.exports = {
               propName
             }
           })
-        } else if (
-          prop.type === 'type' &&
-          withDefaults &&
-          withDefaultsExpressions
-        ) {
+        } else if (prop.type === 'type') {
           if (prop.required) {
             continue
           }
           if (prop.types.length === 1 && prop.types[0] === 'Boolean') {
             continue
           }
-          if (!withDefaultsExpressions[prop.propName]) {
-            context.report({
-              node: prop.node,
-              messageId: `missingDefault`,
-              data: {
-                propName: prop.propName
-              }
-            })
+          if (ignore?.(prop)) {
+            continue
           }
+          context.report({
+            node: prop.node,
+            messageId: `missingDefault`,
+            data: {
+              propName: prop.propName
+            }
+          })
         }
       }
     }
 
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          processProps(
-            props,
-            utils.hasWithDefaults(node),
+          const hasWithDefaults = utils.hasWithDefaults(node)
+          const defaultsByWithDefaults =
             utils.getWithDefaultsPropExpressions(node)
-          )
+          const isUsingPropsDestructure = utils.isUsingPropsDestructure(node)
+          const defaultsByAssignmentPatterns =
+            utils.getDefaultPropExpressionsForPropsDestructure(node)
+
+          processProps(props, (prop) => {
+            if (prop.type === 'type') {
+              if (!hasWithDefaults) {
+                // If don't use withDefaults(), exclude it from the report.
+                return true
+              }
+              if (defaultsByWithDefaults[prop.propName]) {
+                return true
+              }
+            }
+            if (!isUsingPropsDestructure) {
+              return false
+            }
+            if (prop.propName == null) {
+              // If using Props Destructure but the property name cannot be determined,
+              // it will be ignored.
+              return true
+            }
+            return Boolean(defaultsByAssignmentPatterns[prop.propName])
+          })
         }
       }),
       utils.executeOnVue(context, (obj) => {

Diff for: lib/utils/index.js

@@ -1537,6 +1537,22 @@ module.exports = {
    * @returns { { [key: string]: Property | undefined } }
    */
   getWithDefaultsProps,
+  /**
+   * Gets the default definition nodes for defineProp
+   * using the props destructure with assignment pattern.
+   * @param {CallExpression} node The node of defineProps
+   * @returns { Record<string, {prop: AssignmentProperty , expression: Expression} | undefined> }
+   */
+  getDefaultPropExpressionsForPropsDestructure,
+  /**
+   * Checks whether the given defineProps node is using Props Destructure.
+   * @param {CallExpression} node The node of defineProps
+   * @returns {boolean}
+   */
+  isUsingPropsDestructure(node) {
+    const left = getLeftOfDefineProps(node)
+    return left?.type === 'ObjectPattern'
+  },
 
   getVueObjectType,
   /**
@@ -3144,6 +3160,53 @@ function getWithDefaultsProps(node) {
   return result
 }
 
+/**
+ * Gets the default definition nodes for defineProp
+ * using the props destructure with assignment pattern.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, {prop: AssignmentProperty , expression: Expression} | undefined> }
+ */
+function getDefaultPropExpressionsForPropsDestructure(node) {
+  const left = getLeftOfDefineProps(node)
+  if (!left || left.type !== 'ObjectPattern') {
+    return {}
+  }
+  /** @type {ReturnType<typeof getDefaultPropExpressionsForPropsDestructure>} */
+  const result = Object.create(null)
+  for (const prop of left.properties) {
+    if (prop.type !== 'Property') continue
+    const value = prop.value
+    if (value.type !== 'AssignmentPattern') continue
+    const name = getStaticPropertyName(prop)
+    if (name != null) {
+      result[name] = { prop, expression: value.right }
+    }
+  }
+  return result
+}
+
+/**
+ * Gets the pattern of the left operand of defineProps.
+ * @param {CallExpression} node The node of defineProps
+ * @returns {Pattern | null} The pattern of the left operand of defineProps
+ */
+function getLeftOfDefineProps(node) {
+  let target = node
+  if (hasWithDefaults(target)) {
+    target = target.parent
+  }
+  if (!target.parent) {
+    return null
+  }
+  if (
+    target.parent.type === 'VariableDeclarator' &&
+    target.parent.init === target
+  ) {
+    return target.parent.id
+  }
+  return null
+}
+
 /**
  * Get all props from component options object.
  * @param {ObjectExpression} componentObject Object with component definition

Diff for: tests/lib/rules/require-default-prop.js

@@ -351,6 +351,43 @@ ruleTester.run('require-default-prop', rule, {
         ...languageOptions,
         parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
       }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo=42,bar=42} = defineProps({foo: Number, bar: {type: Number}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps({foo: Boolean, bar: {type: Boolean}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      // ignore
+      const {bar = 42, foo = 42} = defineProps({[x]: Number, bar: {type: Number}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      }
     }
   ],
 
@@ -623,6 +660,46 @@ ruleTester.run('require-default-prop', rule, {
               }
             ]
           }
-        ])
+        ]),
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps({foo: Boolean, bar: {type: String}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: "Prop 'bar' requires default value to be set.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      const {foo,bar} = defineProps({foo: Number, bar: {type: Number}})
+      </script>
+      `,
+      languageOptions: {
+        parser: require('vue-eslint-parser'),
+        ...languageOptions
+      },
+      errors: [
+        {
+          message: "Prop 'foo' requires default value to be set.",
+          line: 3
+        },
+        {
+          message: "Prop 'bar' requires default value to be set.",
+          line: 3
+        }
+      ]
+    }
   ]
 })