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