[FIX]: The name of the component is equal to the property defined in the name component, this is required

Author: rafaesc

README.md

@@ -312,6 +312,17 @@ we are getting this output:
 }
 ```
 
+## Change log
+
+The change log can be found on the [Releases page](https://github.com/vue-styleguidist/vue-docgen-api/releases).
+
+## Authors and license
+
+[Rafael Escala](https://github.com/rafaesc92)
+
+MIT License.
+
+
 [JSDoc]: http://usejsdoc.org/
 [vue]: https://vuejs.org/
 [babel]: https://www.npmjs.com/package/babel-core

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-docgen-api",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Toolbox to extract information from Vue component files for documentation generation purposes.",
   "bugs": {
     "url": "https://github.com/vue-styleguidist/vue-docgen-api/issues"

src/parse.js

@@ -7,7 +7,7 @@ export default function parse(file) {
 		throw new Error('The document is empty');
 	}
 	const jscodeReqest = utils.getComponentModuleJSCode(source, file);
-	const component = utils.getSandbox(jscodeReqest, file).default;
+	const component = utils.getSandbox(jscodeReqest).default;
 	const doc = utils.getDocFile(jscodeReqest, file);
 	const vueDoc = utils.getVueDoc(doc, component);
 	return vueDoc;

src/utils/getVueDoc.js

@@ -3,31 +3,14 @@ import processTags from './processTags';
 import processProps from './processProps';
 import processMethods from './processMethods';
 
-const getFileName = (fileName) => {
-	return fileName.split('\\').reverse()[0].split('.')[0]
-}
-
-const capitalizeFirstLetter = (str) => {
-  return str[0].toUpperCase() + str.substr(1)
-}
-
-const kebabToCamel= (myString) => {
-  return myString.replace(/-([aA-zZ])/g, function (g) { return g[1].toUpperCase() })
-}
-
-function getFileNameComponent(doc) {
-	const packageComponent = doc.filter( comment => {
-		return comment.kind === 'package'
-	} )[0];
-	const fileName = packageComponent['files'][0];
-	return capitalizeFirstLetter(kebabToCamel(getFileName(fileName)));
-}
-
 export default function getVueDoc(docFile, component) {
 	let displayName;
 	let docComponent;
+	if (!component.name || component.name === '') {
+		throw new Error("The component has no name, add 'el' property on the Vue component");
+	}
+	displayName = component.name;
 	if (docFile) {
-		displayName = getFileNameComponent(docFile);
 		docFile = docFile.filter( comment => {
 			return comment.kind !== 'package'
 		});
@@ -36,7 +19,6 @@ export default function getVueDoc(docFile, component) {
 		})[0];
 	} else {
 		docFile = [];
-		displayName = component.name || EMPTY;
 		docComponent = false;
 	}
 	let description = EMPTY;

tests/components/button/Button.vue

@@ -1,16 +1,16 @@
 <template>
-<button class="button" @click.prevent="onClick">
+<button class="buttonComponent" @click.prevent="onClick">
 	<slot></slot>
 </button>
 </template>
 
 <script>
 
 export default {
-	name: 'button',
+	name: 'buttonComponent',
 	props: {
 		/**
-		 * The color for the button
+		 * The color for the button example
 		 */
 		color: {
 			type: String,

tests/index.js

@@ -3,54 +3,60 @@ var api = require('../dist/main');
 var grid = path.join(__dirname,  './components/grid/Grid.vue');
 var button = path.join(__dirname,  './components/button/Button.vue');
 const expect = require("chai").expect;
+let docGrid;
+let docButton;
 
-describe('tests', () => {
-	it('should not return error', () => {
-		expect(() => {api.parse(grid)}).to.not.throw()
-		expect(() => {api.parse(button)}).to.not.throw()
+describe('tests components', () => {
+	docGrid = api.parse(grid);
+	docButton = api.parse(button);
+	console.log(JSON.stringify(docButton, null, 2));
+
+	it('should return an object', () => {
+		expect(docGrid).to.be.an('object')
+		expect(docButton).to.be.an('object')
 	})
 
-	const docJson = api.parse(grid);
-	const docButtonJson = api.parse(button);
-	console.log(JSON.stringify(docButtonJson, null, 2));
+	it('The component name should be buttonComponent', () => {
+		expect(docButton.displayName).to.equal('buttonComponent');
+	})
 
-	it('should return an object', () => {
-		expect(docJson).to.be.an('object')
+	it('The component name should be grid', () => {
+		expect(docGrid.displayName).to.equal('grid');
 	})
 
 	it('should the component have tags', () => {
-		expect(typeof docJson['tags'] !== 'undefined').to.be.true
+		expect(typeof docGrid['tags'] !== 'undefined').to.be.true
 	})
 
 	it('should the component have authors', () => {
-		expect(typeof docJson['tags']['author'] !== 'undefined').to.be.true
+		expect(typeof docGrid['tags']['author'] !== 'undefined').to.be.true
 	})
 
 	it('should the component have description', () => {
-		expect(typeof docJson['description'] !== 'undefined').to.be.true
+		expect(typeof docGrid['description'] !== 'undefined').to.be.true
 	})
 
 	it('should have methods', () => {
-		expect(typeof docJson['methods'] !== 'undefined').to.be.true
+		expect(typeof docGrid['methods'] !== 'undefined').to.be.true
 	})
 
 	it('should the component have one method', () => {
-		expect(Object.keys(docJson['methods']).length === 1).to.be.true
+		expect(Object.keys(docGrid['methods']).length === 1).to.be.true
 	})
 
 	it('should have props', () => {
-		expect(typeof docJson['props'] !== 'undefined').to.be.true
+		expect(typeof docGrid['props'] !== 'undefined').to.be.true
 	})
 
 	it('should the component have version', () => {
-		expect(typeof docJson['tags']['version'] !== 'undefined').to.be.true
+		expect(typeof docGrid['tags']['version'] !== 'undefined').to.be.true
 	})
 
 	it('should the component have three prop', () => {
-		expect(Object.keys(docJson['props']).length === 3).to.be.true
+		expect(Object.keys(docGrid['props']).length === 3).to.be.true
 	})
 
 	it('should the prop msg have four tags', () => {
-		expect(Object.keys(docJson['props']['msg']['tags']).length === 4).to.be.true
+		expect(Object.keys(docGrid['props']['msg']['tags']).length === 4).to.be.true
 	})
 })