feature: handle array as props list (vuejs#2465)

Author: mpiniarski

lib/rules/define-props-declaration.js

@@ -32,7 +32,9 @@ function* fixTypeBased(fixer, node, props, context) {
     }
   )
 
-  const componentPropsTypeCode = `{ ${componentPropsTypes.join(PROPS_SEPARATOR)} }`
+  const componentPropsTypeCode = `{ ${componentPropsTypes.join(
+    PROPS_SEPARATOR
+  )} }`
 
   // remove defineProps function parameters
   yield fixer.replaceText(node.arguments[0], '')
@@ -96,22 +98,34 @@ const mapNativeType = (nativeType) => {
  * @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
+  if (prop.type === 'array') {
+    if (prop.node.type !== 'Identifier') {
+      throw new Error(`Unexpected prop type inside array: ${prop.node.type}`)
+    }
+
+    return {
+      name: prop.node.name,
+      type: 'string',
+      required: false,
+      defaultValue: undefined
+    }
+  } else if (prop.type === 'object') {
+    if (prop.propName === null) {
+      throw new Error('Unexpected prop with null name.')
+    }
+
+    const type = optionGetType(prop.value, sourceCode)
+    const required = optionGetRequired(prop.value)
+    const defaultValue = optionGetDefault(prop.value)
+
+    return {
+      name: prop.propName,
+      type,
+      required,
+      defaultValue
+    }
   }
+  throw new Error(`Unexpected prop type: ${prop.type}.`)
 }
 
 /**

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

@@ -365,7 +365,7 @@ tester.run('define-props-declaration', rule, {
       code: `
       <script setup lang="ts">
       interface Kind { id: number; name: string }
-      
+
       const props = defineProps({
         kind: {
           type: Object as PropType<Kind>,
@@ -376,7 +376,7 @@ tester.run('define-props-declaration', rule, {
       output: `
       <script setup lang="ts">
       interface Kind { id: number; name: string }
-      
+
       const props = defineProps<{ kind?: Kind }>()
       </script>
       `,
@@ -393,7 +393,7 @@ tester.run('define-props-declaration', rule, {
       code: `
       <script setup lang="ts">
       import Kind from 'test'
-      
+
       const props = defineProps({
         kind: {
           type: Object as PropType<Kind>,
@@ -404,7 +404,7 @@ tester.run('define-props-declaration', rule, {
       output: `
       <script setup lang="ts">
       import Kind from 'test'
-      
+
       const props = defineProps<{ kind?: Kind }>()
       </script>
       `,
@@ -633,6 +633,26 @@ tester.run('define-props-declaration', rule, {
           line: 3
         }
       ]
+    },
+    // array
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      const props = defineProps([kind])
+      </script>
+      `,
+      output: `
+      <script setup lang="ts">
+      const props = defineProps<{ kind?: string }>()
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use type-based declaration instead of runtime declaration.',
+          line: 3
+        }
+      ]
     }
   ]
 })