Skip to content

Commit

Permalink
chore: new updatE?
Browse files Browse the repository at this point in the history
  • Loading branch information
shadowtime2000 committed Jun 13, 2021
1 parent 0db3ea3 commit e0829dc
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 61 deletions.
174 changes: 121 additions & 53 deletions deno_dist/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
</p>

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[logo]: https://img.shields.io/badge/all_contributors-8-orange.svg 'Number of contributors on All-Contributors'

<!-- ALL-CONTRIBUTORS-BADGE:END -->

<span align="center">
Expand All @@ -28,16 +30,21 @@

**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](https://squirrelly.js.org), it's written in TypeScript and emphasizes phenomenal performance, configurability, and low bundle size.
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](https://squirrelly.js.org), it's written in TypeScript and
emphasizes phenomenal performance, configurability, and low bundle size.

### 🌟 Features

- 📦 0 dependencies
- 💡 2.3KB minzipped; size restricted to <3KB forever with [size-limit](https://github.com/ai/size-limit)
- 💡 2.3KB minzipped; size restricted to <3KB forever with
[size-limit](https://github.com/ai/size-limit)
- ⚡️ Written in TypeScript
- ✨ Deno support (+ Node and browser)
- 🚀 Super Fast
- Check out [these benchmarks](https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html)
- Check out
[these benchmarks](https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html)
- 🔧 Configurable
- Plugins, custom delimiters, caching
- 🔨 Powerful
Expand All @@ -46,7 +53,8 @@ Eta is a lightweight and blazing fast embedded JS templating engine that works i
- ExpressJS support out-of-the-box
- 🔥 Reliable
- Better quotes/comments support
- _ex._ `<%= someval + "string %>" %>` compiles correctly, while it fails with doT or EJS
- _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
Expand All @@ -57,18 +65,28 @@ Eta is a lightweight and blazing fast embedded JS templating engine that works i
<summary>
<b>Eta vs EJS</b>
</summary>

Eta'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:

- Eta is more lightweight. Eta weighs less than **2.5KB gzipped**, while EJS is **4.4KB gzipped**
- Eta compiles and renders templates **_much_ faster than EJS**. Check out these benchmarks: https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html
- Eta allows left whitespace control (with `-`), 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
- Eta gives you more flexibility with delimeters -- you could set them to `{{` and `}}`, for example, while with EJS this isn't possible
Eta'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:

- Eta is more lightweight. Eta weighs less than **2.5KB gzipped**, while EJS is
**4.4KB gzipped**
- Eta compiles and renders templates **_much_ faster than EJS**. Check out these
benchmarks:
https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html
- Eta allows left whitespace control (with `-`), 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
- Eta gives you more flexibility with delimeters -- you could set them to `{{`
and `}}`, for example, while with EJS this isn't possible
- Eta adds plugin support
- Comments in Eta use `/* ... */` which allows commenting around template tags
- Eta parses strings correctly. _Example: `<%= "%>" %>` works in Eta, while it breaks in EJS_
- Eta parses strings correctly. _Example: `<%= "%>" %>` works in Eta, while it
breaks in EJS_
- Eta exposes Typescript types and distributes a UMD build
- Eta supports custom tag-type indicators. _Example: you could change `<%=` to `<%*`_
- Eta supports custom tag-type indicators. _Example: you could change `<%=` to
`<%*`_

</details>

Expand All @@ -77,13 +95,20 @@ Eta's syntax is very similar to EJS' (most templates should work with either eng
<b>Eta vs doT.js</b>
</summary>

Eta and doT.js both allow embedded JavaScript, and [both have best-in-class performance](https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html) 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:
Eta and doT.js both allow embedded JavaScript, and
[both have best-in-class performance](https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html)
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:

- Eta allows you to control how you strip preceding and trailing whitespace after tags.
- It's much simpler to set custom delimiters with Eta than doT -- you don't have to rewrite every configuration Regular Expression
- Eta allows you to control how you strip preceding and trailing whitespace
after tags.
- It's much simpler to set custom delimiters with Eta than doT -- you don't have
to rewrite every configuration Regular Expression
- Eta supports plugins
- Eta supports async
- Eta parses strings and multi-line comments correctly. _Example: `<%= "%>" %>` works in Eta, while the equivalent breaks in doT_
- Eta parses strings and multi-line comments correctly. _Example: `<%= "%>" %>`
works in Eta, while the equivalent breaks in doT_
- Eta exposes Typescript types and distributes a UMD build
- Eta supports runtime partials and file-handling.

Expand All @@ -93,17 +118,26 @@ Eta and doT.js both allow embedded JavaScript, and [both have best-in-class perf
<summary>
<b>Eta vs Handlebars</b>
</summary>

Eta 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:

- Eta is more lightweight. Eta weighs less than **2.5KB gzipped**, while Handlebars is **~22KB gzipped**
- Eta compiles and renders templates **_much_ faster than Handlebars** -- around **7x faster**. Check out these benchmarks: https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html
Eta 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:

- Eta is more lightweight. Eta weighs less than **2.5KB gzipped**, while
Handlebars is **~22KB gzipped**
- Eta compiles and renders templates **_much_ faster than Handlebars** -- around
**7x faster**. Check out these benchmarks:
https://ghcdn.rawgit.org/eta-dev/eta/master/browser-tests/benchmark.html
- Eta allows you to set custom delimiters
- Eta supports plugins
- Eta exposes Typescript types and distributes a UMD build
- Custom tag-type indicators. _Example: you could change `<%=` to `<%*`_
- With Eta, you don't need to register tons of helpers to do simple tasks like check if one value equals another value
- Note that Eta templates run as **trusted code** -- just like any other JavaScript you write.<br><br>If you are running user-defined/created templates on your machine, server, site, etc., you probably should go with a tool built for that purpose, like Handlebars.
- With Eta, you don't need to register tons of helpers to do simple tasks like
check if one value equals another value
- Note that Eta templates run as **trusted code** -- just like any other
JavaScript you write.<br><br>If you are running user-defined/created templates
on your machine, server, site, etc., you probably should go with a tool built
for that purpose, like Handlebars.

</details>

Expand All @@ -112,27 +146,42 @@ Eta and Handlebars are very different in some ways -- Eta is an embedded templat
<b>Eta vs ES6 Template Literals</b>
</summary>

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:
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:

- Eta compiles templates into JavaScript functions that use string concatenation and have comparable performance with template literals
- Eta compiles templates into JavaScript functions that use string concatenation
and have comparable performance with template literals
- Eta lets you control preceding and trailing whitespace around tags
- Eta gives you more flexibility with delimeters -- you could set them to `{{` and `}}`, for example, or set them to `${` and `}` to mimic template literals
- Eta gives you more flexibility with delimeters -- you could set them to `{{`
and `}}`, for example, or set them to `${` and `}` to mimic template literals
- Eta supports plugins
- Eta supports comments with `/* ... */` syntax, just like in regular JavaScript. Template literals require you to stick a blank string after the comment: `/* ... */""`, which is much less readable
- To write conditionals inside template literals, you have to use the ternary operator. Add more conditions or nested conditionals, and it quickly becomes a nightmarish mess of `? ... : ... ? ... : ...`. Writing conditionals in Eta is much simpler and more readable
- Eta supports comments with `/* ... */` syntax, just like in regular
JavaScript. Template literals require you to stick a blank string after the
comment: `/* ... */""`, which is much less readable
- To write conditionals inside template literals, you have to use the ternary
operator. Add more conditions or nested conditionals, and it quickly becomes a
nightmarish mess of `? ... : ... ? ... : ...`. Writing conditionals in Eta is
much simpler and more readable
- Eta supports partials

</details>

## Why Eta?

Simply 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.
Simply 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.

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

Expand All @@ -141,7 +190,8 @@ Additionally, Eta is a letter of the Greek alphabet (it stands for all sorts of
<b>Visual Studio Code</b>
</summary>

[@shadowtime2000](https://github.com/shadowtime2000) created [eta-vscode](https://marketplace.visualstudio.com/items?itemName=shadowtime2000.eta-vscode).
[@shadowtime2000](https://github.com/shadowtime2000) created
[eta-vscode](https://marketplace.visualstudio.com/items?itemName=shadowtime2000.eta-vscode).

</details>

Expand All @@ -150,7 +200,8 @@ Additionally, Eta is a letter of the Greek alphabet (it stands for all sorts of
<b>ESLint</b>
</summary>

[eslint-plugin-eta](https://github.com/eta-dev/eslint-plugin-eta) was created to provide an ESLint processor so you can lint your Eta templates.
[eslint-plugin-eta](https://github.com/eta-dev/eslint-plugin-eta) was created to
provide an ESLint processor so you can lint your Eta templates.

</details>

Expand All @@ -159,7 +210,8 @@ Additionally, Eta is a letter of the Greek alphabet (it stands for all sorts of
<b>CLI</b>
</summary>

An official Eta CLI exists called [etajs-cli](https://github.com/eta-dev/etajs-cli).
An official Eta CLI exists called
[etajs-cli](https://github.com/eta-dev/etajs-cli).

</details>

Expand All @@ -168,23 +220,26 @@ Additionally, Eta is a letter of the Greek alphabet (it stands for all sorts of
<b>Webpack</b>
</summary>

Currently there is no official Webpack integration but [@clshortfuse](https://github.com/clshortfuse) shared the loader he uses:
```javascript
{
loader: 'html-loader',
options: {
preprocessor(content, loaderContext) {
return eta.render(content, {}, { filename: loaderContext.resourcePath });
Currently there is no official Webpack integration but
[@clshortfuse](https://github.com/clshortfuse) shared the loader he uses:

```javascript
{
loader: 'html-loader',
options: {
preprocessor(content, loaderContext) {
return eta.render(content, {}, { filename: loaderContext.resourcePath });
},
},
},
}
```
}
```

</details>

## 📜 Docs

We know nobody reads through the long and boring documentation in the ReadMe anyway, so head over to the documentation website:
We know nobody reads through the long and boring documentation in the ReadMe
anyway, so head over to the documentation website:

📝 [https://eta.js.org](https://eta.js.org)

Expand All @@ -193,10 +248,10 @@ We know nobody reads through the long and boring documentation in the ReadMe any
### Simple Template

```javascript
import * as Eta from 'eta';
var myTemplate = '<p>My favorite kind of cake is: <%= it.favoriteCake %></p>'
import * as Eta from "eta";
var myTemplate = "<p>My favorite kind of cake is: <%= it.favoriteCake %></p>";

Eta.render(myTemplate, { favoriteCake: 'Chocolate!' })
Eta.render(myTemplate, { favoriteCake: "Chocolate!" });
// Returns: '<p>My favorite kind of cake is: Chocolate!</p>'
```

Expand Down Expand Up @@ -236,20 +291,28 @@ Display this instead

## ✔️ Tests

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

## Resources

To be added

## Projects using `eta`

- [Docusaurus v2](https://v2.docusaurus.io): open-source documentation framework that uses Eta to generate a SSR build
- [Docusaurus v2](https://v2.docusaurus.io): open-source documentation framework
that uses Eta to generate a SSR build
- [swagger-typescript-api](https://github.com/acacode/swagger-typescript-api):
Open source typescript api codegenerator from Swagger. Uses Eta as
codegenerator by templates
- [Add yours!](https://github.com/eta-dev/eta/edit/master/README.md)

## Contributors

Made with ❤ by [@nebrelbug](https://github.com/eta-dev) and all these wonderful contributors ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
Made with ❤ by [@nebrelbug](https://github.com/eta-dev) and all these wonderful
contributors
([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
Expand All @@ -273,9 +336,14 @@ Made with ❤ by [@nebrelbug](https://github.com/eta-dev) and all these wonderfu
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!
This project follows the
[all-contributors](https://github.com/kentcdodds/all-contributors)
specification. Contributions of any kind are welcome!

## Credits

- Async support and file handling were added based on code from [EJS](https://github.com/mde/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.
- Async support and file handling were added based on code from
[EJS](https://github.com/mde/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.
2 changes: 1 addition & 1 deletion deno_dist/file-methods.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export * as fs from "https://deno.land/std@0.66.0/fs/mod.ts";
export { existsSync } from "https://deno.land/std@0.66.0/fs/exists.ts";
export * as path from "https://deno.land/std@0.66.0/path/mod.ts";

export const readFileSync = Deno.readTextFileSync;
11 changes: 6 additions & 5 deletions deno_dist/file-utils.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { fs, path, readFileSync } from "./file-methods.ts";
import { existsSync, path, readFileSync } from "./file-methods.ts";
const _BOM = /^\uFEFF/;

// express is set like: app.engine('html', require('eta').renderFile)
Expand Down Expand Up @@ -106,7 +106,7 @@ function getPath(path: string, options: EtaConfig): string {

addPathToSearched(filePath);

return fs.existsSync(filePath);
return existsSync(filePath);
})
) {
// If the above returned true, we know that the filePath was just set to a path
Expand All @@ -118,7 +118,7 @@ function getPath(path: string, options: EtaConfig): string {

addPathToSearched(filePath);

if (fs.existsSync(filePath)) {
if (existsSync(filePath)) {
return filePath;
}
}
Expand Down Expand Up @@ -159,7 +159,7 @@ function getPath(path: string, options: EtaConfig): string {

addPathToSearched(filePath);

if (fs.existsSync(filePath)) {
if (existsSync(filePath)) {
includePath = filePath;
}
}
Expand Down Expand Up @@ -190,7 +190,8 @@ function getPath(path: string, options: EtaConfig): string {

function readFile(filePath: string): string {
try {
return readFileSync(filePath).toString().replace(_BOM, ""); // TODO: is replacing BOM's necessary?
return readFileSync(filePath).toString().replace(_BOM, "") // TODO: is replacing BOM's necessary?
;
} catch {
throw EtaErr("Failed to read template at '" + filePath + "'");
}
Expand Down
3 changes: 2 additions & 1 deletion deno_dist/parse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ const doubleQuoteReg = /"(?:\\[\s\w"'\\`]|[^\n\r"\\])*?"/g;

function escapeRegExp(string: string) {
// From MDN
return string.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
return string.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&") // $& means the whole matched string
;
}

export default function parse(
Expand Down
3 changes: 2 additions & 1 deletion deno_dist/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@ function trimWS(
str = trimRight(str);
} else if (rightTrim === "-" || rightTrim === "nl") {
// nl trim
str = str.replace(/(?:\r\n|\n|\r)$/, ""); // TODO: make sure this gets \r\n
str = str.replace(/(?:\r\n|\n|\r)$/, "") // TODO: make sure this gets \r\n
;
}

return str;
Expand Down

0 comments on commit e0829dc

Please sign in to comment.