Modular

This module allows you to use some great stuff from JS-frameworks templating in your HTML. The synthax is looks like an Angular templates synthax.

Start

• Create folder modular in your node_modules folder
• Download and unpack in /node_modules/modular
• in your gulpfile include this module modular = require('modular')
• inject module into pipeline .pipe(modular({ dir: __dirname }))

Progress

Basic

• while
• if
• for in
• Lorem generator
• hash generator
• self-closing tags

Components

• component

Binding

• basic
• global

Basic

while

Attribute	Arguments	Example
while	from, to	<li while="i = 0; < 10">...</li> <li while="i = 0; < 10">List item №{{i + 1}}</li>

li will be printed 10 times.
You can use double curly braces here for displaying available variables and doing some stuff with it.
Available variables:
i - index variable, which was created after parsing. You can rename it to any other name. For example: i => indx. Now, index variable will be indx
start - start point <Number>
end - end point <Number>
state - operator. Can be >, <, >=, <=

if

Attribute	Arguments	Example
if	expression	<li if="i === 0">...</li>

li will be printed only if the result of expression will be true. Otherwise, this block will be removed completely.
You can use any default Javascript code here, Math.random() > 0.5 for example. In this case this block will be printed only if Math.random() will be greater than 0.5

for in, for of

Attribute	Arguments	Example
for	expression [of,in]	<li for="let user in ['Mike', 'John', 'Susey', 'Vasya']">...</li>

for loop goes through array and displays elements. You can use in or of keyword. They both doing the same. let is important keyword!

Lorem generator

Function	Arguments	Example
$lorem()	length<number>, type<string>	<li>{{$lorem(100)}}</li>

$lorem() funciton is accessible in while and for loops. In the feature it will be accessible in any place in document. It takes one argument by default, which is lengh of string (count by words). Also it can takes second argument, which is the type of string.
Availbale types:

• default - Lorem ipsum dolor sit amet, consectetur adipisicing elit...
• mountains - Далеко-далеко за словесными горами в стране...
• verter - Душа моя озарена неземной радостью, как...
• kafka - Проснувшись однажды утром после беспокойного сна...

Maximum length of string is 500 words.

Hash generator

Keyword	Arguments	Example
hash	-	<li>{{$lorem(100)}}, <br>hash: {{hash}}</li>

hash keyword is accessible in while and for loops. For each iteration hash will be generated automaticaly and will be the same in any place of template.
Hash string length is equals to 5.

Components

Keyword	Arguments	Example
component	name<string>, path<string>	<component name="user" path="components/user">, <user></user>

You can use components to build your page. First of all you need to create a separate file and declare your component by special tag in :

<-- components/user.html -->
<div class="user">{{user}}</div>

<-- index.html -->
<meta charset="UTF-8">
<title>Document</title>

<component name="user" path="components/user">
...

This declarations will be removed after transpilation, so don't worry about broken syntax.

After that you can put your component in any part of document:

<-- components/user.html -->
<div class="user">{{user}}</div>

<-- index.html -->
<li for="let user of ['Mike', 'John', 'Other']">
	<user></user>
</li>

This code will be transformed to this:

<li>
	<div class="user">Mike</div>
</li>
<li>
	<div class="user">John</div>
</li>
<li>
	<div class="user">Other</div>
</li>

Also, you can write large arrays:

<-- components/user.html -->
<div class="user">
	<h3>{{user.name}}</h3>
	age: {{user.age}}<br>
	last visit: {{user.time}}
</div>

<-- index.html -->
<li for="let user of [
	{name: 'Mike', age: 12, time: '11.08.2017'},
	{name: 'John', age: 18, time: '11.08.2017'},
	{name: 'Other', age: 44, time: '11.08.2017'}
]">
	<user></user>
</li>

This code will be transformed to this:

<li>
	<div class="user">
		<h3>Mike</h3>
		age: 12<br>
		last visit: 11.08.2017
	</div>
</li>
<li>
	<div class="user">
		<h3>John</h3>
		age: 18<br>
		last visit: 11.08.2017
	</div>
</li>
<li>
	<div class="user">
		<h3>Other</h3>
		age: 44<br>
		last visit: 11.08.2017
	</div>
</li>

The data automatically binds to variable wich you create earlier in for="let $var of something". If array contains only simple types of data (number, string, boolean) then $var binds to that. If array contains an objects then $var will be binded to each object, and you need to use properties from this object: $var.name, $var.age, $var.time

Binding

You can bind variables to component and use it inside. The variable name is writing in square braces. The value writing in quotes. It can be variable name or string, or boolean.

Basic

<!-- ./user.html -->
<div class="user-card">
	{{name}}
<div>

<!-- index.html -->
<li for="user in users">
	<user [name]="user"></user>
</li>

Global

Global binding allows you to bind object to component an after that you will be able to use the keys of this object as a variables names

<!-- ./user.html -->
<div class="user-card">
	{{name}}
	{{age}}
<div>

<!-- index.html -->
<li for="user in [
	{name: 'John', age: 20},
	{name: 'Bob', age: 99}
]">
	<user []="user"></user>
</li>