JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output1"></div>
JavaScript
var Template = function(tpl, data){
var cursor = 0,
code = "var r=[];\n",
stack = [],
re = /\{\{(.*?)\}\}/gmi;
var variable = function(line, obj) {
return line == '.' ? obj : eval("try{obj."+line+";} catch(e){try{this."+line+";} catch(e){}}");
};
var block = function(obj) {
var args = Array.prototype.slice.call(arguments, 1),
out = '';
if(Array.isArray(obj)) {
for(var i=0, len=obj.length; i<len; i++) {
var el = obj[i];
for(var i2=0, len2=args.length; i2<len2; i2++) {
out += typeof args[i2] === 'function' ? args[i2].call(null, el) : args[i2];
}
}
} else if(obj) {
for(var i=0, len=args.length; i<len; i++) {
out += typeof args[i] === 'function' ? args[i].call(null, obj) : args[i];
}
}
return out;
};
var add = function(line, tag) {
if(tag) {
if(line.charAt(0) === '#') {
code += stack.length ? ", block(data."+stack+"."+line.slice(1) : "r.push(block(data."+line.slice(1);
stack.push(line.slice(1));
} else if (line.charAt(0) === '/') {
stack.pop();
code += stack.length ? ")" : "));\n";
} else {
if(stack.length)
code += ', variable.bind(data, "'+line+'")';
else
code += line === '.' ? "r.push(el || data);\n" : "r.push(data."+line+");\n";
}
} else {
if(stack.length)
code += ', "'+line.replace(/"/g, '"')+'"';
else
code += line != '' ? 'r.push("' + line.replace(/"/g, '"') + "\");\n" : '';
}
};
while(match = re.exec(tpl)) {
add(tpl.slice(cursor, match.index));
add(match[1], true);
cursor = match.index + match[0].length;
...