chevett / vashify

Use Vash with Browserify and get your templates compiled during the transform

vashify

Use Vash with Browserify and get your templates compiled during the transform

npm install vashify

######your-file.js

var template = require('./your-template.vash');
var $ = require('jquery');

$('body').append(template({ name: 'Mike', traits: ['bro', 'tall']}));

######your-template.vash

<h1>@model.name</h1>
<ul>
  @model.traits.forEach(function(t){ 
    <li>You are @t</t>
  })
</div>

######do the transform

browserify -t vashify your-file.js > bundle.js

using helpers

######require vash-runtime to register helpers

var vash = require('vash-runtime');
var tmpl = require('./your-template.vash');

vash.helpers.fullName = function(model){
  return model.first + ' ' + model.last;
};

tmpl({first:'Barbra', last: 'Streisand';});

######calling the helpers

@html.fullName(model)... @html.fullName(model).

What is happening?

Module references like require('*.vash') files will be intercepted during the browserify transform. Once intercepted, the template is compiled and a new module that exports the complied template function is generated.

The vash runtime is automatically included one time, the first time a vash file is required.

This means templates that are required multiple times will only appear in the bundle once and the vash runtime is only included once... which is good for business.