fix(docgen): make displayName tag work (#358)

closes #357
vue-styleguidist · Mar 27, 2019 · c3e12ce · c3e12ce
1 parent 5f959c8
commit c3e12ce
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/packages/vue-docgen-api/src/script-handlers/__tests__/componentHandler.ts b/packages/vue-docgen-api/src/script-handlers/__tests__/componentHandler.ts
@@ -116,4 +116,19 @@ describe('componentHandler', () => {
 			]
 		})
 	})
+
+	it('should extract the @displayName tag seperately', () => {
+		const src = `
+		/**
+		 * @displayName Best Button Ever
+		 */
+    export default {
+    }
+    `
+		const def = parse(src).get('default')
+		if (def) {
+			componentHandler(documentation, def)
+		}
+		expect(documentation.set).toHaveBeenCalledWith('displayName', 'Best Button Ever')
+	})
 })
diff --git a/packages/vue-docgen-api/src/script-handlers/componentHandler.ts b/packages/vue-docgen-api/src/script-handlers/componentHandler.ts
@@ -1,6 +1,6 @@
 import * as bt from '@babel/types'
 import { NodePath } from 'ast-types'
-import { Documentation } from '../Documentation'
+import { Documentation, Tag } from '../Documentation'
 import getDocblock from '../utils/getDocblock'
 import getDoclets from '../utils/getDoclets'
 import transformTagsIntoObject from '../utils/transformTagsIntoObject'
@@ -42,8 +42,14 @@ export default function propHandler(documentation: Documentation, path: NodePath
 	documentation.set('description', jsDoc.description)
 
 	if (jsDoc.tags) {
+		const displayNamesTags = jsDoc.tags.filter(t => t.title === 'displayName')
+		if (displayNamesTags.length) {
+			const displayName = displayNamesTags[0] as Tag
+			documentation.set('displayName', displayName.content)
+		}
+
 		const tagsAsObject = transformTagsIntoObject(
-			jsDoc.tags.filter(t => t.title !== 'example') || []
+			jsDoc.tags.filter(t => t.title !== 'example' && t.title !== 'displayName') || []
 		)
 
 		const examples = jsDoc.tags.filter(t => t.title === 'example')

diff --git a/packages/vue-docgen-api/tests/components/button/Button.vue b/packages/vue-docgen-api/tests/components/button/Button.vue
@@ -27,6 +27,7 @@ console.log('mixin loaded but not parsed', hidden)
  * This is an example of creating a reusable button component and using it with external data.
  * @author [Rafael](https://github.com/rafaesc92)
  * @version 1.0.5
+ * @displayName Best Button
  */
 export default {
 	name: NAME,

diff --git a/packages/vue-docgen-api/tests/components/button/__snapshots__/button.test.ts.snap b/packages/vue-docgen-api/tests/components/button/__snapshots__/button.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`tests button should match the snapshot 1`] = `
 Object {
   "description": "This is an example of creating a reusable button component and using it with external data.",
-  "displayName": "buttonComponent",
+  "displayName": "Best Button",
   "events": Object {
     "success": Object {
       "description": "Success event.",

diff --git a/packages/vue-docgen-api/tests/components/button/button.test.ts b/packages/vue-docgen-api/tests/components/button/button.test.ts
@@ -20,7 +20,7 @@ describe('tests button', () => {
 	})
 
 	it('The component name should be buttonComponent', () => {
-		expect(docButton.displayName).toEqual('buttonComponent')
+		expect(docButton.displayName).toEqual('Best Button')
 	})
 
 	it('The component should have a description', () => {