leopard-template

leopard-template

A simple HTML template engine, currently a parser. Basically implements ejs syntax.

Examples

You can simply run the examples here with

$ npm run serve:examples

var Leopard = require('leopard-template')
var leo = new Leopard()
var tpl = '<p>I am <%= name %>!</p>'
var data = {
  name: 'Leopard'
}

var html = leo.compile(tpl, data) // '<p>I am Leopard!</p>'

Or you can just render a file:

var path = require('path')
var app = require('connect')()
var Leopard = require('leopard-template')
var leo = new Leopard()

app.use('/test', function(req, res) {
  leo.compileFile(
    path.resolve(__dirname, './test.tpl'),
    data,
    function(err, html) {
      req.write(html, 'utf-8')
      req.end()
    })
})

Usage

You can install leopard-template via npm

$ npm install leopard-template

Of course you can import leopard-template in whatever way you want

// ES6 import
import Leopard from 'leopard-template'

// CommonJS require
var Leopard = require('leopard-template')

// and then you can start render your templates
// var leo = new Leopard()

Or you can also load with html script tag

<script src="./node_modules/leopard-template/dist/leopard.browser.min.js"></script>

Note: compileFile is only available at server side, so we build two versions, if you want to use Leopard directly in browsers, use leopard.browser.js, otherwise you'll have to use leopard.server.js.

Syntax

Leopard simply implements ejs syntax.

Wrap statements like for or if in <% ... %>, expressions in <%= ... %>, and raw HTML in <%- ... %>

Plain Text

var data = {
  name: 'Leopard'
}
var text = '<p>I am <%= name %>!</p>'

HTML

var data = {
  name: '<em>Leopard</em>'
}
var text = '<p>I am <%- name %>!</p>'

Conditions

var data = {
  isOk: false,
  nickname: 'leo',
  realname: 'leopard'
}
var conditions_1 = '<p>I am Leopard<%= \', AKA \' + (isOk ? nickname : realname) + \'!\' %></p>'
var conditions_2 = '<% if (isOk) { %>' +
  '<span class=\"nickname\"><%= nickname %></span>' +
  '<% } else { %>' +
  '<span class=\"realname\"><%= realname %></span>' +
  '<% } %>'

Loops

var loops = 'Now I repeat: ' +
  '<ul>' +
  '<% for (var i = 0; i < 3; i++) { %>' +
  '<li>I am Leopard!</li>' +
  '<% } %>' +
  '</ul>'

Filters

Filters are now supported in Leopard, you can customize a filter with Leopard.filter:

var Leopard = require('leopard-template')
Leopard.filter('toUpperCase', function(string) {
  return string.toUpperCase()
})

var text = '<p><%= 'leopard' | toUpperCase %></p>' // <p>LEOPARD</p>

And also, filters can be chained:

// `reverse` is a preset filter
var text = '<p><%= 'leopard' | toUpperCase | reverse %></p>' // <p>DRAPOEL</p>

Test

$ npm run test