Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peternaydenov/tag-templates
Template engine build on top of javascript native technologies: template literals and tag functions.
https://github.com/peternaydenov/tag-templates
Last synced: 4 days ago
JSON representation
Template engine build on top of javascript native technologies: template literals and tag functions.
- Host: GitHub
- URL: https://github.com/peternaydenov/tag-templates
- Owner: PeterNaydenov
- License: mit
- Created: 2021-04-01T12:20:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-05T13:32:44.000Z (10 days ago)
- Last Synced: 2024-11-10T18:54:20.342Z (5 days ago)
- Language: JavaScript
- Size: 81.1 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tag Templates (@peter.naydenov/tag-templates)
Template engine build on top of javascript native technologies: template literals and tag functions.
## Installation
Install the package:
```
npm i @peter.naydenov/tag-templates
```
Add module to the script:
```js
// with commonjs:
const tagTemplates = require ( '@peter.naydenov/tag-templates' );
// with es6:
import tagTemplates from '@peter.naydenov/tag-templates'
```
## Methods
Engine have just two methods: addTemplate and render. Both are receiving parameters as text strings. Look at "**How to use it**" section.
```js
{
addTemplate : 'Write a template'
render : 'Convert data+template into a rendered block'
}
```
## Configuration object
All configuration fields are optional.
```js
{
TG_PRX : '{{' // Change default placeholder's opening tag
, TG_SFX : '}}' // Change default placeholder's opening tag
, DV : ':' // Chnage default props divider
, debug : false // Set on 'true' to receive more warnings and error messages
}
```
## How to use it
```js
const tagTemplates = require ( '@peter.naydenov/tag-templates' );
// Create a render engine instance:
const engine = tagTemplates ()
// Set a template "hello".
engine.addTemplate`
hello
Hello {{name}}
{{msg}}
`
// Other technique when template is defined as external variable.
let nextTemplate = `
show
User {{name}} is {{age}} years old.
`
engine.addTemplate`${nextTemplate}`
// After version 1.2.0 "addTemplate" could work like:
let
title = '
{{title}}
'
, txt = '{{text}}
'
;
engine.addTemplate`
news
${title}
${txt}`
engine.render`
news
title : my own news channel
txt : Just started to write `
/**
* result:
* my own news channel
*
Just started to write
*
*/
// Render template 'hello' with data:
let block = engine.render`
hello
name : Peter
msg : Welcome to this page`
/**
* result:
* Hello Peter
*
Welcome to this page
*/
// Other way to provide the data for template "hello"
let
myMsg = 'Other message'
, myName = 'Kris'
;
block = engine.render`
hello
name : ${myName}
msg : ${myMsg}`
/**
* result:
* Hello Kris
*
Other message
*/
```
If templates for your project are already created and they are not in mustache style, then modify the template engine by providing a configuration object:
```js
let
config = {
TG_PRX : '<<' // Change of opening tag
, TG_SFX : '>>>' // Change of closing tag
, DV : '-->' // Data devider is also customizable
}
, vm = tagTemplates ( config )
;
// Provide template with your custom style
vm.addTemplate`
test
Your name is <>>`
// Render
let block = vm.render`
test
name --> Peter`
// Result --> 'Your name is Peter'
```
## Links
- [History of changes](https://github.com/PeterNaydenov/tag-templates/blob/master/CHANGELOG.md)
## Credits
'@peter.naydenov/tag-templates' was created by Peter Naydenov.
## License
'@peter.naydenov/tag-templates' is released under the MIT License.