Add support for props destructure to vue/no-required-prop-with-default rule (#2560)

Author: ota-meshi

lib/rules/no-required-prop-with-default.js

@@ -47,14 +47,16 @@ module.exports = {
     }
 
     /**
-     * @param {ComponentArrayProp | ComponentObjectProp | ComponentUnknownProp | ComponentProp} prop
-     * */
-    const handleObjectProp = (prop) => {
+     * @param {ComponentProp} prop
+     * @param {Set<string>} [defaultProps]
+     **/
+    const handleObjectProp = (prop, defaultProps) => {
       if (
         prop.type === 'object' &&
         prop.propName &&
         prop.value.type === 'ObjectExpression' &&
-        utils.findProperty(prop.value, 'default')
+        (utils.findProperty(prop.value, 'default') ||
+          defaultProps?.has(prop.propName))
       ) {
         const requiredProperty = utils.findProperty(prop.value, 'required')
         if (!requiredProperty) return
@@ -84,62 +86,61 @@ module.exports = {
                 ]
           })
         }
+      } else if (
+        prop.type === 'type' &&
+        defaultProps?.has(prop.propName) &&
+        prop.required
+      ) {
+        // skip setter & getter case
+        if (
+          prop.node.type === 'TSMethodSignature' &&
+          (prop.node.kind === 'get' || prop.node.kind === 'set')
+        ) {
+          return
+        }
+        // skip computed
+        if (prop.node.computed) {
+          return
+        }
+        context.report({
+          node: prop.node,
+          loc: prop.node.loc,
+          data: {
+            key: prop.propName
+          },
+          messageId: 'requireOptional',
+          fix: canAutoFix
+            ? (fixer) => fixer.insertTextAfter(prop.key, '?')
+            : null,
+          suggest: canAutoFix
+            ? null
+            : [
+                {
+                  messageId: 'fixRequiredProp',
+                  fix: (fixer) => fixer.insertTextAfter(prop.key, '?')
+                }
+              ]
+        })
       }
     }
 
     return utils.compositingVisitors(
       utils.defineVueVisitor(context, {
         onVueObjectEnter(node) {
-          utils.getComponentPropsFromOptions(node).map(handleObjectProp)
+          utils
+            .getComponentPropsFromOptions(node)
+            .map((prop) => handleObjectProp(prop))
         }
       }),
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          if (!utils.hasWithDefaults(node)) {
-            props.map(handleObjectProp)
-            return
-          }
-          const withDefaultsProps = Object.keys(
-            utils.getWithDefaultsPropExpressions(node)
-          )
-          const requiredProps = props.flatMap((item) =>
-            item.type === 'type' && item.required ? [item] : []
-          )
-
-          for (const prop of requiredProps) {
-            if (withDefaultsProps.includes(prop.propName)) {
-              // skip setter & getter case
-              if (
-                prop.node.type === 'TSMethodSignature' &&
-                (prop.node.kind === 'get' || prop.node.kind === 'set')
-              ) {
-                return
-              }
-              // skip computed
-              if (prop.node.computed) {
-                return
-              }
-              context.report({
-                node: prop.node,
-                loc: prop.node.loc,
-                data: {
-                  key: prop.propName
-                },
-                messageId: 'requireOptional',
-                fix: canAutoFix
-                  ? (fixer) => fixer.insertTextAfter(prop.key, '?')
-                  : null,
-                suggest: canAutoFix
-                  ? null
-                  : [
-                      {
-                        messageId: 'fixRequiredProp',
-                        fix: (fixer) => fixer.insertTextAfter(prop.key, '?')
-                      }
-                    ]
-              })
-            }
-          }
+          const defaultProps = new Set([
+            ...Object.keys(utils.getWithDefaultsPropExpressions(node)),
+            ...Object.keys(
+              utils.getDefaultPropExpressionsForPropsDestructure(node)
+            )
+          ])
+          props.map((prop) => handleObjectProp(prop, defaultProps))
         }
       })
     )

tests/lib/rules/no-required-prop-with-default.js

@@ -189,6 +189,49 @@ tester.run('no-required-prop-with-default', rule, {
           })
         </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string
+          }
+          const {name="World"} = defineProps<TestPropType>();
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps<{
+            name?: string
+          }>();
+        </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup>
+          const {name='Hello'} = defineProps({
+            name: {
+              required: false
+            }
+          })
+        </script>
+      `
     }
   ],
   invalid: [
@@ -918,6 +961,94 @@ tester.run('no-required-prop-with-default', rule, {
           line: 4
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name: string
+          }
+          const {name="World"} = defineProps<TestPropType>();
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          interface TestPropType {
+            name?: string
+          }
+          const {name="World"} = defineProps<TestPropType>();
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps<{
+            name: string
+          }>();
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps<{
+            name?: string
+          }>();
+        </script>
+      `,
+      options: [{ autofix: true }],
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps({
+            name: {
+              required: true,
+            }
+          });
+        </script>
+      `,
+      output: `
+        <script setup lang="ts">
+          const {name="World"} = defineProps({
+            name: {
+              required: false,
+            }
+          });
+        </script>
+      `,
+      options: [{ autofix: true }],
+      errors: [
+        {
+          message: 'Prop "name" should be optional.',
+          line: 4
+        }
+      ]
     }
   ]
 })