template literal list

template literal list

by Danny Michaelis

HTML

<div id="target"></div>

CSS

.big {
  color: white;
  background-color: black;
}

Babel + JSX

function genClass (val) {
	return val
}
function endTag () {
	return `<div>canary</div>`
}

function tag(strings, ...values) {
  return strings.reduce((accumulator, part, i) => {
		console.log(accumulator, '|', values[i - 1], '|', part)
    return accumulator + values[i - 1] + part
  })
}
function isRequired() {
	return true	
}
// what ever is put into genClass will not affect the dirty check because it is evaluated before tag
const list = tag`<ul class="x ${genClass('y')} z" ${isRequired() ? 'required' : ''}> 
	${
  	[1, 2, 3].map((value) => {
    	const clickFunc = `alert('the value is ${value}')`
    	return `<li id="2nd-list-${value}" ${value > 1? 'class="big"' : ''} onclick="${clickFunc}">${value}</li>`
    }).join(' ') // anthing in here will not affect the dirty check because it is evaluated before tag happens
  }
</ul>${endTag()}`

document.getElementById('target').innerHTML = list
console.log('----------------')
const type =  () => Math.floor(Math.random() * 2) === 0;
const div = tag`< div data-${type()? 'object' : 'string'} =  "something" >`
console.log(div)