fix: display richer complex types in setup

packages/vue-docgen-api/src/script-setup-handlers/__tests__/setupPropHandler.ts

@@ -233,7 +233,10 @@ describe('setupPropHandler', () => {
 				const prop = await parserTest(src)
 				expect(documentation.getPropDescriptor).toHaveBeenCalledWith('complex')
 				expect(prop.type).toMatchObject({
-					name: 'object'
+					name: `{
+    foo: number,
+    bar: boolean
+}`
 				})
 			})
 		})
@@ -255,6 +258,22 @@ describe('setupPropHandler', () => {
 				expect(prop.required).toBe(true)
 				expect(prop.description).toBe('describe the local prop')
 			})
+
+			it('show prop type names when they are defined elsewhere', async () => {
+				const src = `
+					interface LocalType {
+            /**
+             * describe the local prop
+             */
+						inInterface: boolean
+					}
+
+					defineProps<{param:LocalType}>()
+					`
+				const prop = await parserTest(src)
+				expect(documentation.getPropDescriptor).toHaveBeenCalledWith('param')
+				expect(prop.type).toMatchObject({ name: 'LocalType' })
+			})
 		})
 
 		it('extracts defaults from withDefaults', async () => {

packages/vue-docgen-api/src/utils/getTypeFromAnnotation.ts

@@ -1,5 +1,6 @@
 import * as bt from '@babel/types'
 import { NodePath } from 'ast-types/lib/node-path'
+import { print } from 'recast'
 import { BlockTag, DocBlockTags, ParamType } from '../Documentation'
 import getDocblock from './getDocblock'
 import getDoclets from './getDoclets'
@@ -46,7 +47,7 @@ function printType(t?: bt.TSType): ParamType {
 
 	if (bt.isTSTypeLiteral(t)) {
 		return {
-			name: 'object'
+			name: print(t).code
 		}
 	}
 

packages/vue-docgen-api/tests/components/button/Button.vue

@@ -1,15 +1,12 @@
 <template>
-	<!-- here is a nice component template -->
-	<button
-		class="buttonComponent"
-		@click.prevent="
-			onClick()
-			console.log('count', count)
-		"
-	>
-		<!-- @slot Use this slot default -->
-		<slot></slot>
-	</button>
+  <!-- here is a nice component template -->
+  <button class="buttonComponent" @click.prevent="
+  onClick()
+  	console.log('count', count)
+  ">
+    <!-- @slot Use this slot default -->
+    <slot></slot>
+  </button>
 </template>
 
 <script>
@@ -37,127 +34,135 @@ console.log('mixin loaded but not parsed', hidden)
  * @displayName Best Button
  */
 export default {
-	name: NAME,
-	mixins: [another, genericMixin, colorMixin, multi, first, second],
-	props: {
-		/**
-		 * The size of the button
-		 * @values small, medium, large
-		 */
-		size: {
-			default: 'normal'
-		},
-		/**
-		 * Number of columns (1-12) the column should span.
-		 */
-		span: {
-			type: [String, Number]
-		},
-		/** Sm breakpoint and above */
-		spanSm: {
-			type: [String, Number]
-		},
-		/** Md breakpoint and above */
-		spanMd: {
-			type: [String, Number]
-		},
-		/**
-		 * The example props
-		 */
-		example: {
-			default: false
-		},
-		/**
-		 * Model example2
-		 * @model
-		 */
-		example2: {
-			type: String,
-			default: 'example model'
-		},
-		/**
-		 * The example3 props
-		 */
-		example3: {
-			type: Number,
-			default: 16
-		},
-		/**
-		 * @asdf qwerty
-		 */
-		customTag: String,
-		/**
-		 * @ignore
-		 * Add custom click actions.
-		 **/
-		onCustomClick: {
-			default: () => () => null
-		},
-		/**
-		 * Function default
-		 */
-		funcDefault: {
-			type: Function,
-			default: () => {
-				return 'foo'
-			}
-		},
-		/**
-		 * Object or array defaults must be returned from
-		 * a factory function
-		 */
-		propE: {
-			type: Object,
-			default: () => {
-				return { message: 'hello' }
-			}
-		},
-		/**
-		 *@ignore
-		 *
-		 */
-		prop1: String
-	},
-	data() {
-		return {
-			count: 0
-		}
-	},
-	methods: {
-		onClick() {
-			console.log('Hello World')
-			setTimeout(() => {
-				/**
-				 * Success event.
-				 *
-				 * @event success
-				 * @property {object} demo - example
-				 * @property {number} called - test called
-				 * @property {boolean} isPacked - Indicates whether the snowball is tightly packed.
-				 */
-				this.$emit(
-					'success',
-					{
-						demo: 'example'
-					},
-					10,
-					false
-				)
-			}, 1000)
-		}
-	}
+  name: NAME,
+  mixins: [another, genericMixin, colorMixin, multi, first, second],
+  props: {
+    /**
+     * The size of the button
+     * @values small, medium, large
+     */
+    size: {
+      default: 'normal'
+    },
+    /**
+     * Number of columns (1-12) the column should span.
+     */
+    span: {
+      type: [String, Number]
+    },
+    /** Sm breakpoint and above */
+    spanSm: {
+      type: [String, Number]
+    },
+    /** Md breakpoint and above */
+    spanMd: {
+      type: [String, Number]
+    },
+    /**
+     * The example props
+     */
+    example: {
+      default: false
+    },
+    /**
+     * Model example2
+     * @model
+     */
+    example2: {
+      type: String,
+      default: 'example model'
+    },
+    /**
+     * The example3 props
+     */
+    example3: {
+      type: Number,
+      default: 16
+    },
+    /**
+     * @asdf qwerty
+     */
+    customTag: String,
+    /**
+     * @ignore
+     * Add custom click actions.
+     **/
+    onCustomClick: {
+      default: () => () => null
+    },
+    /**
+     * Function default
+     */
+    funcDefault: {
+      type: Function,
+      default: () => {
+        return 'foo'
+      }
+    },
+    /**
+     * Object or array defaults must be returned from
+     * a factory function
+     */
+    propE: {
+      type: Object,
+      default: () => {
+        return { message: 'hello' }
+      }
+    },
+    /**
+     * @ignore
+     *
+     */
+    prop1: String,
+    /**
+     * @ignore
+     *
+     */
+    shape: PropTypes.shape({
+      color: PropTypes.string,
+      fontSize: PropTypes.number
+    })
+  },
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    onClick() {
+      console.log('Hello World')
+      setTimeout(() => {
+        /**
+         * Success event.
+         *
+         * @event success
+         * @property {object} demo - example
+         * @property {number} called - test called
+         * @property {boolean} isPacked - Indicates whether the snowball is tightly packed.
+         */
+        this.$emit(
+          'success',
+          {
+            demo: 'example'
+          },
+          10,
+          false
+        )
+      }, 1000)
+    }
+  }
 }
 </script>
 
 <style scoped>
 .button {
-	padding: 0.5em 1.5em;
-	color: #666;
-	background-color: #fff;
-	border: 1px solid blue;
-	border-radius: 0.3em;
-	text-align: center;
-	vertical-align: middle;
-	cursor: pointer;
+  padding: 0.5em 1.5em;
+  color: #666;
+  background-color: #fff;
+  border: 1px solid blue;
+  border-radius: 0.3em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
 }
 </style>

packages/vue-docgen-api/tests/components/button/__snapshots__/button.test.ts.snap

@@ -118,6 +118,24 @@ Object {
         "name": "string",
       },
     },
+    Object {
+      "name": "shape",
+      "tags": Object {
+        "ignore": Array [
+          Object {
+            "description": true,
+            "title": "ignore",
+          },
+        ],
+      },
+      "type": Object {
+        "func": true,
+        "name": "PropTypes.shape({
+  color: PropTypes.string,
+  fontSize: PropTypes.number
+})",
+      },
+    },
     Object {
       "description": "Another mixin",
       "mixin": Object {
@@ -215,7 +233,7 @@ a factory function",
       "defaultValue": Object {
         "func": true,
         "value": "() => {
-    return 'foo'
+  return 'foo'
 }",
       },
       "description": "Function default",

packages/vue-docgen-api/tests/components/button/button.test.ts

@@ -112,8 +112,8 @@ describe('tests button', () => {
 			})
 		})
 
-		it('should the component has seventeen props', () => {
-			expect(docButton.props?.length).toBe(18)
+		it('gives the component 19 props', () => {
+			expect(docButton.props?.length).toBe(19)
 		})
 
 		it('should the component has propsAnother prop default equal "blue"', () => {
@@ -188,7 +188,7 @@ describe('tests button', () => {
 			expect(getTestDescriptor(docButton.props, 'propE').type).toEqual({ name: 'object' })
 		})
 
-		it('should value default propE to be a funtion', () => {
+		it('should value default propE to be a function', () => {
 			const dv = getTestDescriptor(docButton.props, 'propE').defaultValue
 			const functionNoSpaceNoReturn = dv ? dv.value.replace(/[ \n\r]/g, '') : ''
 			expect(functionNoSpaceNoReturn).toEqual(`{message:'hello'}`)
@@ -241,6 +241,16 @@ describe('tests button', () => {
 				]
 			})
 		})
+
+		it('parses shapes', () => {
+			expect(getTestDescriptor(docButton.props, 'shape').type).toMatchObject({
+				name: `PropTypes.shape({
+  color: PropTypes.string,
+  fontSize: PropTypes.number
+})`,
+				func: true
+			})
+		})
 	})
 
 	describe('events', () => {