Flexibilní atributy v Latte a kompatibilita

Chci představit funkcionalitu, která přinese větší flexibilitu při práci s dynamickými hodnotami atributů. Přitom hledám cestu, jak zachovat plně zpětnou kompatibilitu.

Hlavní potřeba: ovlivňovat přítomnost atributů pomocí hodnoty

V praxi často potřebujeme, aby se atribut vykreslil nebo nevykreslil podle nějaké podmínky. Zvláště u data-atributů může být mnohem elegantnější mít místo dvojice <div data-active="true"> a <div data-active="false"> tuto dvojici: <div data-active> a <div>.

Samozřejmě se to netýká jen data-atributů, ale všech. Podobně užitečné může být vypsat title="{$title}" jen pokud máme obsah, target="_blank" jen u externích odkazů atd.

Ale jak to zapsat v Latte? Vlastně řešíme úkol, kdy:

<div foo="{$foo}"></div>
// při určité hodnotě $foo vykreslí: <div></div>
// při určité hodnotě $foo vykreslí: <div foo></div>
// při určité hodnotě $foo vykreslí: <div foo="..."></div>

Možné řešení: null způsobí nevykreslení atributu

Jedna z možností, jak toho dosáhnout, je nechat hodnotu atributu null způsobit, že se celý atribut nevykreslí. Protože fakticky přesně to je sémantický význam null:

<a href="/"
	title="{$title}"
	target="{$link->isExternal() ? '_blank'}"
	data-active="{$active ? ''}">
   odkaz
</a>

// interní odkaz bez titulku a active
// vykreslí se: <a href="/">odkaz</a>

// externí odkaz s active:
// vykreslí se: <a href="/" target="_blank" data-active>odkaz</a>

V případě pseudo-boolean atributů (jako data-active v této ukázce) se musím postarat, aby výsledná hodnota byla buď prázdný řetězec nebo null (poznámka: z pohledu HTML je <div foo=""> a <div foo> totéž). Což se dá zapsat právě jako data-active="{$active ? ''}", tedy když je $active truthy, vrať prázdný řetězec, jinak null. Možná by bylo srozumitelnější na to udělat nějaký filtr, např. <a data-active={$active|toggle}>.

Ale jak to pořešit vzhledem ke zpětné kompatibilitě?

Současné chování vykresluje null hodnoty jako prázdné atributy (<div foo="">), zatímco nové chování by takové atributy úplně skrylo (<div>). Co by se stalo, kdyby se chování při null změnilo?

U standardních HTML atributů není rozdíl mezi prázdnou hodnotou a absencí atributu ve většině případů významný – atributy jako class="" nebo style="" se chovají stejně, jako kdyby vůbec neexistovaly. V těchto případech by bylo vynechání atributů vlastě žádoucí. Problematické jsou jen specifické atributy s definovanou sémantikou, například href="" (odkaz na aktuální stránku) versus absence href (neaktivní prvek), nebo alt="" (dekorativní obrázek) versus absence alt (accessibility chyba).

U data-atributů je situace mnohem komplikovanější. JavaScript a CSS kód často spoléhá na přítomnost těchto atributů pomocí hasAttribute() nebo selektorů typu [data-foo], takže změna z <div data-foo=""> na <div> by mohla rozbít existující funkcionalitu. Tady si podobnou změnu vůbec dovolit nemůžeme.

Z hlediska zpětné kompatibility by přechod musel být vícefázový. Latte by muselo nejprve na atributy obsahující null upozornit a uživatel by se musel rozhodnout, které je ok vynechat a které chce zachovat, a tam by přidal přetypování na string nebo nullcoalesce operátor alt="{$alt ?? ''}".

Vzhledem k těmto problémům se zdá, že přímá změna chování null hodnot není praktická cesta. Potřebujeme najít způsob, jak dosáhnout stejné funkcionality bez rizika porušení zpětné kompatibility.

Možné řešení: null bez uvozovek způsobí nevykreslení

Co kdyby hodnota null vedla k vynechání atributu jen tehdy, pokud je zapsán bez uvozovek?

<a href="/"
	title={$title}
	target={$link->isExternal() ? '_blank'}
	data-active={$active ? ''}>
   odkaz
</a>

Důležité je, že toto není nová navrhovaná syntax – zápis bez uvozovek funguje v Latte již 12 let. Podle mých analýz ho však prakticky nikdo nepoužívá, takže by změna chování neznamenala de facto BC break.

Vynechání uvozovek se dá logicky chápat jako naznačení, že atribut hodnotu vůbec nemusí mít, a dalším pokračováním této myšlenky je, že může být úplně potlačen. Zatímco zápis s uvozovkami target="{$null}" by zachoval současné chování (prázdný atribut), zápis bez uvozovek target={$null} by atribut úplně vynechal.

Možné řešení: jiná hodnota způsobí nevykreslení

Další možností je použít jinou hodnotu než null, která by způsobila nevykreslení atributu. Tím by se úplně vyhnul problém se zpětnou kompatibilitou.

Latte by mohlo definovat speciální konstantu, například OMIT nebo SKIP:

<a href="/"
	title="{$title ?? OMIT}"
	target="{$link->isExternal() ? '_blank' : OMIT}"
	data-active="{$active ? '' : OMIT}">
   odkaz
</a>

Výhoda je, že jde o úplně novou funkcionalitu bez rizika BC breaku. Nevýhoda je nutnost pamatovat si speciální konstantu a o něco delší zápis.

(Btw hodnotu false pro tento účel použít nemůžeme, protože má jiný speciální význam)

Možné řešení: nový filtr

Další možností by bylo přidat specializované filtry pro podmíněné vykreslování atributů. Filtr |toggle, který se orientuje se podle truthy/falsey hodnoty. A filtr |optional, který vynechá při null:

<a href="/"
	title="{$title|optional}"
	target="{$link->isExternal() ? '_blank'|optional}"
	data-active="{$active|toggle}">
   odkaz
</a>

Výhoda filtrů je jejich jasnost záměru. Nevýhodou však je, že toto řešení neumožňuje připravit podmíněné vynechání atributu na straně PHP – rozhodnutí o tom, zda se atribut vykreslí, musí být vždy explicitně zapsáno v šabloně pomocí filtru.

Co si myslíte o těchto variantách? Kterou cestu byste doporučili?

Rád bych slyšel vaše názory na tuto funkcionalitu a preferované řešení zpětné kompatibility.