')
+document.getElementById('result').innerHTML = func(data)
```
### Templates cache
+
Templates loaded by id are cached in the map **tmpl.cache**:
```js
-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
+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"] = null;
-result = tmpl("tmpl-demo", data); // Loads and parses the template again
+tmpl.cache['tmpl-demo'] = null
+result = tmpl('tmpl-demo', data) // Loads and parses the template again
```
### Output encoding
+
The method **tmpl.encode** is used to escape HTML special characters in the
template output:
```js
-var output = tmpl.encode("<>&\"'\x00"); // Renders "<>&"'"
+var output = tmpl.encode('<>&"\'\x00') // Renders "<>&"'"
```
**tmpl.encode** makes use of the regular expression **tmpl.encReg** and the
@@ -185,31 +211,33 @@ removed from the output. This allows for example to automatically trim input
values (removing whitespace from the start and end of the string):
```js
-tmpl.encReg = /(^\s+)|(\s+$)|[<>&"'\x00]/g;
-var output = tmpl.encode(" Banana! "); // Renders "Banana" (without whitespace)
+tmpl.encReg = /(^\s+)|(\s+$)|[<>&"'\x00]/g
+var output = tmpl.encode(' Banana! ') // Renders "Banana" (without whitespace)
```
### Local helper variables
+
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.
-* **_e**: A reference to the **tmpl.encode** method.
-* **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.
+- **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.
+- **\_e**: A reference to the **tmpl.encode** method.
+- **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
+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):
+callback argument (note the comma at the beginning of each variable
+declaration):
```js
-tmpl.helper += ",log=function(){console.log.apply(console, arguments)}" +
- ",st='',stream=function(cb){var l=st.length;st=_s;cb( _s.slice(l));}";
+tmpl.helper +=
+ ',log=function(){console.log.apply(console, arguments)}' +
+ ",st='',stream=function(cb){var l=st.length;st=_s;cb( _s.slice(l));}"
```
Those new helper functions could be used to stream the template contents to the
@@ -217,24 +245,25 @@ console output:
```html
```
### Template function argument
+
The generated template functions accept one argument, which is the data object
given to the **tmpl(id, data)** function. This argument is available inside the
template definitions as parameter **o** (the lowercase letter).
@@ -242,16 +271,17 @@ template definitions as parameter **o** (the lowercase letter).
The argument name can be modified by overriding **tmpl.arg**:
```js
-tmpl.arg = "p";
+tmpl.arg = 'p'
// Renders "
JavaScript Templates
":
-var result = tmpl("
{%=p.title%}
", {title: "JavaScript Templates"});
+var result = tmpl('
{%=p.title%}
', { title: 'JavaScript Templates' })
```
### Template parsing
+
The template contents are matched and replaced using the regular expression
-**tmpl.regexp** and the replacement function **tmpl.func**.
-The replacement function operates based on the
+**tmpl.regexp** and the replacement function **tmpl.func**. The replacement
+function operates based on the
[parenthesized submatch strings](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter).
To use different tags for the template syntax, override **tmpl.regexp** with a
@@ -259,31 +289,34 @@ modified regular expression, by exchanging all occurrences of "{%" and "%}",
e.g. with "[%" and "%]":
```js
-tmpl.regexp = /([\s'\\])(?!(?:[^[]|\[(?!%))*%\])|(?:\[%(=|#)([\s\S]+?)%\])|(\[%)|(%\])/g;
+tmpl.regexp = /([\s'\\])(?!(?:[^[]|\[(?!%))*%\])|(?:\[%(=|#)([\s\S]+?)%\])|(\[%)|(%\])/g
```
-By default, the plugin preserves whitespace
-(newlines, carriage returns, tabs and spaces).
-To strip unnecessary whitespace, you can override the **tmpl.func** function,
-e.g. with the following code:
+By default, the plugin preserves whitespace (newlines, carriage returns, tabs
+and spaces). To strip unnecessary whitespace, you can override the **tmpl.func**
+function, e.g. with the following code:
```js
-var originalFunc = tmpl.func;
+var originalFunc = tmpl.func
tmpl.func = function (s, p1, p2, p3, p4, p5, offset, str) {
- if (p1 && /\s/.test(p1)) {
- if (!offset || /\s/.test(str.charAt(offset - 1)) ||
- /^\s+$/g.test(str.slice(offset))) {
- return '';
- }
- return ' ';
+ if (p1 && /\s/.test(p1)) {
+ if (
+ !offset ||
+ /\s/.test(str.charAt(offset - 1)) ||
+ /^\s+$/g.test(str.slice(offset))
+ ) {
+ return ''
}
- return originalFunc.apply(tmpl, arguments);
-};
+ return ' '
+ }
+ return originalFunc.apply(tmpl, arguments)
+}
```
## Templates syntax
### Interpolation
+
Print variable with HTML special characters escaped:
```html
@@ -309,6 +342,7 @@ Use dot notation to print nested properties:
```
### Evaluation
+
Use **print(str)** to add escaped content to the output:
```html
@@ -325,7 +359,7 @@ Use **include(str, obj)** to include content from a different template:
```html
```
@@ -333,9 +367,9 @@ Use **include(str, obj)** to include content from a different template:
```html
{% if (o.author.url) { %}
- {%=o.author.name%}
+{%=o.author.name%}
{% } else { %}
- No author url.
+No author url.
{% } %}
```
@@ -350,13 +384,14 @@ Use **include(str, obj)** to include content from a different template:
```
## 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 combined JavaScript file.
-The compilation script is built for [node.js](http://nodejs.org/).
+The compilation script is built for [Node.js](https://nodejs.org/).
To use it, first install the JavaScript Templates project via
-[npm](https://www.npmjs.org/):
+[NPM](https://www.npmjs.org/):
```sh
npm install blueimp-tmpl
@@ -376,25 +411,26 @@ tmpl.js index.html > tmpl.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.
+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.
## Tests
+
The JavaScript Templates project comes with
[Unit Tests](https://en.wikipedia.org/wiki/Unit_testing).
There are two different ways to run the tests:
-* Open test/index.html in your browser or
-* run `npm test` in the Terminal in the root path of the repository package.
+- Open test/index.html in your browser or
+- run `npm test` in the Terminal in the root path of the repository package.
-The first one tests the browser integration,
-the second one the [node.js](http://nodejs.org/) integration.
+The first one tests the browser integration, the second one the
+[Node.js](https://nodejs.org/) integration.
## License
+
The JavaScript Templates script is released under the
-[MIT license](http://www.opensource.org/licenses/MIT).
+[MIT license](https://opensource.org/licenses/MIT).
diff --git a/bin/sync-vendor-libs.sh b/bin/sync-vendor-libs.sh
new file mode 100755
index 0000000..c2e27d9
--- /dev/null
+++ b/bin/sync-vendor-libs.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+cd "$(dirname "$0")/.."
+cp node_modules/chai/chai.js test/vendor/
+cp node_modules/mocha/mocha.js test/vendor/
+cp node_modules/mocha/mocha.css test/vendor/
diff --git a/css/demo.css b/css/demo.css
index 4c78c07..70a2010 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -6,70 +6,131 @@
* https://blueimp.net
*
* Licensed under the MIT license:
- * http://www.opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
*/
body {
- max-width: 750px;
+ max-width: 990px;
margin: 0 auto;
padding: 1em;
- font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
- font-size: 1em;
- line-height: 1.4em;
- background: #222;
- color: #fff;
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+ Arial, sans-serif;
-webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
+ line-height: 1.4;
+ background: #212121;
+ color: #dedede;
}
a {
- color: orange;
+ color: #61afef;
text-decoration: none;
}
-img {
- border: 0;
- vertical-align: middle;
+a:visited {
+ color: #56b6c2;
+}
+a:hover {
+ color: #98c379;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
}
h1 {
- line-height: 1em;
+ margin-top: 0.5em;
}
-textarea,
-input {
+label {
display: inline-block;
+ margin-bottom: 0.25em;
+}
+button,
+select,
+input,
+textarea,
+div.result {
+ -webkit-appearance: none;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0.5em 0.75em;
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.4;
+ background: #414141;
+ color: #dedede;
+ border: 1px solid #363636;
+ border-radius: 5px;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
+}
+input,
+textarea,
+div.result {
width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- padding: 10px;
- margin: 0 0 10px;
- font-family: "Lucida Console", Monaco, monospace;
+ box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
+}
+textarea {
+ display: block;
+ overflow: auto;
+}
+button {
+ background: #3c76a7;
+ background: linear-gradient(180deg, #3c76a7, #225c8d);
+ border-color: #225c8d;
+ color: #fff;
+}
+button[type='submit'] {
+ background: #6fa349;
+ background: linear-gradient(180deg, #6fa349, #568a30);
+ border-color: #568a30;
}
-.result {
- padding: 20px 40px;
- background: #fff;
- color: #222;
+button[type='reset'] {
+ background: #d79435;
+ background: linear-gradient(180deg, #d79435, #be7b1c);
+ border-color: #be7b1c;
}
-.error {
- color: red;
+button:active {
+ box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}
-@media (min-width: 481px) {
- .navigation {
+pre,
+textarea.code {
+ font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}
+
+@media (prefers-color-scheme: light) {
+ body {
+ background: #ececec;
+ color: #212121;
+ }
+ a {
+ color: #225c8d;
+ }
+ a:visited {
+ color: #378f9a;
+ }
+ a:hover {
+ color: #6fa349;
+ }
+ input,
+ textarea,
+ div.result {
+ background: #fff;
+ border-color: #d1d1d1;
+ color: #212121;
+ }
+}
+
+@media (min-width: 540px) {
+ #navigation {
list-style: none;
padding: 0;
}
- .navigation li {
+ #navigation li {
display: inline-block;
}
- .navigation li:not(:first-child):before {
- content: '| ';
+ #navigation li:not(:first-child)::before {
+ content: ' | ';
}
}
-
-/* IE7 fixes */
-*+html textarea,
-*+html input {
- width: 460px;
-}
-*+html .result {
- width: 400px;
-}
diff --git a/index.html b/index.html
index 49f8b81..ae27d75 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
+
-
-
-
-JavaScript Templates Demo
-
-
-
-
-
-
JavaScript Templates Demo
-
1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies.
-Compatible with server-side environments like Node.js, module loaders like RequireJS, Browserify or webpack and all web browsers.
+ 1KB lightweight, fast & powerful
+ JavaScript
+ templating engine with zero dependencies.
+ Compatible with server-side environments like
+ Node.js, module loaders like
+ RequireJS or
+ webpack and all web browsers.
+