implements autofix in define-props-declaration (#2465)

docs/rules/define-props-declaration.md

@@ -10,13 +10,15 @@ since: v9.5.0
 
 > enforce declaration style of `defineProps`
 
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
 ## :book: Rule Details
 
 This rule enforces `defineProps` typing style which you should use `type-based` or `runtime` declaration.
 
 This rule only works in setup script and `lang="ts"`.
 
-<eslint-code-block :rules="{'vue/define-props-declaration': ['error']}">
+<eslint-code-block fix :rules="{'vue/define-props-declaration': ['error']}">
 
 ```vue
 <script setup lang="ts">
@@ -39,15 +41,23 @@ const props = defineProps({
 ## :wrench: Options
 
 ```json
- "vue/define-props-declaration": ["error", "type-based" | "runtime"]
+{
+ "vue/define-props-declaration": ["error",
+ "type-based" | "runtime",
+ {
+ "autoFixToSeparateInterface": false
+ }
+ ]
+}
 ```
 
 - `type-based` (default) enforces type-based declaration
 - `runtime` enforces runtime declaration
+- `autoFixToSeparateInterface` (`boolean`) define `interface Props` used for type-based declaration instead of providing types inline
 
 ### `"runtime"`
 
-<eslint-code-block :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
+<eslint-code-block fix :rules="{'vue/define-emits-declaration': ['error', 'runtime']}">
 
 ```vue
 <script setup lang="ts">

docs/rules/index.md

@@ -214,7 +214,7 @@ For example:
 | [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name | | :hammer: |
 | [vue/define-emits-declaration](./define-emits-declaration.md) | enforce declaration style of `defineEmits` | | :hammer: |
 | [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench::bulb: | :lipstick: |
-| [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` | | :hammer: |
+| [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` | :wrench: | :hammer: |
 | [vue/enforce-style-attribute](./enforce-style-attribute.md) | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags | | :hammer: |
 | [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute | | :hammer: |
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |

lib/rules/define-props-declaration.js

@@ -6,6 +6,215 @@
 
 const utils = require('../utils')
 
+const PROPS_SEPARATOR = ', '
+
+/**
+ * @param {RuleFixer} fixer
+ * @param {CallExpression} node
+ * @param {ComponentProp[]} props
+ * @param {RuleContext} context
+ */
+function* fixTypeBased(fixer, node, props, context) {
+ const sourceCode = context.getSourceCode()
+
+ const componentPropsData = props.map((prop) =>
+ getComponentPropData(prop, sourceCode)
+ )
+
+ const componentPropsTypes = componentPropsData.map(
+ ({ name, type, required, defaultValue }) => {
+ const isOptional = required === false || defaultValue
+ return `${name}${isOptional ? '?' : ''}: ${type}`
+ }
+ )
+
+ const componentPropsTypeCode = `{ ${componentPropsTypes.join(PROPS_SEPARATOR)} }`
+
+ // remove defineProps function parameters
+ yield fixer.replaceText(node.arguments[0], '')
+
+ // add type annotation
+ yield fixer.insertTextAfter(node.callee, `<${componentPropsTypeCode}>`)
+
+ // add defaults if needed
+ const propTypesDataWithDefaultValue = componentPropsData.filter(
+ ({ defaultValue }) => defaultValue
+ )
+ if (propTypesDataWithDefaultValue.length > 0) {
+ const defaultsCode = propTypesDataWithDefaultValue
+ .map(
+ ({ name, defaultValue }) =>
+ `${name}: ${sourceCode.getText(defaultValue)}`
+ )
+ .join(PROPS_SEPARATOR)
+
+ yield fixer.insertTextBefore(node, `withDefaults(`)
+ yield fixer.insertTextAfter(node, `, { ${defaultsCode} })`)
+ }
+ return null
+}
+const mapNativeType = (/** @type {string} */ nativeType) => {
+ switch (nativeType) {
+ case 'String': {
+ return 'string'
+ }
+ case 'Number': {
+ return 'number'
+ }
+ case 'Boolean': {
+ return 'boolean'
+ }
+ case 'Object': {
+ return 'Record<string, any>'
+ }
+ case 'Array': {
+ return 'any[]'
+ }
+ case 'Function': {
+ return '(...args: any[]) => any'
+ }
+ case 'Symbol': {
+ return 'symbol'
+ }
+ default: {
+ return nativeType
+ }
+ }
+}
+
+/**
+ * @param {ComponentProp} prop
+ * @param {SourceCode} sourceCode
+ */
+function getComponentPropData(prop, sourceCode) {
+ if (prop.propName === null) {
+ throw new Error('Unexpected prop with null name.')
+ }
+ if (prop.type !== 'object') {
+ throw new Error(`Unexpected prop type: ${prop.type}.`)
+ }
+ const type = optionGetType(prop.value, sourceCode)
+ const required = optionGetRequired(prop.value)
+ const defaultValue = optionGetDefault(prop.value)
+
+ return {
+ name: prop.propName,
+ type,
+ required,
+ defaultValue
+ }
+}
+
+/**
+ * @param {Expression} node
+ * @param {SourceCode} sourceCode
+ * @returns {string}
+ */
+function optionGetType(node, sourceCode) {
+ switch (node.type) {
+ case 'Identifier': {
+ return mapNativeType(node.name)
+ }
+ case 'ObjectExpression': {
+ const typeProperty = utils.findProperty(node, 'type')
+ if (typeProperty == null) {
+ return sourceCode.getText(node)
+ }
+ return optionGetType(typeProperty.value, sourceCode)
+ }
+ case 'ArrayExpression': {
+ return node.elements
+ .map((element) => {
+ // TODO handle SpreadElement
+ if (element === null || element.type === 'SpreadElement') {
+ return sourceCode.getText(node)
+ }
+
+ return optionGetType(element, sourceCode)
+ })
+ .filter(Boolean)
+ .join(' | ')
+ }
+ case 'TSAsExpression': {
+ const typeAnnotation = node.typeAnnotation
+ if (typeAnnotation.typeName.name !== 'PropType') {
+ return sourceCode.getText(node)
+ }
+
+ // in some project configuration parser populates deprecated field `typeParameters` instead of `typeArguments`
+ const typeArguments =
+ 'typeArguments' in node
+ ? typeAnnotation.typeArguments
+ : typeAnnotation.typeParameters
+
+ const typeArgument = Array.isArray(typeArguments)
+ ? typeArguments[0].params[0]
+ : typeArguments.params[0]
+
+ if (typeArgument === undefined) {
+ return sourceCode.getText(node)
+ }
+
+ return sourceCode.getText(typeArgument)
+ }
+ case 'LogicalExpression': {
+ if (node.operator === '||') {
+ const left = optionGetType(node.left, sourceCode)
+ const right = optionGetType(node.right, sourceCode)
+ if (left && right) {
+ return `${left} | ${right}`
+ }
+ }
+ return sourceCode.getText(node)
+ }
+ default: {
+ return sourceCode.getText(node)
+ }
+ }
+}
+
+/**
+ * @param {Expression} node
+ * @returns {boolean | undefined }
+ */
+function optionGetRequired(node) {
+ if (node.type === 'ObjectExpression') {
+ const requiredProperty = utils.findProperty(node, 'required')
+ if (requiredProperty == null) {
+ return false
+ }
+
+ if (requiredProperty.value.type === 'Literal') {
+ return Boolean(requiredProperty.value.value)
+ }
+ }
+
+ // Unknown
+ return false
+}
+
+/**
+ * @param {Expression} node
+ * @returns {Expression | undefined }
+ */
+function optionGetDefault(node) {
+ if (node.type === 'ObjectExpression') {
+ const defaultProperty = utils.findProperty(node, 'default')
+ if (defaultProperty == null) {
+ return undefined
+ }
+
+ return defaultProperty.value
+ }
+
+ // Unknown
+ return undefined
+}
+
+/**
+ * @typedef {import('../utils').ComponentProp} ComponentProp
+ */
+
 module.exports = {
  meta: {
  type: 'suggestion',
@@ -14,7 +223,7 @@ module.exports = {
  categories: undefined,
  url: 'https://eslint.vuejs.org/rules/define-props-declaration.html'
  },
- fixable: null,
+ fixable: 'code',
  schema: [
  {
  enum: ['type-based', 'runtime']
@@ -33,14 +242,18 @@ module.exports = {
  }
 
  const defineType = context.options[0] || 'type-based'
+
  return utils.defineScriptSetupVisitor(context, {
- onDefinePropsEnter(node) {
+ onDefinePropsEnter(node, props) {
  switch (defineType) {
  case 'type-based': {
  if (node.arguments.length > 0) {
  context.report({
  node,
- messageId: 'hasArg'
+ messageId: 'hasArg',
+ *fix(fixer) {
+ yield* fixTypeBased(fixer, node, props, context)
+ }
  })
  }
  break