VanJS flavours...

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

The 'DML' flavour from Eckehard VanDML and the 'HTM' suggested by Olivier.

Here is the example presented by Olivier :

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

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

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