feature: handle array as props list (#2465)

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
+ }
+ ]
  }
  ]
 })