K zamyšlení – Znovupoužitelné drobné šablonové „komponenty“

GEpic

Latte je úžasný nástroj, který mi usnadňuje život už několik let. Díky za to, @DavidGrudl a ostatní.

Poslední dobou však přemýšlím nad používáním jednoduchých a malých znovupoužitelných komponent. Jedná se hlavně o běžné UI elementy typu .badge, .btn a podobně, ke kterým nemá smysl tvořit klasické komponenty, jelikož neobsahují žádnou složitou logiku (vyjma klasických latte maker a podobně).

V tuto chvíli řeším situaci následovně:

Definice „komponenty“:

{define badge, bool $show = true, string $title = '', $class = null}
	<span class="badge ms-2 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
		{block content}{/block}
	</span>
{/define}

Použití komponenty:

{embed badge, $client !== null, 'Uhrazeno'}
	{block content}
		<i class="mdi mdi-check text-success"></i>
		{$client->totalInvoicePricePaid|price:0}
	{/block}
{/embed}

A funguje to skvěle. Ale umím si představit, že by to mohlo fungovat jednodušeji. Jednoduše řečeno by nebyla při použití komponenty potřeba definovat jakýkoliv {block}, jelikož samotný obsah celého {embed} by byl vložen do {define}.

Výsledný kód by mohl fungovat třeba následovně:

Definice komponenty

{define badge, bool $show = true, string $title = '', $class = null}
	<span class="badge ms-2 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
		{include child} {* Například takto? *}
	</span>
{/define}

Použití komponenty:

{embed badge, $client !== null, 'Uhrazeno'}
	<i class="mdi mdi-check text-success"></i>
	{$client->totalInvoicePricePaid|price:0}
{/embed}

A pokud vás teď napadá, že se jedná ve finále o úsporu dvou řádků na jedno použití tak věřte, že ve složitějších šablonách je každý ušetřený řádek výhra a ve finále může být ušetřených řádků daleko víc.

Nebyla by podle mě třeba ani vytvářet nic nového. Současné {define} a {embed} se mi líbí.

Nebo vás napadá, jak tuto situaci řešit v tuto chvíli tak, abych dosáhl požadovaného?

Díky všem a hezký den.

Editoval GEpic (9. 5. 16:02)

Infanticide0

Takhle by se mi to taky líbilo, v Razoru je vnitřní obsah tagu předáván jako proměnná childContent.
Pro {define} by to nemělo znamenat BC break, obsah mimo {block} se místo ignoru předá v proměnné.

A fungovalo by to i takhle?

{embed badge, $client !== null, 'Uhrazeno'}
	<i class="mdi mdi-check text-success"></i>
	{$client->totalInvoicePricePaid|price:0}

	{control "addToCart-$someid"}

	<form n:name="bla">...</form>
{/embed}

https://blazor-university.com/…rfragements/#…

David Grudl

To je něco jako https://forum.nette.org/…ymnim-blokem nebo https://github.com/…e/issues/304

Infanticide0

To je přesně ono, bránilo tomu tehdy něco technicky nebo to jen vyšumělo?

GEpic

Zkusil jsem se zamyslet nad variantou za využití n:maker dle /nette/latte/issues/304 zmíněného @DavidGrudl ale bojím se, že to nebude fungovat tak efektivně.

Definice: (Varianta A)
Tato varianta může generovat nepřehledné definice hlavně v případě, že bude povoleno použití parametrů na „root“ tagu.

<span n:define="badge, bool $show = true, string $title = '', $class = null" class="badge me-1 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
	{include child}
</span>

Definice: (Varianta B)
Tato varianta může generovat nadbytečný HTML kód.

<span n:define="badge, bool $show = true, string $title = '', $class = null" >
	<span class="badge me-1 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
		{include child}
	</span>
</span>

Použití: (Pro obě varianty)

<span n:embed="badge, $client !== null, 'Uhrazeno'">
	<i class="mdi mdi-check text-success"></i>
	{$client->totalInvoicePricePaid|price:0}
</span>

Využití {embed} a {define} generuje nejmenší množství kódu na výstupu a parametry jednotlivých {define} jsou dle mě také přehlednější.

Jinak ano, všechny zmíněné odkazy pojednávájí o stejné problematice.