<commit_before># Tim

A tiny, secure JavaScript micro-templating script.

Tim lets you write simple templates that uses JavaScript's familiar dot notation. You pass in a JavaScript object that contains all the relevant strings, and they are then substited into the template. For example:

    tim("Hello {{place}}", {place: "world"});
    // "Hello world"

* by [<NAME>](http://premasagar.com) 
    ([Dharmafly](http://dharmafly.com))
* source: [github.com/premasagar/tim](http://github.com/premasagar/tim) ([MIT license](http://opensource.org/licenses/mit-license.php))
* 219 bytes minified & gzipped


## Why is micro-templating useful?
Don't you just hate having to write HTML with a mess of string concatenation that clutters up your JavaScript?:

    var myHTML = "<ul class='" + myClass + "'>" +
        "<li id='" + theId + "'>" + liContents + "</li>" +
        // etc, etc, etc
        
Yuck. There's no need to do this. Simply prepare a JavaScript object with the required properties, and inject it into a simple template string. The templates can all be tidily kept together with the rest of the markup in an HTML document (see below).


## How is Tim different from other templating scripts?
It is safe and secure: it doesn't use eval or (new Function), so it cannot execute malicious code. As such, it can be used in secure widgets and apps that disallow eval - e.g. Adobe Air sandboxes, AdSafe ads, etc.

It doesn't include a whole bloat load of features that are unlikely to get used when you just want to get some simple templating up and running.

It's easy to debug.

For these reasons, it is now in use in Sqwidget, the JavaScript widget library: [github.com/premasagar/sqwidget](http://github.com/premasagar/sqwidget)


## Usage

    var template = "Hello {{place}}. My name is {{person.name}}.",
        data = {
            place: "Brighton",
            person: {
                name: "Prem"
            }
        };
        
    tim(template, data);
    // "Hello Brighton. My name is Prem."


In addition to plain and simple text, you can use Tim to populate HTML or other types of template.

For example:

    var template = "<p><a href='{{url}}'>{{title}}</a></p>",
        data = {
            title: "Dharmafly",
            url:   "http://dharmafly.com"
        };
        
    tim(myTemplate, data);
    // "<p><a href='http://dharmafly.com'>Dharmafly</a></p>"
    
...and so on, all the way up to a full-blown HTML document.


## Nested templates
Sometimes, you will want to reuse the same template multiple times in a loop, and then wrapped within a bigger template - e.g. when creating an HTML `<ul>` list tag.

This is easily achieved:

    var ul = "<ul>{{list}}</ul>",
        li = "<li>{{contents}}</li>",
        myList = "",
        i;
        
    for (i=100; i<103; i++){
        myList += tim(li, {contents: i});
    }
    tim(ul, {list: myList});
    // "<ul><li>100</li><li>101</li><li>102</li></ul>"
    
_(NOTE: It's under consideration whether to include a terse syntax for Tim for iterating over array elements, in a loop. Watch this space)._
        

## Debugging
If your template references a path in the data object that could not actually be found, then Tim will throw an error, to help with debugging:

    tim("Hello {{config.foo.bar}}", {config: {moo: "blah"}});
    // tim: 'foo' not found in {{config.foo.bar}}

If you want to save precious few bytes, and you are certain that your templates will never fail, then feel free to rip out this block:

    if (lookup === undef){ [...] }


## Using arrays
The data can be, or can include, an array. Use dot notation to access the array elements.

e.g:

    tim("Hello {{0}}", ["world"]);
    // "Hello world"
    
or:

    tim("Hello {{places.0}}", {places: ["world"]});
    // "Hello world"


## Changing the {{curly braces}} delimiter
By default, template tags are delimited by "`{{`" and "`}}`" tokens.
To change this, edit the `starts` and `ends` vars in the code.


## Embedding micro-templates within an HTML document
A little known aspect of browser parsing of HTML documents is that if a document contains a `<script>` tag that has a non-standard `type` attribute, then the browser will not attempt to parse that script element. However, JavaScript can still access the contents of the element. This leads us to a very useful coding pattern:

in the HTML, add a script tag with a non-standard type, e.g. "`tim`:

    <script type="tim" id="foo">
        <p><a href='{{url}}'>{{title}}</a></p><commit_msg>Readme: added sub-type to script type attribute, as per HTML spec<commit_after># Tim

A tiny, secure JavaScript micro-templating script.

Tim lets you write simple templates that uses JavaScript's familiar dot notation. You pass in a JavaScript object that contains all the relevant strings, and they are then substited into the template. For example:

    tim("Hello {{place}}", {place: "world"});
    // "Hello world"

* by [<NAME>](http://premasagar.com) 
    ([Dharmafly](http://dharmafly.com))
* source: [github.com/premasagar/tim](http://github.com/premasagar/tim) ([MIT license](http://opensource.org/licenses/mit-license.php))
* 219 bytes minified & gzipped


## Why is micro-templating useful?
Don't you just hate having to write HTML with a mess of string concatenation that clutters up your JavaScript?:

    var myHTML = "<ul class='" + myClass + "'>" +
        "<li id='" + theId + "'>" + liContents + "</li>" +
        // etc, etc, etc
        
Yuck. There's no need to do this. Simply prepare a JavaScript object with the required properties, and inject it into a simple template string. The templates can all be tidily kept together with the rest of the markup in an HTML document (see below).


## How is Tim different from other templating scripts?
It is safe and secure: it doesn't use eval or (new Function), so it cannot execute malicious code. As such, it can be used in secure widgets and apps that disallow eval - e.g. Adobe Air sandboxes, AdSafe ads, etc.

It doesn't include a whole bloat load of features that are unlikely to get used when you just want to get some simple templating up and running.

It's easy to debug.

For these reasons, it is now in use in Sqwidget, the JavaScript widget library: [github.com/premasagar/sqwidget](http://github.com/premasagar/sqwidget)


## Usage

    var template = "Hello {{place}}. My name is {{person.name}}.",
        data = {
            place: "Brighton",
            person: {
                name: "Prem"
            }
        };
        
    tim(template, data);
    // "Hello Brighton. My name is Prem."


In addition to plain and simple text, you can use Tim to populate HTML or other types of template.

For example:

    var template = "<p><a href='{{url}}'>{{title}}</a></p>",
        data = {
            title: "Dharmafly",
            url:   "http://dharmafly.com"
        };
        
    tim(myTemplate, data);
    // "<p><a href='http://dharmafly.com'>Dharmafly</a></p>"
    
...and so on, all the way up to a full-blown HTML document.


## Nested templates
Sometimes, you will want to reuse the same template multiple times in a loop, and then wrapped within a bigger template - e.g. when creating an HTML `<ul>` list tag.

This is easily achieved:

    var ul = "<ul>{{list}}</ul>",
        li = "<li>{{contents}}</li>",
        myList = "",
        i;
        
    for (i=100; i<103; i++){
        myList += tim(li, {contents: i});
    }
    tim(ul, {list: myList});
    // "<ul><li>100</li><li>101</li><li>102</li></ul>"
    
_(NOTE: It's under consideration whether to include a terse syntax for Tim for iterating over array elements, in a loop. Watch this space)._
        

## Debugging
If your template references a path in the data object that could not actually be found, then Tim will throw an error, to help with debugging:

    tim("Hello {{config.foo.bar}}", {config: {moo: "blah"}});
    // tim: 'foo' not found in {{config.foo.bar}}

If you want to save precious few bytes, and you are certain that your templates will never fail, then feel free to rip out this block:

    if (lookup === undef){ [...] }


## Using arrays
The data can be, or can include, an array. Use dot notation to access the array elements.

e.g:

    tim("Hello {{0}}", ["world"]);
    // "Hello world"
    
or:

    tim("Hello {{places.0}}", {places: ["world"]});
    // "Hello world"


## Changing the {{curly braces}} delimiter
By default, template tags are delimited by "`{{`" and "`}}`" tokens.
To change this, edit the `starts` and `ends` vars in the code.


## Embedding micro-templates within an HTML document
A little known aspect of browser parsing of HTML documents is that if a document contains a `<script>` tag that has a non-standard `type` attribute, then the browser will not attempt to parse that script element. However, JavaScript can still access the contents of the element. This leads us to a very useful coding pattern:

in the HTML, add a script tag with a non-standard type, e.g. "`text/tim`:

    <script type="text/tim" id="foo">
        <p><a href='{{url}}'>{{title}}</a></p>
{'fraction_non_alphanumeric': 0.12480756542775456, 'fraction_numerical': 0.004398504508467121, 'mean_word_length': 3.074820788530466, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 65, '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': '6046864', 'n_tokens_mistral': 2749, 'n_tokens_neox': 2574, 'n_words': 1175}