Updated comment_count helper and frontend script

refs https://github.com/TryGhost/Team/issues/1695

This updates the comment_count helper from a block to inline, and the
frontend script to replace the entire element with the comment count
text. This means that theme designers will have the most flexibility
as they can choose whether or not to wrap the text in an element, as
well as which element.

ghost/core/core/frontend/helpers/comment_count.js

@@ -1,25 +1,28 @@
 const {SafeString} = require('../services/handlebars');
 const {labs} = require('../services/proxy');
+const {html} = require('common-tags');
 
 function commentCount(options) {
-    return new SafeString(`
-       <span data-ghost-comment-count="${this.id}" style="display:none">
-           ${options.fn(this)}
-       </span>`
-    );
+    return new SafeString(html`
+        <script
+            data-ghost-comment-count="${this.id}"
+            data-ghost-comment-count-empty="${options.hash.empty}"
+            data-ghost-comment-count-singular="${options.hash.singular}"
+            data-ghost-comment-count-plural="${options.hash.plural}"
+        >
+        </script>
+    `);
 }
 
-module.exports = async function commentsLabsWrapper() {
+module.exports = function commentsLabsWrapper() {
     const self = this;
     const args = arguments;
 
     return labs.enabledHelper({
         flagKey: 'comments',
         flagName: 'Comments',
-        helperName: 'comments'
+        helperName: 'comment_count'
     }, () => {
         return commentCount.apply(self, args);
     });
 };
-
-module.exports.async = true;

ghost/core/core/frontend/src/comment-counts/js/comment-counts.js

@@ -27,8 +27,23 @@
         for (const [id, count] of Object.entries(countsMap)) {
             const countElems = document.querySelectorAll(`[data-ghost-comment-count="${id}"]`);
             countElems.forEach((e) => {
-                e.innerHTML = e.innerHTML.replace('#', count);
-                e.style.display = '';
+                let text = e.dataset.ghostCommentCountEmpty;
+                if (count === 1) {
+                    if (e.dataset.ghostCommentCountSingular) {
+                        text = `${count} ${e.dataset.ghostCommentCountSingular}`;
+                    } else {
+                        text = count;
+                    }
+                }
+                if (count > 1) {
+                    if (e.dataset.ghostCommentCountPlural) {
+                        text = `${count} ${e.dataset.ghostCommentCountPlural}`;
+                    } else {
+                        text = count;
+                    }
+                }
+                e.insertAdjacentText('afterend', text);
+                e.remove();
             });
         }
     };

ghost/core/package.json

@@ -127,6 +127,7 @@
     "bthreads": "0.5.1",
     "chalk": "4.1.2",
     "cheerio": "0.22.0",
+    "common-tags": "^1.8.2",
     "compression": "1.7.4",
     "connect-slashes": "1.4.0",
     "cookie-session": "2.0.0",
@@ -193,6 +194,7 @@
     "@playwright/test": "1.24.2",
     "@tryghost/express-test": "0.11.1",
     "@tryghost/webhook-mock-receiver": "0.1.1",
+    "@types/common-tags": "^1.8.1",
     "c8": "7.12.0",
     "cli-progress": "3.11.2",
     "coffeescript": "2.7.0",

ghost/core/test/unit/frontend/helpers/comment_count.test.js

@@ -5,8 +5,11 @@ const {mockManager} = require('../../../utils/e2e-framework');
 
 const commentCount = require('../../../../core/frontend/helpers/comment_count');
 const proxy = require('../../../../core/frontend/services/proxy');
+const {html} = require('common-tags');
 const {settingsCache} = proxy;
 
+const handlebars = require('../../../../core/frontend/services/theme-engine/engine').handlebars;
+
 describe('{{comment_count}} helper', function () {
     let keyStub;
 
@@ -16,8 +19,16 @@ describe('{{comment_count}} helper', function () {
             getFrontendKey: keyStub
         };
         proxy.init({dataService});
+        handlebars.registerHelper('comment_count', commentCount);
     });
 
+    function shouldCompileToExpected(templateString, hash, expected) {
+        const template = handlebars.compile(templateString);
+        const result = template(hash);
+
+        result.should.eql(expected);
+    }
+
     beforeEach(function () {
         mockManager.mockMail();
         mockManager.mockLabsEnabled('comments');
@@ -30,13 +41,19 @@ describe('{{comment_count}} helper', function () {
         configUtils.restore();
     });
 
-    it('returns a span with the post id', async function () {
-        const rendered = await commentCount.call({
-            id: 'post_id_123'
-        }, {
-            fn: sinon.stub().returns('')
-        });
-        should.exist(rendered);
-        rendered.string.should.containEql('<span data-ghost-comment-count="post_id_123"');
+    it('returns a script with the post id', async function () {
+        const templateString = `{{comment_count empty="No comments" singular="comment" plural="comments"}}`;
+
+        shouldCompileToExpected(templateString, {
+            id: 'post-id'
+        }, html`
+            <script
+                data-ghost-comment-count="post-id"
+                data-ghost-comment-count-empty="No comments"
+                data-ghost-comment-count-singular="comment"
+                data-ghost-comment-count-plural="comments"
+            >
+            </script>
+        `);
     });
 });

yarn.lock

@@ -2065,6 +2065,11 @@
     "@types/node" "*"
     "@types/responselike" "*"
 
+"@types/common-tags@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@types/common-tags/-/common-tags-1.8.1.tgz#a5a49ca5ebbb58e0f8947f3ec98950c8970a68a9"
+  integrity sha512-20R/mDpKSPWdJs5TOpz3e7zqbeCNuMCPhV7Yndk9KU2Rbij2r5W4RzwDPkzC+2lzUqXYu9rFzTktCBnDjHuNQg==
+
 "@types/connect@*":
   version "3.4.35"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
@@ -3568,7 +3573,7 @@ commander@^9.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.3.0.tgz#f619114a5a2d2054e0d9ff1b31d5ccf89255e26b"
   integrity sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==
 
-common-tags@1.8.2:
+common-tags@1.8.2, common-tags@^1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
   integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==