DEV Community

loading...
Cover image for Creating a JS Template Engine

Creating a JS Template Engine

shadowtime2000
If you are looking at this you probably wonder who I am; teenage open source maintainer
Originally published at hackernoon.com on ・3 min read

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]]
    })
}
Enter fullscreen mode Exit fullscreen mode

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}}!
Enter fullscreen mode Exit fullscreen mode
render("Hi, my name is {{name}}!", {
name: "shadowtime2000"
});
Enter fullscreen mode Exit fullscreen mode

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!
*/
Enter fullscreen mode Exit fullscreen mode

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()]
    })
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 }}", "!"]
Enter fullscreen mode Exit fullscreen mode

Compilation

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

Hi my name is {{ name }}!
Enter fullscreen mode Exit fullscreen mode

It would give you this function:

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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

const compileToString = (template) => {
    const ast = template;
    let fnStr = `""`;
}
Enter fullscreen mode Exit fullscreen mode

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}"`;
        }
    });
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

So if it takes this template:

Hi my name is  {{ name }}!
Enter fullscreen mode Exit fullscreen mode

It will return this:

""+"Hello my name is "+data.name+"!"
Enter fullscreen mode Exit fullscreen mode

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

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

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

Discussion (6)

Collapse
ben profile image
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.

Collapse
shadowtime2000 profile image
shadowtime2000 Author

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!

Collapse
aidenybai profile image
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!

Collapse
tam2 profile image
Tam • Edited

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?

Collapse
techagentng profile image
kennethnnah

Report that user please

Collapse
shadowtime2000 profile image
shadowtime2000 Author

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.