(WIP) Redesign hx-live with a unified DOM state API

[scriptogre]

four-dev mixes callable attribute helpers with inherited data. This PR gives DOM scripts one property-based state model.

Current element

Start with the bare state bags:

<section data-count="0">
  <button hx-on:click="
    data.count++              // updates nearest data-count
    aria.pressed = true       // adds aria-pressed=true
    aria.busy = false         // adds aria-busy=false
    attr.disabled = true      // adds disabled
    attr.hidden = false       // removes hidden
    delete attr.title         // removes title
    class.active = true       // adds active class
  ">Select</button>
</section>

data.*        nearest owner
aria.*        current element
attr.*        current element
class.*       current element

Selected elements

Use q() when state lives on other elements:

<button hx-on:click="
  q('.item').data.state = 'ready'
  q('.item').aria.busy = false
  q('.item').attr.hidden = false
  q('.item').class.active = true
">Prepare items</button>

selected   A  B  C
read       A
write      A  B  C

Deletes and value cycles use the same selection:

<button hx-on:click="
  delete q('.item').data.draft
  q('.item').toggle('data-view', 'grid', 'list')
">Change view</button>

q(...).attr.data, q(...).attr.aria, and q(...).attr.class alias the same cached local bags.

Classes

The class bag supports state, groups, and classList methods:

<button hx-on:click="
  q('.item').class.assign({ active: true, loading: false })
  q('.item').class.add('selected')
  q('.item').class.toggle('open')
">Update classes</button>

Nearest owners

Add .closest to walk up from each selected element:

<button hx-on:click="
  q('.item').closest.data.state = 'ready'
  q('.item').closest.aria.busy = false
  q('.item').closest.attr.hidden = false
  q('.item').closest.class.active = true
">Update owners</button>

selected   A  B  C
owner      X  X  Y
read       X
write      X     Y

Shared owners receive one write.

The next value may derive from the current typed value:

<button hx-on:click="
  q('.item').closest.data.count = count => count + 1
  q('.item').attr.hidden = hidden => !hidden
  q('.item').class.active = active => !active
  q('input').value = value => value.trim()
">Update items</button>

Updater functions must return synchronously.

Migration

attr(...)                       → attr.*
attr('.active', value)          → class.active = value
attr('class', object)           → class.assign(object)
q(...).attr(...)                → q(...).attr.*
q(...).data.* (inherited)       → q(...).closest.data.*
htmx.live.attr(...)             → htmx.live.q(...).attr.*

All callable attr() forms are removed.