Change template engine: EJS > ETA

* change template engine: EJS > ETA
* enhance comment processing
  * replace newline to `<br />` or `\\n`
* rewrite `README.md` for changed template engine

Author: imjuni

README.md

@@ -14,12 +14,12 @@ ERdia is create ER Diagram and Entity schema specification using by TypeORM and
 
 Why `ERdia` ?
 
-`erdia` automatic create DB entity specification, ER diagram. DB entity specification, ER diagram important document that are maintainence and develop process. But not so easy keep freshness. `erdia` help to easily keep freshness and easily create beautiful document using [EJS](https://ejs.co) template engine.
+`erdia` automatic create DB entity specification, ER diagram. DB entity specification, ER diagram important document that are maintainence and develop process. But not so easy keep freshness. `erdia` help to easily keep freshness and easily create beautiful document using [ETA](https://eta.js.org/) template engine.
 
 Summary,
 
 1. ER diagram create using [mermaid.js](http://mermaid.js.org/) syntax.
-1. Every document create using EJS template engine
+1. Every document create using ETA template engine
 1. Only need TypeORM configuration
 
 Automate your database ER diagram drawing!
@@ -59,7 +59,7 @@ direction TB
 C[TypeORM Entity]-->|extract <br/>entity specification|B[erdia]
 end
 erdia-->|extract <br />specification|D
-D[EJS<br />template<br />engine]-->E[html]
+D[ETA<br />template<br />engine]-->E[html]
 D-->F[markdown]
 D-->G[pdf]
 D-->H[image]
@@ -111,7 +111,7 @@ erdia build -d [your dataSourcePath] -o db.pdf --format pdf
 
 ## Template
 
-`erdia` use EJS template for entity specification document and ER diagram. Template easily detach from erdia.
+`erdia` use ETA template for entity specification document and ER diagram. Template easily detach from erdia.
 
 ```bash
 npx erdia template

package-lock.json

@@ -80,7 +80,6 @@
     "@swc/helpers": "^0.5.1",
     "@swc/jest": "^0.2.26",
     "@tsconfig/node16": "^16.1.0",
-    "@types/ejs": "^3.1.2",
     "@types/inquirer": "^9.0.3",
     "@types/inquirer-autocomplete-prompt": "^3.0.0",
     "@types/jest": "^29.5.3",
@@ -133,7 +132,7 @@
     "dayjs": "^1.11.9",
     "deep-object-diff": "^1.1.9",
     "del": "^6.1.1",
-    "ejs": "^3.1.9",
+    "eta": "^3.1.0",
     "fast-safe-stringify": "^2.1.1",
     "find-up": "^5.0.0",
     "fuse.js": "^6.6.2",

package.json

@@ -1,6 +1,6 @@
 export const CE_OUTPUT_FORMAT = {
   HTML: 'html',
-  MARKDOWN: 'markdown',
+  MARKDOWN: 'md',
   PDF: 'pdf',
   IMAGE: 'image',
 } as const;

src/configs/const-enum/CE_OUTPUT_FORMAT.ts

@@ -1,18 +1,15 @@
 import { getTemplates } from '#template/loadTemplates';
 import consola from 'consola';
-import { compile } from 'ejs';
+import { Eta } from 'eta';
 import { isError } from 'my-easy-fp';
 
+const eta = new Eta({ views: 'erdia' });
+eta.resolvePath = (templatePath: string) => templatePath;
+eta.readFile = (templatePath: string) => getTemplates()[templatePath];
+
 export default async function evaluateTemplate<T extends object>(name: string, data: T) {
   try {
-    const templates = getTemplates();
-    const template = templates[name];
-
-    const renderer = compile(template, {
-      includer: (op, _pp) => ({ template: templates[op] }),
-    });
-
-    const rendered = renderer(data);
+    const rendered = eta.render(name, data);
     return rendered;
   } catch (caught) {
     const err = isError(caught, new Error('raise error from evaluateTemplate'));

src/template/evaluateTemplate.ts

@@ -1,6 +1,6 @@
 const documentToC = `<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
-<% versions.forEach((version) => { %>
-  <section class="entity-version-toc-section toc-<%= metadata.name %>-<%= version.version.replaceAll('.', '-') %> <% if (!version.latest) { -%>
+<% it.versions.forEach((version) => { %>
+  <section class="entity-version-toc-section toc-<%= it.metadata.name %>-<%= version.version.replaceAll('.', '-') %> <% if (!version.latest) { -%>
     hide
   <% } -%>">
     <h2 class="h6 pt-4 pb-3 mb-4 border-bottom"><%= version.version %></h2>

src/template/html/document-toc.ts

@@ -5,34 +5,34 @@ const htmlDocument = `<!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
 
 <head>
-  <% if (metadata.title != null) { %>
-  <title><%= metadata.title %></title>
+  <% if (it.metadata.title != null) { %>
+  <title><%= it.metadata.title %></title>
   <% } else { %>
-  <title><% metadata.name %> entity specification</title>
+  <title><%= it.metadata.name %> entity specification</title>
   <% } %>
   <meta charset="utf-8"> 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
-  <%- include('${CE_TEMPLATE_NAME.HTML_STYLE}', { versions, option, metadata }); %>
+  <%~ include('${CE_TEMPLATE_NAME.HTML_STYLE}', it); %>
 </head>
 
 <body class="bg-body-tertiary">
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#"><%= metadata.name %></a>
+      <a class="navbar-brand" href="#"><%= it.metadata.name %></a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarCollapse">
         <ul class="navbar-nav me-auto mb-2 mb-md-0">
-          <% if (option.components.includes('${CE_OUTPUT_COMPONENT.TABLE}')) { %>
+          <% if (it.option.components.includes('${CE_OUTPUT_COMPONENT.TABLE}')) { %>
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="/">Entity</a>
           </li>
           <% } %>
-          <% if (option.components.includes('${CE_OUTPUT_COMPONENT.ER}')) { %>
+          <% if (it.option.components.includes('${CE_OUTPUT_COMPONENT.ER}')) { %>
           <li class="nav-item">
-            <% if (option.components.includes('${CE_OUTPUT_COMPONENT.TABLE}')) { %>
+            <% if (it.option.components.includes('${CE_OUTPUT_COMPONENT.TABLE}')) { %>
             <a class="nav-link" href="/mermaid.html">ER Diagram</a>
             <% } else { %>
             <a class="nav-link" href="/">ER Diagram</a>
@@ -44,30 +44,30 @@ const htmlDocument = `<!DOCTYPE html>
     </div>
   </nav>
 
-  <%- include('${CE_TEMPLATE_NAME.HTML_DOCUMENT_TOC}', { versions, option, metadata }); %>
+  <%~ include('${CE_TEMPLATE_NAME.HTML_DOCUMENT_TOC}', it); %>
 
   <div class="bd-cheatsheet container-fluid bg-body">
     <section>
       <select id="entity-version-select" class="form-select form-select-lg mb-3" aria-label="Large select example">
-      <% versions.forEach((version) => { %>
+      <% it.versions.forEach((version) => { %>
         <option
-          value="<%= metadata.name %>-<%= version.version.replaceAll('.', '-') %>"
+          value="<%= it.metadata.name %>-<%= version.version.replaceAll('.', '-') %>"
           <% if (version.latest) { -%>
             <%= " selected" -%>
           <% } -%>
         >
-          <%= metadata.name %> <%= version.version %>
+          <%= it.metadata.name %> <%= version.version %>
         </option>
       <% }) %>
       </select>
     </section>
 
-  <% versions.forEach((version) => { %>
-    <section class="entity-version-content-section content-<%= metadata.name %>-<%= version.version.replaceAll('.', '-') %> <% if (!version.latest) { -%>
+  <% it.versions.forEach((version) => { %>
+    <section class="entity-version-content-section content-<%= it.metadata.name %>-<%= version.version.replaceAll('.', '-') %> <% if (!version.latest) { -%>
       hide
     <% } %>">
-      <h2><%= metadata.name %> <%= version.version %></h2>
-      <%- include('${CE_TEMPLATE_NAME.HTML_TABLE}', { version, option, metadata }); %>
+      <h2><%= it.metadata.name %> <%= version.version %></h2>
+      <%~ include('${CE_TEMPLATE_NAME.HTML_TABLE}', { version, option: it.option, metadata: it.metadata }); %>
     </section>
   <% }) %>
   </div>