artydevThe core of VanJS is based on the following object:
const tags = new Proxy({}, {
get: (tag, name) => {
return (...args) => {
let el = document.createElement(name)
args.map(cl => {
el.appendChild(typeof (cl) === 'string' ? cl = document.createTextNode(cl):cl)
})
return el
}
}
})
When tags is accessed via any tag name property, the getter return a function which, when called, create a new DOM element based on the tag name, and that where resides the 'magic'
Example :
const div = tags.div
Which can be rewritten
const { div } = tags
Let's use it to display a list of users Users :
const {div, h1, ul, li} = tags
const users = ["HAL", "BERT"]
let list_users = ul(...users.map((user) => li(user)))
document.body.appendChild(list_users)
With that in place, you can go pretty far when building UI, without using any external libraries, neither VanJS.
Personnaly, I find this awesome. If you want to learn more, see my posts about VanJS
