Change to templates without Handlebars (#568)

package.json

@@ -50,11 +50,9 @@
     "typescript": "^4.6.3"
   },
   "scripts": {
-    "build:template": "handlebars \"src/formatter/templates/$TEMPLATE.hbs\" -f \"src/formatter/templates/$TEMPLATE.js\" --extension hbs --commonjs handlebars --known each --known if --known with --known paragraphClasses --known isChordLyricsPair --known isTag --known isComment --known shouldRenderLine --known hasChordContents --known lineHasContents --known lineClasses --known toUpperCase --known paragraphClasses",
-    "build:templates": "TEMPLATE=html_div_formatter yarn build:template && TEMPLATE=html_table_formatter yarn build:template",
     "build:suffix-normalize": "rm -rf src/normalize_mappings/suffix-normalize-mapping.ts && ts-node src/normalize_mappings/generate-suffix-normalize-mapping.ts",
     "build:pegjs": "peggy --plugin ts-pegjs -o src/parser/chord_pro_peg_parser.ts src/parser/chord_pro_grammar.pegjs",
-    "build:code-generate": "yarn build:suffix-normalize && yarn build:templates && yarn build:pegjs",
+    "build:code-generate": "yarn build:suffix-normalize && yarn build:pegjs",
     "build:sources": "parcel build",
     "build:browserify": "browserify lib/index.js --outfile lib/bundle.js --standalone ChordSheetJS",
     "build": "yarn build:code-generate && yarn build:sources && yarn build:browserify",
@@ -71,7 +69,6 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "handlebars": "^4.7.6",
     "lodash.get": "^4.4.2"
   }
 }

src/formatter/html_div_formatter.ts

@@ -1,11 +1,7 @@
-import Handlebars from 'handlebars';
-import './templates/html_div_formatter';
-import '../template_helpers';
 import HtmlFormatter from './html_formatter';
+import template from './templates/html_div_formatter';
 import { scopeCss } from '../utilities';
 
-const { html_div_formatter: template } = Handlebars.templates;
-
 const defaultCss = {
   '.chord:not(:last-child)': {
     paddingRight: '10px',

src/formatter/html_formatter.ts

@@ -10,16 +10,6 @@ class HtmlFormatter extends Formatter {
         song,
         configuration: this.configuration,
       },
-      {
-        allowedProtoProperties: {
-          bodyLines: true,
-          bodyParagraphs: true,
-          subtitle: true,
-          title: true,
-          value: true,
-          key: true,
-        },
-      },
     );
   }
 }

src/formatter/html_table_formatter.ts

@@ -1,11 +1,7 @@
-import Handlebars from 'handlebars';
-import './templates/html_table_formatter';
-import '../template_helpers';
 import HtmlFormatter from './html_formatter';
+import template from './templates/html_table_formatter';
 import { scopeCss } from '../utilities';
 
-const { html_table_formatter: template } = Handlebars.templates;
-
 /**
  * Basic CSS, in object style à la useStyles, to use with output generated by {@link }HtmlTableFormatter}
  * For a CSS string see {@link scopedCss}

src/formatter/templates/html_div_formatter.ts

@@ -0,0 +1,60 @@
+import { renderChord } from '../../helpers';
+
+import {
+  each, evaluate,
+  isChordLyricsPair,
+  isComment,
+  isEvaluatable,
+  isTag,
+  lineClasses,
+  lineHasContents,
+  paragraphClasses,
+  stripHTML, when,
+} from '../../template_helpers';
+
+export default (
+  {
+    configuration,
+    song,
+    renderBlankLines = false,
+    song: {
+      title,
+      subtitle,
+      bodyParagraphs,
+      metadata,
+    },
+  },
+): string => stripHTML(`
+  ${ when(title, () => `<h1>${ title }</h1>`) }
+  ${ when(subtitle, () => `<h2>${ subtitle }</h2>`) }
+  
+  <div class="chord-sheet">
+    ${ each(bodyParagraphs, (paragraph) => `
+      <div class="${ paragraphClasses(paragraph) }">
+        ${ each(paragraph.lines, (line) => `
+          ${ when(renderBlankLines || lineHasContents(line), () => `
+            <div class="${ lineClasses(line) }">
+              ${ each(line.items, (item) => `
+                ${ when(isChordLyricsPair(item), () => `
+                  <div class="column">
+                    <div class="chord">${ renderChord(item.chords, line.key, line.transposeKey, song) }</div>
+                    <div class="lyrics">${ item.lyrics }</div>
+                  </div>
+                `) }
+                
+                ${ when(isTag(item) && isComment(item), () => `<div class="comment">${ item.value }</div>`) }
+                
+                ${ when(isEvaluatable(item), () => `
+                  <div class="column">
+                    <div class="chord"></div>
+                    <div class="lyrics">${ evaluate(item, metadata, configuration) }</div>
+                  </div>
+                `) }
+              `) }
+            </div>
+          `) }
+        `) }
+      </div>
+    `) }
+  </div>
+`);

src/formatter/templates/html_table_formatter.ts

@@ -0,0 +1,78 @@
+import { hasChordContents, isEvaluatable } from '../../utilities';
+import { renderChord } from '../../helpers';
+
+import {
+  each,
+  evaluate,
+  hasTextContents,
+  isChordLyricsPair,
+  isComment,
+  isTag,
+  lineClasses,
+  lineHasContents,
+  paragraphClasses,
+  stripHTML,
+  when,
+} from '../../template_helpers';
+
+export default (
+  {
+    configuration,
+    song,
+    renderBlankLines = false,
+    song: {
+      title,
+      subtitle,
+      bodyParagraphs,
+      bodyLines,
+      metadata,
+    },
+  },
+): string => stripHTML(`
+  ${ when(title, () => `<h1>${ title}</h1>`) }
+  ${ when(subtitle, () => `<h2>${ subtitle}</h2>`) }
+
+  ${ when(bodyLines.length > 0, () => `
+    <div class="chord-sheet">
+      ${ each(bodyParagraphs, (paragraph) => `
+        <div class="${ paragraphClasses(paragraph)}">
+          ${ each(paragraph.lines, (line) => `
+            ${ when(renderBlankLines || lineHasContents(line), () => `
+              <table class="${ lineClasses(line)}">
+                ${ when(hasChordContents(line), () => `
+                  <tr>
+                    ${ each(line.items, (item) => `
+                      ${ when(isChordLyricsPair(item), () => `
+                        <td class="chord">${ 
+                          renderChord(item.chords, line.key, line.transposeKey, song)
+                        }</td>
+                      `)}
+                    `)}
+                  </tr>
+                `)}
+                
+                ${ when(hasTextContents(line), () => `
+                  <tr>
+                    ${ each(line.items, (item) => `
+                      ${ when(isChordLyricsPair(item), () => `
+                        <td class="lyrics">${ item.lyrics}</td>
+                      `)}
+                      
+                      ${ when(isTag(item) && isComment(item), () => `
+                        <td class="comment">${ item.value }</td>
+                      `)}
+                      
+                      ${ when(isEvaluatable(item), () => `
+                        <td class="lyrics">${ evaluate(item, metadata, configuration) }</td>
+                      `) }
+                    `)}
+                  </tr>
+                `)}
+              </table>
+            `)}
+          `)}
+        </div>
+      `)}
+    </div>
+  `)}
+`);