<commit_before># elplato
> An insanely fast client-side templating language

elplato uses `createElement` statements to render templates in the browser up to **4 times faster** than [doT] and [Handlebars].

## Example

elplato's syntax is simply HTML with a few special elements and attribute prefixes thrown in, with Mustache-like syntax for variable substitution.

```html
<div>
  <h1>Category: {{category}}</h1>
    <if items.length>
      <ul>
        <foreach items>
          <li>
            <h2>{{parent.category}}: {{name}}</h2>
            <h3 if-sale='class="sale"'>{{price}}</h3>
            <h3>{{stockCount}} in stock</h3>
            <button unless-stockCount='disabled="disabled"'>Buy now</button>
          </li>
        </foreach>
      </ul>
    <else>
      <p>This category is empty.</p>
    </if>
</div>
```

Calling a compiled template returns the HTML root element, if the template has a single element.

```js
var div = template({
  category: 'Main Courses',
  items: [
    {
      name: 'Spicy Steak Tacos',
      sale: true,
      price: '$5.00',
      stockCount: 100
    }
  ]
});

document.body.appendChild(div);
```

## Syntax

### `{{variable}}`

Variables can be substituted using double braces. HTML in variables is always escaped.

```html
<button class="{{class}}">{{text}}</button>
```

### `<if var>`

Evaluate the contained HTML if `var` is truthy.

```html
<if enabled>
  It's enabled!
</if>
```

### `<unless var>`

Evaluate the contained HTML if `var` is falsey.

```html
<unless enabled>
  It's disabled!
</unless>
```

### `<else>`

Used with `<if>` and `<unless>`, evaluated if the opposite is true.

```html
<if enabled>
  It's enabled!
<else>
  It's disabled!
</if>
```

### `<foreach array[,iterator]>`

Iterate over the items in `array`. `this` becomes the value and its properties can be accessed without dot notation.

If `iterator` is provided, `{{iterator}}` will be set to the index of the current item.

#### Data
```json
{
  "name": "<NAME>",
  "tags": ["hot", "fresh", "new"]
}
```

#### Template
```html
<h1>{{name}}</h1>
<ul>
  <foreach tags,num>
    <li>{{num}}. {{this}}</li>
  </foreach>
</ul>
```

#### Output
```html
<h1>Item</h1>
<ul>
  <li>0. hot</li>
  <li>1. fresh</li>
  <li>2. new</li>
</ul>
```

### `<forin object[,prop]>`

Iterate over the properties of `object`. `this` becomes the value and its properties can be accessed without dot notation.


#### Data
```json
{
  "name": "<NAME>",
  "stats": {
    "Spice level": "hot",
    "Vegetarian": "No",
    "Rating": "5"
  }
}
```

#### Template
```html
<h1>{{name}}</h1>
<ul>
  <forin stats,stat>
    <li>{{stat}}: {{this}}</li>
  </forin>
</ul>
```

#### Output
```html
<h1>Taco</h1>
<ul>
  <li>Spice level: Hot</li>
  <li>Vegetarian: No</li>
  <li>Rating: 5</li>
</ul>
```

If `prop` is provided, `{{prop}}` will be set to the property name.

### `<div if-var='attr="value"'>`

Conditionally sets the `attr` attribute to `value` if `var` is truthy.

Use space to separate multiple attributes.

```html
<button if-disabled='disabled="disabled" class="disabled"'>Buy</button>
```

### `<div unless-var='attr="value"'>`

Conditionally  sets the `attr` attribute to `value` attributes if `var` is falsey.

Use space to separate multiple attributes.

```html
<button unless-disabled='class="enabled"'>Buy</button>
```

### `<js>`

Evaluates the content in place. `data` will be set to the current data object and can be mutated or re-assigned.

```html<commit_msg>Added documentation for helpers and partials<commit_after># elplato
> An insanely fast client-side templating language

elplato uses `createElement` statements to render templates in the browser up to **4 times faster** than [doT] and [Handlebars].

## Example

elplato's syntax is simply HTML with a few special elements and attribute prefixes thrown in, with Mustache-like syntax for variable substitution.

```html
<div>
  <h1>Category: {{category}}</h1>
    <if items.length>
      <ul>
        <foreach items>
          <li>
            <h2>{{parent.category}}: {{name}}</h2>
            <h3 if-sale='class="sale"'>{{price}}</h3>
            <h3>{{stockCount}} in stock</h3>
            <button unless-stockCount='disabled="disabled"'>Buy now</button>
          </li>
        </foreach>
      </ul>
    <else>
      <p>This category is empty.</p>
    </if>
</div>
```

Calling a compiled template returns the HTML root element, if the template has a single element.

```js
var div = template({
  category: 'Main Courses',
  items: [
    {
      name: 'Spicy Steak Tacos',
      sale: true,
      price: '$5.00',
      stockCount: 100
    }
  ]
});

document.body.appendChild(div);
```

## Syntax

### `{{variable}}`

Variables can be substituted using double braces. HTML in variables is always escaped.

```html
<button class="{{class}}">{{text}}</button>
```

### `<if var>`

Evaluate the contained HTML if `var` is truthy.

```html
<if enabled>
  It's enabled!
</if>
```

### `<unless var>`

Evaluate the contained HTML if `var` is falsey.

```html
<unless enabled>
  It's disabled!
</unless>
```

### `<else>`

Used with `<if>` and `<unless>`, evaluated if the opposite is true.

```html
<if enabled>
  It's enabled!
<else>
  It's disabled!
</if>
```

### `<foreach array[,iterator]>`

Iterate over the items in `array`. `this` becomes the value and its properties can be accessed without dot notation.

If `iterator` is provided, `{{iterator}}` will be set to the index of the current item.

#### Data
```json
{
  "name": "Spicy Steak Tacos",
  "tags": ["hot", "fresh", "new"]
}
```

#### Template
```html
<h1>{{name}}</h1>
<ul>
  <foreach tags,num>
    <li>{{num}}. {{this}}</li>
  </foreach>
</ul>
```

#### Output
```html
<h1>Item</h1>
<ul>
  <li>0. hot</li>
  <li>1. fresh</li>
  <li>2. new</li>
</ul>
```

### `<forin object[,prop]>`

Iterate over the properties of `object`. `this` becomes the value and its properties can be accessed without dot notation.


#### Data
```json
{
  "name": "Spicy Steak Tacos",
  "stats": {
    "Spice level": "hot",
    "Vegetarian": "No",
    "Rating": "5"
  }
}
```

#### Template
```html
<h1>{{name}}</h1>
<ul>
  <forin stats,stat>
    <li>{{stat}}: {{this}}</li>
  </forin>
</ul>
```

#### Output
```html
<h1>Taco</h1>
<ul>
  <li>Spice level: Hot</li>
  <li>Vegetarian: No</li>
  <li>Rating: 5</li>
</ul>
```

If `prop` is provided, `{{prop}}` will be set to the property name.

### `<div if-var='attr="value"'>`

Conditionally sets the `attr` attribute to `value` if `var` is truthy.

Use space to separate multiple attributes.

```html
<button if-disabled='disabled="disabled" class="disabled"'>Buy</button>
```

### `<div unless-var='attr="value"'>`

Conditionally  sets the `attr` attribute to `value` attributes if `var` is falsey.

Use space to separate multiple attributes.

```html
<button unless-disabled='class="enabled"'>Buy</button>
```
### `{{>SomeNameSpace.someFunction[ arg1 arg2]}}`

Call `SomeNameSpace.someFunction`, passing `arg1` and `arg2`. The function must return a string which will be inserted as text content.

If no arguments are passed, the current data context will be passed.

### `<partial name="SomeNameSpace.someFunction"[ args="arg1, arg2"]>`

Call `SomeNameSpace.someFunction`, passing `arg1` and `arg2`. The function must return an array of HTMLElements.

If no arguments are passed, the current data context will be passed.

### `<helper name="SomeNameSpace.someFunction">{{someProp}} and text</helper>`

Call `SomeNameSpace.someFunction`, passing the evaluated string. The function must return a string which will be inserted as text content.

### `<js>`

Evaluates the content in place. `data` will be set to the current data object and can be mutated or re-assigned.

```html
{'fraction_non_alphanumeric': 0.18242807379692944, 'fraction_numerical': 0.008256999096890724, 'mean_word_length': 3.726829268292683, 'pattern_counts': {'":': 14, '<': 172, '<?xml version=': 0, '>': 175, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '276635', 'n_tokens_mistral': 2758, 'n_tokens_neox': 2588, 'n_words': 865}