What is LitTemp

Frankly, I don’t know what to call LitTemp. LitTemp does a task the same as templating libraries/systems (like Handlebars.js and JSX), but it’s so small that you could memorize the code character for character easily. It also is pure JS (no compiling or whatever needed aside from the fact that it uses ES6/ES2015). It’s just a way of leveraging template literals alongside a couple cleverly written functions (which are less than 80 bytes of code...bytes, not kilobytes) to have all the templating ability you need with easy to read/write/understand syntax.

Is it a library? The smallest templating framework ever? Just a method? I honestly don’t know. But I will tell you that if great code is measured by doing amazing amounts of work with exceptionally little code then there is nobody in this world that can call LitTemp anything short of fantastic.

How Does it Work?

From an infrastructure viewpoint a template in LitTemp would be a function that takes an argument of the object whose data is to be interpolated into the template. That function needs access to a couple ridiculously small functions (which literally are the LitTemp library/framework/whatever). That template function just returns an ES6 template literal with some clever syntax written into it.

From a syntax viewpoint you use the standard template literal form ${} to insert expressions and a combination of syntax of IF, EACH, and || to set up the templating (the first two being the two functions making up LitTemp, and the latter being the JS logical OR operator, which for LibTemp can be thought of as ELSE). Your template literal might look something like this:

function titleTemplate(data)
{
    return `
    <div>
    ${ IF (data.title)(
        `<h1>${data.title}</h1>`
     ) || IF (data.altTitle)(
        `<h1>${data.altTitle}</h1>`
     ) || (
        `<h1>Default Title Here!</h1>`
     )}
    </div>
    `
}                                                                         

That template can return interpolated markup as simply as calling var myMarkup = titleTemplate(data); where data is an object holding your info. IF there is a data.title then it interpolates that into an h1, ELSE IF there is a data.altTitle then interpolate that into an h1, ELSE return a default h1 tag. That simple.

Note that it’s parens making the “block” after the IF, not curly braces. That’s because we’re leveraging some closures to do what we need.

What about looping though? A primary feature of templating is the ability to say “output one of these for every entry in an array". LitTemp does that too, with the EACH function:

function commentsTemplate(data)
{
    return `
    <div>
    ${ EACH (data.commentList)(comment=>`
        <h2>By ${comment.author.firstName} ${comment.author.lastName}</h2>
        <div class="body">${comment.body}</div>
    `)}
    </div>
    `
}

That will output interpolated markup of EACH entry in the data.commentList array given, and exposes comment (via a simple arrow function) to template each entry.

The great part is that our || (remember, think of it as ELSE) works as great in concert with EACH as it does with IF, making some really powerful syntax such as the following:

function commentsTemplate(data)
{
    return `
    <div>
    ${ IF (data.commentsBanned)(
        `<h2>Comments Not Allowed On This Post</h2>`
     ) || EACH (data.commentList)(comment=>`
        <h2>By ${comment.author.firstName} ${comment.author.lastName}</h2>
        <div class="body">${comment.body}</div>
    `) || (
        `<h2>No Comments Yet</h2>`
     )}
    </div>
    `
}

Now we’ve created an IF ... ELSE EACH ... ELSE type format that outputs one message IF comments are banned, ELSE EACH comment if the array isn’t empty, ELSE a no comments yet message.

The LitTemp Code

So where is this code that makes templating so easy? Where can you download it? Well...it’s so small that it would be a bit ridiculous to make it a download. So here it is:

function IF(n){return t=>n?t:""}
function EACH(n){return t=>n.map(t).join("\n")}

That’s it. Some clever usage of closures and some clever ways of writing the syntax are all you need to have some extremely powerful templating abilities in any project where you’re using ES6/ES2015.

Optionally you could also include a third function for iterating object properties:

function KEYS(n){return t=>Object.keys(n).map(t).join("\n")}

You’d use it the same as EACH except the argument in the arrow function will represent the object’s key instead of an array’s value.

How you expose these functions to your template is up to you. Whether you deem it worthy to make them global (if you’re doing a ton of templating it might be worth it) or encapsulate them in with your templating functions, it all should work equally well.

License

I don’t care what you use it for. We’ll call it MIT license, but it’s so small that the comment crediting me in the code would nearly outweigh the code itself, so I’m not going to be ridiculous and ask you to include a comment when you use it. My only stipulation is that when redistributing it (not in your projects, but like in a blog post about it or such) you credit a link back here.