Untitled

<!doctype html>
<html>
  <head>
    <title>Test</title>
    <style>
      *{font-family: sans-serif;}
      .table{
        border: 1px solid black;
        margin: 13px 2px;
      }
      .table th, td{
        padding: 3px 4px;
      }
      .table th{
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <script>

      var data = {talking_to: "World", people: ["Derek", "Joe", "Alice", "Bob", "Veronika", "Zephyr"]};

      var template = ['div',
                       ['h1', {id: "title"},
                         "Hello ", function(data){ return data.talking_to; }, "!" ],
                       function(data){ return listPeople(data.people) },
                       [VerticalTable, {class: 'table'},
                         ['A', 'B', 'C'],
                         ['1', '2', '3']]];

      var inner_html = toHtml(template, data);
      console.log(inner_html);
      document.body.innerHTML = inner_html;

      // a template returning a macro.
      function listPeople(persons){
        var result = [VerticalTable, {class: 'table'}, ["People"]];
        for(var i=0; i < persons.length; ++i){
          result.push([persons[i]]); }
        return result;
      }


      function VerticalTable(list, raise){
        var result = ["table"];
        var rows = [];
        var props = {};

        list.slice(1).forEach(function(x, i){
          if(typeof x != "object"){
            raise("row_table each item must be list or props, got " + typeof x); }
          if(Array.isArray(x)) rows.push(x);
          else for(var k in x){ props[k] = x[k]; }});

        result.push(props);
        console.info('vertical table rows', rows);
        for(var i=0; i < rows.length; ++i){
          var row = rows[i];
          var result_row = ["tr"];
          var tag = i==0? "th" : "td";
          result.push(result_row);
          for(var j=0; j < row.length; ++j){
            result_row.push([tag, row[j]]); }}
        return result;
      }


      function toHtml(list, data){
        return __toHtml(list, data, undefined); }

      function __toHtml(list, data, root){
        if(root === undefined){
          root = list; }
        function raise(msg){
          console.error("toHtml " + msg)
          console.warn("list:", list)
          console.warn("data:", data);
          console.warn("root:", root);
          throw new Error("toHtml " + msg); }
        if(!data) data = {};

        if(!Array.isArray(list)){
          raise("list required."); }
        var first = list[0];
        var tag = null;
        if(typeof first == "function"){
          var macro = first;
          var result = macro(list, raise);
          if(!Array.isArray(result)){
            raise("macro must return array."); }
          return __toHtml(result, data, root); }
        else if(typeof first == "string"){
          tag = first; }
        else{
          raise("unknown first type " + typeof first); }

        var inner_html = "";

        var props = {};
        for(var i=1; i<list.length; ++i){
          var item = list[i];
          if(typeof item == "function"){
            var template = item;
            var result = template(data, raise);
            if(Array.isArray(result)){
              console.info("Processing template macro", result);
              result = __toHtml(result, data, root); }
            if(typeof result != "string"){
              raise("template must return string, got " + typeof result + "."); }
            inner_html += result; }
          else if(typeof item == "string"){
            inner_html += item; }
          else if(Array.isArray(item)){
            inner_html += __toHtml(item, data, root); }
          else if(typeof item == "object"){
            for(var k in item){
              props[k] = item[k]; }}
          else{
            raise("unknown item type " + typeof item); }
        }
        if(tag === null){
          raise("tag unexpectedly null."); }
        var opening_tag = "<" + tag;
        for(var p in props){
          var value = props[p];
          if(typeof value == "function"){ // property template.
            var template = value;
            value = template(data, raise); }
          opening_tag += " " + p + "=\"" + value + "\""; }
        opening_tag += ">";
        var closing_tag = "</" + tag + ">";
        return opening_tag + inner_html + closing_tag;
      }
    </script>
  </body>
</html>