{{| |}} | for evaluation
`{{= }}` | `{{: }}` | for interpolation
`{{! }}` | `{{! }}` | for interpolation with encoding
`{{# }}` | use `{{: }}` | for using partials
`{{## #}}` | `{{#name(args)}} {{#}}` | for defining partials
`{{? }}` | `{{? }}` | for conditionals
`{{~ }}` | `{{~ }}` | for array iteration
| `{{. }}` | for object iteration
| `{{% }}` | for while iteration
| `{{^ }}` | for do/while iteration
| `{{[ ]}}` | for range iteration
| `{{/ }}` `{{\ }}` | for block
| {{` }} | for escaping template
| `{{-- --}}` | for comments
`{{ }}` has been changed to `{{| |}}` to be able to do:
```
{{|
function hello(name) {
if(arguments.length) {
return 'hello ' + name;
}
else {
return 'hello world!';
}
};
|}}
{{:hello('foo')}}
```
API
---
```typescript
import { template, Template } from '@zokugun/template';
```
The variable *template* is the default template compiler. It contains the tags describe below.
### constructor(tags, options)
Create your own template compiler with the constructor of the `Template` class.
The arguments *tags* and *options* can be optionals.
By default, *options* will be:
```
{
varnames: 'it',
strip: true, // remove spaces in javascript code. Be careful of missing ;
append: true // use string concatenation or addition assignment operator
}
```
Example:
```typescript
const custom = new Template({
interpolate: {
regex: /\$\{([\s\S]+?)\}/g,
replace: function(m, code) {
return this.cse.start + 'it.' + code + this.cse.end;
}
}
});
const hello = custom.compile('Hello ${firstname}');
console.log(hello({
firstname: 'John',
lastname: 'Doe'
}));
```
### template.addTag(name, regex, replace)
The method *addTag* allow you to add new tag so he can extends the compiler.
The tags are executed in alphabetic order. So its name will determine when the tag will be executed.
The function *replace* will be called as in str.replace(*regex*, *replace*) excepted that the variable *this* will an object like:
```
{
cse: {
start: string, // start of the code
end: string, // end of the code
startencode: string, // start of the code that will be HTML escaped
endencode: string // end of the code that will be HTML escaped
},
unescape: function(str), // unescape the code to pass from the template to the function's code
sid: integer // the sid for the variables' names
}
```
### template.clearTags()
The method *clearTags* removes all the tags defined in the compiler.
### template.compile(template, options)
The function *compile* returns a function based of the string *template*.
The argument *options* will overwrite the default options of the compiler.
The first line of the *template* can also contains options for the compiler. It must start with '{{}} ' and the options separated with spaces.
```
{{}} strip:true
hello {{:it.firstname}}
```
```
{{}} strip:false varnames:firstname,lastname
hello {{:firstname}}
```
### template.removeTag(name)
The method *clearTags* removes the tag named *name*.
### template.run(template, variables, options)
The method *run* will firstly compiles the *template* with the *options* and the *variables*' names. Then it will execute the resulting function with the *variables*.
```
console.log(template.run('It\'s nice to meet you, {{:name}}.', {
name: 'miss White'
}));
```
This is the least efficient to use a template. Because the template will be compiled every time.
Tags
----
### Interpolation
| Template | Data | Result |
|---|---|---|
``` |
|
``` |
| Template | Data | Result |
|---|---|---|
``` {{:it.title}} ``` |
|
``` github ``` |
| Template | Data | Result |
|---|---|---|
```
{{|
function hello(name) {
if(arguments.length) {
return 'hello ' + name;
}
else {
return 'hello world!';
}
};
|}}
|
|
``` |
| Template | Data | Result |
|---|---|---|
```
{{?it.morning}}
good morning
{{??it.evening}}
good evening
{{??}}
hello
{{?}}
```
|
```
{
morning: true
}
```
|
``` good morning ``` |
```
{
evening: true
}
```
|
``` good evening ``` |
|
```
{
}
```
|
``` hello ``` |
| Template | Data | Result |
|---|---|---|
```
{{~it :value}}
|
``` ['banana','apple','orange'] ``` |
``` |
```
{{~it :value:index}}
|
``` |
|
```
{{~~it :value}}
|
``` |
|
```
{{~~it :value:index}}
|
``` |
| Template | Data | Result |
|---|---|---|
```
{{.it :value}}
|
```
{
firstname: 'John',
lastname: 'Doe',
age: 25
}
```
|
``` |
```
{{.it :value:key}}
|
``` |
| Template | Data | Result |
|---|---|---|
```
{{%4 :i}}
{{:i}}
{{%i-1}}
```
|
```
{
}
```
|
``` 4 3 2 1 ``` |
| Template | Data | Result |
|---|---|---|
```
{{^4 :i}}
{{:i}}
{{^i-1}}
```
|
```
{
}
```
|
``` 4 3 2 1 ``` |
| Template | Data | Result |
|---|---|---|
```
{{[i 0..3]}}
{{:i}}
{{[]}}
```
|
```
{
}
```
|
``` 0 1 2 3 ``` |
```
{{[i 3..0]}}
{{:i}}
{{[]}}
```
|
``` 3 2 1 0 ``` |
|
```
{{[i 0..3 :2]}}
{{:i}}
{{[]}}
```
|
``` 0 1 ``` |
|
```
{{[i 0..it]}}
{{:i}}
{{[]}}
```
|
``` 3 ``` |
``` 0 1 2 3 ``` |
| Template | Data | Result |
|---|---|---|
|
|
|
|
|
|
| Template | Data | Result |
|---|---|---|
```
{{|var i = 0;|}}
{{/do}}
{{:i}}
{{\while(++i <= 3)}}
```
|
```
{
}
```
|
``` 0 1 2 3 ``` |
```
{{/for(var i = 0; i <= 3; i++)}}
{{:i}}
{{\}}
```
|
```
{
}
```
|
``` 0 1 2 3 ``` |
| Template | Data | Result |
|---|---|---|
```
Hello {{--{{:it.name}}--}}
```
|
```
{
name: 'Jake'
}
```
|
``` Hello ``` |
| Template | Data | Result |
|---|---|---|
```
Hello {{`it.name}}
```
|
```
{
name: 'Jake'
}
```
|
```
Hello {{it.name}}
```
|
|
ko-fi.com/daiyam |
|
liberapay.com/daiyam/donate |
|
paypal.me/daiyam99 |