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)
Top comments (0)