From: Martin Pitt <martin@piware.de>
Date: Wed, 23 Sep 2026 20:51:09 +0000 (+0200)
Subject: Keep the song content local to the renderer
X-Git-Url: https://piware.de/gitweb/?a=commitdiff_plain;h=61b68ebc87cb4b5edb1e36cfa0e05257d20dc1b8;p=chordpro-web.git

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 81f3492..546eba4 100644
--- 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 === '') {