es6-html-template
js
Safe, light ES6 html template over es6 templates literals
Version 0.0.5 License ISC
<script src=" https://cdn.jsdelivr.net/npm/es6-html-template@0.0.5/es6-html-template.min.js "></script>
Micro HTML template engine over ES6 template literals
Features :
Escaping
Prevent script injection, with $${myVariable}
Loops
direct usage of [...].map() instead of [...].map().join('')
Example
const title = 'The cool folks list'
const folks = [
{name: 'John'},
{name: 'David'},
{name: '<b>Goliath</b>'}
]
const output = html`
<h1>${title}</h1>
<ul>
${folks.map((folk) => html`
<li>$${folk.name}</li>
`)}
</ul>
`
console.log(output)
Result :
<h1>The cool folks list</h1>
<ul>
<li>John</li>
<li>David</li>
<li><b>Goliath</b></li>
</ul>
What is template literals :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals