Macdom – preprocesor pro Latte

Machy8

Ahoj,
vytvořil jsem jednoduchý preprocesor pro Latte a přidal ho do addonů. Funguje jako filtr a vyžaduje php 5.4+ a Nette 2.3+. Třeba se někomu bude hodit.

Instalace

composer require machy8/macdom

Odkazy

Co umí

Základní funkce
- Elementy – div => <div></div>, input => <input />
- Atributy – input type="text" input type=text input type=text
- Booleany – input disabled required
- Selektory – .trida #id -dataAtribut
- Automatické strukturování kostry dokumentu
- Text lze vložit „jakkoliv“
- Měnit úrovně zanoření třemi způsoby – tabulátor, mezery, kombinování
Pokročilé
- Quick atributy – a $google.com $blank Odkaz
- Makra utf-8, !5, viewport, author, js, js-async...
- Replikace řádků s možností proměnných
Ostatní
- Rozsáhlé možnosti nastavení
- Přeskakování kompilace tagem SKIP, SKIP-CONTENT, nebo definicí oblastí

Macdom

!5
html
head
	utf-8
	viewport
	favicon {$basePath}/favicon.ico
    title Nette web
body
	h1 #title .titles .main-title Hello world
	nav
		@ a $http://www.[@].com $blank Link on -
		[google] Google
		[yahoo] Yahoo
		[github] Github
	div #wrapper {include content}
	{block scripts}
	http://www.nette.github.io/resources/js/netteForms.min.js async
	{/block}

Výsledné HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width" name="viewport">
        <link rel="shortcut icon" href="/test/www/favicon.ico">
        <title>Nette web</title>
    </head>
    <body>
        <h1 id="title" class="titles main-title">Hello world</h1>
        <nav>
            <a target="blank" href="http://www.google.com">Link on - Google</a>
            <a target="blank" href="http://www.yahoo.com">Link on - Yahoo</a>
            <a target="blank" href="http://www.github.com">Link on - Github</a>
        </nav>
        <div id="wrapper">Content from a template</div>
        <script async="" type="text/javascript" src="http://www.nette.github.io/resources/js/netteForms.min.js"></script>
    </body>
</html>

Budu rád za jakoukoliv připomínku a dotaz.

Editoval Machy8 (13. 11. 2016 11:52)

castamir

@Machy8 Pěknej nápad! Chce to ale testy, hodně testů (Latte má bohatou syntax)…

EDIT: možná o tom nevíš, možná je to schválně, ale PhpStorm má podobnou „syntax“, akorát bez mezer a po zmáčknutí tabulátoru to přeformátuje do html, např.: ul#foo>li.bar*3 vytvoří tohle

<ul id="foo">
    <li class="bar"></li>
    <li class="bar"></li>
    <li class="bar"></li>
</ul>

Editoval castamir (10. 11. 2015 15:53)

CZechBoY

@castamir: Presne, jmenuje se to Emmet/Zen coding.

Machy8

@castamir : Díky! PhpStorm jsem neznal a podobnost je čistě náhodná.

enumag

V readme píšeš že 1 tab = 8 spaces, ale v Compileru to vypadá na 1 tab = 4 spaces. Co je správně? (Výchozí by jednoznačně mělo být 1 tab = 4 spaces = 1 level.)

Syntaxe hezká, myslím že by mne to mohlo zajímat. Samozřejmě až to bude mít důkladné testy, do té doby je to jen hezký koncept. ;-)

Machy8

@enumag : Díky za připomínku. Koukám, že jsem tohle nedostatečně vysvětlil. Doplním to do dokumentace i kódu.

Pro vysvětlení
Macdom pracuje na základě bílých znaků v dokumentu.

Číslo v proměnné spacesInTab udává počet mezer, které mají být brány jako jedna úroveň a je možno ji změnit.

Pokud má například někdo nastaveno, že při jednom odsazení tabulátorem v editoru se vytvoří 4 mezery = 1 úroveň ale chce mít úroveň až po 2 odsazeních = 8 mezer = 1 úroveň, tak si proměnnou spacesInTab může upravit na onu hodnotu. Zároveň ale může mít nastaveno, že po druhém odsazení = 8 mezer se vloží tabulátor. Proto 1 tabulator = 8 mezer = 2 úrovně. Může ale taky mít ty tabulátory nebo mezery vyplé, popřípadě jinak nastavené a aby nenastala kolize, tak je tabulátor nastaven na *2.

Ve výsledku je ale „jedno“, na kolik mezer je nastaven tabulátor nebo jedna úroveň, protože při přidávání uzavíracího tagu (ukončení zanořování) proběhne kontrola úrovně tohoto tagu a je přidán pouze pokud jsou splněny podmínky.

Editoval Machy8 (10. 11. 2015 22:10)

enumag

@Machy8 Oceňuji snahu, ale abych pravdu řekl tak jsi mne naopak zmátl ještě více. Každopádně má doporučení k tomu jsou následující:

Rozhodně by se neměly žádným způsobem míchat tabulátory a mezery. Napadají mne dvě možnosti:
1. Striktně určíš co z toho se bude používat, to druhé zakážeš (jako YAML – pouze mezery).
2. Umožníš obojí s tím že tab = 1 odsazení, 4 mezery = 1 odsazení a nedovolíš míchat taby a mezery v rámci jednoho souboru (jako NEON).

Editoval enumag (11. 11. 2015 0:06)

Majkl578

Jaká je výhoda oproti existujícím markupům, např. HAML (dříve i jako addon)?

Machy8

@enumag : Díky za tip! V další verzi to poupravím.

@Majkl578 : Ostatní preprocesory jsem zatím nějak zvlášť nezkoumal, takže přesně nevím. Co jsem se tak narychlo podíval, tak oproti zmíněnému Hamlu je podle mě jednodušší zápis html atributů a tagů, kdy se před tag nepíše procento a atributy neuzavírají do závorek. Více řádkový zápis textu nepotřebuje „|“ na konci řádku a zápis je možné kombinovat s textem ze stejného řádku jako je tag. Nevšiml jsem si ani, že by uměl rychlý atributy neboli převést například a $http://www.nette.org $blank Nette na <a href="http://www.nette.org" target="blank">Nette</a>. Je tu i zkrácený zápis n:href="". n:ifcontent je bráno stejně jako u inputu disabled.

Editoval Machy8 (11. 11. 2015 23:39)

castamir

Dokud k tomu nebudeš mít testy, tak ti asi nikdo moc neuvěří, že se to chová tak, jak říkáš. Třeba s těmi atributy se mi to nezdá (co třeba hodnota atributu obsahující mezery a nebo tebou definované speciální symboly #.$= apod.?)…

Nesnažím se Tě tu nějak hanit. Testy jsou pro Tebe mj. jako ověření, že se to chová opravdu tak, jak jsi zamýšlel. Napiš si je. Pokud nevíš jak, můžeš se inspirovat testováním jiných knihoven (např. nette, kdyby), můžeš třeba použít i nette/tester a pokud si s něčím budeš vědět rady, tak se poptej zde na foru, jak na to.

Testy se vyplatí dělat i na mnohem menší věci… nikdy totiž nevíš, kdy do toho budeš chtít přidat něco, co ti neplánovaně rozbije stávající řešení.

Machy8

@castamir : Ty atributy mají 2 možnosti zápisu (pro ty s mezerami se píše středník na konci)

Příklad v prvním příspěvku u link ⇒ link ${$basePath}/favicon.ico $shortcut icon;.

Speciální znaky jsem zkoušel a fungovaly. Nezapírám ale, že se může něco vyskytnout. K další verzi přiložím i testy.

Editoval Machy8 (12. 11. 2015 23:32)