emel is an erlang module that allows to generate complex HTML (or XML) using a syntax that is similar to CSS selectors.
emel is inspired by zen-coding: https://code.google.com/p/zen-coding/
git clone https://github.com/marianoguerra/emel
cd emel ./rebar compile
./rebar eunit
1> emel:gen("span[type=\"text\"]#asd.foo.bar.baz").
{ok,"<span id=\"asd\" class=\"foo bar baz\" type=\"text\"/>"}
2> {ok, S} = emel:gen("span[type=\"text\"]#asd.foo.bar.baz").
{ok,"<span id=\"asd\" class=\"foo bar baz\" type=\"text\"/>"}
3> io:format("~s~n", [S]).
<span id="asd" class="foo bar baz" type="text"/>
ok
run the following command:
erl -run emel shell -run init stop -noshell -pa ebin
play with an interactive console:
emel console Ctrl + d to exit
>>> p
{ok,[{node,1,p,[],[],[]}],[]}
<p/>
>>> p{hi}
{ok,[{node,1,p,[],[],"hi"}],[]}
<p>hi</p>
>>> li*3
{ok,[{times,1,{node,1,li,[],[],[]},3}],[]}
<li/><li/><li/>
Mariano Guerra
BSD (+ optional beer to the author)
input:
p
output:
<p/>
input:
p#id
output:
<p id="id"/>
input:
p.class
output:
<p class="class"/>
input:
p#id.class
output:
<p id="id" class="class"/>
input:
p#foo.bar.baz
output:
<p id="foo" class="bar baz"/>
input:
p#id-$ * 3
output:
<p id="id-1"/><p id="id-2"/><p id="id-3"/>
input:
{hello}
output:
hello
input:
p{hello}
output:
<p>hello</p>
input:
h1#title.important {hi}
output:
<h1 id="title" class="important">hi</h1>
input:
ul > li * 3
output:
<ul><li/><li/><li/></ul>
input:
ul.list > li#item-$.list-item * 3
output:
<ul class="list"><li id="item-1" class="list-item"/><li id="item-2" class="list-item"/><li id="item-3" class="list-item"/></ul>
input:
.username > (span.first-name{Mariano} + { } + span.last-name{Guerra})
output:
<div class="username"><span class="first-name">Mariano</span> <span class="last-name">Guerra</span></div>
input:
p * 3 > a{asd}
output:
<p><a>asd</a></p><p><a>asd</a></p><p><a>asd</a></p>
input:
p > ({Click } + a{here} + { to continue})
output:
<p>Click <a>here</a> to continue</p>