The mixins are documented and the ignore tag corrected

Author: rafaesc

README.md

@@ -22,37 +22,27 @@ var vueDocs = require('vue-docgen-api');
 var componentInfo = vueDocs.parse(filePath);
 ```
 
+
+## parse(filePath \[, webpackConfig \])
+
+| Parameter |  Type | Description |
+| -------------- | ------ | --------------- |
+| filePath       | string | The file path |
+| webpackConfig     | object | Optional argument, extracts the necessary loaders to document the component. |
+
+
 ## Using JSDoc tags
 
 You can use the following [JSDoc][] tags when documenting components, props and methods.
 
-## PropTypes
-
-### Example
+## Example
 
 For the following component
 
 ```html
 <template>
   <table class="grid">
-    <thead>
-      <tr>
-        <th v-for="key in columns"
-          @click="sortBy(key)"
-          :class="{ active: sortKey == key }">
-          {{ key | capitalize }}
-          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="entry in filteredData">
-        <td v-for="key in columns">
-          {{entry[key]}}
-        </td>
-      </tr>
-    </tbody>
+    <!-- -->
   </table>
 </template>
 
@@ -78,7 +68,7 @@ export default {
      */
     msg: {
       type: [String, Number],
-      default: 'Ejemplo'
+      default: text
     },
     /**
      * describe data
@@ -158,12 +148,6 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.grid {
-  margin-bottom: 20px;
-}
-</style>
 ```
 
 we are getting this output:
@@ -235,15 +219,15 @@ we are getting this output:
       }
     }
   ],
-  "displayName": "Grid",
+  "displayName": "grid",
   "props": {
     "msg": {
       "type": {
         "name": "string|number"
       },
       "required": "",
       "defaultValue": {
-        "value": "\"Ejemplo\"",
+        "value": "\"this is a secret\"",
         "computed": false
       },
       "tags": {
@@ -286,6 +270,26 @@ we are getting this output:
         "name": "array"
       },
       "description": "get columns list"
+    },
+    "filterKey": {
+      "type": {
+        "name": "string"
+      },
+      "required": "",
+      "defaultValue": {
+        "value": "\"example\"",
+        "computed": false
+      },
+      "tags": {
+        "ignore": [
+          {
+            "title": "ignore",
+            "description": true
+          }
+        ]
+      },
+      "comment": "/**\n     * filter key\n     * @ignore\n     */",
+      "description": "filter key"
     }
   },
   "comment": "/**\n * This is an example of creating a reusable grid component and using it with external data.\n * @version 1.0.5\n * @author [Rafael](https://github.com/rafaesc92)\n * @since Version 1.0.1\n */",
@@ -310,6 +314,60 @@ we are getting this output:
     ]
   }
 }
+
+```
+
+## Mixins
+If you import a mixin, for it to be documented you need to add in the header the mixin tag **@mixin**, for example
+
+```javascript
+// src/mixins/colorMixin.js
+
+/**
+ * @mixin
+ */
+module.exports = {
+	props: {
+		/**
+		 * The color for the button example
+		 */
+		color: {
+			type: String,
+			default: '#333'
+		},
+	}
+}
+```
+
+```html
+<template>
+<!-- -->
+</template>
+<script>
+// src/components/Button/Button.vue
+
+import colorMixin from '../../mixins/colorMixin';
+export default {
+  name: 'buttonComponent',
+  mixins: [colorMixin],
+  props: {
+    /**
+    * The size of the button
+    * `small, normal, large`
+    */
+    size: {
+      default: 'normal'
+    },
+    /**
+    * Add custom click actions.
+    **/
+    onCustomClick: {
+      default: () => () => null,
+    },
+  },
+  /* ... */
+}
+</script>
 ```
 
 ## Change log

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-docgen-api",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "Toolbox to extract information from Vue component files for documentation generation purposes.",
   "bugs": {
     "url": "https://github.com/vue-styleguidist/vue-docgen-api/issues"
@@ -10,7 +10,7 @@
     "build": "babel src/ -d --out-dir dist/ --ignore __tests__,__mocks__",
     "build:watch": "babel src/ --watch -d --out-dir dist/ --ignore __tests__,__mocks__",
     "prepublish": "npm run build",
-    "test": "mocha -c --recursive src/__tests__ tests src/utils/__tests__"
+    "test": "mocha -c src/__tests__ tests src/utils/__tests__"
   },
   "repository": {
     "type": "git",
@@ -27,16 +27,18 @@
   "homepage": "https://github.com/vue-styleguidist/vue-docgen-api#readme",
   "dependencies": {
     "babel-core": "^6.25.0",
-    "babel-preset-env": "^1.5.2",
-    "babel-preset-flow": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.5.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-flow": "^6.23.0",
     "doctrine": "^2.0.0",
+    "enhanced-require": "^0.5.0-beta6",
+    "hash-sum": "^1.0.2",
     "jsdoc-api": "^3.0.0",
+    "lru-cache": "^4.1.0",
     "vue-template-compiler": "^2.3.4",
-    "babel-preset-es2015": "^6.24.1",
-    "hash-sum": "^1.0.2",
-    "lru-cache": "^4.1.0"
+    "vue-webpack-loaders": "^1.0.4"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",

src/loaders/mixin-loader.js

@@ -0,0 +1,11 @@
+import stateDoc from '../utils/stateDoc';
+
+module.exports = function(source) {
+	/* istanbul ignore if */
+	if (this.cacheable) {
+		this.cacheable();
+	}
+	const file = this.request.split('!').pop();
+	stateDoc.saveMixin(source, file);
+	return source;
+}

src/loaders/vuedoc-loader.js

@@ -0,0 +1,11 @@
+import stateDoc from '../utils/stateDoc';
+
+module.exports = function(source) {
+	/* istanbul ignore if */
+	if (this.cacheable) {
+		this.cacheable();
+	}
+	const file = this.request.split('!').pop();
+	stateDoc.saveComponent(source, file);
+	return source;
+}

src/parse.js

@@ -1,14 +1,14 @@
 import fs from 'fs';
 import * as utils from './utils';
+import stateDoc from './utils/stateDoc';
 
-export default function parse(file) {
+export default function parse(file, webpackConfig) {
 	const source = fs.readFileSync(file, { encoding: 'utf-8' });
 	if (source === '') {
 		throw new Error('The document is empty');
 	}
-	const jscodeReqest = utils.getComponentModuleJSCode(source, file);
-	const component = utils.getSandbox(jscodeReqest).default;
-	const doc = utils.getDocFile(jscodeReqest, file);
-	const vueDoc = utils.getVueDoc(doc, component);
+	stateDoc.file = file;
+	const component = utils.getComponent(source, file, webpackConfig);
+	const vueDoc = utils.getVueDoc(stateDoc.docComponent, component);
 	return vueDoc;
 }

src/utils/getComponent.js

@@ -0,0 +1,24 @@
+import optionsWebpack from './optionsWebpack';
+const path = require('path');
+
+export default function getComponentModuleJSCode (source, file, webpackConfig){
+	let myRequire;
+	if (webpackConfig && webpackConfig.module && webpackConfig.module.loaders) {
+		optionsWebpack.module.loaders = webpackConfig.module.loaders;
+	}
+	let loaders = optionsWebpack.module.loaders;
+	loaders.push({
+		test: /\.vue$/,
+		exclude: /node_modules/,
+		loader: path.resolve(__dirname, '../loaders/vuedoc-loader.js'),
+	})
+
+	loaders.unshift({
+		test: /\.js$/,
+		exclude: /node_modules/,
+		loader: path.resolve(__dirname, '../loaders/mixin-loader.js'),
+	});
+
+	myRequire = require('enhanced-require')(module, optionsWebpack);
+	return myRequire(file)
+}

src/utils/getProp.js

@@ -35,6 +35,9 @@ export default function getProp(prop, docPart){
 					var func = prop.default.toString().replace(fnNameMatchRegex, 'function');
 					value = JSON.parse(JSON.stringify(func.replace(/\s\s+/g, ' ')))
 				} else {
+					if (!prop.type) {
+						obj['type'] = { name: typeof prop.default }
+					}
 					value = JSON.stringify(prop.default)
 				}
 				obj['defaultValue'] = {

src/utils/getSandbox.js

@@ -1,4 +1,5 @@
 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';

src/utils/index.js

@@ -0,0 +1,12 @@
+let loaders = require('vue-webpack-loaders');
+
+export default {
+	debug: true,
+	recursive: true,
+	resolve: {
+		modulesDirectories: ['node_modules', 'bower_components'],
+	},
+	module: {
+		loaders,
+	},
+}