ejt v0.3.0
EJT
This is a server-side compiler for simple JavaScript-based HTML templating.
Commands
All commands are placed between opening <%
and closing %>
tags.
Include
When the first word after the opening tag is include, the specified file is included into the compiled output. The path is relative to the template's current folder. The default file extension is html
and can be omitted.
Include partial.html inside another HTML file
<% include partial %>
Markdown files are rendered and included.
<% include welcome.md %>
JSON files are parsed as an object.
<% const pages = include('site.json') %>
Here's a twist. If the first word is not one of the reserved commands, everything between the tags is evaluated as JavaScript. In that case, include
is a function that returns the file content.
Extend
index.html
<% extend layout %>
<% block header %>
..Header content..
<% end %>
..Main content..
layout.html
<header>
<% content header %>
</header>
<main>
<% content %>
</main>
Compiled result
<header>
..Header content..
</header>
<main>
..Main content..
</main>
Variables
Escaped: <%= foo %>
Unescaped: <%- bar %>
Code
Escape code block and wrap in <pre><code>
<% code %>
<h1>Code example</h1>
<% end %>
Optionally add attributes: <% code class="language-markup" %>
Inline JS
The compiler runs on Node.js, so there are some ES6 features supported.
<% const pages = include('site.json') %>
<ul>
<% for (let path in pages) { %>
<li>
<a href="/<%- path %>"><%- pages[path] %></a>
</li>
<% } %>
</ul>
Output
The variable Output
is a buffer holding the compiled HTML up to that point. It can be used to add content.
['item1', 'item2'].forEach((product) => {
Output += include(`products/${product}`)
})
Local
The variable Local
is passed to every template. It has one default property Local.file
, which is the current template path. Local
can be used to pass data and functions you want available in other templates.
Use
Command line
$ ejt source [destination]
Compiler (server-side only)
var EJT = require('ejt')
var renderer = new EJT( options )
var result = renderer.compile( src )
Gulp
var ejt = require('ejt/gulp')
gulp.task('html', function() {
return gulp.src( srcPath )
.pipe( ejt() )
.pipe(gulp.dest( destPath ))
})
TODO: Express
var ejt = require('ejt/express');
app.use( ejt );
Credit
This is based on a fork of ECT, with on-going refactoring and changes:
- Plain JavaScript
- Default file extension; relative path; filename without quotes
- Include markdown, etc. via extensions
- New command: code
I believe the original concept came from John Resig's micro-templating.