Vyšla htmx 4.0.0: přechod na fetch(), explicitní dědičnost atributů a morphing z výroby
Po osmi měsících vývoje je tu nová major verze oblíbené hypermedia knihovny. Pod kapotou se mění interní transportní vrstva i způsob dědičnosti atributů, přibývá vestavěný morphing a nový tag – přechod ze dvojky ale podle autorů nespěchá.
Tým kolem knihovny htmx po osmi měsících vývoje vydal verzi 4.0.0. Navzdory číslu na začátku ale nejde o revoluci, se kterou by bylo nutné přepisovat aplikace od nuly – autoři sami popisují htmx 4 jako z uživatelského pohledu „téměř identickou“ s htmx 2. Přesto přináší několik zásadních změn pod kapotou a pár novinek, které stojí za pozornost.
Odkud se htmx 4 vzalo
Impulzem byl vedlejší projekt hlavního autora htmx, fixi – při jeho tvorbě si oblíbil moderní fetch() API, zatímco htmx interně dlouho stavělo na starším XMLHttpRequest kvůli zpětné kompatibilitě. Souběžně se ozval jeden z pozdějších přispěvatelů s nápadem na streamování HTML přímo z backendu, což autora přesvědčilo, že přechod na fetch() by tuto práci zjednodušil pro všechny. Krátce poté se k projektu přidali další dva klíčoví vývojáři a vývoj se rozjel naplno – tým portoval fixi a testovací sadu htmx a postupně se svou novou implementací přibližoval chování té staré, přičemž tam, kde se od dvojky záměrně odchýlili, šlo o vědomá rozhodnutí ve jménu dlouhé udržitelnosti výsledných aplikací.
Důležitá poznámka k distribuci: htmx 4 zatím není na npm označena jako latest – tou zůstává větev 2.x, minimálně do začátku roku 2027, aby se uživatelé spoléhající na neverzované CDN odkazy neprobudili s jinou major verzí na produkci bez varování. Web htmx.org už ale nově odkazuje na čtyřku jako na hlavní verzi.
Tři velké změny
Autoři upozorňují na tři hlavní rozdíly oproti htmx 2, z nichž první bude pro migraci existujících projektů zdaleka nejnáročnější.
Dědičnost atributů přestává být implicitní. V htmx 2 se řada atributů (např. hx-confirm nebo hx-target) automaticky „dědila“ na potomky v DOM stromu – mechanismus inspirovaný CSS, který byl mocný, ale při čtení cizího kódu dost matoucí, protože nebylo na první pohled jasné, odkud se chování konkrétního tlačítka bere. V htmx 4 se atribut zdědí, jen pokud to explicitně řeknete příponou :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>
Code language: HTML, XML (xml)Pomocné atributy jako hx-disinherit, které dědičnost naopak vypínaly, už nejsou potřeba a lze je z kódu odstranit. Právě tuto změnu autoři označují za nejpracnější položku migrace.
Názvy událostí se sjednotily do formátu htmx:phase:action[:sub-action]: – například htmx:beforeRequest je nově htmx:before:request a htmx:afterSwap se stalo htmx:after:swap. Většina dřívějších chybových událostí se navíc slučuje do jediné htmx:error, zatímco HTTP chyby signalizuje samostatná htmx:response:error. Události htmx:xhr:* úplně zmizely (logicky, knihovna už XMLHttpRequest nepoužívá) a validační události htmx:validation:* nahradila nativní validace formulářů v prohlížeči. Pro běžné projekty jde nejčastěji o pár míst v kódu, kde se přes addEventListener nebo hx-on navazovalo na konkrétní jméno události.
Historie prohlížeče už defaultně nepoužívá localStorage. V htmx 2 se do něj ukládaly snapshoty stránek pro rychlý návrat tlačítkem zpět, jenže snapshot často zachytil i DOM úpravy provedené cizími JS knihovnami – po obnovení stránky se ale jejich logika znovu nespustila a stránka zůstala vizuálně „rozbitá“. htmx 4 proto při návratu stránku znovu načte ze serveru a vloží do <body> (nebo do elementu s hx-history-elt), díky čemuž cizí skripty „prostě fungují“ i po návratu v historii. Kdo preferuje starší chování, může sáhnout po nové extension hx-history-cache, která historii ukládá do sessionStorage.
Nad rámec těchto tří bodů proběhl i interní přechod z XMLHttpRequest na fetch(), který by pro většinu uživatelů měl zůstat neviditelný.
Novinky: morphing a <hx-partial>
Hlavní autor htmx dříve vytvořil samostatnou knihovnu idiomorph pro tzv. morphing swaps – „chytré“ nahrazování obsahu, které místo smazání a vložení nového DOM stromu proměně jen to, co se skutečně změnilo, a zachová tak třeba stav formulářových polí nebo fokus. Zařazení do jádra zvažoval už u dvojky, teď je morphing podporovaný přímo z výroby, s dále vylepšeným algoritmem.
Druhou novinkou je tag <hx-partial>, podobný dřívějším out-of-band swapům, ale přehlednější ve chvíli, kdy chcete jedním požadavkem aktualizovat víc míst na stránce najednou:
<hx-partial hx-target="#messages" hx-swap="beforeend">
<div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
<span>5</span>
</hx-partial>
Code language: HTML, XML (xml)Rozšíření se přepisují
Přechod na fetch() otevřel prostor pro přepracování extensions. Mezi nové nebo aktualizované patří hx-preload (přednačítání obsahu při najetí myší), hx-download (nativní stahování souborů), hx-alpine-compat (kompatibilita s Alpine.js) a hx-history-cache (náhrada dřívějšího ukládání historie do localStorage). Přepracovaly se i tři extensions pro streamování HTML: hx-sse (Server-Sent Events), hx-ws (WebSockets) a nová hx-multipart (streamování přes multipart/mixed).
Zajímavostí je i vlastní malé skriptovací řešení hx-live, inspirované Alpine.js, jQuery a hyperscriptem, které má nabídnout DOM založenou, HATEOAS-friendly reaktivitu. Kdo nechce řešit, které extensions vybrat, může sáhnout po novém bundlu htmax.js, jenž balí htmx s těmi nejpoužívanějšími dohromady.
Jak na upgrade
Pro migraci ze dvojky je k dispozici CLI nástroj, který projde šablony a upozorní na problematická místa – chybějící :inherited, přejmenované nebo odstraněné atributy (např. hx-vars je zcela pryč ve prospěch hx-vals s prefixem js:), staré názvy událostí i zastaralá volání JS API jako htmx.addClass():
$ npx htmx.org@4.0.0 upgrade-check -- ./templates
Kompletní přehled změn nabízí dokument What’s New in htmx 4. Instalace je klasická – přes balíčkovací nástroj s verzí 4.0.0, nebo přes CDN:
<script src="https://unpkg.com/htmx.org@4.0.0/dist/htmx.min.js"></script>
Code language: HTML, XML (xml)Autoři zároveň publikovali sadu instrukcí pro AI coding agenty (skills) – zvlášť pro vývoj s htmx 4, ladění, tvorbu extensions a migraci z htmx 2.
Není důvod spěchat
htmx 2 bude podle autorů podporována i nadále, takže s přechodem na čtyřku není nutné nikam spěchat – ostatně proto zůstává na npm jako latest ještě zhruba půl roku. Pro nové projekty ale dává verze 4 smysl už teď, hlavně kvůli přehlednějším událostem, robustnější práci s historií a vestavěnému morphingu.
Adam Heglas
Student se zájmem o IT, programování a kybernetickou bezpečnost. Baví mě se učit novým věcem a posouvat své schopnosti dál. Když zrovna nesedím u kódu, věnuji se fitness a počítačovým hrám.
