<commit_before># temple
Temple is a lightweight and easy to learn API for creating DOM templates in JavaScript

## Setting up temple
Include the temple.js file ahead of any scripts which use it. This can be accomplished by simply using a script tag with the src attribute set to 'temple.js'. Check out index.html for the 'Hello Temple!' example.

### Using a script tag
```HTML
    <script src='temple.js'></script>
```

## Templates are HTML
Write templates in HTML and use variables wrapped in {{double braces}} for dynamic attributes, names, and content.
The only caveat is that the HTML must be wrapped in a single DOM element (such as the article tag in the example below). If you have a lot of HTML in a single template, simply wrap it all in a div or span to overcome this limitation.
Here we see the contents of a template file called 'topic.html':
```HTML
<article class="topic">
    <div class="dateBlock">
        <div>{{month}} {{day}}</div>
        <div>{{year}}</div>
        <p>Started by<br />{{author}}</p>
    </div>
    <h1><a href="#discussions?topic={{topicName}}" id="{{linkId}}">{{title}}</a></h1>
    <{{introTag}}>{{introText}}</{{introTag}}>
</article>
```

## Retrieve templates using Promises
temple provides a method called 'getTemplate' to import external html templates into the current context. It does this by making an XMLHttpRequest to a provided URI. temple.getTemplate() returns a promise to enable chaining requests. Alternatively, developers may choose to import the HTML string using any AJAX API.
```JavaScript
temple.getTemplate('template.html').then(function(html) {
    // Fulfill Promise to Get the template file, THEN pass HTML string to the callback
        // ... do stuff with html string such as passing to temple to convert to DOM
        // var newDom = temple.toDom(html);
});
```

## Map the template's variable names to actual data
Keep application logic where it belongs by mapping variable names in a template to values in JavaScript
```JavaScript
    // Create an object which maps a template's variable names to values
    var date = new Date(),
        months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        dataMap = {
            // map the variables from our 'topic.html' template to values
            month: months[date.getMonth()],
            day: date.getDate(),
            year: date.getFullYear(),
            author: '<NAME>',
            topicName: 'Topic1',
            linkId: 'Temple1-1',
            introTag: 'h2',
            title: 'Temple Example',
            introText: 'This is really easy to use!'
        };
        
        temple.getTemplate('topic.html').then(function(html) {
            // temple mixes the HTML string with the dataMap object and returns a DOM node/tree
            var newDom = temple.toDom(html, dataMap);
            
            // document.getElementById('someDomNode').appendChild(newDom);
        });
```

## Embed templates inside of templates
It is often convenient to include a template within another template (and so on). This can be accomplished by importing all of the required templates and transforming them using temple.toString(html, dataMap/*optional*/), as in the following example:
```JavaScript
temple.getTemplate('innerModule').then(function(html) {
    var innerModuleData = {prop: value},
        innerModuleHtml = temple.toString(html, innerModuleData);
        
        temple.getTemplate('outerView').then(function(html) {
            // outerView's template can include the innerModule template by using {{someModule}} in it's HTML
            // and mapping the someModule variable name to the template returned by our innerModuleHtml variable
            var outerViewData = {
                    prop: value,
                    someModule: innerModuleHtml
                },
                // Once all templates are combined, the last call uses toDom to return DOM rather than String
                view = temple.toDom(html, outerViewData);
                
                document.getElementById('myDiv').appendChild(view);
        });
});
```

## The future of temple
temple is brand new, so there are still enhancements and features to come. Current work on the project involves:
 - Request multiple templates at once
 - Data binding
 - [Possible] removal of HTML single-outer-node limitation

 Please report issues and leave feedback to help make temple even better!
 If you would like to contribute to this project, simply make a pull request, then submit your changes when complete.

<commit_msg>Improved nested template example to use chaining<commit_after># temple
Temple is a lightweight and easy to learn API for creating DOM templates in JavaScript

## Setting up temple
Include the temple.js file ahead of any scripts which use it. This can be accomplished by simply using a script tag with the src attribute set to 'temple.js'. Check out index.html for the 'Hello Temple!' example.

### Using a script tag
```HTML
    <script src='temple.js'></script>
```

## Templates are HTML
Write templates in HTML and use variables wrapped in {{double braces}} for dynamic attributes, names, and content.
The only caveat is that the HTML must be wrapped in a single DOM element (such as the article tag in the example below). If you have a lot of HTML in a single template, simply wrap it all in a div or span to overcome this limitation.
Here we see the contents of a template file called 'topic.html':
```HTML
<article class="topic">
    <div class="dateBlock">
        <div>{{month}} {{day}}</div>
        <div>{{year}}</div>
        <p>Started by<br />{{author}}</p>
    </div>
    <h1><a href="#discussions?topic={{topicName}}" id="{{linkId}}">{{title}}</a></h1>
    <{{introTag}}>{{introText}}</{{introTag}}>
</article>
```

## Retrieve templates using Promises
temple provides a method called 'getTemplate' to import external html templates into the current context. It does this by making an XMLHttpRequest to a provided URI. temple.getTemplate() returns a promise to enable chaining requests. Alternatively, developers may choose to import the HTML string using any AJAX API.
```JavaScript
temple.getTemplate('template.html').then(function(html) {
    // Fulfill Promise to Get the template file, THEN pass HTML string to the callback
        // ... do stuff with html string such as passing to temple to convert to DOM
        // var newDom = temple.toDom(html);
});
```

## Map the template's variable names to actual data
Keep application logic where it belongs by mapping variable names in a template to values in JavaScript
```JavaScript
    // Create an object which maps a template's variable names to values
    var date = new Date(),
        months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        dataMap = {
            // map the variables from our 'topic.html' template to values
            month: months[date.getMonth()],
            day: date.getDate(),
            year: date.getFullYear(),
            author: '<NAME>',
            topicName: 'Topic1',
            linkId: 'Temple1-1',
            introTag: 'h2',
            title: 'Temple Example',
            introText: 'This is really easy to use!'
        };
        
        temple.getTemplate('topic.html').then(function(html) {
            // temple mixes the HTML string with the dataMap object and returns a DOM node/tree
            var newDom = temple.toDom(html, dataMap);
            
            // document.getElementById('someDomNode').appendChild(newDom);
        });
```

## Embed templates inside of templates
It is often convenient to include a template within another template (and so on). This can be accomplished by importing all of the required templates and transforming them using temple.toString(html, dataMap/*optional*/), as in the following example:
```JavaScript
temple.getTemplate('innerModule').then(function(html) {
    var innerModuleData = {
            prop1: value1,
            prop2: value2
        },
        innerModuleHtml = temple.toString(html, innerModuleData);

        return innerModuleHtml;
        // this return passes to chained 'then'
}).then(function(moduleHTML) {
        temple.getTemplate('outerView').then(function(viewTemplate) {
            // outerView's template can include the innerModule template by using {{someModuleName}} in it's HTML
            // and mapping the someModuleName variable to the template returned by the moduleHTML argument
            var outerViewData = {
                    prop1: value1,
                    someModuleName: moduleHTML
                },
                // Once all templates are combined, the last call uses toDom to return DOM rather than String
                view = temple.toDom(html, outerViewData);
                // attach the completed template to the page...
                document.getElementById('myDiv').appendChild(view);
        });
});
```

## The future of temple
temple is brand new, so there are still enhancements and features to come. Current work on the project involves:
 - Request multiple templates at once
 - Data binding
 - [Possible] removal of HTML single-outer-node limitation

 Please report issues and leave feedback to help make temple even better!
 If you would like to contribute to this project, simply make a pull request, then submit your changes when complete.

If you are using temple in a project, please let me know about it! I'll feature your site/app/framework on the upcoming temple home page.
{'fraction_non_alphanumeric': 0.09772157190635451, 'fraction_numerical': 0.0018812709030100335, 'mean_word_length': 2.9771404821280134, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, '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': '691214', 'n_tokens_mistral': 2432, 'n_tokens_neox': 2331, 'n_words': 1093}