htmx 4.0.0 ra mắt: fetch() bên trong, kế thừa thuộc tính tường minh, và morphing swaps

htmx 4.0.0 đã ra mắt sau tám tháng làm việc, và điểm nhấn là nội bộ thư viện đã chuyển từ XMLHttpRequest sang fetch(). Sự chuyển đổi này, bắt đầu như một thử nghiệm khi xây dựng fixi và được thúc đẩy bởi ý tưởng của Christian về streaming HTML, đã mở ra cánh cửa cho một hệ thống extension được làm lại và một loạt khả năng mới.

Từ góc nhìn người dùng, htmx 4 cố ý gần gũi với htmx 2. Nhóm phát triển cho biết khác biệt về hành vi là nhỏ, và nơi nào khác biệt, các lựa chọn đều tường minh. Ba thay đổi lớn là: kế thừa thuộc tính giờ là tùy chọn thay vì ngầm định, tên sự kiện đã được chuẩn hóa, và hỗ trợ lịch sử không còn dùng localStorage theo mặc định.

Kế thừa thuộc tính: giờ tường minh

Trong htmx 2, các thuộc tính như hx-confirm trên phần tử cha được kế thừa bởi phần tử con, một hành vi kế thừa từ intercooler.js và lấy cảm hứng từ CSS. Giống như CSS, điều đó mạnh mẽ nhưng thường gây nhầm lẫn. Trong htmx 4, bạn phải đánh dấu một thuộc tính là được kế thừa bằng cách thêm :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>

Đây là gánh nặng nâng cấp lớn nhất, vì vậy nhóm phát hành một công cụ dòng lệnh để đánh dấu những nơi cần marker :inherited. Các thuộc tính như hx-disinherit không còn cần thiết và nên được loại bỏ.

Sự kiện: đặt tên chuẩn hóa

Các sự kiện của htmx 2 phát triển tự nhiên và khó theo dõi. Trong htmx 4, tất cả sự kiện tuân theo mẫu htmx:phase:action[:sub-action]. Ví dụ, htmx:beforeRequest trở thành htmx:before:request, và htmx:afterSwap trở thành htmx:after:swap. Hầu hết các sự kiện lỗi gộp lại thành htmx:error, với lỗi HTTP kích hoạt htmx:response:error. Các sự kiện htmx:xhr:* đã biến mất, vì htmx giờ dùng fetch(), và các sự kiện htmx:validation:* bị loại bỏ để ưu tiên xác thực biểu mẫu gốc của trình duyệt.

Lịch sử: không còn localStorage

htmx 2 lưu cache ảnh chụp trang trong localStorage, gây đau đầu khi JavaScript của bên thứ ba thay đổi DOM và những thay đổi đó vẫn tồn tại sau khi khôi phục mà không có logic bên dưới. htmx 4 tìm nạp lại trang khi điều hướng quay lại và hoán đổi nó vào body (hoặc phần tử [hx-history-elt]). Nếu bạn muốn cache cục bộ, có extension mới hx-history-cache sử dụng sessionStorage và hoạt động tốt với Alpine.js.

Tính năng mới: morphing và hx-partial

Hai tính năng lớn nổi bật. Đầu tiên, morphing swaps giờ được tích hợp sẵn, sử dụng phiên bản cải tiến của thuật toán idiomorph. Thứ hai, thẻ <hx-partial> mới cho phép bạn nhắm mục tiêu nhiều phần của trang trong một phản hồi duy nhất, vượt xa việc thay thế phần tử đơn lẻ của out-of-band swaps:

<hx-partial hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
    <span>5</span>
</hx-partial>

Extensions và thử nghiệm hx-live

Việc chuyển sang fetch() đã tiếp thêm năng lượng cho hệ sinh thái extension. Các extension mới bao gồm hx-preload, hx-download, hx-alpine-compat, và hx-history-cache. Các extension streaming cho SSE, WebSockets và multipart đã được cập nhật. Nhóm cũng giới thiệu hx-live, một giải pháp scripting nhỏ lấy cảm hứng từ Alpine.js và jQuery, mà họ mô tả là phản ứng dựa trên DOM, thân thiện với HATEOAS. Một bundle htmax.js mới đóng gói htmx cùng các extension phổ biến nhất trong một tệp.

Đáng chú ý, htmx 4 không được gắn thẻ latest trên npm. Dòng 2.x vẫn là latest để tránh làm hỏng người dùng trên các URL CDN không có phiên bản, với 4.0 là next cho đến đầu năm 2027. Tuy nhiên, trang web sẽ tham chiếu 4.0.