Beware, the 'autoappend' functionality from Eckehard is in pull-requests in github repository.
So let's see how we can rewrite our previous example.
You can easily see that the code is plain vanilla JS.
There is no templates, JSX, directives.
All the code execute directly in Browser, whitout any ceremony.
<fetch-user data-num="5">
<a href="https://randomuser.me/api/">Random Users</a>
</fetch-user>
import van from "./van.js"
const { div, button, span, "user-card": UserCard, img } = van.tags
const { end, begin } = van
const bdiv = () => begin(div());
const btn = button
function Card(user) {
let
thumbnail = user.picture.thumbnail,
user_name = user.name.first,
user_email = user.email,
user_city = user.location.city;
let user_card = begin(UserCard())
// identity
div({ class: 'ident' },
img({ src: thumbnail }),
div({ style: 'text-align:center' },
user_name
)
)
// address
div({ class: 'address' },
div(user_email),
div(user_city),
)
btn (
{
onclick: () => alert(`Hy, I am ${user_name}`),
}, "Hy"
)
end()
return user_card
}
function Users(users) {
console.log(users)
return users.map(Card)
}
class FetchUser extends HTMLElement {
async connectedCallback() {
let numusers = Number(this.dataset.num)
let link = this.querySelector("a");
let req = await fetch(`${link.href}?results=${numusers}`)
let resp = await req.json()
van.add(this, Users(resp.results))
}
}
customElements.define("fetch-user", FetchUser);