Add support for props destructure to vue/require-valid-default-prop rule (#2551)

Author: ota-meshi

lib/rules/require-valid-default-prop.js

@@ -250,71 +250,81 @@ module.exports = {
  }
 
  /**
- * @param {(ComponentObjectDefineProp | ComponentTypeProp | ComponentInferTypeProp)[]} props
- * @param { { [key: string]: Expression | undefined } } withDefaults
+ * @param {(ComponentObjectProp | ComponentTypeProp | ComponentInferTypeProp)[]} props
+ * @param {(propName: string) => Expression[]} otherDefaultProvider
  */
- function processPropDefs(props, withDefaults) {
+ function processPropDefs(props, otherDefaultProvider) {
  /** @type {PropDefaultFunctionContext[]} */
  const propContexts = []
  for (const prop of props) {
  let typeList
- let defExpr
+ /** @type {Expression[]} */
+ const defExprList = []
  if (prop.type === 'object') {
- const type = getPropertyNode(prop.value, 'type')
- if (!type) continue
+ if (prop.value.type === 'ObjectExpression') {
+ const type = getPropertyNode(prop.value, 'type')
+ if (!type) continue
 
- typeList = getTypes(type.value)
+  typeList = getTypes(type.value)
 
- const def = getPropertyNode(prop.value, 'default')
- if (!def) continue
+  const def = getPropertyNode(prop.value, 'default')
+  if (!def) continue
 
- defExpr = def.value
+ defExprList.push(def.value)
+ } else {
+ typeList = getTypes(prop.value)
+ }
  } else {
  typeList = prop.types
- defExpr = withDefaults[prop.propName]
  }
- if (!defExpr) continue
+ if (prop.propName != null) {
+ defExprList.push(...otherDefaultProvider(prop.propName))
+ }
+
+ if (defExprList.length === 0) continue
 
  const typeNames = new Set(
  typeList.filter((item) => NATIVE_TYPES.has(item))
  )
  // There is no native types detected
  if (typeNames.size === 0) continue
 
- const defType = getValueType(defExpr)
+ for (const defExpr of defExprList) {
+ const defType = getValueType(defExpr)
 
- if (!defType) continue
+  if (!defType) continue
 
- if (defType.function) {
- if (typeNames.has('Function')) {
- continue
- }
- if (defType.expression) {
- if (!defType.returnType || typeNames.has(defType.returnType)) {
+ if (defType.function) {
+ if (typeNames.has('Function')) {
  continue
  }
- report(defType.functionBody, prop, typeNames)
+ if (defType.expression) {
+ if (!defType.returnType || typeNames.has(defType.returnType)) {
+ continue
+ }
+ report(defType.functionBody, prop, typeNames)
+ } else {
+ propContexts.push({
+ prop,
+ types: typeNames,
+ default: defType
+ })
+ }
  } else {
- propContexts.push({
+ if (
+ typeNames.has(defType.type) &&
+ !FUNCTION_VALUE_TYPES.has(defType.type)
+ ) {
+ continue
+ }
+ report(
+ defExpr,
  prop,
- types: typeNames,
- default: defType
- })
- }
- } else {
- if (
- typeNames.has(defType.type) &&
- !FUNCTION_VALUE_TYPES.has(defType.type)
- ) {
- continue
- }
- report(
- defExpr,
- prop,
- [...typeNames].map((type) =>
- FUNCTION_VALUE_TYPES.has(type) ? 'Function' : type
+ [...typeNames].map((type) =>
+ FUNCTION_VALUE_TYPES.has(type) ? 'Function' : type
+ )
  )
- )
+ }
  }
  }
  return propContexts
@@ -364,7 +374,7 @@ module.exports = {
  prop.type === 'object' && prop.value.type === 'ObjectExpression'
  )
  )
- const propContexts = processPropDefs(props, {})
+ const propContexts = processPropDefs(props, () => [])
  vueObjectPropsContexts.set(obj, propContexts)
  },
  /**
@@ -402,18 +412,25 @@ module.exports = {
  const props = baseProps.filter(
  /**
  * @param {ComponentProp} prop
- * @returns {prop is ComponentObjectDefineProp | ComponentInferTypeProp | ComponentTypeProp}
+ * @returns {prop is ComponentObjectProp | ComponentInferTypeProp | ComponentTypeProp}
  */
  (prop) =>
  Boolean(
  prop.type === 'type' ||
  prop.type === 'infer-type' ||
- (prop.type === 'object' &&
- prop.value.type === 'ObjectExpression')
+ prop.type === 'object'
  )
  )
- const defaults = utils.getWithDefaultsPropExpressions(node)
- const propContexts = processPropDefs(props, defaults)
+ const defaultsByWithDefaults =
+ utils.getWithDefaultsPropExpressions(node)
+ const defaultsByAssignmentPatterns =
+ utils.getDefaultPropExpressionsForPropsDestructure(node)
+ const propContexts = processPropDefs(props, (propName) =>
+ [
+ defaultsByWithDefaults[propName],
+ defaultsByAssignmentPatterns[propName]?.expression
+ ].filter(utils.isDef)
+ )
  scriptSetupPropsContexts.push({ node, props: propContexts })
  },
  /**

lib/utils/index.js

@@ -1537,6 +1537,28 @@ 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'
+ },
+ /**
+ * Gets the props destructure property nodes for defineProp.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, AssignmentProperty | undefined> }
+ */
+ getPropsDestructure,
 
  getVueObjectType,
  /**
@@ -3144,6 +3166,68 @@ function getWithDefaultsProps(node) {
  return result
 }
 
+/**
+ * Gets the props destructure property nodes for defineProp.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, AssignmentProperty | undefined> }
+ */
+function getPropsDestructure(node) {
+ /** @type {ReturnType<typeof getPropsDestructure>} */
+ const result = Object.create(null)
+ const left = getLeftOfDefineProps(node)
+ if (!left || left.type !== 'ObjectPattern') {
+ return result
+ }
+ for (const prop of left.properties) {
+ if (prop.type !== 'Property') continue
+ const name = getStaticPropertyName(prop)
+ if (name != null) {
+ result[name] = prop
+ }
+ }
+ 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) {
+ /** @type {ReturnType<typeof getDefaultPropExpressionsForPropsDestructure>} */
+ const result = Object.create(null)
+ for (const [name, prop] of Object.entries(getPropsDestructure(node))) {
+ if (!prop) continue
+ const value = prop.value
+ if (value.type !== 'AssignmentPattern') continue
+ 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

tests/lib/rules/require-valid-default-prop.js

@@ -223,8 +223,7 @@ ruleTester.run('require-valid-default-prop', rule, {
  parser: require('@typescript-eslint/parser'),
  ecmaVersion: 6,
  sourceType: 'module'
- },
- errors: errorMessage('function')
+ }
  },
  {
  filename: 'test.vue',
@@ -241,8 +240,7 @@ ruleTester.run('require-valid-default-prop', rule, {
  parser: require('@typescript-eslint/parser'),
  ecmaVersion: 6,
  sourceType: 'module'
- },
- errors: errorMessage('function')
+ }
  },
  {
  filename: 'test.vue',
@@ -259,8 +257,7 @@ ruleTester.run('require-valid-default-prop', rule, {
  parser: require('@typescript-eslint/parser'),
  ecmaVersion: 6,
  sourceType: 'module'
- },
- errors: errorMessage('function')
+ }
  },
  {
  // https://github.com/vuejs/eslint-plugin-vue/issues/1853
@@ -304,6 +301,21 @@ ruleTester.run('require-valid-default-prop', rule, {
  })
  </script>`,
  ...getTypeScriptFixtureTestOptions()
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const { foo = 'abc' } = defineProps({
+ foo: {
+ type: String,
+ }
+ })
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser')
+ }
  }
  ],
 
@@ -1041,6 +1053,51 @@ ruleTester.run('require-valid-default-prop', rule, {
  }
  ],
  ...getTypeScriptFixtureTestOptions()
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const { foo = 123 } = defineProps({
+ foo: String
+ })
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser')
+ },
+ errors: [
+ {
+ message: "Type of the default value for 'foo' prop must be a string.",
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const { foo = 123 } = defineProps({
+ foo: {
+ type: String,
+ default: 123
+ }
+ })
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser')
+ },
+ errors: [
+ {
+ message: "Type of the default value for 'foo' prop must be a string.",
+ line: 3
+ },
+ {
+ message: "Type of the default value for 'foo' prop must be a string.",
+ line: 6
+ }
+ ]
  }
  ]
 })