Added new settings in parse

Author: rafaesc

README.md

@@ -22,15 +22,24 @@ var vueDocs = require('vue-docgen-api');
 var componentInfo = vueDocs.parse(filePath);
 ```
 
+### parse(filePath)
+
+| Parameter |  Type | Description |
+| -------------- | ------ | --------------- |
+| filePath       | string | The file path |
 
-## parse(filePath \[, webpackConfig \])
+
+### parseWebpack(filePath \[, webpackConfig \])
+
+Has implemented [enhanced-require](https://github.com/webpack/enhanced-require)
 
 | 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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-docgen-api",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "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/main.js

@@ -1,12 +1,18 @@
 import * as utils from './utils';
 import parse from './parse';
+import parseWebpack from './parseWebpack';
 
-function defaultParse(src) {
+function defaultParse(src, webpackConfig) {
   return parse(src);
 }
 
+function defaultParseWebpack(src) {
+  return parseWebpack(src);
+}
+
 export {
 	defaultParse as parse,
+	defaultParseWebpack as parseWebpack,
 	utils,
 };
 

src/parse.js

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

src/parseWebpack.js

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

src/utils/getRequires.js

@@ -0,0 +1,38 @@
+'use strict';
+
+// Need to supply the regex test as a string for reuse in unit tests
+// Currently, trying to change flags throws a TypeError
+// Slated for change in ES6, but not possible now:
+// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Description
+const REQUIRE_ANYTHING_BASE = 'require\\s*\\(([^)]+)\\)';
+const REQUIRE_ANYTHING_REGEX = new RegExp(REQUIRE_ANYTHING_BASE, 'g');
+
+const SIMPLE_STRING_REGEX = /^"([^"]+)"$|^'([^']+)'$/;
+
+/**
+ * Returns a list of all strings used in require(...) calls in the given source code.
+ * If there is any other expression inside the require call, it throws an error.
+ *
+ * @param {string} code
+ * @returns {Array}
+ */
+module.exports = function getRequires(code) {
+	const requires = {};
+	code.replace(REQUIRE_ANYTHING_REGEX, function(requireExprMatch, requiredExpr) {
+		const requireStrMatch = SIMPLE_STRING_REGEX.exec(requiredExpr.trim());
+		if (!requireStrMatch) {
+			throw new Error(
+				`Requires using expressions are not supported in examples. (Used: ${requireExprMatch})`
+			);
+		}
+		const requiredString = requireStrMatch[1] ? requireStrMatch[1] : requireStrMatch[2];
+		requires[requiredString] = requiredString;
+	});
+	return requires;
+};
+
+Object.assign(module.exports, {
+	REQUIRE_ANYTHING_BASE,
+	REQUIRE_ANYTHING_REGEX,
+	SIMPLE_STRING_REGEX,
+});

src/utils/getSandbox.js

@@ -0,0 +1,110 @@
+import getDocFile from './getDocFile';
+import stateDoc from './stateDoc';
+const babel = require('babel-core');
+const fs = require('fs');
+const path = require('path');
+const getRequires = require('./getRequires');
+import vm from 'vm';
+
+const babelifyCode = code => {
+	const options = {
+		ast: false,
+		comments: false,
+		presets: ['babel-preset-es2015'],
+	};
+	return babel.transform(code, options);
+};
+
+function clone(obj) {
+	if (null == obj || 'object' != typeof obj) return obj;
+	var copy = obj.constructor();
+	for (var attr in obj) {
+			if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
+	}
+	return copy;
+}
+
+function getMixins(code, file) {
+	try {
+		const requiresFromComponent = getRequires(code);
+		let output = [];
+		Object.keys(requiresFromComponent).forEach((reqFromComponent) =>{
+			const tempRequire = reqFromComponent.split('/');
+			if (tempRequire[0] === '.' || tempRequire[0] === '..') {
+				const folderFile = path.dirname(file);
+				const pathRequire = path.join(path.normalize(folderFile), reqFromComponent) + '.js'
+				if (fs.existsSync(pathRequire)) {
+					const source = fs.readFileSync(pathRequire, { encoding: 'utf-8' });
+					stateDoc.saveMixin(source, pathRequire);
+					if (stateDoc.isMixin()){
+						const babelifycode = babelifyCode(source);
+						const mixin = evalComponentCode(babelifycode.code);
+						if (Object.keys(mixin.exports).length === 0 ) {
+							mixin.exports.default = mixin.module.exports;
+						}
+						if (mixin.exports.default) {
+							output.push(mixin.exports.default);
+						}
+					}
+				}
+			}
+		});
+		return output;
+	} catch (err) {
+		throw err
+	}
+}
+
+const evalComponentCode = (code) => {
+	try {
+		const script = new vm.Script(code, {});
+		const sandbox = {
+			exports: {},
+			Vue: {
+				component: () => {},
+				extended: () => {},
+			},
+			module: {
+				exports: {
+				},
+			},
+			require:()=> {
+				return function(){}
+			},
+			document: {},
+			window: {
+				location: {},
+			},
+			alert() {},
+			confirm() {},
+			console: {
+				log() {},
+				debug() {},
+			},
+			sessionStorage: {
+				getItem() {},
+				setItem() {},
+				removeItem() {},
+			},
+			localStorage: {
+				getItem() {},
+				setItem() {},
+				removeItem() {},
+			},
+		}
+		const context = new vm.createContext(sandbox);
+		script.runInContext(context);
+		const output = sandbox;
+		return clone(output);
+	} catch (err) {
+		throw err
+	}
+};
+
+module.exports = function getSandbox(jscodeReqest, file) {
+	const babelifycode = babelifyCode(jscodeReqest);
+	let component = evalComponentCode(babelifycode.code).exports;
+	const mixins = getMixins(babelifycode.code, file).reverse();
+	component.default.mixins = mixins;
+	return component;
+};

src/utils/index.js

@@ -2,4 +2,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';
 export {default as parser} from './parser';

src/utils/stateDoc.js

@@ -7,6 +7,8 @@ class stateDoc {
 		this.docComponent = {};
 		this.sourceComponent = '';
 		this.docMixins = [];
+		this.jscodeReqest = '';
+		this.docTemp = '';
 	}
 
 	isMainComponent(file){
@@ -15,13 +17,19 @@ class stateDoc {
 
 	saveComponent(source, file){
 		if (this.isMainComponent(file) && this.sourceComponent !== source) {
-			const jscodeReqest = getComponentModuleJSCode(source, file);
-			const doc = getDocFile(jscodeReqest, file);
+			this.jscodeReqest = getComponentModuleJSCode(source, file);
+			const doc = this.getDocFile(this.jscodeReqest, file);
 			this.docComponent = doc;
 		}
 	}
 
+	getDocFile(source, file){
+		this.docTemp = getDocFile(source, file)
+		return this.docTemp;
+	}
+
 	isMixin(doc) {
+		doc = doc || this.docTemp;
 		return doc.some(docPart => {
 			return docPart.kind === 'mixin'
 		});
@@ -36,9 +44,8 @@ class stateDoc {
 	}
 
 	saveMixin(source, file) {
-		let doc = getDocFile(source, file);
+		let doc = this.getDocFile(source, file);
 		if (this.isMixin(doc)) {
-
 			doc = doc.map(docPart =>{
 				let longnameSplit = docPart.longname.split('.');
 				if (longnameSplit[0] === 'default') {

tests/components/button/Button.vue

@@ -5,8 +5,11 @@
 </template>
 
 <script>
+import anotherMixin from '../../mixins/anotherMixin';
+import model from '../../utils/model.json';
 import genericMixin from './genericMixin';
 import colorMixin from './colorMixin';
+import review from '../../utils/review.json';
 
 /**
  * This is an example of creating a reusable grid component and using it with external data.

tests/mixins/anotherMixin.js

@@ -0,0 +1,20 @@
+/**
+ * @mixin
+ */
+module.exports = {
+	props: {
+		/**
+		 * Another Mixins Error
+		 */
+		color: {
+			type: String,
+			default: 'blue'
+		},
+		/**
+		 * Error
+		 */
+		size: {
+			default: 'example'
+		}
+	}
+}