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