VanJS flavours...
Tags: vanjs, webdev
Published: 2023-06-13 16:37:55

VanJS comes with some flavours, thanks to Eckehard and Olivier Monnier 

The 'DML' flavour from Eckehard [VanDML] (https://dev.to/artydev/vanjs-and-a-spice-of-dml-my-holy-graal-quest-is-finished-46hl) and the 'HTM' suggested by Olivier.

Here is the example presented by Olivier :

```js
import htm from 'https://unpkg.com/htm?module'
import van from "./van-0.11.10.min.js"

function h(type, props, ...children) {
  const tag = van.tags[type]
  if (props) return tag(props, ...children)
  return tag(...children)
}

const html = htm.bind(h)

const counter = van.state(0)

const app = html`<div>
  ❤️ ${counter}
  <button onclick="${() => ++counter.val}">👍</button>
  <button onclick="${() => --counter.val}">👎</button>
</div>`

document.body.appendChild(app)
```

You can play with it here [VanHTM](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAnAOgEwHYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHWoSAPFAgA3AATQAvGJC0ADhrUA+aQHpZcvZOrcQpeAh5sIA8kyxIAjABYQAXzw16jEHNpqDAArcl4BIREmfX0FAEEAVzY+AFo4rWEoBUJ4WjYEgCd4BQkENgUAfQAjWks8StI2Wh4AawVlBQoAXQBuBX6FGIUAZSbW7L4ChUbJiGoAc0qaywUNPlIIW3sJCSHLctoFangAdwVl+DW58sJJhU0NTPrSWjlijSK5OwTSBQFz2rwUbNFoSQgJag2OzUc7weZzAAUAEkACIASgUwAk-QqjRBGA0PxYCOqgLRPSGw1exT4sCyF2xg30EEIChJeNaGAQCzYLAUOgUzgADEKMbyCnwzsczgBRAoSgoItRqcmM0krDoItgAT0efFZyPR7WUHQA5I0CnN5qaMQB+BRQPg8BIMQQYebwNgyhCutgAIW1SKghoxSAUqMZRXyBRh6vgEg8u1iRRmRQUsFq5Qu9R4gjDPFosFgCjACVgtg0CAUtgYpDBEKh-0yCNz5Q6zgxWJhSgNrf5goxzb7KQHkc9hRhJIu7QaYxaBL4GgRaIxAyGKeSadpWQ5oOoidMQwAKiwIL9iFX+NQNo1hGxYNqFD94L8AAZlV8KFrwbUnSZZOZb1oLJ9QUV8r0aT9bimIooASHgrWrFhiiqCE4GKDYAC94AwHZqCGOJYAgWpENIPgGHOBISFsGFSG1MAqlpX5kgUWD4OKXkULQqssJw0pPQUAB5KpghnYTgngGx6gqND4GIY4oHqD4+GSQTWQ6cTJLYd1PQABQlZIdUeNS8LKe4YDiagoGGHhkLghBBOoAAxCACkaGcEX2Z56nBSF6hOWhNgAWVIDFlBMfpPIE217SitgjwgBg+CSBFfJ4fzArYEK0XqaURk9FcMGA4NQtMgTbMCD1rKaIQ61MMy8SEfSVL4Gcu36D1yjUAJYDUZdMVY8cYyQs8MAqHqFC8PD+n2Ep-ELPq5E7Rl+gIoiSIWMDeTPT8WLYngOOQyirJ4iBsNw7t+gamdttIHNCgANRnUgxp6laezZRQAEITQUZ0Cge5bLoGFk2Re7cHsLY0On+wH3oGP6WEq+BqryF8Z2KyzrNslGy3gRyXLctgWyRhYUeBWrvKfDQoDRlFyNK4H+isFZQYRRQTQ6cG6Uh2A0XhgYKrJ1HaowKArE9eBPP5pnpleqGOjkAWXqI29jjcjBoJlZpiWLcL03Z+6AZXd6D36KbTH6NQBGlPq+YG26uTPSJ4A1wlSF1jELYPJNphq+BmpYs97lWDM5j+EStKQn5VgMvg1M8-3A74DFg+CH5yk0mwCTjoy+Pw2JlNUwhE7R5PU9+eAAEcqJ6u9q1aov45L4APAxVDyheN5fmcc5tSEJQYU4ks5jOlHjvQi6zL4ETk5nJuE8agO45l-jO-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)

Notes than you can mix the flavours, feel free :-)

```js
import htm from 'https://unpkg.com/htm?module'
import van from "./van.js"


const { div, button } = van.tags

function h(type, props, ...children) {
  const tag = van.tags[type]
  if (props) return tag(props, ...children)
  return tag(...children)
}

const html = htm.bind(h)

const counter = van.state(0)

function Incer() {
  return button({onclick:() => ++counter.val}, '👍')
}

function Decer() {
  return button({onclick:() => --counter.val}, '👎')
}

const app = html`
  <div>
    ${div({onclick:() => alert(counter.val)}, '❤️', counter)}
    ${Incer()}
    ${Decer()}
  </div>`

document.body.appendChild(app)

```
[MixDemo] (https://flems.io/#0=N4IgtglgJlA2CmIBcBWAnAOgEwHYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHWoSAPFAgA3AATQAvGJC0ADhrUA+aQHpZcvZOrcQpeAh5sIA8kyxIAjABYQAXzw16jEHNpqDAArcl4BIREmfX0FAEEAVzY+AFo4rWEoBUJ4WjYEgCd4BQkENgUAfQAjWks8StI2Wh4AawVlBQoAXQBuBX6FGIUAZSbW7L4ChUbJiGoAc0qaywUNPlIIW3sJCSHLctoFangAdwVl+DW58sJJhU0NTPrSWjlijSK5OwTSBQFz2rwUbNFoSQgJag2OzUc7weZzAAUAEkACIASgUwAk-QqjRBGA0PxYCOqgLRPSGw1exT4sCyF2xg30EEIChJeNaGAQCzYLAUOgUzgADEKMbyCnwzsczgBRAoSgoItRqcmM0krDoItgAT0efFZyPR7WUHQA5I0CnN5qaMQB+BRQPg8BIMQQYebwNgyhCutgAIW1SKghoxSAUqMZRXyBRh6vgEg8u1iRRmRQUsFq5Qu9R4gjDPFosFgCjACVgtg0CAUtgYpDBEKh-0yCNz5Q6zgxWJhSgNrf5goxzb7KQHkc9hRhJIu7QaYxaBL4GgRaIxAyGKeSadpWQ5oOoidMQwAKiwIL9iFX+NQNo1hGxYNqFD94L8AAZlV8KFrwbUnSZZOZb1oLJ9QUV8r0aT9bimIooASHgrWrFhiiqCE4GKDYAC94AwHZqCGOJYAgWpENIPgGHOBISFsGFSG1MAqlpX5kgUWD4OKXkULQqssJw0pPQUAB5KpghnYTgngGx6gqND4GIY4oHqD4+GSQTWQ6cTJLYd1PQABQlZIdUeNS8LKe4YDiagoGGHhkLghBBOoAAxCACkaGcEX2Z56nBSF6hOWhNgAWVIDFlBMfpPIE217SitgjwgBg+CSBFfJ4fzArYEK0XqaURk9FcMGA4NQtMgTbMCD1rKaIQ61MMy8SEfSVL4Gcu36D1yjUAJYDUZdMVY8cYyQs8MAqHqFC8PD+n2Ep-ELPq5E7Rl+gIoiSIWMDeTPT8WLYngOOQyirJ4iBsNw7t+gamdttIHNCgANRnUgxp6laezZRQAEITQUZ0Cge5bLoGFk2Re7cHsLY0On+wH3oGP6WEq+BqryF8Z2KyzrNslGy3gRyXLctgWyRhYUeBWrvKfDQoDRlFyNK4H+isFZQYRRQTQ6cG6Uh2A0XhgYKrJ1HaowKArE9eBPP5pnpleqGOjkAWXqI29jjcjBoJlZpiWLcL03Z+6AZXd6D36KbTH6NQBGlPq+YG26uTPSJ4A1wlSF1jELYPJNphq+BmpYs97lWDM5j+EStKQn5VgMvg1M8-3A74DFg+CH5yk0mwCTjoy+Pw2JlNUwhE7R5PU9+eAAEcqJ6u9q1aov45L4APAxVDyheN5fmcc5tSEJQYU4ks5jOlHjvQi6zL4ETk5nJuE8agO45l-jO-9mdR7YXn2gFBF2sqCom4qCowyX5O8DVHqwy33nL+7CHCxv6hNjvxkqjmWQFlIMNunvq7nbCFdj-ToXR75tzKuUZI9MwAzg5gKOQGBqB8HFkeXUxR7SKDDHlI88AAAexMlqQPMlkTUjowD1AwFQ2yJAoBFGoGFPejIaF0noZrDMxMkTUHkpsbUaJNaTG1rZEmtDd4OnIkVDIVkADCp46RKmBgvEuLCoBhV+ufOOCh7QfysiIuk9R4EKCWgoMM0DyJ6NUSuf+4iwCr2oGZJo8xfgdDys1PB2oEQIjoAwShVDaAFCcYwzEjIzIUGUhoO6CgqEYBUfQro8844J38U4igQp4kxQUKKaGEdghz3tMk34v9W6+KKgE0gXQQkCXITOR0zpfQxKKGjb08BfReN8DLfo0E2ShJaAY+JoFxIYDvJaF8CJwmhSBgjBqnohBTA6OQigLR4k-Q6DJKyck5jj0wWIhZSy4EmKMTsiR+w4hsDYJaDuUtelGI6SDA0Sj2ZqK5knFe5xP6G0OfrOKszHn1HISbYGLNihswecYzmOTy5vN0dEuQFA1DiwiWoMBbJokItCmI75rt2ZwqIEihEqLLgTL+eRAFCMgXTBmVioh3YzbpgEnMkhCJyElNicIW5bM4wYmKlOQE9QCgYiGLQJIqR0iPCsvUUG05kHlBaRoHUY5owwgKAmeowBOphi1LQeYuV2liMcRgHRwY1ni3kijHVDA0QQPqgJC8sy-SfytM46YYiXqGsdc9A1Drv6a2oliqoYiqhi3IraDAZ5pE2y0ijOxZkEg0zpgzDyQSD5mSFlVCmL44jyloI+DoFBompvJv7cpzDSZpqLTOY1GyFKMi6QiMy-rQJ5WGJ6EmyMRYZqzdqdheQgqaFSr6go9qrKOpXJMgYZlgAVDRcSsAHgZxVHemZaUMD52awbPiqhU7CUYDAH20hAooDyz5jOkpW6Ik7r3TsjAj8+a3P6GzZd5EFArJsXeu5bJH2wJ+pUWSprVEC36OQjARRKzNHgAAdU2MSQN1SOhmLAF404MCVx9HJUBooYA+BvGXPUGDT7Vm-s2VARktLa3XVAgW9tpBM0FGzRibmUAd5cyPQmYhbqFgAHEeDSO1DwBAXCQozmFCKNefs0akCPHwLjbHP4eQJREpNlSbgNhqdutYS5blmRTGWNs2R13yZerupc+6HRHtJR9BE2nyzGh-esv9GIowTlAUpqFX9FgdEnWisM06bGmL4DAyzL4dM5T05CUjdw60CV+KBNFY6ZpFsk1xjGFkrI2TsnjAmrlGil1qol9K0xrEI36l8peEmpM8AEQUIRxJbWuyHW50KzwEvlYrYRhSOUBbsfmFxnjfH4ACcZgjV1XqnEEiJAiLrtzaWOeGl1oNYBWOmHwWsAo5QTVCus8AYq9RHGRKXrhz+uG4RzHqJkA85hLDWC2NeUQzgnC4E8N4EA3i-AhDCCAK8kQ2CiESit8o7BYGEAlLA007A2ARKQDECEGgWjzBieRfQAPbSYfsvAU0EhfuTHKAEGEQOn1qAwPoHHb3lSmAkBBcowAHTyFw0kZIMI52K0CBgXbeE0rXYUMSPOSkJQRJZXIuhbLgndgp9WLVcDme7YoHnCp3YQW8-RTNoeWqxkK-57Q+htyldi-mBumJAvNeLfJ-Yf7HA9ac44J63RLA7Gi-4BCWZEughLwRKKNnDYOdcIOoqMd2uO70-3gIPjEBWhIGKwKAA1BH+3ghXYYB6l4BQppAC8G4AWR2bRG+4R76ECgUSSSxb7oaMJ-cCED5CIiofw8KBSCkGPsz4+FkTyn9PMsfaQhN-cLQM4AewFfIyGQ8gIoDAACTACMGX4PlegmFldsTOvceeqWvqKaQAJuSAHg-00OZkqx-5bS-oo+vcF73woUfefvfLlpVIQwg+++mFqS6O8BqUFdoeJkWRtCEQPBlhdiWjYbtMGcBQCQCFEex8AYFEBiVIHe0+zvFEEYigEfAPl3QCTmGAJ6EZA0GKitGAMzwAGIHhhd+gahWh5gJQ0IwwqhYAEh4B0CRdaQ7gwwThTwhBaCPAf8rtoQHAQAnBnBnBPAwFntfBRBIZqAAAJI8IKTwIAA)