RevivedTmpl.md

###AST

Разбор HTML вёрстки:

//  html:
var html = '<div class="oh"><p>hi</p></div>';

// AST:
tmpl.template(html).handle(function (traversedAST)) {
   //callback функция
   console.log(traversedAST);
});

####Пример разложения на AST:

    {
	    // может быть tag, text или component
		type: 'tag',

	    // название тэга
	    name: 'div',

	    // распарсеные атрибуты объекта
	    attrs: {
	        class: {
	       		data: {
	       			type: 'text',
	       			value: 'oh'
	       		}
	        }
	    },

	    // самозакрывающийся тэг или нет
	    selfclosing: false,

	    // массив детей данного объекта
	    children: [
	        {
	            type: 'tag',
	            name: 'p',
	            attrs: {},
	            selfclosing: false,
	            children: [
	                // пример текстовой ноды в роли ребенка
	                {
	                    type: 'text',
	                    data: {
	                    	type: 'text',
	                    	value: 'hi'
	                    }
	                    raw: 'hi'
	                }
	            ]
	        }
	    ]
    }

Такое дерево может храниться как в виде объекта, так и в виде функции

####Пример функции с безопасным созданием тэгов:

function (___helpers) {
   var modules = __helpers.modules,
       decorators = __helpers.decorators;
       
    var result = [
	    TMPL.createTag({
	    	name: 'div',
	    	selfclosing: false,
	    	attrs: {
	    	   class: {
	    	   	data: {
	    	   	   type: 'text',
	    	   	   value: 'oh'
	    	   	}
	    	   }
	    	},
	    	children: [
	    		TMPL.createTag({
	    			name: 'p',
	    			selfclosing: 'false',
	    			attrs: {},
	    			children: [
	    				TMPL.createTextNode({
	    					'hi'	
	    				})
	    			]
	    		})
	    	]
	    })
    ];  

}

####Пример функции с конкатенацией:

function (data, ___helpers, includes) {
   var modules = __helpers.modules,
       partial = __helpers.partial,
       decorators = __helpers.decorators,
       __getexpression = __helpers.getexpression;

   var result = '<div class="oh"><p>hi</p></div>';
   return result;
}

###Управляющие конструкции:

####if:

//  html:
var html = '<div class="oh"><ws:if data="{{ a }}"><p>hi</p></ws:if></div>';

// AST:
tmpl.template(html).handle(function (traversedAST)) {
   //callback функция
   console.log(traversedAST);
});

AST:

    {
	    type: 'tag',
	    name: 'div',
	    attrs: {
	        class: {
	       		data: {
	       			type: 'text',
	       			value: 'oh'
	       		}
	        }
	    },
	    selfclosing: false,
	    children: [
		    {
			    type: 'tag',
			    name: 'ws:if',
			    condition: {
				    	type: 'var',
			            name: {
			               body: [{
			                  type: 'Identifier',
			                  string: 'a'
			               }]
			            },
			            value: undefined
				},
			    attrs: {},
			    selfclosing: false,
			    children: [
			        {
			            type: 'tag',
			            name: 'p',
			            attrs: {},
			            selfclosing: false,
			            children: [
			                {
			                    type: 'text',
			                    data: {
			                    	type: 'text',
			                    	value: 'hi'
			                    }
			                    raw: 'hi'
			                }
			            ]
			        }
			    ]
			}

	    ]
    }

Такое дерево может храниться как в виде объекта, так и в виде функции

####Пример функции с безопасным созданием тэгов:

function (___helpers) {
   var modules = __helpers.modules,
       decorators = __helpers.decorators;
       
    var result = [
	    TMPL.createTag({
	    	name: 'div',
	    	selfclosing: false,
	    	attrs: {
	    	   class: {
	    	   	data: {
	    	   	   type: 'text',
	    	   	   value: 'oh'
	    	   	}
	    	   }
	    	},
	    	children: [
		    	TMPL.createDirective({
			    	name: 'if',
			    	selfclosing: false,
			    	condition: {
				    	type: 'var',
			            name: {
			               body: [{
			                  type: 'Identifier',
			                  string: 'a'
			               }]
			            },
			            value: undefined
			    	},
			    	children: [
			    		TMPL.createTag({
			    			name: 'p',
			    			selfclosing: false,
			    			attrs: {},
			    			children: [
			    				TMPL.createTextNode({
			    					'hi'	
			    				})
			    			]
			    		})
					]
		    	})

	    	]
	    })
    ];  

}

####Пример функции с конкатенацией:

function (data, ___helpers, includes) {
   var modules = __helpers.modules,
       partial = __helpers.partial,
       decorators = __helpers.decorators,
       __getexpression = __helpers.getexpression;

   var result = '<div class="oh">'; if (__getexpression('a', data)) { result += '<p>hi</p>'; } result += '</div>';
   return result;
}

####for:

//  html:
var html = '<div class="oh"><ws:for data="i in 10"><p>hi</p></ws:if></div>';

// AST:
tmpl.template(html).handle(function (traversedAST)) {
   //callback функция
   console.log(traversedAST);
});

AST:

    {
	    type: 'tag',
	    name: 'div',
	    attrs: {
	        class: {
	       		data: {
	       			type: 'text',
	       			value: 'oh'
	       		}
	        }
	    },
	    selfclosing: false,
	    children: [
		    {
			    type: 'tag',
			    name: 'ws:for',
			    data: {
					index: false,
					var: 'index',
					source: {
					    type: 'var',
                        name: {
                           body: [{
                              type: 'Literal',
                              string: '10'
                           }]
                        },
                        value: undefined
					}
				},
			    attrs: {},
			    selfclosing: false,
			    children: [
			        {
			            type: 'tag',
			            name: 'p',
			            attrs: {},
			            selfclosing: false,
			            children: [
			                {
			                    type: 'text',
			                    data: {
			                    	type: 'text',
			                    	value: 'hi'
			                    }
			                    raw: 'hi'
			                }
			            ]
			        }
			    ]
			}

	    ]
    }

Такое дерево может храниться как в виде объекта, так и в виде функции

####Пример функции с безопасным созданием тэгов:

function (___helpers) {
   var modules = __helpers.modules,
       decorators = __helpers.decorators;
       
    var result = [
	    TMPL.createTag({
	    	name: 'div',
	    	selfclosing: false,
	    	attrs: {
	    	   class: {
	    	   	data: {
	    	   	   type: 'text',
	    	   	   value: 'oh'
	    	   	}
	    	   }
	    	},
	    	children: [
		    	TMPL.createDirective({
			    	name: 'for',
			    	selfclosing: false,
			    	data: {
				    	index: false,
				    	var: 'index',
				    	source: {
						    type: 'var',
	                        name: {
	                           body: [{
	                              type: 'Literal',
	                              string: '10'
	                           }]
	                        },
	                        value: undefined	
						}
			    	},
			    	children: [
			    		TMPL.createTag({
			    			name: 'p',
			    			selfclosing: false,
			    			attrs: {},
			    			children: [
			    				TMPL.createTextNode({
			    					'hi'	
			    				})
			    			]
			    		})
					]
		    	})

	    	]
	    })
    ];  
}

####Пример функции с конкатенацией:

function (data, ___helpers, includes) {
   var modules = __helpers.modules,
       partial = __helpers.partial,
       decorators = __helpers.decorators,
       calculators = __helpers.calculators,
       iterators = __helpers.iterators,
       __getexpression = __helpers.getexpression;

   var result = '<div class="oh">';  iterators(__getexpression('10', data), function (item, index) { result += '<p>hi</p>' }); result += '</div>';
   return result;
}

####partial:

//  html:
var html = '<div class="oh"><ws:partial template="{{a}}" /></div>';

// AST:
tmpl.template(html).handle(function (traversedAST)) {
   //callback функция
   console.log(traversedAST);
});

AST:

    {
	    type: 'tag',
	    name: 'div',
	    attrs: {
	        class: {
	       		data: {
	       			type: 'text',
	       			value: 'oh'
	       		}
	        }
	    },
	    selfclosing: false,
	    children: [
		    {
			    type: 'tag',
			    name: 'ws:partial',
			    template: {
					{
					    type: 'var',
                        name: {
                           body: [{
                              type: 'Identifier',
                              string: 'a'
                           }]
                        },
                        value: undefined
					}
				},
			    attrs: {},
			    selfclosing: true
			}

	    ]
    }

Такое дерево может храниться как в виде объекта, так и в виде функции

####Пример функции с безопасным созданием тэгов:

function (___helpers) {
   var modules = __helpers.modules,
       decorators = __helpers.decorators;
       
    var result = [
	    TMPL.createTag({
	    	name: 'div',
	    	selfclosing: false,
	    	attrs: {
	    	   class: {
	    	   	data: {
	    	   	   type: 'text',
	    	   	   value: 'oh'
	    	   	}
	    	   }
	    	},
	    	children: [
		    	TMPL.createDirective({
			    	name: 'partial',
			    	selfclosing: true,
			    	template: {
					    type: 'var',
                        name: {
                           body: [{
                              type: 'Identifier',
                              string: 'a'
                           }]
                        },
                        value: undefined
					}
		    	})

	    	]
	    })
    ];  
}

####Пример функции с конкатенацией:

function (data, ___helpers, includes) {
   var modules = __helpers.modules,
       partial = __helpers.partial,
       decorators = __helpers.decorators,
       calculators = __helpers.calculators,
       iterators = __helpers.iterators,
       __getexpression = __helpers.getexpression;

   var result = '<div class="oh">'; result += partial(__getexpression('a', data)); result += '</div>';
   return result;
}