0.1.2 • Published 8 years ago
deact v0.1.2
deact
Usage:
import deact from 'deact';
const sayHi = () => console.log('hi');
const firstName = 'Moshe';
const lastName = 'Kolodny';
const todos = [ 'make todos list', 'something else?' ];
const domElement = deact`
<div>
<h1>Hello ${firstName} ${lastName}</h1>
<span onClick=${ () => console.log('clicked!') }>span1</span>
<span OncLiCK=${ sayHi }>span2</span>
<ul>
${
todos.map(todo => deact`<li>${todo}</li>`)
}
</ul>
</div>
`;
document.body.appendChild(domElement);
DEMO (may need reloading with devtools open) source
How it works
The basic idea behind this is to take Tagged template strings and if the value is a function and it looks like an attribute then drop a placeholder. After doing that for all the items, inject the result into a div and replace each placeholder with it's corresponding real value
Note: since the template string must go through the browser's DOM engine, attributes are case insensitive
onClick === ONCLICK === oNcLiCk