templit

v1.0.4

Published

4 years ago

skinny server-side rendering engine powered by template literal strings

Downloads

0High
0Medium
0Low

josephquested

templit serverside rendering template literal

TEMPLIT

a modern server-side rendering engine powered by template literal strings and express.js

The NPM community features some very powerful tempting engines. Unfortunately, most of them were created prior to the release of ECMAScript 6, and are not utilizing the best that JavaScript now has to offer.

Templit provides the same functionality as the templating modules you know and love, without any of the library specific syntax you know and hate.

All templit documents are .js files, and require no library specific syntax.

------- SETUP -------

quick setup using the templit generator

If you're starting a new Templit project from scratch, consider using the templit generator. It scaffolds out the basic structure of an express/templit app for you.

-----------------------

manual setup

It's also easy to set up a templit project yourself, these commands will get you started:

mkdir templit-app
cd templit-app
npm init
npm install express templit --save
touch app.js

inside app.js:

// app.js //

var app = require('express')()
var templit = require('templit')

app.engine('js', templit)
app.set('view engine', 'js')

// important: the path to your 'views' directory
app.set('views', `${__dirname}/views`)

app.get('/', (req, res) => {
  res.render('home', { title: 'templit app' })
})

app.listen(3000, () => {
  console.log('templit app rendering on port 3000')
})

Templit (like most rendering engines) requires a fairly specific file tree -- pictured below. The following commands will build out that tree for you. They should be executed from the top level directory of your project:

mkdir views
mkdir views/templits
touch views/home.js
touch views/templits/default.js

File Tree

.
├─ app.js
|
├─ package.json
|
├── views
|   |
|   ├─ home.js
|   |
|   templits
|      |
|      ├── default.js
|

note: your templits directory must contain a default.js file.

views and templits

There are two different kinds of files we're dealing with here: Templits and Views. templits, found in the views/templits directory, are the HTML shells into which views are rendered. In other templating frameworks these are commonly called "layouts".

inside views/templits/default.js:

// views/templits/default.js

module.exports = (body) => {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>templit app</title>
      </head>
      <body>
        ${body}
      </body>
    </html>
  `
}

This HTML will be the default templit for your app. The view that you wish to render (ie: views/home.js) will be passed as the (body) argument to this function, and then rendered inside the <body>${body}</body> element.

inside views/home.js:

// views/home.js

function render (data) {
  return `
    <h1>${data.title}</h1>
  `
}

module.exports = render

Woohoo!

Your templit app is now ready to go. Run node app.js and visit localhost:3000 in your browser.

------- user guide -------

understanding res.render()

app.get('/', (req, res) => {
  res.render('home', { tite: 'templit app' })
})

res.render('view', [data]) is an express function that takes two arguments.

A string that represents the view to be loaded, IE: 'home'. This string points to a file that lives in the views folder, IE: /views/home.js.
An optional object that passes data along to the view being rendered, IE: {title: "templit app"}

passing non-default templits

What if I don't want to use the default templit? Never fear. Custom templits are stored in the views/templits directory, IE: views/templits/login.js.

You specify their use in the res.render() function, by passing a special templit: 'string' key-value pair into the optional second argument. IE:

app.get('/login', (req, res) => {
  res.render('login', { templit: 'login' })
})

------- acknowledgments -------

templit was inspired by an aversion to {{{this}}} and h('p', 'this')

License

ISC

xoxo joseph quested