Updated

Author: rafaesc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-docgen-api",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "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

@@ -9,6 +9,6 @@ export default function parse(file, webpackConfig) {
 	}
 	stateDoc.file = file;
 	const component = utils.getComponent(source, file, webpackConfig);
-	const vueDoc = utils.getVueDoc(stateDoc.docComponent, component);
+	const vueDoc = utils.getVueDoc(stateDoc.getDoc(), component);
 	return vueDoc;
 }

src/utils/index.js

@@ -2,6 +2,4 @@ export {default as getComponentModuleJSCode} from './getComponentModuleJSCode';
 export {default as getComponent} from './getComponent';
 export {default as getDocFile} from './getDocFile';
 export {default as getVueDoc} from './getVueDoc';
-export {default as getSandbox} from './getSandbox';
 export {default as parser} from './parser';
-export {default as sandbox} from './sandbox';

src/utils/optionsWebpack.js

@@ -6,6 +6,7 @@ export default {
 	resolve: {
 		modulesDirectories: ['node_modules', 'bower_components'],
 	},
+	watch: true,
 	module: {
 		loaders,
 	},

src/utils/processMethods.js

@@ -13,6 +13,7 @@ export default function processMethods(docFile, component) {
 		});
 	}
 	if (methods) {
+		docFile.reverse()
 		Object.keys(methods).forEach(methodName => {
 			const docPart = docFile.reverse().filter( comment => {
 				return (comment.longname.indexOf('methods.' + methodName) > -1)

src/utils/processProps.js

@@ -18,6 +18,7 @@ export default function processProps(docFile, component) {
 				listDocProps[propName] = getProp();
 			});
 		} else {
+			docFile.reverse()
 			Object.keys(props).forEach( key => {
 				const propName = key;
 				const docPart = docFile.reverse().filter( comment => {

src/utils/stateDoc.js

@@ -4,7 +4,8 @@ import getDocFile from './getDocFile';
 class stateDoc {
 	constructor(){
 		this.file = '';
-		this.docComponent = false
+		this.docComponent = {};
+		this.sourceComponent = '';
 		this.docMixins = [];
 	}
 
@@ -13,7 +14,7 @@ class stateDoc {
 	}
 
 	saveComponent(source, file){
-		if (!this.docComponent) {
+		if (this.isMainComponent(file) && this.sourceComponent !== source) {
 			const jscodeReqest = getComponentModuleJSCode(source, file);
 			const doc = getDocFile(jscodeReqest, file);
 			this.docComponent = doc;
@@ -26,6 +27,14 @@ class stateDoc {
 		});
 	}
 
+	getDoc(){
+		let docMixins = [].concat.apply([], this.docMixins)
+											.filter(function (docPart) {
+												return docPart.kind !== 'package';
+											});
+		return docMixins.concat(this.docComponent);
+	}
+
 	saveMixin(source, file) {
 		let doc = getDocFile(source, file);
 		if (this.isMixin(doc)) {
@@ -39,10 +48,21 @@ class stateDoc {
 				return docPart;
 			}).filter(docPart => {
 				return docPart.longname !== 'module.exports'
-			}).filter(docPart => {
-				return docPart.kind !== 'package'
 			})
-			this.docComponent = this.docComponent.concat(doc);
+			let index;
+			this.docMixins.forEach((docMixin, id) => {
+				const packages = docMixin.filter(function (docPart) {
+					return docPart.kind === 'package';
+				})[0];
+				if (packages && packages.files[0] === file) {
+					index = id;
+				}
+			})
+			if (index) {
+				this.docMixins[index] = doc;
+			} else {
+				this.docMixins.push(doc)
+			}
 		}
 	}
 }

tests/components/button/Button.vue

@@ -8,6 +8,11 @@
 import genericMixin from './genericMixin';
 import colorMixin from './colorMixin';
 
+/**
+ * This is an example of creating a reusable grid component and using it with external data.
+ * @author [Rafael](https://github.com/rafaesc92)
+ * @version 1.0.5
+*/
 export default {
 	name: 'buttonComponent',
 	mixins: [genericMixin, colorMixin],

tests/components/button/colorMixin.js

@@ -10,5 +10,11 @@ module.exports = {
 			type: String,
 			default: '#333'
 		},
+		/**
+		 * Error
+		 */
+		size: {
+			default: 'example'
+		}
 	}
 }

tests/index.js

@@ -29,6 +29,10 @@ describe('tests grid', () => {
 		expect(typeof docGrid['description'] !== 'undefined').to.be.true
 	})
 
+	it('should the component have msg prop default equal this is a secret', () => {
+		expect(docGrid['props']['msg']['defaultValue']['value']).to.equal('"this is a secret"')
+	})
+
 	it('should have methods', () => {
 		expect(typeof docGrid['methods'] !== 'undefined').to.be.true
 	})
@@ -56,7 +60,7 @@ describe('tests grid', () => {
 
 describe('tests button', () => {
 	docButton = api.parse(button);
-	console.log(JSON.stringify(docGrid, null, 2));
+	console.log(JSON.stringify(docButton, null, 2));
 
 	it('should return an object', () => {
 		expect(docButton).to.be.an('object')
@@ -70,8 +74,20 @@ describe('tests button', () => {
 		expect(docButton.description).to.equal('This is an example of creating a reusable grid component and using it with external data.');
 	})
 
-	it('should the component have three tags', () => {
-		expect(Object.keys(docButton['tags']).length).to.equal(3)
+	it('should the component have two tags', () => {
+		expect(Object.keys(docButton['tags']).length).to.equal(2)
+	})
+
+	it('should the component have four props', () => {
+		expect(Object.keys(docButton['props']).length).to.equal(4)
+	})
+
+	it('should the component have size prop default equal normal', () => {
+		expect(docButton['props']['size']['defaultValue']['value']).to.equal('"normal"')
+	})
+
+	it('should the component have size prop description equal The size of the button\n`small, normal, large`', () => {
+		expect(docButton['props']['size']['description']).to.equal('The size of the button\n`small, normal, large`')
 	})
 
 	it('should the component have authors', () => {