feat: autofix in define-props-declaration: runtime syntax to type-based syntax (vuejs#2465)

handle separateInterface rule option

Author: mpiniarski

lib/rules/define-props-declaration.js

@@ -52,6 +52,15 @@ module.exports = {
     schema: [
       {
         enum: ['type-based', 'runtime']
+      },
+      {
+        type: 'object',
+        properties: {
+          separateInterface: {
+            type: 'boolean',
+            default: false
+          }
+        }
       }
     ],
     messages: {
@@ -156,6 +165,8 @@ module.exports = {
     }
 
     const defineType = context.options[0] || 'type-based'
+    const separateInterface = context.options[1]?.separateInterface || false
+
     return utils.defineScriptSetupVisitor(context, {
       onDefinePropsEnter(node, props) {
         switch (defineType) {
@@ -194,15 +205,28 @@ module.exports = {
                   const definePropsType = `{ ${propTypes
                     .map(
                       ({ name, type, required, defaultValue }) =>
-                        `${name}${(required === false || defaultValue) ? '?' : ''}: ${type}`
+                        `${name}${required === false || defaultValue ? '?' : ''}: ${type}`
                     )
                     .join(', ')} }`
 
                   yield fixer.replaceText(node.arguments[0], '')
-                  yield fixer.insertTextAfter(
-                    node.callee,
-                    `<${definePropsType}>`
-                  )
+
+                  if (separateInterface) {
+                    const variableDeclarationNode = node.parent.parent
+                    if (!variableDeclarationNode) return
+
+                    yield fixer.insertTextBefore(
+                      variableDeclarationNode,
+                      `interface Props ${definePropsType.replaceAll(';', ',')}; `
+                    )
+                    yield fixer.insertTextAfter(node.callee, `<Props>`)
+                  } else {
+                    yield fixer.insertTextAfter(
+                      node.callee,
+                      `<${definePropsType}>`
+                    )
+                  }
+
                   const defaults = propTypes.filter(
                     ({ defaultValue }) => defaultValue
                   )

tests/lib/rules/define-props-declaration.js

@@ -460,6 +460,31 @@ tester.run('define-props-declaration', rule, {
           line: 3
         }
       ]
+    },
+    // separate interface
+    {
+      filename: 'test.vue',
+      code: `
+        <script setup lang="ts">
+        const props = defineProps({
+          kind: {
+            type: Object as PropType<{ id: number; name: string }>
+          }
+        })
+        </script>
+        `,
+      output: `
+        <script setup lang="ts">
+        interface Props { kind: { id: number, name: string } }; const props = defineProps<Props>()
+        </script>
+        `,
+      options: ['type-based', { separateInterface: true }],
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
     }
   ]
 })