htmx 4.0 sekiz ayın ardından yayında: fetch() çekirdeği, açık kalıtım, morph swap'ler

htmx ekibi, HTML-öncelikli JavaScript kütüphanesinin 4.0.0 sürümünü yayımladı ve yaklaşık sekiz aylık geliştirme sürecini tamamladı. 28 Ağustos'ta yayımlanan ve Hacker News ana sayfasında öne çıkan duyuruya göre yeni sürüm, iç yapı fetch() API'si etrafında yeniden yazılmış olsa da kütüphanenin dışa dönük davranışını htmx 2'ye yakın tutuyor.

Sürüm 4 nasıl ortaya çıktı

Duyurunun yazarı, fikrin küçük deneysel bir hypermedia kütüphanesi olan fixi'yi geliştirirken şekillendiğini anlatıyor; bu süreç fetch() ve modern async JavaScript ile tanışmayı gerektiriyordu — htmx, geriye dönük uyumluluk nedenleriyle uzun süredir bu API'lerden kaçınmış ve XMLHttpRequest'i tercih etmişti. Christian adlı bir katılımcıyla yapılan sonraki bir sohbet, HTML yanıtlarını stream etmenin fetch()'e geçişi hem bu kullanım senaryosunu hem de kütüphaneyi genel olarak basitleştirebileceğini düşündürdü; Michael ve Alex de zamanla bu çalışmaya katıldı.

Ekip, mevcut htmx test paketinin yanında fixi'yi taşıyarak başladı, ardından htmx'in orijinal tasarım kararlarını neden verdiğini yeniden keşfettikçe yeni uygulamayı yavaş yavaş eski uygulamaya yaklaştırdı. Duyuru, 2.x ile 4.x arasındaki davranışsal farkı nispeten küçük olarak nitelendiriyor; kalan farklar ise htmx tabanlı uygulamaların çok uzun ömürlü web servisleri olarak sağlıklı kalmasını sağlamayı amaçlayan bilinçli tercihler.

Kullanıcıların fark edeceği üç değişiklik

Attribute kalıtımı artık örtük değil açık. htmx 2'de bir üst elemana yerleştirilen hx-confirm gibi attribute'ler sessizce alt elemanlara uygulanıyordu — intercooler.js'den kalma ve CSS'yi model alan bir davranış. htmx 4'te kalıtımın :inherited eki ile istenmesi gerekiyor, örneğin hx-confirm:inherited. Duyuru bunu en büyük yükseltme yükü olarak nitelendiriyor ve etkilenen işaretlemeyi bulmak için bir komut satırı aracı sağlıyor.

Event isimleri htmx:phase:action düzenine göre standartlaştırıldı: htmx:beforeRequest, htmx:before:request oldu; htmx:afterSwap, htmx:after:swap oldu ve bu şekilde devam ediyor. Çoğu hata event'i tek bir htmx:error altında birleşti, HTTP hataları htmx:response:error tetikliyor, htmx:xhr:* event'leri XMLHttpRequest ile birlikte ortadan kalktı ve doğrulama event'leri, tarayıcının yerel form doğrulaması lehine kaldırıldı.

Geçmiş yönetimi artık sayfaları localStorage'a snapshot etmiyor; duyuru bunu uzun süredir süregelen bir destek baş ağrısı kaynağı olarak gösteriyor, çünkü üçüncü taraf script'lerin yaptığı değişiklikler snapshot'ta kalıyor ama arkasındaki mantık kalmıyordu. Geri gezinmede htmx 4 sayfayı yeniden fetch ediyor ve body'ye ya da belirtilen hx-history-elt elemanına swap ediyor. Yeni hx-history-cache extension'ı sessionStorage kullanarak yerel önbellekleme geri getiriyor ve Alpine.js gibi script çözümleriyle entegre olacak şekilde tasarlandı.

Morph swap'ler ve yeni partial etiketi

4.0 ile iki öne çıkan özellik geliyor. Morph swap'ler artık kutudan çıktığı gibi destekleniyor; yazarın önceki idiomorph çalışması üzerine, Michael'ın katkıda bulunduğu geliştirilmiş bir algoritmayla kuruluyor; böylece swap'ler bir DOM ağacında yalnızca gerçekten değişen kısımları güncelleyebiliyor. Yeni hx-partial elemanı, out-of-band swap fikrini genişletiyor: tek bir yanıt, her birinin kendi hx-target ve hx-swap değerine sahip birden fazla partial taşıyabiliyor; ekip bu yaklaşımın, bir elemanı kendi yeni sürümüyle değiştirmenin ötesindeki her şeyde çok daha net olduğunu savunuyor.

Daha geniş bir extension ekosistemi

İç yapıda fetch()'e geçiş, ekibe extension'ların nasıl çalıştığını yeniden düşünme imkânı verdi ve sürümle birlikte birkaç extension geliyor: hover sırasında içeriği önceden yükleyen hx-preload, yerel fetch tabanlı dosya indirmeleri için hx-download, htmx ile Alpine.js arasındaki sürtünmeyi azaltan hx-alpine-compat ve hx-history-cache. Stream etme üç seçenek kazanıyor — text/event-stream üzerinden hx-sse, WebSocket'ler üzerinden hx-ws ve multipart/mixed yanıtları üzerinden yeni hx-multipart.

Ayrıca Alpine.js, jQuery ve hyperscript'ten ilham alan, ekibin DOM tabanlı, HATEOAS dostu reaktivite dediği şeyi de içeren, projenin kendi küçük front-end script katmanı hx-live da mevcut. Seçmek istemeyenler için yeni htmax.js bundle'ı, htmx'i en popüler extension'larla birlikte tek bir dosyada paketliyor.

htmx 2'den yükseltme

Dikkat çekici bir şekilde 4.0, npm'de latest olarak işaretlenmiyor. htmx'i sürümlenmemiş CDN URL'leri üzerinden yükleyen sitelerin zorla yükseltilmesini önlemek için 2.x hattı latest etiketini korurken, 4.0 hattı 2027 başının bir noktasına kadar next üzerinde kalacak; ancak proje web sitesi 4.0'a atıf yapacak.

Geçiş için ekip, npx [email protected] upgrade-check komutuyla çalıştırılan bir yükseltme denetleyicisi sağlıyor; bu araç .html, .php, .js, .ts, .jinja ve .erb gibi dosya türlerindeki şablon ve script'leri tarıyor. Eksik :inherited eklerini — sessizce alt elemanlara ulaşmayı bırakacak CSRF header'ları gibi durumlar dahil — ayrıca hx-disable'ın hx-ignore olması gibi yeniden adlandırılan attribute'leri ve hx-vars gibi kaldırılan attribute'leri işaretliyor; hx-prompt ise artık bir extension olarak yeniden kullanılabilir.

Neden önemli

htmx, ağır client-side framework'lere en yaygın benimsenen alternatiflerden biri haline geldi ve bu sürüm, olgun bir projenin acı verici bir geçiş dayatmadan temellerini modernleştirdiğini gösteriyor. Açık kalıtım, uzun süredir süregelen bir kafa karışıklığı kaynağını ortadan kaldırıyor; localStorage geçmişinin bırakılması yıllardır süren destek şikâyetlerine cevap veriyor; fetch() tabanlı çekirdek ise stream'e uygun bir extension ekosisteminin önünü açıyor. Sürümlenmemiş CDN kullanıcılarını korumak için 2.x'i 2027'nin ilerisine kadar latest tutan npm dağıtımı, bir kütüphanenin yayın günü görünürlüğünden çok mevcut kullanıcılarına öncelik veren ender bir örnek. Server-side render edilen HTML'e yatırım yapan ekipler için htmx 4, hypermedia yaklaşımının hâlâ aktif olarak evrildiğinin sinyalini veriyor.