Merge branch 'vuejs:master' into master

Author: Thomasan1999

docs/user-guide/index.md

@@ -221,6 +221,16 @@ Vue.component('AsyncComponent', (resolve, reject) => {
 })
 ```
 
+You can do this for [Vue class component](https://class-component.vuejs.org/) too:
+
+```ts
+// @vue/component
+@Component({
+  components: { Foo }
+})
+export default class Bar extends Vue {}
+```
+
 ### Disabling rules via `<!-- eslint-disable -->`
 
 You can use `<!-- eslint-disable -->`-like HTML comments in the `<template>` and in the block level of `.vue` files to disable a certain rule temporarily.

lib/rules/no-boolean-default.js

@@ -8,18 +8,27 @@ const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').ComponentProp} ComponentProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
  */
 
 /**
- * @param {Property | SpreadElement} prop
+ * @param {Expression|undefined} node
+ */
+function isBooleanIdentifier(node) {
+  return Boolean(node && node.type === 'Identifier' && node.name === 'Boolean')
+}
+
+/**
+ * Detects whether given prop node is a Boolean
+ * @param {ComponentObjectProp} prop
+ * @return {Boolean}
  */
 function isBooleanProp(prop) {
+  const value = utils.skipTSAsExpression(prop.value)
   return (
-    prop.type === 'Property' &&
-    prop.key.type === 'Identifier' &&
-    prop.key.name === 'type' &&
-    prop.value.type === 'Identifier' &&
-    prop.value.name === 'Boolean'
+    isBooleanIdentifier(value) ||
+    (value.type === 'ObjectExpression' &&
+      isBooleanIdentifier(utils.findProperty(value, 'type')?.value))
   )
 }
 
@@ -55,40 +64,40 @@ module.exports = {
     const booleanType = context.options[0] || 'no-default'
     /**
      * @param {ComponentProp} prop
-     * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+     * @param {(propName: string) => Expression[]} otherDefaultProvider
      */
-    function processProp(prop, withDefaultsExpressions) {
+    function processProp(prop, otherDefaultProvider) {
       if (prop.type === 'object') {
-        if (prop.value.type !== 'ObjectExpression') {
+        if (!isBooleanProp(prop)) {
           return
         }
-        if (!prop.value.properties.some(isBooleanProp)) {
-          return
+        if (prop.value.type === 'ObjectExpression') {
+          const defaultNode = getDefaultNode(prop.value)
+          if (defaultNode) {
+            verifyDefaultExpression(defaultNode.value)
+          }
         }
-        const defaultNode = getDefaultNode(prop.value)
-        if (!defaultNode) {
-          return
+        if (prop.propName != null) {
+          for (const defaultNode of otherDefaultProvider(prop.propName)) {
+            verifyDefaultExpression(defaultNode)
+          }
         }
-        verifyDefaultExpression(defaultNode.value)
       } else if (prop.type === 'type') {
         if (prop.types.length !== 1 || prop.types[0] !== 'Boolean') {
           return
         }
-        const defaultNode =
-          withDefaultsExpressions && withDefaultsExpressions[prop.propName]
-        if (!defaultNode) {
-          return
+        for (const defaultNode of otherDefaultProvider(prop.propName)) {
+          verifyDefaultExpression(defaultNode)
         }
-        verifyDefaultExpression(defaultNode)
       }
     }
     /**
      * @param {ComponentProp[]} props
-     * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+     * @param {(propName: string) => Expression[]} otherDefaultProvider
      */
-    function processProps(props, withDefaultsExpressions) {
+    function processProps(props, otherDefaultProvider) {
       for (const prop of props) {
-        processProp(prop, withDefaultsExpressions)
+        processProp(prop, otherDefaultProvider)
       }
     }
 
@@ -118,11 +127,20 @@ module.exports = {
     }
     return utils.compositingVisitors(
       utils.executeOnVueComponent(context, (obj) => {
-        processProps(utils.getComponentPropsFromOptions(obj))
+        processProps(utils.getComponentPropsFromOptions(obj), () => [])
       }),
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          processProps(props, utils.getWithDefaultsPropExpressions(node))
+          const defaultsByWithDefaults =
+            utils.getWithDefaultsPropExpressions(node)
+          const defaultsByAssignmentPatterns =
+            utils.getDefaultPropExpressionsForPropsDestructure(node)
+          processProps(props, (propName) =>
+            [
+              defaultsByWithDefaults[propName],
+              defaultsByAssignmentPatterns[propName]?.expression
+            ].filter(utils.isDef)
+          )
         }
       })
     )

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))
         }
       })
     )

lib/rules/no-restricted-props.js

@@ -95,9 +95,9 @@ module.exports = {
 
     /**
      * @param {ComponentProp[]} props
-     * @param { { [key: string]: Property | undefined } } [withDefaultsProps]
+     * @param {(fixer: RuleFixer, propName: string, replaceKeyText: string) => Iterable<Fix>} [fixPropInOtherPlaces]
      */
-    function processProps(props, withDefaultsProps) {
+    function processProps(props, fixPropInOtherPlaces) {
       for (const prop of props) {
         if (!prop.propName) {
           continue
@@ -118,7 +118,14 @@ module.exports = {
                   : createSuggest(
                       prop.key,
                       option,
-                      withDefaultsProps && withDefaultsProps[prop.propName]
+                      fixPropInOtherPlaces
+                        ? (fixer, replaceKeyText) =>
+                            fixPropInOtherPlaces(
+                              fixer,
+                              prop.propName,
+                              replaceKeyText
+                            )
+                        : undefined
                     )
             })
             break
@@ -129,7 +136,33 @@ module.exports = {
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefinePropsEnter(node, props) {
-          processProps(props, utils.getWithDefaultsProps(node))
+          processProps(props, fixPropInOtherPlaces)
+
+          /**
+           * @param {RuleFixer} fixer
+           * @param {string} propName
+           * @param {string} replaceKeyText
+           */
+          function fixPropInOtherPlaces(fixer, propName, replaceKeyText) {
+            /** @type {(Property|AssignmentProperty)[]} */
+            const propertyNodes = []
+            const withDefault = utils.getWithDefaultsProps(node)[propName]
+            if (withDefault) {
+              propertyNodes.push(withDefault)
+            }
+            const propDestructure = utils.getPropsDestructure(node)[propName]
+            if (propDestructure) {
+              propertyNodes.push(propDestructure)
+            }
+            return propertyNodes.map((propertyNode) =>
+              propertyNode.shorthand
+                ? fixer.insertTextBefore(
+                    propertyNode.value,
+                    `${replaceKeyText}:`
+                  )
+                : fixer.replaceText(propertyNode.key, replaceKeyText)
+            )
+          }
         }
       }),
       utils.defineVueVisitor(context, {
@@ -144,10 +177,10 @@ module.exports = {
 /**
  * @param {Expression} node
  * @param {ParsedOption} option
- * @param {Property} [withDefault]
+ * @param {(fixer: RuleFixer, replaceKeyText: string) => Iterable<Fix>} [fixPropInOtherPlaces]
  * @returns {Rule.SuggestionReportDescriptor[]}
  */
-function createSuggest(node, option, withDefault) {
+function createSuggest(node, option, fixPropInOtherPlaces) {
   if (!option.suggest) {
     return []
   }
@@ -168,14 +201,8 @@ function createSuggest(node, option, withDefault) {
     {
       fix(fixer) {
         const fixes = [fixer.replaceText(node, replaceText)]
-        if (withDefault) {
-          if (withDefault.shorthand) {
-            fixes.push(
-              fixer.insertTextBefore(withDefault.value, `${replaceText}:`)
-            )
-          } else {
-            fixes.push(fixer.replaceText(withDefault.key, replaceText))
-          }
+        if (fixPropInOtherPlaces) {
+          fixes.push(...fixPropInOtherPlaces(fixer, replaceText))
         }
         return fixes.sort((a, b) => a.range[0] - b.range[0])
       },