Alchemist [html-alchemist]

Consider the source for a simple counter:

import { alchemize, snag } from "./alchemist.js"

function counterview () {
  // no reactive state. you control when and what to re-render.
  let i = 0
  function onclick () {
    // interact directly with the DOM. dispel the magic.
    snag('counter').innerText = String(++i)
  }
  // stop writing end tags. set attributes tersely.
  return alchemize(['button#counter', { onclick, style: 'width: 100%;' }, i])
}

// forget react. make your own elements with webcomponents.
class CounterApp extends HTMLElement {
  connectedCallback () {
    this.appendChild(counterview())
  }
}

customElements.define('counter-app', CounterApp)