Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript
Documentation - Chat - RunKit Demo - Playground
Summary
Eta is a lightweight and blazing fast embedded JS templating engine that works inside Node, Deno, and the browser. Created by the developers of Squirrelly, it’s written in TypeScript and emphasizes phenomenal performance, configurability, and low bundle size.
<%= someval + "string %>" %>
compiles correctly, while it fails with doT or EJSEta’s syntax is very similar to EJS’ (most templates should work with either engine), Eta has a similar API, and Eta and EJS share the same file-handling logic. Here are the differences between Eta and EJS:
-
), something that doesn’t work in EJS because EJS uses -
on the left side to indicate that the value shouldn’t be escaped. Instead, Eta uses ~
to output a raw value{{
and }}
, for example, while with EJS this isn’t possible/* ... */
which allows commenting around template tags<%= "%>" %>
works in Eta, while it breaks in EJS<%=
to <%*
Eta and doT.js both allow embedded JavaScript, and both have best-in-class performance when compared to other template engines (though Eta is slightly faster with HTML-escaped templates). Here are some of the differences between Eta and doT.js:
<%= "%>" %>
works in Eta, while the equivalent breaks in doTEta and Handlebars are very different in some ways – Eta is an embedded template engine, while Handlebars is a logic-less template engine. Here some additional differences between Eta and Handlebars:
<%=
to <%*
Template literals are a super useful tool, especially for shortening simple string concatenation. But writing complete templates using template literals can quickly get out of hand. Here’s a comparison of Eta and template literals:
{{
and }}
, for example, or set them to ${
and }
to mimic template literals/* ... */
syntax, just like in regular JavaScript. Template literals require you to stick a blank string after the comment: /* ... */""
, which is much less readable? ... : ... ? ... : ...
. Writing conditionals in Eta is much simpler and more readableSimply put, Eta is super: super lightweight, super fast, super powerful, and super simple. Like with EJS, you don’t have to worry about learning an entire new templating syntax. Just write JavaScript inside your templates.
“Eta” means tiny in Esperanto. Plus, it can be used as an acronym for all sorts of cool phrases: “ECMAScript Template Awesomeness”, “Embedded Templating Alternative”, etc…
Additionally, Eta is a letter of the Greek alphabet (it stands for all sorts of cool things in various mathematical fields, including efficiency) and is three letters long (perfect for a file extension).
@shadowtime2000 created eta-vscode.
eslint-plugin-eta was created to provide an ESLint processor so you can lint your Eta templates.
An official Eta CLI exists called etajs-cli.
Currently there is no official Webpack integration but @clshortfuse shared the loader he uses:
{
loader: 'html-loader',
options: {
preprocessor(content, loaderContext) {
return eta.render(content, {}, { filename: loaderContext.resourcePath });
},
},
}
To operate with Eta templates in Node-RED: @ralphwetzel/node-red-contrib-eta
We know nobody reads through the long and boring documentation in the ReadMe anyway, so head over to the documentation website:
import * as Eta from "eta";
var myTemplate = "<p>My favorite kind of cake is: <%= it.favoriteCake %></p>";
Eta.render(myTemplate, { favoriteCake: "Chocolate!" });
// Returns: '<p>My favorite kind of cake is: Chocolate!</p>'
<% if(it.somevalue === 1) { %>
Display this
<% } else { %>
Display this instead
<% } %>
<ul>
<% it.users.forEach(function(user){ %>
<li><%= user.name %></li>
<% }) %>
</ul>
<%~ include('mypartial') %>
<%~ includeFile('./footer') %>
<%~ include('users', {users: it.users}) %>
Tests can be run with npm test
. Multiple tests check that parsing, rendering, and compiling return expected results, formatting follows guidelines, and code coverage is at the expected level.
To be added
eta
Made with ❤ by @nebrelbug and all these wonderful contributors (emoji key):
Ben Gubler 💻 💬 📖 ⚠️ |
Clite Tailor 🤔 💻 |
Ioan CHIRIAC 💻 🤔 |
Craig Morten 💻 |
Rajan Tiwari 💡 |
shadowtime2000 💻 🤔 ⚠️ |
Hamza Hamidi 📖 |
Calum Knott 🤔 |
nhaef 💻 |
Gün 💻 |
This project follows the all-contributors specification. Contributions of any kind are welcome!