<commit_before># Uncle.js
Uncle is a tiny (1.3k minzipped) virtual DOM library. Ya know React, right?

What's different:
* Should be easy to understand because of it's small code base
* HTML templates - no JSX
* Templates can be precompiled for production (easy, TBD)

[Live Demo](http://jsfiddle.net/asrsrqhr/) on JSFiddle

## Example
```javascript
var TodoApp = {
  items: [
    {text: 'Buy milk', complete: false},
    {text: 'Rob a bank', complete: true}
  ],
  toggle: function(index) {
    this.items[index].complete = !this.items[index].complete;
    this.update();
  },
  // render each item in context of TodoApp
  render: uncle.render('<ul class="todo">{{ this.items.map(TodoItem, this)  }}</ul>'), 
  // mount our UL as a child of BODY
  update: uncle.update(document.body) 
};

var TodoItem = uncle.render('<li class="todo-{{complete? 'complete' : 'active'}}" onclick="this.toggle($index)">{{text}}<li>');

TodoApp.update();
```
## Templates
Use double curly braces (mustaches) to embed Javascript one-liners.
```html
<li class="todo-{{complete? 'complete' : 'active'}}">
  Item #{{$index}}: {{text}}
<li>
```
Special attributes (or "directives"):
* `key="unique{{id}}"` - enables efficient reuse of DOM elements (as seen in React and other libraries)
* `onclick="this.method(event, arg1)"` - DOM 1 event listeners where `this` is your render context (not a DOM element)
* `html="raw  {{html}}"` - same as `innerHTML`

## API
### uncle.render(html)
Converts your template to a Javascript function, which renders virtual DOM.
```javascript
var HelloMessage = {
  name: "<NAME>",
  render: uncle.render("<div>Hello {{ this.name }}</div>")
};
// HelloMessage.render() == {tag: "div", attrs:{}, children:[ "Hello ", HelloMessage.name ]}
```
Resulting function accepts two *optional* arguments: `render(some_value, index)`.
This can be used with native Array methods like `Array#map()`. In template's context both arguments are avaliable as `$value` and `$index` accordingly. If `some_value` is an object, it's properties are made avaliable as regular variables for convenience.

### uncle.update(containerElement)
Allows any "renderable" component to update the real DOM. When you call `HelloMessage.update()`, it runs `this.render()`, computes a diff between two virtual DOMs and patches the real one if needed.<commit_msg>Fixed syntax error in TodoApp example<commit_after># Uncle.js
Uncle is a tiny (1.3k minzipped) virtual DOM library. Ya know React, right?

What's different:
* Should be easy to understand because of it's small code base
* HTML templates - no JSX
* Templates can be precompiled for production (easy, TBD)

[Live Demo](http://jsfiddle.net/asrsrqhr/) on JSFiddle

## Example
```javascript
var TodoApp = {
  items: [
    {text: 'Buy milk', complete: false},
    {text: 'Rob a bank', complete: true}
  ],
  toggle: function(index) {
    this.items[index].complete = !this.items[index].complete;
    this.update();
  },
  // render each item in context of TodoApp
  render: uncle.render('<ul class="todo">{{ this.items.map(TodoItem, this)  }}</ul>'), 
  // mount our UL as a child of BODY
  update: uncle.update(document.body) 
};

var TodoItem = uncle.render(`<li class="todo-{{complete? 'complete' : 'active'}}" onclick="this.toggle($index)">{{text}}<li>`);

TodoApp.update();
```
## Templates
Use double curly braces (mustaches) to embed Javascript one-liners.
```html
<li class="todo-{{complete? 'complete' : 'active'}}">
  Item #{{$index}}: {{text}}
<li>
```
Special attributes (or "directives"):
* `key="unique{{id}}"` - enables efficient reuse of DOM elements (as seen in React and other libraries)
* `onclick="this.method(event, arg1)"` - DOM 1 event listeners where `this` is your render context (not a DOM element)
* `html="raw  {{html}}"` - same as `innerHTML`

## API
### uncle.render(html)
Converts your template to a Javascript function, which renders virtual DOM.
```javascript
var HelloMessage = {
  name: "<NAME>",
  render: uncle.render("<div>Hello {{ this.name }}</div>")
};
// HelloMessage.render() == {tag: "div", attrs:{}, children:[ "Hello ", HelloMessage.name ]}
```
Resulting function accepts two *optional* arguments: `render(some_value, index)`.
This can be used with native Array methods like `Array#map()`. In template's context both arguments are avaliable as `$value` and `$index` accordingly. If `some_value` is an object, it's properties are made avaliable as regular variables for convenience.

### uncle.update(containerElement)
Allows any "renderable" component to update the real DOM. When you call `HelloMessage.update()`, it runs `this.render()`, computes a diff between two virtual DOMs and patches the real one if needed.
{'fraction_non_alphanumeric': 0.15315699658703072, 'fraction_numerical': 0.0017064846416382253, 'mean_word_length': 4.832089552238806, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, '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': '999521', 'n_tokens_mistral': 1468, 'n_tokens_neox': 1409, 'n_words': 522}