Skip to content

Micro HTML template engine over ES6 template literals

Notifications You must be signed in to change notification settings

vvanghelue/es6-html-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>&lt;b&gt;Goliath&lt;/b&gt;</li>
</ul>

What is template literals :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

100% inspired by :

http://2ality.com/2015/01/template-strings-html.html

About

Micro HTML template engine over ES6 template literals

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published