rc-compiler v0.1.4

rc-compiler

very fast js compiler angular-way style version 0.1.4

change logs

0.1.1 initial functional 0.1.2 add rc-repeat-obj directive 0.1.3 add rc-div directive 0.1.4 first optimize compiled code, set Ect test

bench

ect example template render 1 000 000 iterations by ~450ms (100 000 iterations by 45ms) Ect test

usage

template.html:

<h3 rc-out="title"></h3>
<div rc-if="showUsers">
	<ul>
		<li rc-repeat="users[user]">
			<span rc-repeat-obj="user{prop}">
				<b>{{$key}}:</b>
				{{prop}}
			</span>
		</li>
	</ul>
</div>

js:

// compile template
var fs = require('fs');
var template = require('../rc-compiler').compile(fs.readFileSync('./templates/simple.html'));
// render template
var html = template({
    title: 'Page title',
    users: [
        {name: 'Maria', age: 27},
        {name: 'Mike', age: 32}
    ],
    showUsers: true
});
console.log(html);

result:

<h3>Page title</h3>
<div>
	<ul>
		<li>
			<span>
				<b>name:</b>
				Maria
			</span><span>
				<b>age:</b>
				27
			</span>
		</li><li>
			<span>
				<b>name:</b>
				Mike
			</span><span>
				<b>age:</b>
				32
			</span>
		</li>
	</ul>
</div>

support directives:

rc-out, rc-if, rc-repeat, rc-repeat-obj, rc-div

rc-out

desc: put variable in this tag. example:

<title rc-out="title"></title>

result:

<title>Page title</title>

rc-if

desc: show/hide node and childs warn! now support only simple expression (no this: a + d.x && b.prop || c.f()) example:

<div rc-if="isAccessible"> ... </div>

result: if variable isAccessible is true put this node

rc-repeat

desc: repeat node by data array example:

<li rc-repeat="users[user]">{{user.name}} ({{user.age}})</li>

result:

<li>Maria (27)</li>
<li>Mike (32)</li>

rc-repeat-obj

desc: repeat node by data object fields example:

<li rc-repeat="users[user]">
	<span rc-repeat-obj="user{prop}">
		<b>{{$key}}:</b>
		{{prop}}
	</span>
</li>

result:

<li>
	<span>
		<b>name:</b>
		Maria
	</span>
	<span>
		<b>age:</b>
		27
	</span>
</li>
<li>
	<span>
		<b>name:</b>
		Mike
	</span>
	<span>
		<b>age:</b>
		32
	</span>
</li>

rc-div

desc: divide array for col view example:

<div class="col" rc-div="numbers/3 as part">
	<div rc-repeat="part[number]">{{number}}</div>
</div>

data:

var numbers = [1, 2, 3, 4, 5, 6, 7];

result:

<div class="col">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>
<div class="col">
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
<div class="col">
	<div>7</div>
</div>