Templater

Template strings es6 helper (onEvent, map, find).

Templater(el, component, props);

Example

1import Templater from 'dynamic-app-templater';
2
3function myComponent({ map, onEvent, find }, props) {
4  
5  onEvent('h1', 'click', function() {
6    find('.find-my').innerHTML = 'find you!!!';
7  })
8
9  return `
10    <h1>Simpale Template</h1>
11    <div class="find-my">find my</div>
12    <ul>
13      ${map(props, (item, key) =>`
14        <li>${key} - ${item}</li>
15      `)}
16    </ul>
17  `;
18}
19
20const props = { 1: 'one', 2: 'two', 3: 'three' };
21  
22Templater(document.body, myComponent, props);

The benefits

Map

---

Templater:

1// map(object || array, renderFunction)
2map(items, (item, key) =>
3  `<div>${ item }</div>`
4)

without Templater:

1// Object.keys().map().join()
2Object.keys(items).map((itemId, index) => 
3  `<div>${ items[itemId] }</div>`
4).join('')

Events

---

Templater:

1// onEvent(cssSelector, eventType, eventFunction)
2// - using reletive selector path
3// - can add event before element is connected to the DOM
4// - without jQuery
5onEvent('h1', 'click', () => {})

without Templater:

1// native-js:
2document.querySelector('#my_component h1').addEventListener('click', () => {})
3
4// jQuery:
5$('#my_component h1').on('click', () => {})

Find

---

Templater:

1// find(cssSelector)
2// - using reletive selector path
3// - can use only in onEvent function
4// - without jQuery
5find('h1').innerHTML;

without Templater:

1// native-js:
2document.querySelector('#my_component h1').innerHTML;
3
4// jQuery:
5$('#my_component h1').html()

Component writing

---

Templater:

1function myComponent({ map, onEvent, find }, props) {
2  const items = {};
3
4  return `
5    <h1>My template</h1>
6  `;
7}
8  
9Templater(el, myComponent, props);

license

MIT