dynamic-app-templater v1.0.0

Templater

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

Templater(el, component, props);

Example

import Templater from 'dynamic-app-templater';

function myComponent({ map, onEvent, find }, props) {
  
  onEvent('h1', 'click', function() {
    find('.find-my').innerHTML = 'find you!!!';
  })

  return `
    <h1>Simpale Template</h1>
    <div class="find-my">find my</div>
    <ul>
      ${map(props, (item, key) =>`
        <li>${key} - ${item}</li>
      `)}
    </ul>
  `;
}

const props = { 1: 'one', 2: 'two', 3: 'three' };
  
Templater(document.body, myComponent, props);

The benefits

Map

Templater:

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

without Templater:

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

Events

Templater:

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

without Templater:

// native-js:
document.querySelector('#my_component h1').addEventListener('click', () => {})

// jQuery:
$('#my_component h1').on('click', () => {})

Find

Templater:

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

without Templater:

// native-js:
document.querySelector('#my_component h1').innerHTML;

// jQuery:
$('#my_component h1').html()

Component writing

Templater:

function myComponent({ map, onEvent, find }, props) {
  const items = {};

  return `
    <h1>My template</h1>
  `;
}
  
Templater(el, myComponent, props);

license

MIT