Keep the song content local to the renderer

The comment handler appended to a module level array, which the renderer had
to reset on every call. Directive handlers now return the content to render
instead; lit ignores the undefined results of handlers that only set headings.

diff --git a/chordpro-web.js b/chordpro-web.js
index 81f3492d9774c9d1bc479f78e1662b17a8c559fb..546eba4b73a8574b277aa066f570d05445722af0 100644 (file)
--- a/chordpro-web.js
+++ b/chordpro-web.js
@@ -4,25 +4,27 @@ import { html, render } from 'https://cdn.jsdelivr.net/gh/lit/dist@3.3.3/core/li
 const re_directive = /^\{(\w+)(?::\s*(.*?))?\s*\}$/;
 
 const el_song = document.getElementById('song');
-const song = [];
 
 // The chord span is emitted even when empty, so that lyrics before the first
 // chord of a line still end up in the lyrics row; see chordpro.css.
 const segment = (chord, text) => html`<span class="seg"><span class="chord">${chord}</span>${text}</span>`;
 
+// Handlers return the song content to render for the directive, if any
 const directive_handlers = {
     title: value => {
         document.getElementById('title').textContent = value;
         document.title = `${value} - ChordPro Web`;
     },
-    subtitle: value => document.getElementById('artist').textContent = value,
-    comment: value => song.push(html`<p class="comment">${value}</p>`),
+    subtitle: value => {
+        document.getElementById('artist').textContent = value;
+    },
+    comment: value => html`<p class="comment">${value}</p>`,
 };
 
 function renderChordpro(text) {
+    const song = [];
     let verseLines = [];
     let verseHasChords = false;
-    song.length = 0;
 
     const flushVerse = () => {
         if (verseLines.length === 0)
@@ -43,7 +45,7 @@ function renderChordpro(text) {
             const [, directive, value] = m;
             const handler = directive_handlers[directive];
             if (handler)
-                handler(value ?? '');
+                song.push(handler(value ?? ''));
             else
                 console.warn('unknown directive:', line);
         } else if (line === '') {