Convert Figma logo to code with AI

eta-dev logoeta

Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript

1,401
64
1,401
19

Top Related Projects

207,677

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

227,213

The library for web and native user interfaces.

95,657

Deliver web apps with confidence 🚀

78,194

Cybernetically enhanced web apps

36,546

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Quick Overview

Eta is a high-performance, server-side template engine that combines the power of Embedded Rust (Tera) with the simplicity of Handlebars. It aims to provide a fast and easy-to-use templating solution for web applications and other server-side projects.

Pros

  • High Performance: Eta is built on top of Embedded Rust (Tera), which is known for its speed and efficiency.
  • Simplicity: Eta's syntax is inspired by Handlebars, making it easy to learn and use for developers familiar with that ecosystem.
  • Flexibility: Eta supports a wide range of features, including partials, layouts, and custom filters, allowing for complex template structures.
  • Extensibility: Eta can be easily extended with custom functions and helpers, making it adaptable to various use cases.

Cons

  • Rust Dependency: Eta is built using Rust, which may be a barrier for developers who are not familiar with the language.
  • Limited Browser Support: Eta is primarily designed for server-side rendering, and may not be the best choice for client-side template rendering in the browser.
  • Smaller Community: Compared to more established template engines like Handlebars or Mustache, Eta has a smaller community and ecosystem.
  • Learning Curve: While Eta's syntax is inspired by Handlebars, it still has its own unique features and quirks that developers may need to learn.

Code Examples

Here are a few examples of how to use Eta in your code:

Rendering a Simple Template

const eta = require('eta');

const template = `<h1>Hello, <%= it.name %>!</h1>`;
const data = { name: 'John Doe' };

const html = eta.render(template, data);
console.log(html); // Output: <h1>Hello, John Doe!</h1>

Using Partials

const eta = require('eta');

eta.configure({
  views: 'views/', // Specify the directory for partials
});

const template = `
  <h1>Welcome to our website</h1>
  <%~ include('header') %>
  <p>This is the main content.</p>
  <%~ include('footer') %>
`;

const html = eta.render(template, {});
console.log(html);

Defining Custom Filters

const eta = require('eta');

eta.filters.uppercase = (str) => str.toUpperCase();

const template = `<p>The uppercase version of "hello" is <%= it.message | uppercase %>.</p>`;
const data = { message: 'hello' };

const html = eta.render(template, data);
console.log(html); // Output: <p>The uppercase version of "hello" is HELLO.</p>

Asynchronous Rendering

const eta = require('eta');

const template = `
  <h1>Hello, <%= await it.getName() %>!</h1>
  <p>The current time is <%= await it.getTime() %>.</p>
`;

const data = {
  getName: () => Promise.resolve('John Doe'),
  getTime: () => Promise.resolve(new Date().toLocaleString()),
};

const html = await eta.render(template, data);
console.log(html);

Getting Started

To get started with Eta, follow these steps:

  1. Install Eta using npm or yarn:
npm install eta
  1. Create a new file (e.g., app.js) and import Eta:
const eta = require('eta');
  1. Define your template and data:
const template = `<h1>Hello, <%= it.name %>!</h1>`;
const data = { name: 'John Doe' };
  1. Render the template:
const html = eta.render(template, data);
console.log(html);
  1. (Optional) Configure Eta with custom options:
eta.configure({
  views: 'views/', // Specify the directory for partials
  cache: true, // Enable

Competitor Comparisons

207,677

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Pros of Vue.js

  • Extensive Ecosystem: Vue.js has a vast and thriving ecosystem, with a wide range of libraries, tools, and resources available to developers.
  • Reactive Data Binding: Vue.js provides a reactive data binding system, which allows for efficient and responsive user interfaces.
  • Flexible and Scalable: Vue.js is designed to be flexible and scalable, making it suitable for projects of various sizes and complexity.

Cons of Vue.js

  • Smaller Community: Compared to React and Angular, the Vue.js community is relatively smaller, which may result in fewer available resources and support.
  • Limited Enterprise Adoption: While Vue.js is gaining popularity, it has not yet achieved the same level of enterprise-wide adoption as some of the more established frameworks.
  • Steeper Learning Curve: For developers coming from other frameworks, the Vue.js learning curve may be slightly steeper due to its unique syntax and approach.

Code Comparison

Vue.js:

<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="incrementCount">Click me ({{ count }})</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'Vue.js App',
      description: 'A simple Vue.js application',
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++
    }
  }
}
</script>

Eta:

<h1>{{ title }}</h1>
<p>{{ description }}</p>
<button onclick="incrementCount()">Click me ({{ count }})</button>

<script>
let count = 0;

function incrementCount() {
  count++;
  render();
}

function render() {
  document.body.innerHTML = `
    <h1>${title}</h1>
    <p>${description}</p>
    <button onclick="incrementCount()">Click me (${count})</button>
  `;
}

let title = 'Eta App';
let description = 'A simple Eta application';
render();
</script>
227,213

The library for web and native user interfaces.

Pros of React

  • Extensive ecosystem with a large community and a wealth of third-party libraries and tools
  • Robust and well-documented, with a strong focus on performance and scalability
  • Widely adopted by major tech companies and a large part of the web development landscape

Cons of React

  • Steeper learning curve compared to Eta, especially for beginners
  • Larger bundle size and more complex setup process
  • Potential vendor lock-in due to its dominance in the market

Code Comparison

React:

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a React component.</p>
    </div>
  );
}

Eta:

<div>
  <h1>Hello, World!</h1>
  <p>This is an Eta template.</p>
</div>
95,657

Deliver web apps with confidence 🚀

Pros of Angular

  • Comprehensive framework with a rich ecosystem of tools and libraries
  • Robust and opinionated architecture, promoting maintainable and scalable applications
  • Extensive documentation and a large community of developers

Cons of Angular

  • Steep learning curve, especially for beginners
  • Larger bundle size and potential performance issues with complex applications
  • Dependency on TypeScript, which may not be preferred by all developers

Code Comparison

Angular (TypeScript):

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <ul>
        <li *ngFor="let item of items">{{ item }}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  title = 'My Angular App';
  items = ['Item 1', 'Item 2', 'Item 3'];
}

Eta (JavaScript):

const Eta = require('eta');

Eta.configure({
  views: './views',
  cache: true
});

Eta.render('index', { title: 'My Eta App', items: ['Item 1', 'Item 2', 'Item 3'] }, (err, html) => {
  if (err) {
    console.error(err);
  } else {
    console.log(html);
  }
});
78,194

Cybernetically enhanced web apps

Pros of Svelte

  • Svelte has a larger and more active community, with more resources and support available for developers.
  • Svelte's compiler generates highly optimized code, resulting in faster performance compared to some other frameworks.
  • Svelte's reactive nature and declarative syntax make it easier to reason about and maintain complex user interfaces.

Cons of Svelte

  • Svelte has a steeper learning curve compared to Eta, especially for developers who are new to the framework.
  • Svelte's ecosystem is not as extensive as some other popular frameworks, with fewer third-party libraries and tools available.
  • Svelte's focus on simplicity and performance may not be suitable for all types of applications, particularly those with complex state management requirements.

Code Comparison

Svelte:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Eta:

<script>
  let count = 0;

  function increment() {
    count++;
  }
</script>

<button @click="increment">
  Clicked {{ count }} {{ count === 1 ? 'time' : 'times' }}
</button>
36,546

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Pros of Preact

  • Preact is a lightweight alternative to React, weighing in at only 3kB gzipped.
  • It provides a familiar API that is largely compatible with React, making it easy to migrate existing projects.
  • Preact has a large and active community, with a wealth of third-party libraries and tools available.

Cons of Preact

  • Preact may not have the same level of support and documentation as React, especially for more advanced use cases.
  • Preact's smaller size and reduced feature set may not be suitable for all projects, especially those with complex requirements.
  • Preact's compatibility with React may not be 100% perfect, which could lead to some issues when migrating existing projects.

Code Comparison

Preact:

import { h, render } from 'preact';

function App() {
  return <h1>Hello, Preact!</h1>;
}

render(<App />, document.getElementById('root'));

Eta:

const Eta = require('eta');

Eta.configure({
  views: 'views/',
  cache: true
});

Eta.render('index', { message: 'Hello, Eta!' }, (err, html) => {
  console.log(html);
});

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

eta (η)

Documentation - Chat - RunKit Demo - Playground

GitHub package.json version (main) GitHub Actions Status All Contributors Coveralls Donate

You're viewing the source for Eta v3, which we just released! For v2, visit the old branch.

Summary

Eta is a lightweight and blazing fast embedded JS templating engine that works inside Node, Deno, and the browser. It's written in TypeScript and emphasizes great performance, configurability, and small bundle size.

🌟 Features

  • 📦 0 dependencies
  • 💡 Only ~3.5 KB minzipped
  • ⚡️ Written in TypeScript
  • ✨ Deno support (+ Node and browser)
  • 🚀 Super Fast
  • 🔧 Configurable
    • Plugins, custom delimiters, caching
  • 🔨 Powerful
    • Precompilation, partials, async
    • Layout support!
  • 🔥 Reliable
    • Better quotes/comments support
      • ex. <%= someval + "string %>" %> compiles correctly, while it fails with doT or EJS
    • Great error reporting
  • ⚡️ Exports ES Modules as well as UMD
  • 📝 Easy template syntax

Get Started

For more thorough documentation, visit https://eta.js.org

Install Eta

npm install eta

In the root of your project, create templates/simple.eta

Hi <%= it.name %>!

Then, in your JS file:

import { Eta } from "eta";
// import { Eta } from "https://deno.land/x/eta@v3.1.0/src/index.ts";

const eta = new Eta({ views: path.join(__dirname, "templates") });

// Render a template

const res = eta.render("./simple", { name: "Ben" });
console.log(res); // Hi Ben!

FAQs

Where did Eta's name come from?

"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).


Integrations

Visual Studio Code

@shadowtime2000 created eta-vscode.

ESLint

eslint-plugin-eta was created to provide an ESLint processor so you can lint your Eta templates.

Webpack

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 });
    },
  },
}
Node-RED

To operate with Eta templates in Node-RED: @ralphwetzel/node-red-contrib-eta

image
Koa

To render Eta templates in Koa web framework: @cedx/koa-eta


Projects using eta

  • Docusaurus v2: open-source documentation framework that uses Eta to generate a SSR build
  • swagger-typescript-api: Open source typescript api codegenerator from Swagger. Uses Eta as codegenerator by templates
  • html-bundler-webpack-plugin: Webpack plugin make easily to bundle HTML pages from templates, source styles and scripts
  • SmartDeno: SmartDeno is an easy to setup web template using Deno & Oak
  • stc: OpenAPI (Swagger) and Apifox documentation converted to api. Use eta templates to generate code.
  • Add yours!

Contributors

Made with ❤ by @nebrelbug and all these wonderful contributors (emoji key):

Ben Gubler
Ben Gubler

💻 💬 📖 ⚠️
Clite Tailor
Clite Tailor

🤔 💻
Ioan CHIRIAC
Ioan CHIRIAC

💻 🤔
Craig Morten
Craig Morten

💻
Rajan Tiwari
Rajan Tiwari

💡
shadowtime2000
shadowtime2000

💻 🤔 ⚠️
Hamza Hamidi
Hamza Hamidi

📖
Calum Knott
Calum Knott

🤔
nhaef
nhaef

💻
Gün
Gün

💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

Credits

  • Async support, file handling, and error formatting were based on code from EJS, which is licensed under the Apache-2.0 license. Code was modified and refactored to some extent.
  • Syntax and some parts of compilation are heavily based off EJS, Nunjucks, and doT.

NPM DownloadsLast 30 Days