refactor(v2): replace EJS with Eta for SSR generation

[nebrelbug]

Motivation

While working on some features for Docusaurus v2, I noticed that it uses EJS to generate SSR templates.

Eta is a template engine I created as an alternative to EJS, doT, and lodash.template. It is more lightweight, faster, and has more reliable parsing. It also exposes TypeScript types and collects test coverage, and keeps almost the same template syntax.

Because Eta supports caching intermediate template functions with the name field, avoids using with() {}, and has a faster parser than EJS anyway, I think it would lead to a slight increase in SSR rendering speed, as well as shave off a few KB from the user install size.

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

• Make sure the Netlify preview deployment works
• Compare results of build folders

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 672834e

https://deploy-preview-2684--docusaurus-2.netlify.app

[nebrelbug]

Everything works on my local computer and the deploy previews 😃

[lex111]

@nebrelbug great, I would be happy to replace EJS and use your lib instead, but let's achieve the same result.
Can we remove the whitespaces as before? (on the right in the screenshot is Eta)

[nebrelbug]

@lex111 sure! I actually ended up removing that because I saw the HTML is minified with https://github.com/DanielRuf/html-minifier-terser, but I can get it working again :)

[nebrelbug]

@lex111 there are a few options:

1. I set the equivalent of rmWhitespace on Eta (EJS' rmWhitespace calls templateText = templateText.replace(/[\r\n]+/g, '\n').replace(/^\s+|\s+$/gm, ''))
2. I remove the whitespace in the template file

Which would you prefer?

[lex111]

@nebrelbug let's use the equivalent of rmWhitespace option.

[nebrelbug]

@lex111 just updated!

Doing the replace() up front in the template is clearest in my opinion, and allows Eta to only parse the template once 😃

[lex111]

Awesome, I definitely like this replacement!

@yangshun could you please take a look at this PR?

[lex111]

@nebrelbug I'm just wondering why now (with Eta) and earlier (with EJS) so many whitespaces have not been deleted, as shown in the screenshot?

[nebrelbug]

@lex111 I think specifically those whitespaces are from values Docusaurus passed as data to the template engine -- not from the template. Neither Eta nor EJS removes whitespace from user data. That's just a guess though -- I'll have to look into it more

[lex111]

@nebrelbug yep, you're right, but how to remove them, is there an easy and safe way to do this?https://github.com/facebook/docusaurus/blob/master/website/docusaurus.config.js#L186

[nebrelbug]

@lex111 sure! Just remove the whitespace in the template literal.

              html: `
                <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
                  <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
                </a>
              `,

Can be changed to:

              html: `
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
  <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
</a>
`,

[lex111]

Nah, I meant deleting them programmatically. ср, 29 апр. 2020 г. в 22:18, Ben Gubler <notifications@github.com>:

…

@lex111 <https://github.com/lex111> sure! Just remove the whitespace in the template literal. html: ` <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify"> <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" /> </a> `, Can be changed to: html: ` <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify"> <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" /> </a> `, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2684 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBUIO5ZQRSTZWNR6VBM6KLRPB4QPANCNFSM4MSIE3GA> .

[nebrelbug]

@lex111 we could change:

<%~ it.postBodyTags %>

To:

<%~ it.postBodyTags.replace(/^\s+/gm, '') %>

(I'm assuming the Netlify button is in postBodyTags?)

[nebrelbug]

@lex111 or we could define a custom helper function or write a plugin or do a few other things. There isn't a built-in way to do this though in either Eta or EJS

[lex111]

@nebrelbug no problem, this is completely optional, I was curious how this could be done. So Eta seems like a good replacement for me!

[yangshun]

Fingers crossed 💣

[nebrelbug]

@lex111 and @yangshun:

By the way, may I list Docusaurus 2 under Eta's README section called "Projects using Eta"?

[yangshun]

@nebrelbug Of course! Happy for you to do that!

[yangshun]

We would love for you to showcase Eta on https://v2.docusaurus.io/showcase as well