Dynamic attributes (:attribute)

Simple eval

{
  target: "#/page/1"
}

<a class="primary" href:="target">Go to page 1</a>

Result:

<a class="primary" href="#/page/1">Go to page 1</a>

Boolean attributes

{
  isDisabled: true,
  isChecked: false
}

<input type="checkbox" checked:="isChecked" disabled:="isDisabled">

Result:

<input type="checkbox" disabled="">

Extending attributes

{
  isDisabled: false,
  btn: "primary"
}

<button class="btn btn-" class:="btn" disabled disabled:="isDisabled">
  Submit
</button>

Result:

<button class="btn btn-primary">
  Submit
</button>

Function calls

{
  action: (ev) => {
    const btn = ev.target.closest('button')
    btn.disabled = true
    btn.textContent = 'Submited!'
  }
}

<button class="btn btn-primary" onclick:="action">
  Submit
</button>

Result:

<button class="btn btn-primary">
  Submit
</button>

After clicking the button:

<button class="btn btn-primary" disabled="">
  Submited!
</button>