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 test **/

(function() {
    this.tmpl3 = function tmpl(str, data) {
        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;";
           
           return new Function("data", value);
   }
})();
    

    
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 template2 = $("#template2").html();
var linkList2 = tmpl3(template2);

$("#out").html(linkList2(data));