feat: added data-coral-count to count elements (#3055)

Co-authored-by: Vinh <vinh@vinh.tech>

src/core/client/count/injectJSONPCallback.ts

@@ -5,13 +5,21 @@ type GetCountFunction = (opts?: { reset?: boolean }) => void;
 /** Injects a global CoralCount callback into the window object to be used in JSONP */
 function injectJSONPCallback(getCount: GetCountFunction) {
   (window as any).CoralCount = {
-    setCount: (data: { ref: string; html: string }) => {
+    setCount: (data: { ref: string; html: string; count?: number }) => {
       // Find all the elements with ref.
       const elements = document.querySelectorAll(
         `${COUNT_SELECTOR}[data-coral-ref='${data.ref}']`
       );
       Array.prototype.forEach.call(elements, (element: HTMLElement) => {
         element.innerHTML = data.html;
+
+        // Because this involves a new field being added to the JSONP response,
+        // we check that the field is available and is a number before we add
+        // it.
+        // TODO: (wyattjoh) remove after 6.3.1
+        if (data.count !== undefined && typeof data.count === "number") {
+          element.dataset.coralCount = data.count.toString();
+        }
       });
     },
     getCount,

src/core/client/count/test/__snapshots__/basic.spec.ts.snap

@@ -241,6 +241,7 @@ exports[`Inject counts 1`] = `
   />
   <span
     class="coral-count"
+    data-coral-count="5"
     data-coral-ref="ZmFsc2U7aHR0cDovL2xvY2FsaG9zdDo4MDgwLw=="
     data-coral-url="http://localhost:8080/"
     data-notext="true"
@@ -259,6 +260,7 @@ exports[`Inject counts 1`] = `
   </span>
   <span
     class="coral-count"
+    data-coral-count="5"
     data-coral-ref="ZmFsc2U7aHR0cDovL2xvY2FsaG9zdDo4MDgwLw=="
     data-coral-url="http://localhost:8080/"
   >

src/core/client/count/test/basic.spec.ts

@@ -76,6 +76,7 @@ it("Inject counts", async () => {
     ref: "ZmFsc2U7aHR0cDovL2xvY2FsaG9zdDo4MDgwLw==",
     html:
       '<span class="coral-count-number">5</span> <span class="coral-count-text">Comments</span>',
+    count: 5,
   });
   expect(document.body).toMatchSnapshot();
 });

src/core/server/app/handlers/api/story/count.ts

@@ -83,6 +83,7 @@ export const countHandler = ({
       // Reference from the client that we'll just send back as it is.
       ref,
       html,
+      count,
     });
   } catch (err) {
     return next(err);