Browse files

initial commit

  • Loading branch information...
0 parents commit 80f9b1920c9200f73040105b1acdd0216f170244 @jgallen23 committed Mar 6, 2012
Showing with 237 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +18 −0 Makefile
  3. +5 −0 README.md
  4. +36 −0 bin/clientjade
  5. +52 −0 docs/index.md
  6. +13 −0 docs/usage
  7. +17 −0 example/index.html
  8. +1 −0 example/jade.js
  9. +1 −0 example/test1.jade
  10. +4 −0 example/test2.jade
  11. +1 −0 index.js
  12. +5 −0 lib/browser/render.js
  13. +60 −0 lib/compile.js
  14. +22 −0 package.json
2 .gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules
18 Makefile
@@ -0,0 +1,18 @@
+#SRC =
+TEST = test/*.js
+REPORTER = list
+
+
+site : docs/index.md
+ @./node_modules/.bin/markx --lang javascript docs/index.md | cat site/layout/head.html - site/layout/foot.html > site/index.html
+
+preview-docs:
+ @./node_modules/.bin/markx --lang javascript --preview 8001 docs/index.md
+
+preview-readme:
+ @./node_modules/.bin/markx --preview 8001 README.md
+
+test:
+ ./node_modules/.bin/mocha -R list
+
+.PHONY: test preview-docs preview-readme
5 README.md
@@ -0,0 +1,5 @@
+# ClientJade
+
+clientjade is a command line tool to compile your jade templates into client side templates for use in the browser.
+
+For more information, check out the [documentation](http://projects.jga.me/clientjade/).
36 bin/clientjade
@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+
+var program = require('commander');
+var compile = require('../lib/compile');
+
+
+program
+ .version('0.0.1')
+ .option('-c, --compress', 'Compress output')
+ .usage('<options> <jade files>');
+
+program.on('--help', function() {
+ console.log(' Examples:');
+ console.log('');
+ console.log(' # compile jade files into js');
+ console.log(' $ clientjade test1.jade test2.jade > jade.js');
+});
+
+program.parse(process.argv);
+
+
+if (program.args.length != 0) {
+ var opts = {
+ files: program.args,
+ compress: program.compress
+ }
+ compile(opts, function(err, result) {
+ process.stdout.write(result);
+ });
+
+} else {
+ process.stdout.write(program.helpInformation());
+ program.emit('--help');
+ process.exit(1);
+}
52 docs/index.md
@@ -0,0 +1,52 @@
+# ClientJade
+
+clientjade is a command line tool to compile your jade templates into client side templates for use in the browser.
+
+##Installation
+
+ npm install -g clientjade
+
+##Usage
+
+ `bash
+ Usage: clientjade <options> <jade files>
+
+ Options:
+
+ -h, --help output usage information
+ -V, --version output the version number
+ -c, --compress Compress output
+
+ Examples:
+
+ # compile jade files into js
+ $ clientjade test1.jade test2.jade > jade.js
+
+##Example
+
+test1.jade
+
+ p Hello, my name is #{name}
+
+test2.jade
+
+ ul
+ each item in items
+ li= item
+
+include the output js file in your html and then all you need to do is call this:
+
+ //jade.render(domNode, templateName, data);
+
+ jade.render(document.getElementById('test1'), 'test1', { name: 'Bob' });
+
+ jade.render(document.getElementById('test2'), 'test2', { items: ['item1', 'item2', 'item3'] });
+
+##History
+
+###0.0.1 (03/06/2012)
+- initial commit
+
+
+##Contributors
+- Greg Allen ([@jgaui](http://twitter.com/jgaui)) [jga.me](http://jga.me)
13 docs/usage
@@ -0,0 +1,13 @@
+
+ Usage: clientjade <options> <jade files>
+
+ Options:
+
+ -h, --help output usage information
+ -V, --version output the version number
+ -c, --compress Compress output
+
+ Examples:
+
+ # compile jade files into js
+ $ clientjade test1.jade test2.jade > jade.js
17 example/index.html
@@ -0,0 +1,17 @@
+<html>
+ <head>
+ <title></title>
+ </head>
+ <body>
+ <div id="test1"></div>
+ <div id="test2"></div>
+ <script src="jade.js"></script>
+ <script>
+
+ jade.render(document.getElementById('test1'), 'test1', { name: 'Bob' });
+ jade.render(document.getElementById('test2'), 'test2', { items: ['item1', 'item2', 'item3'] });
+
+
+ </script>
+ </body>
+</html>
1 example/jade.js
@@ -0,0 +1 @@
+var jade=function(a){return Array.isArray||(Array.isArray=function(a){return"[object Array]"==Object.prototype.toString.call(a)}),Object.keys||(Object.keys=function(a){var b=[];for(var c in a)a.hasOwnProperty(c)&&b.push(c);return b}),a.attrs=function(c){var d=[],e=c.terse;delete c.terse;var f=Object.keys(c),g=f.length;if(g){d.push("");for(var h=0;h<g;++h){var i=f[h],j=c[i];"boolean"==typeof j||null==j?j&&(e?d.push(i):d.push(i+'="'+i+'"')):"class"==i&&Array.isArray(j)?d.push(i+'="'+a.escape(j.join(" "))+'"'):d.push(i+'="'+a.escape(j)+'"')}}return d.join(" ")},a.escape=function(b){return String(b).replace(/&(?!\w+;)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")},a.rethrow=function(b,c,d){if(!c)throw b;var e=3,f=require("fs").readFileSync(c,"utf8"),g=f.split("\n"),h=Math.max(d-e,0),i=Math.min(g.length,d+e),e=g.slice(h,i).map(function(a,b){var c=b+h+1;return(c==d?" > ":" ")+c+"| "+a}).join("\n");throw b.path=c,b.message=(c||"Jade")+":"+d+"\n"+e+"\n\n"+b.message,b},a}({});jade.templates={},jade.render=function(a,b,c){var d=jade.templates[b](c);a.innerHTML=d},jade.templates.test1=function(locals,attrs,escape,rethrow){var attrs=jade.attrs,escape=jade.escape,rethrow=jade.rethrow,buf=[];with(locals||{}){var interp;buf.push("<p>Hello, my name is "+escape((interp=name)==null?"":interp)+"</p>")}return buf.join("")},jade.templates.test2=function(locals,attrs,escape,rethrow){var attrs=jade.attrs,escape=jade.escape,rethrow=jade.rethrow,buf=[];with(locals||{}){var interp;buf.push("<ul>"),function(){if("number"==typeof items.length)for(var a=0,b=items.length;a<b;a++){var c=items[a];buf.push("<li>");var d=c;buf.push(escape(null==d?"":d)),buf.push("</li>")}else for(var a in items){var c=items[a];buf.push("<li>");var d=c;buf.push(escape(null==d?"":d)),buf.push("</li>")}}.call(this),buf.push("</ul>")}return buf.join("")}
1 example/test1.jade
@@ -0,0 +1 @@
+p Hello, my name is #{name}
4 example/test2.jade
@@ -0,0 +1,4 @@
+ul
+ each item in items
+ li= item
+
1 index.js
@@ -0,0 +1 @@
+module.exports = require('./lib/compile');
5 lib/browser/render.js
@@ -0,0 +1,5 @@
+jade.templates = {};
+jade.render = function(node, template, data) {
+ var tmp = jade.templates[template](data);
+ node.innerHTML = tmp;
+};
60 lib/compile.js
@@ -0,0 +1,60 @@
+var fs = require('fs');
+var jade = require('jade');
+var path = require('path');
+var res = require('resistance');
+var uglifyJs = require('uglify-js');
+
+var jadeCompile = function(file, str) {
+ var f = jade.compile(str, {
+ client: true,
+ compileDebug: false
+ });
+ var result = f.toString();
+ var basename = path.basename(file, '.jade');
+ result = result.replace(/function anonymous/, 'jade.templates.'+basename+' = function');
+ return result;
+};
+
+var compile = function(options, callback) {
+
+ var queue = res.queue(function(file, callback) {
+ fs.readFile(file, 'utf8', function(err, str) {
+ callback({ file: file, source: str });
+ });
+ });
+
+ var runtime = path.join(__dirname, '../node_modules/jade/runtime.js');
+ var render = path.join(__dirname, 'browser/render.js');
+ queue.push(runtime);
+ queue.push(render);
+
+ for (var i = 0, c = options.files.length; i < c; i++) {
+ var file = options.files[i];
+ queue.push(file);
+ }
+
+ queue.run(function(results) {
+ var concat = [];
+ for (var i = 0, c = results.length; i < c; i++) {
+ var result = results[i];
+ var source = result.source;
+ if (i > 1) //compile all files added after runtime and render
+ source = jadeCompile(result.file, result.source);
+ concat.push(source);
+ }
+ var out = concat.join('\n');
+
+ if (options.compress) {
+ var ast = uglifyJs.parser.parse(out);
+ ast = uglifyJs.uglify.ast_mangle(ast);
+ ast = uglifyJs.uglify.ast_squeeze(ast);
+ out = uglifyJs.uglify.gen_code(ast);
+ }
+
+ callback(false, out);
+ });
+
+};
+
+
+module.exports = compile;
22 package.json
@@ -0,0 +1,22 @@
+{
+ "name": "clientjade",
+ "description": "a command line utility to generate compiled jade templates for the browser",
+ "version": "0.0.1",
+ "preferGlobal": "true",
+ "homepage": "https://github.com/jgallen23/clientjade",
+ "author": "Greg Allen <@jgaui> (http://jga.me)",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/jgallen23/clientjade.git"
+ },
+ "dependencies": {
+ "commander": "*",
+ "jade": "*",
+ "resistance": "*",
+ "uglify-js": "*"
+ },
+ "devDependencies": {
+ "markx": "*"
+ },
+ "keywords": ["jade", "template", "browser", "compile"]
+}

0 comments on commit 80f9b19

Please sign in to comment.