jay

The hottest frontend wrapper around. Inspired by browserify, jay gives you a browser-side require() for your javascript, css, & templates.

Jay allows you to componentize your frontend, breaking it up into a structure that makes the most sense to you. Jay was originally built for use with express, but may be extended to other http servers.

Installation

npm install jay

Example

kanye.js

 
/**
 * Module dependencies
 */
 
var $ = require('jquery');
 
/**
 * Require `Kanye` styling
 */
 
require('./kanye.css')
 
/**
 * Export `Kanye`
 */
 
var Kanye = module.exports = function() { ... };
 
/**
 * Add a (mustache) template
 */
 
Kanye.prototype.template = require('./kanye.mu');
 
/**
 * Render `Kanye` template
 */
 
Kanye.prototype.render = function(locals) {
  document.body.appendChild(this.template(locals));
};

jay.js

/**
 * Module dependencies
 */
 
var Kanye = require('./kanye');
 
/**
 * Export `Jay`
 */
 
var Jay = module.exports = function() { ... };
 
/**
 * Play the next song
 */
 
Jay.prototype.nextSong = function() {
  if(this.isTired()) {
    kanye = new Kanye();
    kanye.render({ sunglasses : 'Ray Ban', chains : true });
  }
}

How it works

Jay attaches to the view engine, so refreshing the view will rebuild the components. The reason for attaching to the view engine is that it's the very first point where we've actually resolved what view will be rendered. Jay assumes that your view has a corresponding javascript file with the same name, so if you're rendering ./index.html, jay will look for ./index.js, in that same directory.

Jay then walks through the dependencies of index.js, building them, then wrapping them up to serve to the frontend. From there, your static file server is responsible for serving the output files. In express, that's express.static(...).

When jay encounters a stylesheet, it gets removed from the javascript, but added to the build.css output.

When jay encounters a template, it will compile the template into a function and serve it with the rest of the javascript.

Using express

var express = require('express'),
    jay = require('jay'),
    cons = require('consolidate'),
    app = express();
 
/**
 * Jay Configuration
 */
 
jay.root(__dirname)
   .build(join(__dirname, 'build'))
   .include('hogan.js', '/vendor/hogan.js');
 
/**
 * Configuration
 */
 
app.configure(function() {
  app.set('view engine', 'html');
  app.use(express['static'](join(__dirname, 'build')));
});
 
app.configure('development', function() {
  // Jay wraps around the templating engine,
  // should only be wrapped during development
  app.engine('html', jay(cons.hogan));
});
 
app.configure('production', function() {
  app.engine('html', cons.hogan);
});
 
...
 
app.listen(8080);

API

root(dir)

Required. The root directory for jay. Absolute paths map to the root, for example /models/user.js maps to $ROOT/models/user.js

jay.root(__dirname);

main(file)

Required. The name of the initial file that jay will start building from. Defaults to the javascript file with the same name as the view in the same directory as the view. For example, if your view is ./index.mu, the default will be ./index.js.

Note: the file will be relative to the view path you are rendering

jay.main('boot.js')

jay.root(__dirname);

build(dir)

Where the build files are outputted. Defaults to $ROOT/build.

jay.build(path.join(__dirname, 'out'));

alias(to, from)

Alias an asset that has already been required by the view. Useful for creating shorter, perhaps more familiar routes.

Note: from is relative to jay's root, which may not be the same as the relative path from your server.

jay.alias('jquery', '/vendor/jquery.js')
   .alias('underscore', '/vendor/underscore.js')

include([alias], asset)

Includes an asset that is not currently being required by the view. Useful for adding client-side templating libraries (hogan.js, jade.js) without requiring them explicitly.

If alias is used, it will also create an alias to that included asset.

Note: asset is relative to jay's root, which may not be the same as the relative path from your server.

jay.include('hogan.js', '/vendor/hogan.js');

cache(dir)

Jay uses deputy for caching the require dependency tree. dir specifies where the cache is stored. Defaults to $HOME/.jay/cache.json.

jay.cache('.jay/app.json')

To turn off caching:

jay.cache(false);

jay(function(path, locals, fn))

Jay works with any supported express templating engine. You can even use your own templating language with jay as long as you follow the express engine function signature.

var supersizer = function(path, locals, fn) {
  var str = fs.readFileSync(path, 'utf8');
  str = str.replace(/h(\d)/g, function(m, p) {
    p = (p > 1) ? p : 2;
    return 'h' + --p;
  });
  return fn(null, str);
};
 
app.engine('html', jay(supersizer));

create()

Create a new instance of jay.

var jay = require('jay'),
    jay2 = jay.create();

Support

Currently supports:

• CSS
• stylus
• hogan
• coffeescript
• JSON

Tests

npm install .
make test

License

(The MIT License)

Copyright (c) 2012 Matt Mueller <mattmuelle@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.