From abdbcd1f4f8ea57a4a6a1e15580cb60671701c91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20Ledoux?= Date: Tue, 22 Jan 2019 09:37:43 -0600 Subject: [PATCH] fix: extract prop type from decorator arguments as well (#81) * fix: describe typo * feat: handle slots in render functions * fix: extract prop type from decorator arguments as well * add e2e tests to show it off * add description to show how to use it fixes #79 --- .../__tests__/classPropHandler.ts | 13 ++++++++++ src/script-handlers/classPropHandler.ts | 6 ++++- src/script-handlers/propHandler.ts | 2 +- tests/components/button-typescript/Button.vue | 25 +++++++++++++++++-- .../__snapshots__/button-ts.test.ts.snap | 16 +++++++++--- .../button-typescript/button-ts.test.ts | 4 +++ 6 files changed, 58 insertions(+), 8 deletions(-) diff --git a/src/script-handlers/__tests__/classPropHandler.ts b/src/script-handlers/__tests__/classPropHandler.ts index f28ae37..0b476b6 100644 --- a/src/script-handlers/__tests__/classPropHandler.ts +++ b/src/script-handlers/__tests__/classPropHandler.ts @@ -100,5 +100,18 @@ describe('propHandler', () => { }) expect(documentation.getPropDescriptor).toHaveBeenCalledWith('testDescribed') }) + + it('should extract type from decorator arguments', () => { + const src = ` + @Component + export default class MyTest { + @Prop({type:String}) + testTyped; + }` + tester(src, { + type: { name: 'string' }, + }) + expect(documentation.getPropDescriptor).toHaveBeenCalledWith('testTyped') + }) }) }) diff --git a/src/script-handlers/classPropHandler.ts b/src/script-handlers/classPropHandler.ts index 61bde39..bbdae95 100644 --- a/src/script-handlers/classPropHandler.ts +++ b/src/script-handlers/classPropHandler.ts @@ -5,7 +5,7 @@ import getDocblock from '../utils/getDocblock' import getDoclets from '../utils/getDoclets' import getTypeFromAnnotation from '../utils/getTypeFromAnnotation' import transformTagsIntoObject from '../utils/transformTagsIntoObject' -import { describeDefault, describeRequired } from './propHandler' +import { describeDefault, describeRequired, describeType } from './propHandler' export default function propHandler( documentation: Documentation, @@ -60,6 +60,10 @@ export default function propHandler( .filter((p: NodePath) => bt.isObjectProperty(p.node)) as Array< NodePath > + // if there is no type annotation, get it from the decorators arguments + if (!propPath.node.typeAnnotation) { + describeType(propsPath, propDescriptor) + } describeDefault(propsPath, propDescriptor) describeRequired(propsPath, propDescriptor) } diff --git a/src/script-handlers/propHandler.ts b/src/script-handlers/propHandler.ts index 9cb2948..df340b0 100644 --- a/src/script-handlers/propHandler.ts +++ b/src/script-handlers/propHandler.ts @@ -85,7 +85,7 @@ export default function propHandler(documentation: Documentation, path: NodePath } } -function describeType( +export function describeType( propPropertiesPath: Array>, propDescriptor: PropDescriptor, ) { diff --git a/tests/components/button-typescript/Button.vue b/tests/components/button-typescript/Button.vue index 0b9ed3e..1a7a25c 100644 --- a/tests/components/button-typescript/Button.vue +++ b/tests/components/button-typescript/Button.vue @@ -15,12 +15,30 @@ import { Component, Prop, Vue } from 'vue-property-decorator' */ @Component export default class MyComponent extends Vue { - @Prop() propA: number + aHiddenData: string + /** + * An example of a property typed through the decorators arguments + */ + @Prop({ type: String }) + propNoType + + /** + * An example of a property typed through the annotation + */ + @Prop + propA: number + + /** + * A prop with a default value + */ @Prop({ default: 'default value' }) propB: string - @Prop([String, Boolean]) + /** + * A prop with a hybrid type + */ + @Prop propC: string | boolean /** @@ -28,6 +46,9 @@ export default class MyComponent extends Vue { * @public */ onClick(a: string) { + /** + * Success event when we click + */ this.$emit('success', a) } } diff --git a/tests/components/button-typescript/__snapshots__/button-ts.test.ts.snap b/tests/components/button-typescript/__snapshots__/button-ts.test.ts.snap index bfee00e..f5116ba 100644 --- a/tests/components/button-typescript/__snapshots__/button-ts.test.ts.snap +++ b/tests/components/button-typescript/__snapshots__/button-ts.test.ts.snap @@ -6,7 +6,7 @@ Object { "displayName": "MyComponent", "events": Object { "success": Object { - "description": "", + "description": "Success event when we click", "properties": Array [ Object { "name": "", @@ -45,7 +45,7 @@ Object { ], "props": Object { "propA": Object { - "description": "", + "description": "An example of a property typed through the annotation", "tags": Object {}, "type": Object { "name": "number", @@ -56,7 +56,7 @@ Object { "func": false, "value": "'default value'", }, - "description": "", + "description": "A prop with a default value", "required": "", "tags": Object {}, "type": Object { @@ -64,12 +64,20 @@ Object { }, }, "propC": Object { - "description": "", + "description": "A prop with a hybrid type", "tags": Object {}, "type": Object { "name": "TSUnionType", }, }, + "propNoType": Object { + "description": "An example of a property typed through the decorators arguments", + "required": "", + "tags": Object {}, + "type": Object { + "name": "string", + }, + }, }, "slots": Object { "default": Object { diff --git a/tests/components/button-typescript/button-ts.test.ts b/tests/components/button-typescript/button-ts.test.ts index 5ab25e9..133c953 100644 --- a/tests/components/button-typescript/button-ts.test.ts +++ b/tests/components/button-typescript/button-ts.test.ts @@ -23,6 +23,10 @@ describe('tests button', () => { beforeEach(() => { props = docButton.props || {} }) + it('should return propNoType type as string', () => { + expect(props.propNoType.type).toMatchObject({ name: 'string' }) + }) + it('should return propA type as number', () => { expect(props.propA.type).toMatchObject({ name: 'number' }) })