Skip to content

feat(hx-live): support boolean attribute binding with :?attr (#4019) - #4022

Open
AndrewGit25 wants to merge 1 commit into
bigskysoftware:four-devfrom
AndrewGit25:feat/hx-live-boolean-binding
Open

feat(hx-live): support boolean attribute binding with :?attr (#4019)#4022
AndrewGit25 wants to merge 1 commit into
bigskysoftware:four-devfrom
AndrewGit25:feat/hx-live-boolean-binding

Conversation

@AndrewGit25

Copy link
Copy Markdown

Description

Adds support for an explicit boolean attribute binding modifier—:?<attr> and its canonical form hx-live:?<attr>—to hx-live.
While hx-live toggles native boolean attributes (disabled, required, etc.) based on truthiness, generic attributes stringify booleans (e.g. :multiple="false" writes multiple="false"). For Web Components (like Lit's @property({ type: Boolean })), Custom Elements, and custom boolean attributes where attribute presence dictates state rather than string value, this caused attributes to remain present when falsy.
Borrowing the ? prefix convention from Lit and the Web Components ecosystem:

  • Truthy values (true, non-empty strings, positive numbers) add/retain the attribute via native toggleAttribute().
  • Falsy values (false, null, undefined, 0, "") remove the attribute entirely via native toggleAttribute().
    Example:
<!-- Truthy adds multiple="", falsy removes multiple entirely -->
<custom-select :?multiple="q('#count').valueAsNumber > 1"></custom-select>
<!-- Canonical form for build pipelines stripping ':' -->
<div hx-live:?custom-flag="q('#checkbox').checked"></div>

Corresponding issue: Closes #4019

Testing

  1. Automated Unit Tests:
    • Added unit tests in test/tests/ext/hx-live.js covering :?attr, hx-live:?attr, and truthy/falsy evaluation rules.
    • Ran npm run test (all 1,739 tests passed across 87 test files with 100% code coverage).
    • Ran npm run check:content (all doc and API checks passed).
  2. Manual Testing:
    • Tested interactively via test/scratch/scratch.html with real-time DOM mutation inspection on custom web components and standard elements.

Checklist

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant