pup-tent

File caching and template rendering femto-framework using
mustache and some assumptions.

On GitHub

NPM

API docs

pup-tent is maintained by
Berkeley BOP
&
kltm

Overview

Pup Tent is a femto-framework for template (Mustache) and static
content delivery for Node.js and RingoJS (beta) web apps.

The idea is to quickly turn a pile of related JS, template, CSS, and
static files into a whole coherent enough to deliver with a proper
web app/routing framework, such as express.

There are two main aspects to Pup Tent. The first is searching for
and synchronously caching static content on the filesystem,
(including caching templates for later use), and then producing
those when given the filename key (all filenames must be unique in
Pup Tent). The second is aiding in using a couple of common template
patterns using Mustache, examples below.

Usage

$3

There are other examples in the tests/ directory, but a full
example (without using the cache) might look like this.

Lets say you have the following files:

- static/frame.tmpl
- static/content.tmpl
- static/bar.css
- static/foo.js
- static/App.js

The file content.tmpl looks like:

``
{{ content }}
`

And the file frame.tmpl looks like:

`html



{{#pup_tent_css_libraries}}

{{/pup_tent_css_libraries}}
{{#pup_tent_js_variables}}

{{/pup_tent_js_variables}}
{{#pup_tent_js_libraries}}

{{/pup_tent_js_libraries}}


{{ &pup_tent_content }}


`

The easiest way to deploy my App.js using this template and file
structure could be something like:

`javascript
var pup_tent = require('pup-tent')(['static']);
`

Set the common variables:

`javascript
pup_tent.set_common('js_vars', {'name': 'foo', 'value': 'bar'});
pup_tent.set_common('js_libs', 'foo.js');
pup_tent.set_common('css_libs', 'bar.css');
`

Set the variables for just this page:

`javascript
var targs = {content: 'bar', title: 'foo', 'pup_tent_js_libraries': ['App.js']};
`

`javascript
var output = pup_tent.render('content.tmpl', targs, 'frame.tmpl');
`

This would give output like:

`html









bar


`

You might notice that some of the files are not correctly "linking"
if you view your page in a web browser. On to the next section!

$3

So far, we've just used it for some simple templating, but what if we
want to use the integrated caching mechanism and use it in conjunction
with something like express?

A more full-bodied example, using express as an example, might be:

`javascript
var us = require('underscore');
var express = require('express');
var fs = require('fs');
var mustache = require('mustache')
var pup_tent = require('pup-tent')

var app = express();

//////
/// FOLLOW THE EXAMPLE ABOVE FOR REDACTED STUFF HERE ///
//////

// Pretty much the same as before.
app.get('/', function(req, res){
var targs = {
'title': 'Testing'
};
var output = pup_tent.render('content.tmpl', targs, 'frame.tmpl');
res.send(output);
});

// Cached static routes, using Pup Tent to easily deliver static docs.
var js_re = /\.js$/;
var css_re = /\.css$/;
var html_re = /\.html$/;
// Routes for all static cache items at top-level.
us.each(pup_tent.cached_list('flat'), function(thing){
var ctype = null;
if( js_re.test(thing) ){
ctype = 'text/javascript';
}else if( css_re.test(thing) ){
ctype = 'text/css';
}else if( html_re.test(thing) ){
ctype = 'text/html';
}

// This will skip cached templates.
if( ctype !== null ){
app.get('/' + thing, function(req, res) {
res.setHeader('Content-Type', ctype);
res.send(pup_tent.get(thing) );
});
}
});

var server = app.listen(3333, function() {
console.log('Starting at http://localhost:' +
server.address().port);
});
`

Since always caching can be a bit annoying when developing
JavaScript/CSS heavy websites, there is also a use_cache_p() function
that can be used to toggle whether Pup Tent returns to the filesystem
every time or uses the internal cache. For more information about
everything, see the API docs (linked at the end).

$3

The special stack variables are:

- css_libs: will map to pup_tent_css_libraries
- js_vars: will map to pup_tent_js_variables
- js_libs: will map to pup_tent_js_libraries

The special template variables are:

- pup_tent_css_libraries: list of CSS files to use
- pup_tent_js_libraries: list of JS files to use
- pup_tent_js_variables: list of name/value objects to convert to vaiables
- pup_tent_content: meant for use in _base_tmpl_name_ to embed one template in another

Tests

$3

Given the right environment, the tests can be easily run from the
command line using the gulpfile.js.

`bash
gulp test
`

$3

The RingoJS tests are not integrated with the Makefile (yet), but
can be run from the command line interface like:

`bash
ringo -m ./lib -m ./node_modules/underscore/ -m node_modules/mustache tests/full-tmpl.js.tests
``