Added functionality to create statically compiled templates.

Updated Templates library to use a wrapper function instead of
arguments.callee to reference the tmpl object.

Author: blueimp

README.md

@@ -12,10 +12,10 @@ Include the (minified) JavaScript Templates script in your HTML markup:
 <script src="tmpl.min.js"></script>
 ```
 
-Add a script section with type **"text/html"** and your template definition as content:
+Add a script section with type **"text/x-tmpl"**, a unique **id** property and your template definition as content:
 
 ```html
-<script type="text/html" id="tmpl-demo">
+<script type="text/x-tmpl" id="tmpl-demo">
 <h3>{%=o.title%}</h3>
 <p>Released under the
 <a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
@@ -104,7 +104,7 @@ require("http").createServer(function (req, res) {
         console.log("Loading " + filename);
         return fs.readFileSync(filename, "utf8");
     };
-    res.writeHead(200, {"Content-Type": "text/html"});
+    res.writeHead(200, {"Content-Type": "text/x-tmpl"});
     // Render the content:
     res.end(tmpl("template", data));
 }).listen(8080, "localhost");
@@ -143,14 +143,15 @@ document.getElementById("result").innerHTML = func(data);
 ```
 
 ### Templates cache
-Templates loaded by id are cached in the map **tmpl.cache**, which can be modified:
+Templates loaded by id are cached in the map **tmpl.cache**:
 
 ```js
-var func = tmpl("tmpl-demo");
-var cached = typeof tmpl.cache["tmpl-demo"] === "function"; // true
+var func = tmpl("tmpl-demo"), // Loads and parses the template
+    cached = typeof tmpl.cache["tmpl-demo"] === "function", // true
+    result = tmpl("tmpl-demo", data); // Uses cached template function
 
-tmpl.cache["tmpl-demo"] = tmpl("<h3>{%=o.title%}</h3>");
-var result = tmpl("tmpl-demo", {title: "JS"}); // Renders "<h3>JS</h3>"
+tmpl.cache["tmpl-demo"] = null;
+result = tmpl("tmpl-demo", data); // Loads and parses the template again
 ```
 
 ### Output encoding
@@ -174,11 +175,11 @@ var output = tmpl.encode("<>&\"'\x00"); // Renders "&lt;&gt;&amp;&quot;&#39;"
 The local variables available inside the templates are the following:
 
 * **o**: The data object given as parameter to the template function (see the next section on how to modify the parameter name).
+* **tmpl**: A reference to the **tmpl** function object.
 * **_s**: The string for the rendered result content.
-* **_t**: A reference to the **tmpl** function object.
 * **_e**: A reference to the **tmpl.encode** method.
-* **print**: Function to add content to the rendered result string.
-* **include**: Function to include the return value of a different template in the result.
+* **print**: Helper function to add content to the rendered result string.
+* **include**: Helper function to include the return value of a different template in the result.
 
 To introduce additional local helper variables, the string **tmpl.helper** can be extended. The following adds a convenience function for *console.log* and a streaming function, that streams the template rendering result back to the callback argument (note the comma at the beginning of each variable declaration):
 
@@ -190,7 +191,7 @@ tmpl.helper += ",log=function(){console.log.apply(console, arguments)}" +
 Those new helper functions could be used to stream the template contents to the console output:
 
 ```html
-<script type="text/html" id="tmpl-demo">
+<script type="text/x-tmpl" id="tmpl-demo">
 <h3>{%=o.title%}</h3>
 {% stream(log); %}
 <p>Released under the
@@ -305,5 +306,27 @@ For loop:
 </ul>
 ```
 
+## Compiled templates
+The JavaScript Templates project comes with a compilation script, that allows you to compile your templates into JavaScript code and combine them with a minimal Templates runtime into one minified JavaScript file.
+
+The compilation script is built for [node.js](http://nodejs.org/) and also requires [UglifyJS](https://github.com/mishoo/UglifyJS).  
+To use it, first install both the JavaScript Templates project and UglifyJS via [npm](http://npmjs.org/):
+
+```sh
+npm install uglify-js
+npm install blueimp-tmpl
+```
+
+This will put the executables **uglifyjs** and **tmpl.js** into the folder **node_modules/.bin**. It will also make them available on your PATH if you install the packages globally (by adding the **-g** flag to the install command).
+
+The **tmpl.js** executable accepts the paths to one or multiple template files as command line arguments and prints the generated JavaScript code to the console output. The following command line shows you how to store the generated code in a new JavaScript file that can be included in your project:
+
+```sh
+tmpl.js templates/upload.html templates/download.html > tmpl.min.js
+```
+
+The files given as command line arguments to **tmpl.js** can either be pure template files or HTML documents with embedded template script sections. For the pure template files, the file names (without extension) serve as template ids.  
+The generated file can be included in your project as a replacement for the original **tmpl.js** runtime. It provides you with the same API and provides a **tmpl(id, data)** function that accepts the id of one of your templates as first and a data object as optional second parameter.
+
 ## License
 The JavaScript Templates script is released under the [MIT license](http://www.opensource.org/licenses/MIT).

compile.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+/*
+ * JavaScript Templates Compiler 2.0
+ * https://github.com/blueimp/JavaScript-Templates
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint nomen: true */
+/*global require, __dirname, process, console */
+
+(function () {
+    "use strict";
+    var tmpl = require("./tmpl.js").tmpl,
+        fs = require("fs"),
+        jsp = require("uglify-js").parser,
+        pro = require("uglify-js").uglify,
+        // Retrieve the content of the minimal runtime:
+        runtime = fs.readFileSync(__dirname + "/runtime.js", "utf8"),
+        // A regular expression to parse templates from script tags in a HTML page:
+        regexp = /<script( id="([\w\-]+)")? type="text\/x-tmpl"( id="([\w\-]+)")?>([\s\S]+?)<\/script>/gi,
+        // A regular expression to match the helper function names:
+        helperRegexp = new RegExp(
+            tmpl.helper.match(/\w+(?=\s*=\s*function\s*\()/g).join("\\s*\\(|") + "\\s*\\("
+        ),
+        // A list to store the function bodies:
+        list = [],
+        code,
+        ast;
+    // Extend the Templating engine with a print method for the generated functions:
+    tmpl.print = function (str) {
+        var helper = helperRegexp.test(str) ? tmpl.helper : "";
+        return "function(" + tmpl.arg + ",tmpl){" +
+            ("var _s='',_e=tmpl.encode" + helper + ";_s+='" +
+            str.replace(tmpl.regexp, tmpl.func) +
+            "';return _s;").split("_s+='';").join("") +
+            "}";
+    };
+    // Loop through the command line arguments:
+    process.argv.forEach(function (file, index) {
+        var listLength = list.length,
+            content,
+            result,
+            id;
+        // Skipt the first two arguments, which are "node" and the script:
+        if (index > 1) {
+            content = fs.readFileSync(file, "utf8");
+            while (true) {
+                // Find templates in script tags:
+                result = regexp.exec(content);
+                if (!result) {
+                    break;
+                }
+                id = result[2] || result[4];
+                list.push("'" + id + "':" + tmpl.print(result[5]));
+            }
+            if (listLength === list.length) {
+                // No template script tags found, use the complete content:
+                list.push("'" + id + "':" + tmpl.print(content));
+            }
+        }
+    });
+    // Combine the generated functions as cache of the minimal runtime:
+    code = runtime.replace("{}", "{" + list.join(",") + "}");
+    // Parse the code and get the initial AST (Abstract Syntac Tree):
+    ast = jsp.parse(code);
+    // Get a new AST with mangled names:
+    ast = pro.ast_mangle(ast);
+    // Get an AST with compression optimizations:
+    ast = pro.ast_squeeze(ast);
+    // Generate the code and print it to the console output:
+    console.log(pro.gen_code(ast));
+}());

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * JavaScript Templates Demo 1.0.3
+ * JavaScript Templates Demo 2.0
  * https://github.com/blueimp/JavaScript-Templates
  *
  * Copyright 2011, Sebastian Tschan

package.json

@@ -1,6 +1,6 @@
 {
     "name": "blueimp-tmpl",
-    "version": "1.0.2",
+    "version": "2.0.0",
     "title": "JavaScript Templates",
     "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.",
     "keywords": [
@@ -32,11 +32,15 @@
     ],
     "devDependencies": {
         "mocha": "latest",
-        "expect.js": "latest"
+        "expect.js": "latest",
+        "uglify-js": "latest"
     },
     "scripts": {
         "test": "mocha --reporter spec"
     },
+    "bin": {
+        "tmpl.js": "./compile.js"
+    },
     "files": [
         "tmpl.js"
     ],

runtime.js

@@ -0,0 +1,46 @@
+/*
+ * JavaScript Templates Runtime 2.0
+ * https://github.com/blueimp/JavaScript-Templates
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint sloppy: true */
+/*global define */
+
+(function ($) {
+    var tmpl = function (id, data) {
+        var f = tmpl.cache[id];
+        return data ? f(data, tmpl) : function (data) {
+            return f(data, tmpl);
+        };
+    };
+    tmpl.cache = {};
+    tmpl.encReg = /[<>&"\x00]/g;
+    tmpl.encMap = {
+        "<": "&lt;",
+        ">": "&gt;",
+        "&": "&amp;",
+        "\"": "&quot;",
+        "\x00": ""
+    };
+    tmpl.encode = function (s) {
+        return String(s || "").replace(
+            tmpl.encReg,
+            function (c) {
+                return tmpl.encMap[c];
+            }
+        );
+    };
+    if (typeof define === "function" && define.amd) {
+        define(function () {
+            return tmpl;
+        });
+    } else {
+        $.tmpl = tmpl;
+    }
+}(this));

test/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * JavaScript Templates Test 1.0.1
+ * JavaScript Templates Test 2.0
  * https://github.com/blueimp/JavaScript-Templates
  *
  * Copyright 2011, Sebastian Tschan

test/test.js

@@ -1,5 +1,5 @@
 /*
- * JavaScript Templates Test 1.0.2
+ * JavaScript Templates Test 2.0
  * https://github.com/blueimp/JavaScript-Templates
  *
  * Copyright 2011, Sebastian Tschan
@@ -72,9 +72,8 @@
         it('Cache templates loaded by id', function () {
             tmpl('template');
             expect(
-                tmpl.cache.template(data),
-                'value'
-            );
+                tmpl.cache.template
+            ).to.be.a('function');
         });
 
     });

tmpl.js

@@ -1,5 +1,5 @@
 /*
- * JavaScript Templates 1.0.2
+ * JavaScript Templates 2.0
  * https://github.com/blueimp/JavaScript-Templates
  *
  * Copyright 2011, Sebastian Tschan
@@ -21,13 +21,14 @@
         var f = !/[^\-\w]/.test(str) ? tmpl.cache[str] = tmpl.cache[str] ||
                 tmpl(tmpl.load(str)) :
                     new Function(
-                        tmpl.arg,
-                        ("var _s=''" + tmpl.helper + ";_s+='" +
+                        tmpl.arg + ',tmpl',
+                        ("var _s='',_e=tmpl.encode" + tmpl.helper + ";_s+='" +
                             str.replace(tmpl.regexp, tmpl.func) +
                             "';return _s;").split("_s+='';").join("")
                     );
-        f.tmpl = f.tmpl || tmpl;
-        return data ? f(data) : f;
+        return data ? f(data, tmpl) : function (data) {
+            return f(data, tmpl);
+        };
     };
     tmpl.cache = {};
     tmpl.load = function (id) {
@@ -71,9 +72,8 @@
         );
     };
     tmpl.arg = "o";
-    tmpl.helper = ",_t=arguments.callee.tmpl,_e=_t.encode" +
-        ",print=function(s,e){_s+=e&&(s||'')||_e(s);}" +
-        ",include=function(s,d){_s+=_t(s,d);}";
+    tmpl.helper = ",print=function(s,e){_s+=e&&(s||'')||_e(s);}" +
+        ",include=function(s,d){_s+=tmpl(s,d);}";
     if (typeof define === "function" && define.amd) {
         define(function () {
             return tmpl;