Reactive TSX for any backend

// Hono JSX Template
export function Counter({ count = 0 }) {
  return (
    <button bf-s="Counter" bf="slot_1">
      Count: <span bf="slot_0">{count}</span>
    </button>
  )
}

{{/* Go Template */}}
<button bf-s="Counter" bf="slot_1">
  Count: <span bf="slot_0">{{ .Count }}</span>
</button>

// Counter.client.js
import { createSignal, createEffect, find, hydrate } from '@barefootjs/dom'

export function initCounter(__scope, props = {}) {
  const [count, setCount] = createSignal(props.count ?? 0)

  const _slot_0 = find(__scope, '[bf="slot_0"]')
  const _slot_1 = find(__scope, '[bf="slot_1"]')

  createEffect(() => {
    if (_slot_0) _slot_0.textContent = String(count())
  })

  if (_slot_1) _slot_1.onclick = () => setCount(c => c + 1)
}

hydrate('Counter', { init: initCounter })