ReactTemplate

<script type="text/template" id="my-content">
    <div class="content">
        <h1><% title %></h1>
        <% while(c = colors.shift()) { %>
            <p><% c %></p>
        <% } %>
    </div>
</script>

<script type="text/javascript">
var stringToDom = function(str) 
{
	  var wrapMap = {
	    option: [1, '<select multiple="multiple">', '</select>'],
	    legend: [1, '<fieldset>', '</fieldset>'],
	    area: [1, '<map>', '</map>'],
	    param: [1, '<object>', '</object>'],
	    thead: [1, '<table>', '</table>'],
	    tr: [2, '<table><tbody>', '</tbody></table>'],
	    col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
	    td: [3, '<table><tbody><tr>', '</tr></tbody></table>'],
	    _default: [1, '<div>', '</div>']
	  };
	  wrapMap.optgroup = wrapMap.option;
	  wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
	  wrapMap.th = wrapMap.td;
	  var element = document.createElement('div');
	  var match = /<\s*\w.*?>/g.exec(str);
	  
	  if(match != null) 
	  {
	    var tag = match[0].replace(/</g, '').replace(/>/g, '');
	    var map = wrapMap[tag] || wrapMap._default, element;
	    str = map[1] + str + map[2];
	    element.innerHTML = str;
	    // Descend through wrappers to the right content
	    var j = map[0]+1;
	    while(j--) 
	    {
	      element = element.lastChild;
	    }
	  }
	  else 
	  {
	    // if only text is passed
	    element.innerHTML = str;
	    element = element.lastChild;
	  }
	  return element;
}
		
var Component = {
  title: 'Awesome template',
  colors: ['read', 'green', 'blue'],
  render: '#my-content'
}

var Engine = function(comp) {
  var parse = function(tplHTML) {
	  var re = /<%([^%>]+)?%>/g;
	  var code = [], cursor = 0;
	  while(match = re.exec(tplHTML)) {
	    code.push(tplHTML.slice(cursor, match.index));
	    code.push({code: match[1]}); // <-- expression
	    cursor = match.index + match[0].length;
	  }
	  code.push(tplHTML.substr(cursor, tplHTML.length - cursor));
	  var body = 'var r=[];\n';
	  while(line = code.shift()) 
	  {
	    if(typeof line === 'string') 
	    {
	      // escaping quotes
	      line = line.replace(/"/g, '\\"');
	      // removing new lines
	      line = line.replace(/[\r\t\n]/g, '');
	      body += 'r.push("' + line+ '");\n'
	    }
	    else 
	    {
	      if(line.code.match(/(^( )?(if|for|else|switch|case|break|while|{|}))(.*)?/g)) 
	      {
	        body += line.code + '\n';
	      } 
	      else 
	      {
	        body += 'r.push(' + line.code + ');\n';
	      }
	    }
	  }
	  body += 'return r.join("");';
	  console.log(body);
	  
	  body = 'with(component) {' + body + '}';
	  return new Function('component', body).apply(comp, [comp]);
	}

    var tpl = document.querySelector(comp.render);
    if(tpl) {
      var html = parse(tpl.innerHTML);
      return stringToDom(html);
    }
}

var el = Engine(Component);
document.querySelector('body').appendChild(el);
</script>