[CORL-181] Comment Count Injection (#2581)

* feat: inject comment counts

* fix: tests

* feat: integrate stream embed with coral counts

* chore: refactor constants

* test: test for count bundle

* test: test live comment count integration with stream embed

* feat: use defer

* fix: snapshot

* feat: auto add count.js in when calling Coral.createStreamEmbed

* fix: tests

* fix: rm duplicate test

* chore: remove unuse file

src/core/client/framework/constants.ts

@@ -0,0 +1,12 @@
+/**
+ * COUNT_SELECTOR is a css selector used to identify elements that
+ * will be replaced by the story count.
+ */
+export const COUNT_SELECTOR = ".coral-count";
+
+/**
+ * ORIGIN_FALLBACK_ID can be attached to any <script /> tag as an
+ * id to allow the `count.js` script to find its origin when
+ * `document.currentScript` is not available (for legacy browsers).
+ */
+export const ORIGIN_FALLBACK_ID = "coral-origin";

src/core/client/framework/helpers/detectCountScript.ts

@@ -0,0 +1,7 @@
+function detectCountScript() {
+  // If CoralCount JSONP callback has been defined, then the
+  // count script has already run.
+  return (window as any).CoralCount !== undefined;
+}
+
+export default detectCountScript;

src/core/client/framework/helpers/index.ts

@@ -10,3 +10,5 @@ export {
 export { default as getParamsFromHash } from "./getParamsFromHash";
 export { default as clearHash } from "./clearHash";
 export { default as roleIsAtLeast } from "./roleIsAtLeast";
+export { default as resolveStoryURL } from "./resolveStoryURL";
+export { default as detectCountScript } from "./detectCountScript";

src/core/client/framework/helpers/resolveStoryURL.ts

@@ -0,0 +1,19 @@
+import { getLocationOrigin } from "coral-framework/utils";
+
+function resolveStoryURL() {
+  const canonical = document.querySelector(
+    'link[rel="canonical"]'
+  ) as HTMLLinkElement;
+  if (canonical) {
+    return canonical.href;
+  }
+
+  // tslint:disable-next-line:no-console
+  console.warn(
+    "This page does not include a canonical link tag. Coral has inferred this story_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages."
+  );
+
+  return getLocationOrigin() + window.location.pathname;
+}
+
+export default resolveStoryURL;

src/core/client/framework/utils/getLocationOrigin.ts

@@ -0,0 +1,5 @@
+export default function getLocationOrigin() {
+  return (
+    location.origin || `${window.location.protocol}//${window.location.host}`
+  );
+}

src/core/client/framework/utils/index.ts

@@ -3,3 +3,5 @@ export { default as parseURL } from "./parseURL";
 export { default as modifyQuery } from "./modifyQuery";
 export { default as areWeInIframe } from "./areWeInIframe";
 export { default as parseHashQuery } from "./parseHashQuery";
+export { default as getLocationOrigin } from "./getLocationOrigin";
+export { default as jsonp } from "./jsonp";

src/core/client/framework/utils/jsonp.ts

@@ -0,0 +1,29 @@
+/**
+ * Initiate a jsonp request.
+ * @argument endpoint  jsonp endpoint
+ * @argument callback  name of global callback to receive response
+ * @argument args      args to send along the jsonp request.
+ */
+function jsonp(
+  endpoint: string,
+  callback: string,
+  args: Record<string, string | number | null | undefined>
+) {
+  const script = document.createElement("script");
+  script.src = `${endpoint}?callback=${callback}`;
+  Object.keys(args).forEach(key => {
+    let val = "";
+    if (args[key] === undefined) {
+      return;
+    }
+    if (typeof args[key] === "string") {
+      val = args[key] as string;
+    } else {
+      val = JSON.stringify(args[key]);
+    }
+    script.src += `&${key}=${encodeURIComponent(val)}`;
+  });
+  document.body.appendChild(script);
+}
+
+export default jsonp;