echotag.js - Simple ES6 Templates

echotag.js is a simple ES6 tagged template
function for
printing HTML strings that handles common patterns like returning arrays of
other templates, and escapes HTML in all variables by default for XSS
prevention (but can also explicitly allow HTML when needed).

Use Cases

* All you want to do is render HTML to a string (in Node.js or the browser)
* You only want to use built-in JavaScript features
* You want template variables to be HTML-escaped by default (XSS prevention)
* You don't want to pay the cost of parsing or compiling templates
* You don't want to learn a special template syntax like EJS, Jade, Underscore, etc.
* You don't want to add complexity to your build system (Babel, TypeScript, etc.)
* You don't need a virtual dom or reactive updates built-in (React, etc. are overkill)

Installation

You can install echotag.js via NPM:

``
npm install echotag --save
`

Examples

$3

With CommonJS/Node.js:

`javascript
const tmpl = require('echotag').tmpl;

let content = tmpl

`javascript
import { tmpl } from 'echotag';

let content = tmpl

`javascript
const tmpl = require('echotag').tmpl;

let world = 'World';
let content = tmpl

Since echotag.js auto-escapes HTML in variables by default, you must explicitly
use the :html modifier so that the HTML tags are preserved if you want to
allow HTML, or if you are using echotag templates within templates (i.e. for
layouts with template content).

#### Simple Example

We use the :html modifier to explicitly allow HTML in the world variable:

`javascript
const tmpl = require('echotag').tmpl;

let world = 'World';
let content = tmpl

A more real-world example with a layout function that accepts a title and
content parameter.

The content parameter should allow HTML (so we can use it in our content
templates), so we use the :html modifier to explicitly allow it. Any HTML in
the title variable will be escaped by default.

`javascript
const tmpl = require('echotag').tmpl;

function layout(params = {}) {
return tmpl

let content = tmpl

console.log(layout({ content, title: 'Homepage' }));
`

$3

Building HTML with arrays of data is similarly easy in echotag.js, and is very
JSX-like, without the cost of transpilation. It's also way faster since it's
just plain strings and built-in JavaScript. 😎

`javascript
const tmpl = require('echotag').tmpl;

let data = [
{ title: 'World' },
{ title: 'Earth' }
];

let content = tmpl

${data.map(function (world) {
return tmpl
• Hello ${world.title}
;
})}:html

`javascript
const express = require('express');
const tmpl = require('echotag').tmpl;

// Setup Express.js
const app = express();

// Define a function that returns the content wrapped in our layout HTML markup
// NOTE: Typically, this will be in a separate file
function mainLayout(params = {}) {
return tmpl

// Define a route
app.get('/', function (req, res) {
// Prepare our content, or call a function that returns it, etc.
let title = 'Hello World!';
let world = 'World';
let content = tmpl


// Listen on port for web requests
app.listen(process.env.PORT || 1338);
``