htmx 4.0 출시

8개월간 개발한 htmx 4.0.0이 출시됐으며, 2.x와 사용자 동작은 대체로 같지만 속성 상속·이벤트·히스토리 처리 방식이 달라짐 내부 요청 구현을 XMLHttpRequest에서 fetch() 로 전환해 스트리밍 HTML과 새로운 확장 기능을 지원하며, 일반 사용자에게는 대부분 투명한 변화임 가장 큰 마이그레이션 작업은 속성 이름에 :inherited를 붙여 상속을 명시하는 것이며, 이벤트 이름도 htmx:phase:action[:sub-action] 형식으로 표준화됨 기본 히스토리 복원은 localStorage 스냅샷 대신 페이지를 다시 요청하며, 모프 스왑과 <hx-partial>, 스트리밍·다운로드·Alpine.js 호환 확장 기능이 추가됨 비버전 CDN 사용자의 강제 업그레이드를 막기 위해 NPM에서 2.x는 latest, 4.0은 next로 유지되며, htmx 2도 계속 지원되므로 즉시 업그레이드할 필요가 없음 출시 범위와 호환성 htmx 4는 8개월간 개발됐으며, fixi와 htmx 테스트 스위트를 이식하는 과정에서 기존 동작이 필요했던 이유를 재확인해 2.x와의 차이를 줄임 하위 호환성 때문에 사용하던 XMLHttpRequest를 fetch() API로 교체함 스트리밍 HTML 구현과 확장 기능 구조를 단순화하는 계기가 됨 일반적인 htmx 사용자에게는 내부 구현 변경으로 처리됨 NPM 배포 태그는 4.0을 곧바로 latest로 지정하지 않음 버전 없는 CDN URL에 의존하는 사용자의 강제 업그레이드를 막기 위한 조치임 2.x는 latest, 4.0 계열은 next로 유지되며 2027년 초 어느 시점에 변경할 예정임 공식 웹사이트는 4.0 문서를 기준으로 함 명시적 속성 상속 htmx 2에서는 부모 요소의 여러 속성이 자식에게 기본 상속됐지만, htmx 4부터는 속성 이름 뒤에 :inherited 를 붙여야 함 <!-- htmx 2 --> <div hx-confirm="Are you sure?"> <button hx-delete="/item/1">Delete</button> </div> <!-- htmx 4 --> <div hx-confirm:inherited="Are you sure?"> <button hx-delete="/item/1">Delete</button> </div>...