js doc generator

by levchenko_d

HTML

<textarea></textarea>
<div class="result"></div>

CSS

.doc-fn{
  padding-top: 20px;
  font-size: 20px;
  color: blue;
  font-family: sans-serif;
}

.doc-description{
  color: gray;
  font-family: sans-serif;
}


table{
  width: 100%;
  border-spacing: 0;
}

td{
  border: solid 1px silver;
  width: 190px;
}


.arg{
  color: green;
}

.arg-lvl-1{
  color: blue;
}

JavaScript

/* functionName(arguments)
*	-	description line starts with dahs, argument with at(@)
* @argument {Argument_Type}(Required||Optional)[Default_Value] - argument description
* @argument.nestedArgument {Argument_Type}(Required||Optional)[Default_Value] - argument description
*/


var commentReg = new RegExp(/\/\*([\S\s]*?)\*\//gm);

$('textarea').on('change', function(){
console.log('change')
	var match = this.value.match(commentReg) || [];
  console.log('match',match);
  match.map(process);
});


function appendFn(line){
	var a=line.split('('),
  		fn=a[0],
      args=(a[1]||'').slice(0, -1).split(','),
      argsList =  args.map(function(arg){
 	return '<span class="arg">'+arg+'</span>';
 });
      
  
 $('.result').append('<div class="doc-fn"><span class="fn">'+fn+'</span>('+argsList.join(',')+')</div>');
}

function renderArgCode(arg){
 return (arg||'').replace('@','').split('.').map(function(a, i){
 	return '<code class="arg arg-lvl-'+i+'">'+a+'</code>'
 }).join('<span class="arg-dot">.</span>');
}


function appendArgument(line){
	var settingsReg = new RegExp(/(\@[^\]]*\]\s?-\s?)/gm),
  		settingsMatch = line.match(settingsReg);
  if(!settingsMatch) return null;
  
 	var	settings = settingsMatch[0],
      argReg = new RegExp(/@[^\{]*/gm),
      argName = (settings.match(argReg) || [])[0],
      typeReg = new RegExp(/\{[^\}]*\}/gm),
      type = (settings.match(typeReg) || [])[0],
      reqReg = new RegExp(/\([^\}]*\)/gm),
      req = (settings.match(reqReg) || [])[0],
      defReg = new RegExp(/\[[^\}]*\]/gm),
      def = (settings.match(defReg) || [])[0],
      description = line.replace(settings, '');
  
	$('.result').append('<div class="doc-'+type+'">'+
  	'<table><tr>'+
    	'<td>'+ renderArgCode(argName) +'</td>'+
    	'<td>'+ type +'</td>'+
    	'<td>'+ req +'</td>'+
    	'<td>'+ def +'</td>'+
    	'<td>'+ description +'</td>'+
    '</tr></table>'
  +'</div>');
}

function append(type, line){
	switch(type){
  	case 'example':
   ...