A template-engine for nodejs-based apps.
Create tag-objects programatically and render them at any time, or precompile html-documents of it, if used from backend.
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.
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.')
}
For questions, bug-reports and towel-returns, feel free to open an issue on https://github.com/ida/templati/issues/new
Ida Ebkes, 2018
MIT, a copy is attached.
FAQs
Write templates programatically with Tag-objects.
We found that templati demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.