Render a simple counter button with name and emoji

HTML

<head>
<script type="importmap">
    {
        "imports": {
            "@purifyjs/core": "https://esm.sh/jsr/@purifyjs/core"
        }
    }
</script>
</head>

JavaScript

import { ref, tags } from "@purifyjs/core";

const { div, button } = tags;

export function Hello() {
    const counter = ref(0);
    return div().append$(
        ["Hello, ", counter.derive((n) => "👋".repeat(n))],
        button().onclick(() => counter.val++).textContent("Hi!"),
    );
}

document.body.append(Hello().$node);