Express ESLit

Express ESLit is a Express plugin that lets you create templates with embedded JavaScript expressions using ESLit.

<!-- views/index.html -->
<h1>${ heading }</h1>
<table>
  ${ people.map((person) => `<tr>
    <td>${ person.given }</td>
    <td>${ person.family }</td>
  </tr>`) }
</table>

ESLit templates are easy to use because they’re nothing more than web standardized ES6 Template Strings with Promise support.

import express from 'express';
import eslit from 'express-eslit';
 
const app = express();
 
app.engine('html', eslit);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', (req, res) => {
  res.render('index', {
    locals: {
      heading: Promise.resolve('Guest List'),
      people: [{
        given: 'Martin',
        family: 'Brody'
      }, {
        given: 'Bruce',
        family: 'Shark'
      }]
    }
  });
});
 
app.listen(8080);

Keeps things simple.

<h1>Guest List</h1>
<table>
  <tr>
    <td>Martin</td>
    <td>Brody</td>
  </tr><tr>
    <td>Bruce</td>
    <td>Shark</td>
  </tr>
</table>

Usage

Add Express ESLit to your build tool.

npm install express-eslit --save-dev

import eslit from 'express-eslit';
 
app.engine('html', eslit);
 
res.render('index', {
  locals: { /* data */ },
  options: { /* options */ }
});

• data: the keys used as variables by the template.
• Options
  • cwd: the path used by imports (default: process.cwd()).
  • prefixes: the file prefixes sometimes used by imports (default: [ "_" ]).
  • extensions: the file extensions sometimes used by imports (default: [ ".html", ".jsx" ]).
  • globopts: the options passed into node-glob.

Notes:

• Paths are relative to the current file or the current working directory.
• Paths may use glob patterns or omit prefixes and extensions
• Node modules are supported, using the package template or main keys, or by using index.html

---

Syntax Helpers

Sublime Text

1. Install the Babel Package.
2. Select Tools > Developer > New Syntax.
3. Paste this syntax.
4. Save the file as Lit Template (Babel).sublime-syntax.