WebSketch

web_sketch.js

((store, render)=>{

function memoize(f, cache){
  return function(k){
    if (k === null) return undefined;
    if (cache[k]) return cache[k];
    return cache[k] = f(k);
  }
}    

function test(tests){
  function assert(val, expect){
    if (!expect) return val;
    return val === expect;
  }

  function it(describe, test) {
    try {
      var result = test();
    } catch (e) {
      return e;
    }
    
    if (result) {
      return `✓ ${describe}`;
    } else {
      return `:( ${describe}`;
    }
  }

  var testResults = "";
  tests.forEach(t=>{
    testResults += it(t[0], function() {
      return assert(t[1] , t[2]);
    });
  });
  return testResults;
}

var get = memoize(function(name){
  if (name === "htm") return htm();    
  if (name === "ready") return ready();
  if (name === "output") return output();
  return -1;
}, store);

function htm(){
  return `
<div class="-cnt">
  <pre class="-output">${get("output")}</pre>
</div>
<style>
#${store.id} .-cnt {
  background-color: #ededed;
}
#${store.id} .-output {
  text-align: left;
}
</style>
`;
}  

function output(){  
  return `
${store.id}
${test([
  ["is ready", get("ready"), true]
])}
`;
}  

function ready(){
  return true;
}

get("htm");

if (typeof render === "function")  
  return render(store);

return get("htm");  

})({id:"App"}, (store)=>{

const 
  cnt = document.getElementById(store.id) || 
    (()=>{
      var div = document.createElement("div");
      div.id = store.id;
      document.body.insertBefore(div, document.body.childNodes[0]);
      return div;
    })();
if (cnt.innerHTML !== store.htm) cnt.innerHTML = store.htm;

return "done.";  

});