Creating a JS Template Engine

Hi, it's me @shadowtime2000, one of the maintainers of Eta, a fast embeddable template engine. In this tutorial I will show you how to create an isomorphic (browser/node) template engine.

The Design

The initial design of the template engine will be pretty simple. It will simply interpolate values from a data object. It will use {{valueName}} to interpolate values.

Simple Rendering

First, lets create a simple rendering function which takes the template and the data and it will render the value.

var render = (template, data) => {
    return template.replace(/{{(.*?)}}/g, (match) => {
        return data[match.split(/{{|}}/).filter(Boolean)[0]]
    })
}

Basically, all that does is search for anything that is surrounded by the brackets, and it replaces it with the name inside data. You can write your templates like this and it will take it from the data object.

Hi my name is {{name}}!

render("Hi, my name is {{name}}!", {
name: "shadowtime2000"
});

But there is a problem, you can't have spaces in the interpolations.

render("Hi, my name is {{ name }}!", {
name: "shadowtime2000"
})
/*
Hi, my name is undefined!
*/

This requires you to have spaces inside the data object, which isn't that clean. We can make it allow spaces by trimming leading and ending whitespace of the data name before interpolating.

var render = (template, data) => {
    return template.replace(/{{(.*?)}}/g, (match) => {
        return data[match.split(/{{|}}/).filter(Boolean)[0].trim()]
    })
}

This is pretty good, but for larger templates it wouldn't be that fast because it has to kind of parse it every time. That is why many template engines support compilation, where the template is compiled into a faster JS function which can take the data and interpolate it. Let's add compilation to our template engine, but before we do, we need to add a special parsing function.

Parsing

Since parsing can be a little boring, let's just reuse some code from another JS template engine. I would have used the Eta parsing engine, but that has been extremely optimized and can be pretty confusing to people. So, lets use another popular JS template engine parsing code, mde/ejs. Do remember to attribute them for the parsing engine.

var parse = (template) => {
    let result = /{{(.*?)}}/g.exec(template);
    const arr = [];
    let firstPos;

    while (result) {
        firstPos = result.index;
        if (firstPos !== 0) {
            arr.push(template.substring(0, firstPos));
            template = template.slice(firstPos);
        }

        arr.push(result[0]);
        template = template.slice(result[0].length);
        result = /{{(.*?)}}/g.exec(template);
    }

    if (template) arr.push(template);
    return arr;
}

What this basically does is loop over executing the regex pattern on the template and adding the stuff to a data structure. Here is what that data structure would look like:

["Hi my name is ", "{{ name }}", "!"]

Compilation

Let's take a quick overview of what compilation would output. Imagine you enter this template:

Hi my name is {{ name }}!

It would give you this function:

function (data) {
    return "Hi my name is "+data.name+"!";
}

Let's first create a function to parse and then create a string that can be used. We first have to parse the template.

const compileToString = (template) => {
    const ast = template;
}

We also have to create a string which will be used as the function.

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;
}

The reason we are using quotation marks at start is because when it is compiling the templates and such, they will all begin with a +. Now we have to iterate over the AST.

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;

    ast.map(t => {
        // checking to see if it is an interpolation
        if (t.startsWith("{{") && t.endsWith("}}")) {
            // append it to fnStr
            fnStr += `+data.${t.split(/{{|}}/).filter(Boolean)[0].trim()}`;
        } else {
            // append the string to the fnStr
            fnStr += `+"${t}"`;
        }
    });
}

The final part of this function is to return the function string.

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;

    ast.map(t => {
        // checking to see if it is an interpolation
        if (t.startsWith("{{") && t.endsWith("}}")) {
            // append it to fnStr
            fnStr += `+data.${t.split(/{{|}}/).filter(Boolean)[0].trim()}`;
        } else {
            // append the string to the fnStr
            fnStr += `+"${t}"`;
        }
    });

    return fnStr;
}

So if it takes this template:

Hi my name is  {{ name }}!

It will return this:

""+"Hello my name is "+data.name+"!"

Now this is done, creating a compile function is relatively simple.

const compile = (template) => {
    return new Function("data", "return " + compileToString(template))
}

Now we have completed compilation for our template engine.

Wrapping Up

In this tutorial I showed how to:

1. Implement a simple rendering function
2. Understand a parsing engine adapted from EJS
3. Iterate over the AST to create fast compiled functions

Comments

[Ben Halpern]

Eta is great, thanks for this post.

I'm following along the copyright issue, and just want to ensure you we take it very seriously and have various strategies in place to hunt down this kind of stuff either proactively or as reported.

[shadowtime2000]

Thanks! As I said previously, I believe this copyright issue I am having seems to be part of the larger problem of bot/spam accounts which scrape articles, add a footer, and then publish it. It's great to know the DEV team has it kind of covered with that though!

[Aiden Bai]

Really well written article (Been using Eta recently, really easy to integrate). Just some things I found annoying with using eta in my workflow.

• VSCode coloring extension is great, but somehow messes up normal .html coloring? Not sure if its reproducible on your side but I'm running latest stable VSCode + Calamity theme
• Prettier doesn't integrate with .eta files (Although I'm not sure if it does with ejs either)

Overall, great article, keep it up!

[Tam]

We're currently using handlebars but are looking for a templating language that let's us store template files in a database to use a single node.js application to render multiple client websites, similar to how shopify use their liquid template language and render the different stores using a cluster of app pools

Is that something that would be possible with this templating engine?

[kennethnnah]

Report that user please

[shadowtime2000]

Yeah, I have reported the user to DEV. I am also in the process of getting those articles removed from search results and possibly just getting them taken down in general from their website.

[0xDragonTrader]

Have job offer for you, how contact?
0x_Dragon on twitter