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">
@@ -47,7 +49,7 @@ const props = defineProps({
 
 ### `"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,168 @@
 
 const utils = require('../utils')
 
+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 '() => void'
+    }
+    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 undefined
+    }
+
+    if (requiredProperty.value.type === 'Literal') {
+      return Boolean(requiredProperty.value.value)
+    }
+  }
+
+  // Unknown
+  return undefined
+}
+
+/**
+ * @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,10 +176,19 @@
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/define-props-declaration.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [
       {
         enum: ['type-based', 'runtime']
+      },
+      {
+        type: 'object',
+        properties: {
+          separateInterface: {
+            type: 'boolean',
+            default: false
+          }
+        }
       }
     ],
     messages: {
@@ -27,20 +198,87 @@
   },
   /** @param {RuleContext} context */
   create(context) {
+    const sourceCode = context.getSourceCode()
+
     const scriptSetup = utils.getScriptSetupElement(context)
     if (!scriptSetup || !utils.hasAttribute(scriptSetup, 'lang', 'ts')) {
       return {}
     }
 
     const defineType = context.options[0] || 'type-based'
+    const separateInterface = context.options[1]?.separateInterface || false
+
     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) {
+                  try {
+                    const propTypes = props.map((prop) =>
+                      getComponentPropData(prop, sourceCode)
+                    )
+
+                    const definePropsType = `{ ${propTypes
+                      .map(
+                        ({ name, type, required, defaultValue }) =>
+                          `${name}${
+                            required === false || defaultValue ? '?' : ''
+                          }: ${type}`
+                      )
+                      .join(', ')} }`
+
+                    // remove defineProps function parameters
+                    yield fixer.replaceText(node.arguments[0], '')
+
+                    // add type annotation
+                    if (separateInterface) {
+                      const variableDeclarationNode = node.parent.parent
+                      if (!variableDeclarationNode) {
+                        return
+                      }
+
+                      yield fixer.insertTextBefore(
+                        variableDeclarationNode,
+                        `interface Props ${definePropsType.replace(
+                          /;/g,
+                          ','
+                        )}; `
+                      )
+                      yield fixer.insertTextAfter(node.callee, `<Props>`)
+                    } else {
+                      yield fixer.insertTextAfter(
+                        node.callee,
+                        `<${definePropsType}>`
+                      )
+                    }
+
+                    // add defaults if needed
+                    const defaults = propTypes.filter(
+                      ({ defaultValue }) => defaultValue
+                    )
+                    if (defaults.length > 0) {
+                      const defaultsCode = defaults
+                        .map(
+                          ({ name, defaultValue }) =>
+                            `${name}: ${sourceCode.getText(defaultValue)}`
+                        )
+                        .join(', ')
+
+                      yield fixer.insertTextBefore(node, `withDefaults(`)
+                      yield fixer.insertTextAfter(
+                        node,
+                        `, { ${defaultsCode} })`
+                      )
+                    }
+                    return null
+                  } catch (error) {
+                    return null
+                  }
+                }
               })
             }
             break