Templati NPM | npm.io

Templati

A template-engine for nodejs-based apps.

What

Create tag-objects programatically and render them at any time, or precompile html-documents of it, if used from backend.

Why

Existing templating-solutions often come with an own syntax and restrictions in applying logic, or using substitutes which hide the logic entirely.

The author wanted to have a lightweight solution which gives full control, leaving the reponsibility to not overload templates with logical operations to the developers and their conventions, and use ECMA (a.k.a. JavaScript) instead of introducing more syntax.

How

After installing this package with npm i templati, you can use templati as a frontend- or backend-script.

For using it in the frontend, go to your frontend-scripts-folder and create a symlink to the shipped script:

cd public/scripts

ln -s ../../node_modules/templati/dist/templati.js

This makes sure that the script is up to date, when you upgrade this package.

For using it in the backend, import it in your backend-script:

const { Tag } = require('templati')

The class "Tag" represents an HTML-element and has the properties "tagName", "attr" and "content", we can create a tag like this:

let tag = new Tag('div', { class: 'taggy', 'id': 'root-tag' })

And add child-tags in it with the "addTag"-function:

let child = tag.addTag()     // defaults to tagName 'div'

let grandchild = child.addTag('span', {}, 'Some text')

At any point Tags can be rendered:

let html = tag.toHtml()

Printing the result with console.log(html), should now give:

<div class="taggy" id="root-tag">
   <div>
    <span>
        Some text
    </span>
   </div>
 </div>

Now we have a snippet for re-use, but what about templates?

First, we make our tag snippet-tag exportable, adding this line at the bottom of our example-script:

module.exports = tag

Let's assume the example-script-file is named 'snippet.js', then we can import the snippet-tag in any other script-file:

const snippet = require('./snippet')

Let's create a tag in the other script-file:

const template = new Tag('div')

Adding a tag into another is also done with the addTag-function:

template.addTag(snippet)

The class Doc is an extension of Tag and is initialized with a doc-name or -filepath and optionally CSS- and JS-paths:

const Doc = require('templati').Doc

let doc = new Doc(
  'frontend/templates/main.html',
  ['frontend/styles/main.css'],
  ['frontend/scripts/main.js', frontend/scripts/fancy.js']
);

It has the property 'body' for quick-access of the body-tag, let's add some content:

doc.body.addTag('h1', {}, 'Hello screen!')

At any point Docs can be written like this:

doc.writeDoc()

That'll create or overwrite a file in the given path 'frontend/templates/main.html' with the following content:

<!doctype html>
<html lang="en-gb">
  <head>
    <title>
      Main
    </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="frontend/styles/main.css">
    <script src="frontend/scripts/main.js" defer></script>
    <script src="frontend/scripts/fancy.js" defer></script>
  </head>
  <body>
    <h1>
      Hello screen!
    </h1>
  </body>
</html>

As you may have noticed, some sensible defaults are set, e.g. the language, title and character-decoding. In case you want to change these, use the tag's content-property for accessing its children:

let htmlTag = doc.content[0]

let headTag = htmlTag.content[0]

let bodyTag = htmlTag.content[1]

The content-property is also chainable:

let titleTag = doc.content[0].content[0].content[0]

Back to our example, if we'd want to change the lang-attr of the html-tag, we can do:

let headTag = doc.content[0].content[0]
headTag.attr.lang = 'es'

Finally let's do some logical-operations, let's say you have some data of known structure, e.g. an array of items, and you want to apply some conditions, it could look like:

const data = hereComesTheDataFromSomewhereOutOfTheBlue()

const isLoggedIn = getLoginStateAsBoolean()


if(isLoggedIn) {
  const list = doc.body.addTag('ul')
  for(let i in data) {
    list.addTag('li', {}, data[i])
  }
}
else {
  doc.body.addTag('a', { href: 'login'}, 'Please log in for reading data.')
}