ESLit

ESLit lets you write templates with embedded JavaScript expressions.

npm install eslit --save-dev

ESLit templates are easy to use because they’re powered by web standards. Content is read as Template Literals with automatically resolving Promises.

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

const eslit = require('eslit');

eslit('some/template', {
  heading: Promise.resolve('Guest List'),
  people: [{
    given: 'Martin',
    family: 'Brody'
  }, {
    given: 'Bruce',
    family: 'Shark'
  }]
}).then(console.log);

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

You can also use import functions to include other templates.

<h1>${heading}</h1>

<table>
  ${import('./some/table') /* includes some/table.html */}
</table>

Alternatively, the include function lets you specify additional data.

<h1>${heading}</h1>

<table>
  ${import('./some/table', { additional: 'data' })}
</table>

Usage

ESLit returns a Promise to render content once its embedded Promises are resolved.

eslit(src, data, options);

• src: the path or package id being imported.
• data: the data used 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

ESLit.parse

The parse function returns a promise to render the template string once its embedded promises are resolved.

eslit.parse( string, data, { cwd, prefixes, extensions, globopts } );

string: The string parsed as a template.

ESLit.resolve

The resolve function returns a Promise that is resolved once its embedded promises have resolved.

eslit.resolve`Template literal to be ${Promise.resolve('resolved')}`;

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.