Minimal frontend

frontend.html

<style>
.red {
    color: red;
}
</style>

<div id="root"></div>

<script>

// Setup

const root = document.getElementById("root")

const make = (tag, attrs, ...children) => {
    const el = document.createElement(tag)
    if (attrs?.constructor !== Object){
        throw `When calling make(...), make sure to pass in {attr: value, ...} as attrs, not: ${attrs}`
    }
    const classes = attrs.classes || []
    delete attrs.classes
    for (const c of classes){
        el.classList.add(c)
    }
    for (const [k, v] of Object.entries(attrs)){
        el[k] = v
    }
    el.replaceChildren(...children)
    return el
}

// Our app

const state = {
    count: 0,
}

const incCount = () => {
    state.count = state.count + 1
    render()
}

const button = () => {
    return make(
        "button", 
        {
            onclick: incCount,
        }, 
        "increment count!"
    )
}

const app = () => {
    return make("div", {},
        make("h1", {classes: ["red"]}, "Hello"),
        button(),
        make("p", {},
            make("b", {}, `Count: ${state.count}`)
        )
    )
}

const render = () => {
    root.replaceChildren(app())
}

render()

</script>