Server-side JavaScript template compilation and packaging

javascript server-side template compiler packager
pip install jstc==0.1.7


JavaScript Template Compiler

The jstc Python package compiles and packages JavaScript templates for delivery to browsers for client-side evaluation.

Currently, only handlebars and mustache template formats are supported natively, however this is easily extended via jstc's plugin mechanism.



# install jstc
$ pip install jstc

Optionally, the handlebars pre-compiler can be installed to pre-compile JavaScript templates for faster client-side rendering:

# OPTIONAL: install handlebars pre-compiler
$ npm install handlebars
$ export PATH="`pwd`/node_modules/.bin:$PATH"


Given that the following files exist in the Python package myapp:

File static/templates/common/hello.hbs:

Hello, {{name}}!

File static/templates/common/inputs.hbs:

##! text

  <input type="text" name="{{name}}" value="{{value}}"/>

##! checkbox

  <input type="checkbox" name="{{name}}" value="1" {{#value}}checked="checked"{{/value}}/>

Then, the Python code (inline and precompile attributes used for output simplicity):

import jstc
  'myapp:static/templates/common/**.hbs', 'static/templates',
  inline=True, precompile=False)

Outputs the HTML (whitespace and newlines added for clarity):

<div id="Templates" style="display:none;height:0;opacity:0;visibility:hidden;width:0;">

  <script type="text/x-handlebars" data-name="common/hello">
    Hello, {{name}}!

  <script type="text/x-handlebars" data-name="common/inputs/text">
    <input type="text" name="{{name}}" value="{{value}}"/>

  <script type="text/x-handlebars" data-name="common/inputs/checkbox">
    <input type="checkbox" name="{{name}}" value="1" {{#if value}}checked="checked"{{/if}}/>


Some Assumptions

The jstc package makes the following assumptions that cannot be easily changed:

  • Template names use a / hierarchical delimiter, e.g. components/widgets/textform would be a typical template name.
  • Templates are named by their containing filenames with any extension removed, e.g. the template in "path/to/foo.hbs" will be named "path/to/foo".

Adding Template Formats

Let us assume that you want to add support for a new templating engine, with a mime-type of text/x-easytpl, file extension .et, without pre-compilation support, and all within the Python package myapp.

Create module myapp/easytpl.py:

import jstc
import asset

@asset.plugin('jstc.engines.plugins', 'text/x-easytpl')
class EasyTemplateEngine(jstc.engines.base.Engine):
  mimetype    = 'text/x-handlebars'
  extensions  = ('.et',)
  precompile  = jstc.PrecompilerUnavailable

And then in your myapp's setup.py, add the following parameter to your setup call:

  entry_points = {
    'jstc.engines.plugins' : [
      'text/x-easytpl = myapp.easytpl:EasyTemplateEngine'

Et voilà, soufflé!

If you also want to support pre-compilation (i.e. server-side template tokenization for faster client-side runtime evaluation), then take a look at the handlebars implementation.