Incr

Clientside Jade-style templates for google closure library with implemented incremental dom.

How it works

From:

:provide
  app.Logo

:require
  app.string

.logo
  img.logo-img(src='./logo.svg', key="lol")
  = app.string.uppercase('Logo')

To:

// AUTOGENERATED FILE. DO NOT CHANGE!
goog.provide("app.Logo");

goog.require("npf.dom.incremental");
goog.require("goog.string");
goog.require("app.string");


/** @param {Object} d */
app.Logo = function(d) {
  npf.dom.incremental.elementOpen("div", "", ["class", 'logo']);
    npf.dom.incremental.elementVoid("img", "lol", ["class", 'logo-img', "src", './logo.svg', "key", "lol"]);
    npf.dom.incremental.text(goog.string.htmlEscape(app.string.uppercase('Logo')));
  npf.dom.incremental.elementClose("div");
};

Gulp example

var gulp = require('gulp');
var rename = require('gulp-rename');
var incr = require('./lib');

gulp.task('default', function() {
  // template for incremental dom calls
  incr.compiler.setTemplate('incremental', 'npf.dom.incremental.%s(%s)');
  // template for html escape calls
  incr.compiler.setTemplate('escape', 'goog.string.htmlEscape(%s)');
  // global requires for all templates
  incr.compiler.setRequires([
    'npf.dom.incremental',
    'goog.string'
  ]);

  return gulp.src('examples/**/*.jade')
    .pipe(incr.vinylTransform())
    .pipe(rename({ extname: '.jade.js' }))
    .pipe(gulp.dest('build/'));
});

What never comes

• Doctypes (no reason to render doctype on client side)
• Mixins (no global scope for templates)
• Static expressions (all code "as is", without postprocessing)

TODO

• each
• tests