JX=TINY WEB-JS TEMPLATE ENGINE by datakk

DOC&TESTER=https://kk.datakk.com/jx.htm

CODE=https://github.com/wanjo-tech/kk/blob/main/docs/jx.js

CDN=https://static.datakk.com/jx.js

PARADIGM=(evt,data)=>UPSERT(target,BUILD(tpl,UPDATE(data,event)))

DEBUG=[...document.querySelectorAll('[j-warn]')].map(console.log)

<br/>test @change <input @change='console.log(event.target.value)' value='abcd'/>
<br/>test @click <input type=button @click='console.log(event,this)' value='click'/>
<h3>thisDate={{thisDate}}</h3>
<div j-for="val,key,idx in wtf"><li>{{ idx+","+key+":"+val }}</li></div>
<font>OK {{ new Date() }}</font>
<font>KO {{ new XXX() }}</font>
<div j-if="f1"> <font color=red>L1-if</font> </div>
<div j-else><font color=blue>L1-else</font></div>
<div j-if="true"><font color=green>L1-true
  <div j-if="f2a">L2-f2a</div>
  <div j-if="f2b">L2-f2b</div>
</font></div>
<div j-for="ERR in items"><li>{{ idx+","+key+":"+val }}</li></div>
<div j-for="(val,key,idx) in items"><li>{{ idx+","+key+":"+val }}</li></div>
<div j-for="val,key,idx in items"><li>{{ idx+","+key+":"+val }}</li></div>
<div j-for="(val,key,idx) in itemsb">
  <li>{{ idx+","+key+":"+val }}</li>
</div>
<div j-for="(val,key) in itemsb"><li>{{key+":"+val}}</li></div>
<div j-for="val,key in itemsb"><li>{{key+":"+val}}</li></div>
<div j-for="(val) in itemsb"><li>{{val}}</li></div>
<div j-for="val in itemsb"><li>{{val}}</li></div>
<div j-for="val in itemsb"><li>{{TestSyntaxError2}}</li></div>
v,k,i in 7:
<div j-for="v,k,i in 7">{{ [v,k,i] }}</div>
test j-text:
<div j-for="val in itemsb" j-text="val"></div>

data=

debug=

Build=

render=