VanJS and a spice of DML, my Holy Graal Quest is finished...
Tags: vanjs, dml, mvu
Published: 2023-06-04 20:31:41

For many years, I have been in a search of a micro frontend UI library which would fill my needs, I can assure you that I have tried many of them...

DML was quite there, but I missed reactivity, so I created MVU which was based on DML an Morphdom.

Finally arrived the little gem VanJS and spiced by DML concepts, my Graal was finally there, a big thank to Tao and Eckehard.

I can finally dedicated my time to create and no to search anymore...

And, let us see for the last time, the famous Counter with VanJS spiced by DML.

Oh, did I said that all is under 2k JS !!!

[Demo] (https://flems.io/#0=N4IgtglgJlA2CmIBcAWAnAOhQDgDQgDMIEBnZAbVADsBDMRJEDACwBcxYR8BjAeytbwByEAB0q4gDxQIANwAE0ALyiQNAA7rVAPikB6GbN0SqXECXgJurCPzKMATEgCMKEAF9c1OgxCyaVBgAVmQ8-ILCjHp68gCCAK6svAC0sZpCUPIE8DSs8QBO8PLiCKzyAPoARjQWuBUkrDTcANbySvLkALoA3PJ98tHyAMqNLVm8+fINExBUAOYV1Rby6rwkEDZ24uKDFmU08lTwAO7yS-Crs2UEE-Ia6hl1JDSyReqFsrbxJPL8ZzXwEZNZriAjxKjWWxUM7wOazAAUAEkACIASnkwHEfXKDWBGHU32Y8KqANR3UGQxeRV4sEy5yxAz0EAI8mJuJaGAQ81YzHk2nkzgADIL0Tz8rxTkdTgBRfLi-Lw1SqMkMknLdrw1gATwevBZSLRbSU7QA5A18rM5ib0QB+eRQXjceL0AQYObwVjShAu1gAIS1iKgBvRSHkKIZhTy+Whavg4ncOxihWmhXksBqZXOdW4AlD3BosFg8jA8VgNnUCHkNnoJFB4Mhfwy8JzZXaznRmOhin1Lb5AvRTd7yX7EY9BWhxPObXqo2a+N46nhqPR-UGyaSqZpmXZIKoCZMgwAKswID8iJW+FR1g0hKxYFr5N94D8AAalF-yZrwLXHCaZWY3jQmR6vIL6Xg0H43JMhRQPE3CWlWzBFJU4JwEU6wAF7wBg2xUIMsSwBANQISQvD0Gc8TEDY0IkFqYCVDSPxJPIMFwUUPLIahlaYdhJQevIADylRBNOQlBPA1h1OUqHwEQRxQHU7y8EkAksu0YkSawboegACuKSTag8qm4aUdwwLEVBQEM3BIbBCACVQABiED5A007wnsTx1GCEJ1McNAbAAsiQ6JKMYfQefxNp2pFrCHhA9C8Ik8I+dwfkBawwWonUUrDB6y4YEBQYhSZ-E2QE7pWY0gi1iYpm4oIenKbw06dn07plKo-iwKoS4YixY7Rohp4YOU3XyJ4uF9HsxR+AWvWyB2DJ9PhhHEfMoE8qeH7Max3DsUhFGWdxEBYThXZ9PV05bSQ2YFAAatOJCjd1y3dqyCgAITGvITr5PdS0Xf0zKss9W73QWRrtH9ANvf0v3MBV8BVbkz7TkVFlWTZyOlvADnOa5rDNoj8zI0CNVeY+6hQKjyJkSVQN9JYywg-CCjGu0YO0hDsConD-TlaTKM1RgUCWB68AeXzjNTC9kPtLI-PPYRN5HK5GBQdKTREkWYVpmzd3-cub37n0k0mH0qj8FKvW8-1N2cqeETwOrBIkDr6Lm-uiZTNV8BNcxp53Cs6azL8wmaYh3wrPpvCqR5fsB7w6JB0E3xlBp1j4rHhm8XhMRKSpBAJ6jScpz88AAI6Ud1t5Vi1hdx8XwDuOiKFlM8rw-M4ZxaoIijQhxxazKdyNHWh52mbwwlJ9Ojfxw1-ux9LfEd3704j6wPNtPy8JtRU5SN+U5ShovSe4Kq3WhpvPMX124MFtfVAbLfDKVLMMjzCQoZdHfl1O0IF238OidDvq3UqZQkh0zANOdm-JZAYCoLwMWh4dRFDtAoUMuVDzwAAB5E0WhAsymQNQOjAHUDAlCbLECgIUKgoVd4MmobSOhGt0xE0RFQOSGwtSog1hMLWNliY0J3vaMihV0iWQAMInlpIqIG89i7MKgKFH6Z9Y7yDtO-SywjaR1DgfIRa8hQxQLIrolRy4-5iLACvKgplGhzB+O0XKTVcFanhPCWg9AKGUJoPkRxDCMQMlMuQJS6hbryEoRgZRdDOhz1jvHPxjjyCCjidFeQIoobhyCLPO0SSfg-xbj4wq-iSCdGCfxMh04HROh9NEwoqMvTwB9J4nw0s+hQVZCE5o+i4kgTEhgW8FpnzwjCSFQG8N6oekEJMdoZDyDNDid9do0lLKyVmGPDBoj5mLNgcYwx2zxF7FiKwVgFp26Sx6YY9pwN9SKLZqozmidl5nA-gbA5etYozIeXUMhxsgbMyKKze5RiObZLLq8nRUTZDkFUGLcJqhQGsiifCkKoivkuzZrCwgiL4QoouOM35ZF-nw0BVMaZmLCFdlNmmfisziHwjIcUmJQgbms1jOiIqk4AR1HyOiQYNBEgpDSA8SydQQZTiQWUZp6htSjijNCfI8Y6jAA6qGTUNA5g5TaaIhxGBtFBlWWLOSyNtX0FROAuq-FzwzN9B-S0TipiiOegah1T19X2q-hrKimLKiiMqKLMiNoMCnikdbTSyNbGmXiNTWm9N3KBP3qZQWlVybPliHKGgD52jkCiSmsmfsylMJJqmwt04jXrPkgyTp8JTJ+pArlIYHpiZI2FumzNWo2G5EChoFKPr8h2ssg65cEz+imWAOUVFRKwDuGnJUN6pkpTQLnRreseLKGToJRgMAvaSH8igHLXm07imbvCdu3d2yMAP15jcvorMl1kXkMs6xt7bmsgfTA76FQZImpUfzPoZCMCFArE0eAAB1DYRIA1VPaKYsAniTjQOXL0MlgHChgF4K8JcdRoOPpWT+jZUAGQ0prVdEC+a20kAzfkLN6IuZQG3pzQ98YiGuvmAAcW4FIrU3AECcOCtOIUwpV6+1RiQQ8vBOOsY-u5fF4TE0VOuPWapW7ViLhuaZZMpZWxZDXXJ56O7Fx7vtIekl714RabLEab9azf3okjOOEBinIWfwWO0CdqLQxTusSY3g0CLPPm09lXTEISO3FrfxH4IFUWjumoWiTnH0bmUstZWyuN8YuQaCXGqCW0pTCsfDPqnzF7ick9wfh+RBFEhtS7QdrmQpPHi2V8tBH5LZX5mxuYnHuO8fgPxhm8MXWescfiQk8JOs3JpQ5oanXA1gBYyYPBqx8hlGNYKqzwAip1AcRExeOGP44dhLMOoGR9xmAsFYTYV4RDOCcA4AA7B4LwIAvG+GCKEEAl4IisBEAlZbZR-DQgIOKGBqgMB6EB+9pUJhwJlGAIYOozBnA4cSEkaEs6FYBAwDt7o4hYcYkqEdqgJ2xWicEBjwxARccw7sJmQwCb-VE8ZXIJcKoTCpSu-IMN4IZmg0aCt6cmT97474Dzl2T0-YlxW2zy6-FPgnDnYYJc1P4ZI8VCAbnAhxeqGzElLXfK3rtzR+rxEAA5KRyor0QkImMDUgSADU9vRf64wN1FX8gmw3Om9CeXxwFt49p77LUCByj3GnC+N+f4XYuHULgqYNJoBnHTC0d36giqWlDEKWP7vqgtDmOKVCSAJhIwjyYQncIqCMsdM6W8+rkG8Oc2H9olR6dLjemr4ADRg-wCQKoQQ+DkgFggHMKgSB9r69UJ4WayJmktQhlQAAUkMAY8hkSBQADLKjepr75Ipt96++SgV9O-MUAFYABsNzPcMjV6oAAEi7IFPwAi-HyOoEmv0D8uy312E-Cpbs3L3AYBd6VhPLd6h6aDU6e7nbiwNjXaMAADMzgSAp+yQgoSAgoT23g9AIg0SJAH2X2t4IgAAxIFFIkEtCLns0PnnrlAKGJULAPEHGHuDAZdlCPYCAMgc4I9u4KAi9j4CIIFPdAAKrz51YeBAA)

```js
import van from "./van.js"

const {div, h1, button } = van.tags;
const {begin, end, state} = van;

const bdiv = () => begin(div());

function Counter (start = 0) {
  const counter = state(start);
  let view = bdiv();
    h1("Counter ", counter)
    button("INC").onclick = () => ++counter.val;
  end()
  return view
}

const style_app = `
  border:1px solid black;
  padding: 10px;
  background:orange`

begin(document.body)
  let app = bdiv ()
    h1({style:"text-align:center"}, "Demo VanJS / DML")
    Counter(0)
    Counter(4)
    Counter(56)
  end()
  h1("Here is an orphan counter")
  Counter(12)
  app.style = style_app;
end()
```