Skip to content

Commit fb2f6b5

Browse files
blueimpblueimp
committed
Refactored demo implementation.
Added bower.json. Updated Makefile and compile.js for UglifyJS2.
1 parent 6ad43cf commit fb2f6b5

File tree

12 files changed

+223
-116
lines changed

12 files changed

+223
-116
lines changed

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.PHONY: js
22

33
js:
4-
node_modules/.bin/uglifyjs tmpl.js -c -m -o tmpl.min.js
4+
node_modules/.bin/uglifyjs js/tmpl.js -c -m -o js/tmpl.min.js

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@
33
## Demo
44
[JavaScript Templates Demo](http://blueimp.github.io/JavaScript-Templates/)
55

6+
## Description
7+
< 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.
8+
69
## Usage
710

811
### Client-side
912
Include the (minified) JavaScript Templates script in your HTML markup:
1013

1114
```html
12-
<script src="tmpl.min.js"></script>
15+
<script src="js/tmpl.min.js"></script>
1316
```
1417

1518
Add a script section with type **"text/x-tmpl"**, a unique **id** property and your template definition as content:

‎bower.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "blueimp-tmpl",
3+
"version": "2.2.1",
4+
"title": "JavaScript Templates",
5+
"description": "< 1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.",
6+
"keywords": [
7+
"javascript",
8+
"templates",
9+
"templating"
10+
],
11+
"homepage": "https://github.com/blueimp/JavaScript-Templates",
12+
"author": {
13+
"name": "Sebastian Tschan",
14+
"url": "https://blueimp.net"
15+
},
16+
"maintainers": [
17+
{
18+
"name": "Sebastian Tschan",
19+
"url": "https://blueimp.net"
20+
}
21+
],
22+
"repository": {
23+
"type": "git",
24+
"url": "git://github.com/blueimp/JavaScript-Templates.git"
25+
},
26+
"bugs": "https://github.com/blueimp/JavaScript-Templates/issues",
27+
"licenses": [
28+
{
29+
"type": "MIT",
30+
"url": "http://www.opensource.org/licenses/MIT"
31+
}
32+
],
33+
"devDependencies": {
34+
"mocha": "1.11.0",
35+
"expect.js": "0.2.0",
36+
"uglify-js": "2.3.6"
37+
},
38+
"scripts": {
39+
"test": "mocha --reporter spec"
40+
},
41+
"bin": {
42+
"tmpl.js": "js/compile.js"
43+
},
44+
"main": "js/tmpl.js"
45+
}

‎css/demo.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*
2+
* JavaScript Templates Demo CSS 2.2.1
3+
* https://github.com/blueimp/JavaScript-Templates
4+
*
5+
* Copyright 2013, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* http://www.opensource.org/licenses/MIT
10+
*/
11+
12+
body {
13+
max-width: 750px;
14+
margin: 0 auto;
15+
padding: 1em;
16+
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
17+
font-size: 1em;
18+
line-height: 1.4em;
19+
background: #222;
20+
color: #fff;
21+
-webkit-text-size-adjust: 100%;
22+
-ms-text-size-adjust: 100%;
23+
}
24+
a {
25+
color: orange;
26+
text-decoration: none;
27+
}
28+
img {
29+
border: 0;
30+
vertical-align: middle;
31+
}
32+
h1 {
33+
line-height: 1em;
34+
}
35+
textarea,
36+
input {
37+
display: inline-block;
38+
width: 100%;
39+
-webkit-box-sizing: border-box;
40+
-moz-box-sizing: border-box;
41+
box-sizing: border-box;
42+
padding: 10px;
43+
margin: 0 0 10px;
44+
font-family: "Lucida Console", Monaco, monospace;
45+
}
46+
.result {
47+
padding: 20px 40px;
48+
background: #fff;
49+
color: #222;
50+
}
51+
52+
@media (min-width: 481px) {
53+
.navigation {
54+
list-style: none;
55+
padding: 0;
56+
}
57+
.navigation li {
58+
display: inline-block;
59+
}
60+
.navigation li:not(:first-child):before {
61+
content: '| ';
62+
}
63+
}
64+
65+
/* IE7 fixes */
66+
*+html textarea,
67+
*+html input {
68+
width: 460px;
69+
}
70+
*+html .result {
71+
width: 400px;
72+
}

‎index.html‎

Lines changed: 28 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* JavaScript Templates Demo 2.2.0
4+
* JavaScript Templates Demo 2.2.1
55
* https://github.com/blueimp/JavaScript-Templates
66
*
77
* Copyright 2011, Sebastian Tschan
@@ -20,65 +20,32 @@
2020
<title>JavaScript Templates Demo</title>
2121
<meta name="description" content="&lt; 1KB lightweight, fast &amp; powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.">
2222
<meta name="viewport" content="width=device-width, initial-scale=1.0">
23-
<link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap.min.css">
24-
<style>body{padding-top:60px;}</style>
25-
<link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-responsive.min.css">
26-
<!--[if lt IE 7]>
27-
<link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap-ie6.min.css">
28-
<![endif]-->
23+
<link rel="stylesheet" href="css/demo.css">
2924
</head>
3025
<body>
31-
<div class="navbar navbar-fixed-top">
32-
<div class="navbar-inner">
33-
<div class="container">
34-
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
35-
<span class="icon-bar"></span>
36-
<span class="icon-bar"></span>
37-
<span class="icon-bar"></span>
38-
</a>
39-
<a class="brand" href="https://github.com/blueimp/JavaScript-Templates">JavaScript Templates</a>
40-
<div class="nav-collapse">
41-
<ul class="nav">
42-
<li class="active"><a href="http://blueimp.github.io/JavaScript-Templates/">Demo</a></li>
43-
<li><a href="https://github.com/blueimp/JavaScript-Templates/tags">Downloads</a></li>
44-
<li><a href="https://github.com/blueimp/JavaScript-Templates">Source Code</a></li>
45-
<li><a href="https://github.com/blueimp/JavaScript-Templates">Documentation</a></li>
46-
<li><a href="https://github.com/blueimp/JavaScript-Templates/issues">Issues</a></li>
47-
<li><a href="test/">Test</a></li>
48-
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
49-
</ul>
50-
</div>
51-
</div>
52-
</div>
53-
</div>
54-
<div class="container">
55-
<div class="page-header">
56-
<h1>JavaScript Templates Demo</h1>
57-
</div>
58-
<blockquote>
59-
<p><strong>&lt; 1KB</strong> lightweight, fast &amp; powerful <a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a> templating engine with zero dependencies.<br>
60-
Compatible with server-side environments like <a href="http://nodejs.org/">node.js</a>, module loaders like <a href="http://requirejs.org/">RequireJS</a> and all web browsers.</p>
61-
</blockquote>
26+
<h1>JavaScript Templates Demo</h1>
27+
<p><strong>&lt; 1KB</strong> lightweight, fast &amp; powerful <a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a> templating engine with zero dependencies.<br>
28+
Compatible with server-side environments like <a href="http://nodejs.org/">node.js</a>, module loaders like <a href="http://requirejs.org/">RequireJS</a> and all web browsers.</p>
29+
<ul class="navigation">
30+
<li><a href="https://github.com/blueimp/JavaScript-Templates/tags">Download</a></li>
31+
<li><a href="https://github.com/blueimp/JavaScript-Templates">Source Code</a></li>
32+
<li><a href="https://github.com/blueimp/JavaScript-Templates/blob/master/README.md">Documentation</a></li>
33+
<li><a href="test/">Test</a></li>
34+
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
35+
</ul>
36+
<form>
37+
<h2>Template</h2>
38+
<textarea rows="12" id="template"></textarea>
39+
<br>
40+
<h2>Data (JSON)</h2>
41+
<textarea rows="14" id="data"></textarea>
6242
<br>
63-
<div class="row">
64-
<div class="span4">
65-
<h2>Template</h2>
66-
<textarea class="span4" rows="15" id="template"></textarea>
67-
</div>
68-
<div class="span4">
69-
<h2>Data (JSON)</h2>
70-
<textarea class="span4" rows="15" id="data"></textarea>
71-
</div>
72-
<div class="span4">
73-
<h2>Result</h2>
74-
<div class="well" id="result"></div>
75-
<p>
76-
<button class="btn btn-primary" id="render">Render</button>
77-
<button class="btn" type="reset" id="reset">Reset</button>
78-
</p>
79-
</div>
80-
</div>
81-
</div>
43+
<button type="submit" id="render">Render</button>
44+
<button type="reset" id="reset">Reset</button>
45+
<h2>Result</h2>
46+
<div id="result" class="result"></div>
47+
<br>
48+
</form>
8249
<script type="text/x-tmpl" id="tmpl-demo">
8350
<h3>{%=o.title%}</h3>
8451
<p>Released under the
@@ -105,43 +72,11 @@ <h4>Features</h4>
10572
}
10673
</script>
10774
<script type="text/x-tmpl" id="tmpl-error">
108-
<span class="label important">Error</span>
10975
<code>{%=o%}</code>
11076
</script>
111-
<script src="tmpl.min.js"></script>
112-
<!-- jQuery and Bootstrap JS are not required, but included for the demo -->
113-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
114-
<script src="http://blueimp.github.io/cdn/js/bootstrap.min.js"></script>
115-
<script>
116-
/*global window, jQuery, tmpl */
117-
(function ($) {
118-
'use strict';
119-
var render = function () {
120-
var result;
121-
try {
122-
result = tmpl(
123-
$('#template').val(),
124-
$.parseJSON($('#data').val())
125-
);
126-
} catch (e) {
127-
result = tmpl('tmpl-error', e);
128-
}
129-
$('#result').html(result);
130-
},
131-
init = function () {
132-
$('#template').val($.trim($('#tmpl-demo').html()));
133-
$('#data').val($.trim($('#tmpl-data').html()));
134-
$('#result').empty();
135-
};
136-
$(window).on('error', function (e) {
137-
$('#result').html(
138-
tmpl('tmpl-error', e.originalEvent.message)
139-
);
140-
});
141-
init();
142-
$('#render').on('click', render);
143-
$('#reset').on('click', init);
144-
}(jQuery));
145-
</script>
77+
<script src="js/tmpl.js"></script>
78+
<!-- jQuery is not required by JavaScript Templates, but included for the demo -->
79+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
80+
<script src="js/demo.js"></script>
14681
</body>
14782
</html>

compile.js renamed to js/compile.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#!/usr/bin/env node
22
/*
3-
* JavaScript Templates Compiler 2.1.0
3+
* JavaScript Templates Compiler 2.2.0
44
* https://github.com/blueimp/JavaScript-Templates
55
*
66
* Copyright 2011, Sebastian Tschan
@@ -10,16 +10,15 @@
1010
* http://www.opensource.org/licenses/MIT
1111
*/
1212

13-
/*jslint nomen: true */
13+
/*jslint nomen: true, stupid: true */
1414
/*global require, __dirname, process, console */
1515

1616
(function () {
1717
"use strict";
1818
var tmpl = require("./tmpl.js").tmpl,
1919
fs = require("fs"),
2020
path = require("path"),
21-
jsp = require("uglify-js").parser,
22-
pro = require("uglify-js").uglify,
21+
uglifyJS = require("uglify-js"),
2322
// Retrieve the content of the minimal runtime:
2423
runtime = fs.readFileSync(__dirname + "/runtime.js", "utf8"),
2524
// A regular expression to parse templates from script tags in a HTML page:
@@ -30,8 +29,7 @@
3029
),
3130
// A list to store the function bodies:
3231
list = [],
33-
code,
34-
ast;
32+
code;
3533
// Extend the Templating engine with a print method for the generated functions:
3634
tmpl.print = function (str) {
3735
// Only add helper functions if they are used inside of the template:
@@ -47,11 +45,17 @@
4745
// Loop through the command line arguments:
4846
process.argv.forEach(function (file, index) {
4947
var listLength = list.length,
48+
stats,
5049
content,
5150
result,
5251
id;
5352
// Skipt the first two arguments, which are "node" and the script:
5453
if (index > 1) {
54+
stats = fs.statSync(file);
55+
if (!stats.isFile()) {
56+
console.error(file + ' is not a file.');
57+
return;
58+
}
5559
content = fs.readFileSync(file, "utf8");
5660
while (true) {
5761
// Find templates in script tags:
@@ -69,14 +73,12 @@
6973
}
7074
}
7175
});
76+
if (!list.length) {
77+
console.error('Missing input file.');
78+
return;
79+
}
7280
// Combine the generated functions as cache of the minimal runtime:
7381
code = runtime.replace("{}", "{" + list.join(",") + "}");
74-
// Parse the code and get the initial AST (Abstract Syntac Tree):
75-
ast = jsp.parse(code);
76-
// Get a new AST with mangled names:
77-
ast = pro.ast_mangle(ast);
78-
// Get an AST with compression optimizations:
79-
ast = pro.ast_squeeze(ast);
80-
// Generate the code and print it to the console output:
81-
console.log(pro.gen_code(ast));
82+
// Generate the minified code and print it to the console output:
83+
console.log(uglifyJS.minify(code, {fromString: true}).code);
8284
}());

0 commit comments

Comments
 (0)