JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script type="text/html" id="template2">
        
    <% function buildList(a){ if(a.length == 0){return};  %>           
    <ul>
        <% for(var i=0;i<a.length;i++){ %>
        <li><%=a[i].name%><%buildList(a[i].children); %></li>                  
        <% } %>
    </ul>
    <% } buildList(data.list); %>
        
</script>

<div id="out"></div>

JavaScript

/** Micro Templating module **/
var data = {
    list: [
        {
        name: "1",
        children: [
            {
            name: "1.1",
            children: []},
        {
            name: "1.2",
            children: [
                {
                name: "1.2.1",
                children: []}
            ]}
        ]},
    {
        name: "2",
        children: [
            {
            name: "2.1",
            children: [
                {
                name: "2.1.1",
                children: []},
            {
                name: "2.1.2",
                children: []},
            {
                name: "2.1.3",
                children: []}
            ]},
        {
            name: "2.2",
            children: []},
        {
            name: "2.3",
            children: []}
        ]},
    {
        name: "3",
        children: [
            {
            name: "3.1",
            children: []}
        ]}
    ]
}

var microT = (function(){    
    "use strict";
        
    var db = {}; 

    var o = {
        version: '1.0.0'
    };
    
    o.template = function(str, name){
        var value = "var out = ''; out+=" + "'" + 
        str.replace(/[\r\t\n]/g, " ")
           .replace(/'(?=[^%]*%>)/g,"\t")
           .split("'").join("\\'")
           .split("\t").join("'")
           .replace(/<%=(.+?)%>/g, "'; out += $1; out += '")
           .split("<%").join("';")
           .split("%>").join("out+='")
           + "'; return out;";
    
        db[name] = new Function("data", value);
    }
    
    o.render = function(name, data){
        if(db[name])
        {        
            return db[name](data);
        } 
        else
        {
            return "template does not exist"
        }            
    }
    
    return o;

}());

var template = $("#template2").html();

microT.template(template, "scot");
//$("#out").html(microT.render("scot",data));

$("#out").html(microT.render("scot",data));

//microT.db.mine =...