Illustrating JS template string for HTML templating.

example.js

const numbers = [1, 2, 3, 4]

const list = html`
<ul>
	${numbers.map(number => `<li>${number}</li>`)}
</ul>`

/*
	At this point we have:
	<ul>
  		<li>1</li><li>2</li><li>3</li><li>4</li>
	</ul>

	Now let us put that into something bigger.
*/

const wrappedList = html`
<div>
	<h1>AWESOME STUFF</h1>
	${list}
<div>
`

/*
	Now we have:
	<div>
        <h1>AWESOME STUFF</h1>

		<ul>
	        <li>1</li><li>2</li><li>3</li><li>4</li>
		</ul>
	<div>
 */


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

const html = (literalSections, ...substs) => {
    let raw = literalSections.raw
    let result = ''
    substs.forEach((subst, i) => {
        let lit = raw[i]

        if (Array.isArray(subst)) {
            subst = subst.join('')
        }

        if (lit.endsWith('$')) {
            subst = htmlEscape(subst)
            lit = lit.slice(0, -1)
        }
        result += lit
        result += subst
    })
    result += raw[raw.length - 1]
    return result
}