ES6 template engine interface

This module allows native ES6 template literals to be used with DADI Web.

Installation

• Add this module as a dependency:

  npm install web-es6-templates --save
  

• Include it in the engines array passed to Web:

  1require('@dadi/web')({
  2  engines: [
  3    require('web-es6-templates')
  4  ]
  5})

Usage

Config

You can change the folder where your helpers are stored in your config.xxx.json file:

1  "engines": {
2    "es6": {
3      "paths": {
4        "helpers": "site/helpers"
5      }
6    }
7  }

Helpers

The base directory for absolute paths is the utils/helpers directory.

Helpers are required() functions that can be embeded into templates to keep your code DRY. Take this example which could live in your helpers folder as slugify.js.

1var s = require('underscore.string/slugify')
2
3module.exports.slugify = (chunk) => {
4  return s(chunk)
5}

This function would be used in a template file like so:

1${slugify('The Quick Brown Fox Jumps Over The Lazy Dog')}

Output:

the-quick-brown-fox-jumps-over-the-lazy-dog

Includes

The base directory for absolute paths is the pages/ directory. Take the following directory tree.

pages/
|_ partials/
|_ |_ header.js
|_ |_ footer.js
|_ index.js
|_ index.json

To include the partials from index.js, you can use an underscore to indicate a sub-folder:

1${partials_header}
2
3<h1>ES6 Templates test</h1>
4
5<p>This page lives at ${host}.</p>
6
7<h2>Loop test</h2>
8
9<ul>
10  ${posts.results.map(i => `<li>${i.attributes.title}</li>`).join('')}
11</ul>
12
13${partials_footer}