clarity-js 0.8.42 → 0.8.44

package/src/clarity.ts

@@ -1,66 +1,66 @@
-import { Config, Module } from "@clarity-types/core";
-import { Constant } from "@clarity-types/data";
-import * as queue from "@src/queue";
-import * as core from "@src/core";
-import measure from "@src/core/measure";
-import * as task from "@src/core/task";
-import version from "@src/core/version";
-import * as data from "@src/data";
-import * as diagnostic from "@src/diagnostic";
-import * as interaction from "@src/interaction";
-import * as layout from "@src/layout";
-import * as performance from "@src/performance";
-import * as dynamic from "@src/core/dynamic";
-export { version };
-export { consent, consentv2, event, identify, set, upgrade, metadata, signal, maxMetric, dlog } from "@src/data";
-export { queue } from "@src/data/upload";
-export { register } from "@src/core/dynamic";
-export { schedule } from "@src/core/task";
-export { time } from "@src/core/time";
-export { hashText } from "@src/layout";
-export { measure };
-const modules: Module[] = [diagnostic, layout, interaction, performance, dynamic];
-
-export function start(config: Config = null): void {
-  // Check that browser supports required APIs and we do not attempt to start Clarity multiple times
-  if (core.check()) {
-    core.config(config);
-    core.start();
-    data.start();
-    modules.forEach(x => measure(x.start)());
-
-    // If it's an internal call to start, without explicit configuration,
-    // re-process any newly accumulated items in the queue
-    if (config === null) { queue.process(); }
-  }
-}
-
-// By default Clarity is asynchronous and will yield by looking for requestIdleCallback.
-// However, there can still be situations with single page apps where a user action can result
-// in the whole DOM being destroyed and reconstructed. While Clarity will perform favorably out of the box,
-// we do allow external clients to manually pause Clarity for that short burst of time and minimize
-// performance impact even further. For reference, we are talking single digit milliseconds optimization here, not seconds.
-export function pause(): void {
-  if (core.active()) {
-    data.event(Constant.Clarity, Constant.Pause);
-    task.pause();
-  }
-}
-
-// This is how external clients can get out of pause state, and resume Clarity to continue monitoring the page
-export function resume(): void {
-  if (core.active()) {
-    task.resume();
-    data.event(Constant.Clarity, Constant.Resume);
-  }
-}
-
-export function stop(): void {
-  if (core.active()) {
-    // Stop modules in the reverse order of their initialization and start queuing up items again
-    modules.slice().reverse().forEach(x => measure(x.stop)());
-    data.stop();
-    core.stop();
-    queue.setup();
-  }
+import { Config, Module } from "@clarity-types/core";
+import { Constant } from "@clarity-types/data";
+import * as queue from "@src/queue";
+import * as core from "@src/core";
+import measure from "@src/core/measure";
+import * as task from "@src/core/task";
+import version from "@src/core/version";
+import * as data from "@src/data";
+import * as diagnostic from "@src/diagnostic";
+import * as interaction from "@src/interaction";
+import * as layout from "@src/layout";
+import * as performance from "@src/performance";
+import * as dynamic from "@src/core/dynamic";
+export { version };
+export { consent, consentv2, event, identify, set, upgrade, metadata, signal, maxMetric, dlog } from "@src/data";
+export { queue } from "@src/data/upload";
+export { register } from "@src/core/dynamic";
+export { schedule } from "@src/core/task";
+export { time } from "@src/core/time";
+export { hashText } from "@src/layout";
+export { measure };
+const modules: Module[] = [diagnostic, layout, interaction, performance, dynamic];
+
+export function start(config: Config = null): void {
+  // Check that browser supports required APIs and we do not attempt to start Clarity multiple times
+  if (core.check()) {
+    core.config(config);
+    core.start();
+    data.start();
+    modules.forEach(x => measure(x.start)());
+
+    // If it's an internal call to start, without explicit configuration,
+    // re-process any newly accumulated items in the queue
+    if (config === null) { queue.process(); }
+  }
+}
+
+// By default Clarity is asynchronous and will yield by looking for requestIdleCallback.
+// However, there can still be situations with single page apps where a user action can result
+// in the whole DOM being destroyed and reconstructed. While Clarity will perform favorably out of the box,
+// we do allow external clients to manually pause Clarity for that short burst of time and minimize
+// performance impact even further. For reference, we are talking single digit milliseconds optimization here, not seconds.
+export function pause(): void {
+  if (core.active()) {
+    data.event(Constant.Clarity, Constant.Pause);
+    task.pause();
+  }
+}
+
+// This is how external clients can get out of pause state, and resume Clarity to continue monitoring the page
+export function resume(): void {
+  if (core.active()) {
+    task.resume();
+    data.event(Constant.Clarity, Constant.Resume);
+  }
+}
+
+export function stop(): void {
+  if (core.active()) {
+    // Stop modules in the reverse order of their initialization and start queuing up items again
+    modules.slice().reverse().forEach(x => measure(x.stop)());
+    data.stop();
+    core.stop();
+    queue.setup();
+  }
 }

package/src/core/api.ts

@@ -1,8 +1,8 @@
-import { Constant } from "@clarity-types/core";
-
-export default function api(method: string): string {
-    // Zone.js, a popular package for Angular, overrides native browser APIs which can lead to inconsistent state for single page applications.
-    // Example issue: https://github.com/angular/angular/issues/31712
-    // As a work around, we ensuring Clarity access APIs outside of Zone (and use native implementation instead)
-    return window[Constant.Zone] && Constant.Symbol in window[Constant.Zone] ? window[Constant.Zone][Constant.Symbol](method) : method;
-}
+import { Constant } from "@clarity-types/core";
+
+export default function api(method: string): string {
+    // Zone.js, a popular package for Angular, overrides native browser APIs which can lead to inconsistent state for single page applications.
+    // Example issue: https://github.com/angular/angular/issues/31712
+    // As a work around, we ensuring Clarity access APIs outside of Zone (and use native implementation instead)
+    return window[Constant.Zone] && Constant.Symbol in window[Constant.Zone] ? window[Constant.Zone][Constant.Symbol](method) : method;
+}

package/src/core/config.ts

@@ -1,29 +1,29 @@
-import { Config, Time } from "@clarity-types/core";
-
-let config: Config = {
-    projectId: null,
-    delay: 1 * Time.Second,
-    lean: false,
-    lite: false,
-    track: true,
-    content: true,
-    drop: [],
-    mask: [],
-    unmask: [],
-    regions: [],
-    cookies: [],
-    fraud: true,
-    checksum: [],
-    report: null,
-    upload: null,
-    fallback: null,
-    upgrade: null,
-    action: null,
-    dob: null,
-    delayDom: false,
-    throttleDom: true,
-    conversions: false,
-    includeSubdomains: true,
-};
-
-export default config;
+import { Config, Time } from "@clarity-types/core";
+
+let config: Config = {
+    projectId: null,
+    delay: 1 * Time.Second,
+    lean: false,
+    lite: false,
+    track: true,
+    content: true,
+    drop: [],
+    mask: [],
+    unmask: [],
+    regions: [],
+    cookies: [],
+    fraud: true,
+    checksum: [],
+    report: null,
+    upload: null,
+    fallback: null,
+    upgrade: null,
+    action: null,
+    dob: null,
+    delayDom: false,
+    throttleDom: true,
+    conversions: false,
+    includeSubdomains: true,
+};
+
+export default config;

package/src/core/copy.ts

@@ -1,3 +1,3 @@
-export default function<T>(input: T): T {
-    return JSON.parse(JSON.stringify(input));
-}
+export default function<T>(input: T): T {
+    return JSON.parse(JSON.stringify(input));
+}

package/src/core/dynamic.ts

@@ -1,5 +1,7 @@
 import { Constant } from "@clarity-types/layout";
+import { Constant as DataConstant } from "@clarity-types/data";
 import * as baseline from "@src/data/baseline";
+import { report } from "@src/core/report";
 
 let stopCallbacks: (() => void)[] = [];
 let active = false;
@@ -37,19 +39,23 @@ export function event(signal: string): void {
     return;
   }
 
-  load(parts[0]);
-
-  if (m) {
-    modules.add(m);
-    baseline.dynamic(modules);
-  }
+  load(parts[0], m);
 }
 
-function load(url: string): void {
+function load(url: string, mid: number | null): void {
   try {
     const script = document.createElement("script");
     script.src = url;
     script.async = true;
+    script.onload = () => {
+      if (mid) {
+        modules.add(mid);
+        baseline.dynamic(modules);
+      }
+    };
+    script.onerror = () => {
+      report(new Error(`${DataConstant.Module}: ${url}`));
+    };
     document.head.appendChild(script);
   } catch (error) {
     // Do nothing

package/src/core/event.ts

@@ -1,53 +1,53 @@
-import { BrowserEvent, Constant } from "@clarity-types/core";
-import api from "./api";
-import measure from "./measure";
-
-let bindings: Map<EventTarget, BrowserEvent[]> = new Map();
-
-export function bind(target: EventTarget, event: string, listener: EventListener, capture: boolean = false, passive: boolean = true): void {
-  listener = measure(listener) as EventListener;
-  // Wrapping following lines inside try / catch to cover edge cases where we might try to access an inaccessible element.
-  // E.g. Iframe may start off as same-origin but later turn into cross-origin, and the following lines will throw an exception.
-  try {
-    target[api(Constant.AddEventListener)](event, listener, { capture, passive });
-    if (!has(target)) {
-      bindings.set(target, []);
-    }
-
-    bindings.get(target).push({ event, listener, options: { capture, passive } });
-  } catch {
-    /* do nothing */
-  }
-}
-
-export function reset(): void {
-  // Walk through existing list of bindings and remove them all
-  bindings.forEach((bindingsPerTarget: BrowserEvent[], target: EventTarget) => {
-    resetByTarget(bindingsPerTarget, target);
-  });
-
-  bindings = new Map();
-}
-
-export function unbind(target: EventTarget) {
-  if (!has(target)) {
-    return;
-  }
-  resetByTarget(bindings.get(target), target);
-}
-
-export function has(target: EventTarget): boolean {
-  return bindings.has(target);
-}
-
-function resetByTarget(bindingsPerTarget: BrowserEvent[], target: EventTarget): void {
-  bindingsPerTarget.forEach((binding) => {
-    // Wrapping inside try / catch to avoid situations where the element may be destroyed before we get a chance to unbind
-    try {
-      target[api(Constant.RemoveEventListener)](binding.event, binding.listener, { capture: binding.options.capture, passive: binding.options.passive });
-    } catch {
-      /* do nothing */
-    }
-  });
-  bindings.delete(target);
-}
+import { BrowserEvent, Constant } from "@clarity-types/core";
+import api from "./api";
+import measure from "./measure";
+
+let bindings: Map<EventTarget, BrowserEvent[]> = new Map();
+
+export function bind(target: EventTarget, event: string, listener: EventListener, capture: boolean = false, passive: boolean = true): void {
+  listener = measure(listener) as EventListener;
+  // Wrapping following lines inside try / catch to cover edge cases where we might try to access an inaccessible element.
+  // E.g. Iframe may start off as same-origin but later turn into cross-origin, and the following lines will throw an exception.
+  try {
+    target[api(Constant.AddEventListener)](event, listener, { capture, passive });
+    if (!has(target)) {
+      bindings.set(target, []);
+    }
+
+    bindings.get(target).push({ event, listener, options: { capture, passive } });
+  } catch {
+    /* do nothing */
+  }
+}
+
+export function reset(): void {
+  // Walk through existing list of bindings and remove them all
+  bindings.forEach((bindingsPerTarget: BrowserEvent[], target: EventTarget) => {
+    resetByTarget(bindingsPerTarget, target);
+  });
+
+  bindings = new Map();
+}
+
+export function unbind(target: EventTarget) {
+  if (!has(target)) {
+    return;
+  }
+  resetByTarget(bindings.get(target), target);
+}
+
+export function has(target: EventTarget): boolean {
+  return bindings.has(target);
+}
+
+function resetByTarget(bindingsPerTarget: BrowserEvent[], target: EventTarget): void {
+  bindingsPerTarget.forEach((binding) => {
+    // Wrapping inside try / catch to avoid situations where the element may be destroyed before we get a chance to unbind
+    try {
+      target[api(Constant.RemoveEventListener)](binding.event, binding.listener, { capture: binding.options.capture, passive: binding.options.passive });
+    } catch {
+      /* do nothing */
+    }
+  });
+  bindings.delete(target);
+}

package/src/core/hash.ts

@@ -1,19 +1,19 @@
-// tslint:disable: no-bitwise
-export default function(input: string, precision: number = null): string {
-    // Code inspired from C# GetHashCode: https://github.com/Microsoft/referencesource/blob/master/mscorlib/system/string.cs
-    let hash = 0;
-    let hashOne = 5381;
-    let hashTwo = hashOne;
-    for (let i = 0; i < input.length; i += 2) {
-        let charOne = input.charCodeAt(i);
-        hashOne = ((hashOne << 5) + hashOne) ^ charOne;
-        if (i + 1 < input.length) {
-            let charTwo = input.charCodeAt(i + 1);
-            hashTwo = ((hashTwo << 5) + hashTwo) ^ charTwo;
-        }
-    }
-    // Replace the magic number from C# implementation (1566083941) with a smaller prime number (11579)
-    // This ensures we don't hit integer overflow and prevent collisions
-    hash = Math.abs(hashOne + (hashTwo * 11579));
-    return (precision ? hash % Math.pow(2, precision) : hash).toString(36);
-}
+// tslint:disable: no-bitwise
+export default function(input: string, precision: number = null): string {
+    // Code inspired from C# GetHashCode: https://github.com/Microsoft/referencesource/blob/master/mscorlib/system/string.cs
+    let hash = 0;
+    let hashOne = 5381;
+    let hashTwo = hashOne;
+    for (let i = 0; i < input.length; i += 2) {
+        let charOne = input.charCodeAt(i);
+        hashOne = ((hashOne << 5) + hashOne) ^ charOne;
+        if (i + 1 < input.length) {
+            let charTwo = input.charCodeAt(i + 1);
+            hashTwo = ((hashTwo << 5) + hashTwo) ^ charTwo;
+        }
+    }
+    // Replace the magic number from C# implementation (1566083941) with a smaller prime number (11579)
+    // This ensures we don't hit integer overflow and prevent collisions
+    hash = Math.abs(hashOne + (hashTwo * 11579));
+    return (precision ? hash % Math.pow(2, precision) : hash).toString(36);
+}

package/src/core/history.ts

@@ -1,71 +1,71 @@
-import { BooleanFlag, Code, Constant, Metric, Setting, Severity } from "@clarity-types/data";
-import * as clarity from "@src/clarity";
-import * as core from "@src/core"
-import { bind } from "@src/core/event";
-import * as internal from "@src/diagnostic/internal";
-import * as metric from "@src/data/metric";
-
-let pushState = null;
-let replaceState = null;
-let url = null;
-let count = 0;
-
-export function start(): void {
-    url = getCurrentUrl();
-    count = 0;
-    bind(window, "popstate", compute);
-
-    // Add a proxy to history.pushState function
-    if (pushState === null) { 
-        pushState = history.pushState; 
-        history.pushState = function(): void {
-            pushState.apply(this, arguments);
-            if (core.active() && check()) {
-                compute();
-            }
-        };
-    }
-
-    // Add a proxy to history.replaceState function
-    if (replaceState === null) 
-    { 
-        replaceState = history.replaceState; 
-        history.replaceState = function(): void {
-            replaceState.apply(this, arguments);
-            if (core.active() && check()) {
-                compute();
-            }
-        };
-    }
-}
-
-function check(): boolean {
-    if (count++ > Setting.CallStackDepth) {
-        internal.log(Code.CallStackDepth, Severity.Info);
-        return false;
-    }
-    return true;
-}
-
-function compute(): void {
-    count = 0; // Reset the counter
-    if (url !== getCurrentUrl()) {
-        // If the url changed, start tracking it as a new page
-        clarity.stop();
-        window.setTimeout(restart, Setting.RestartDelay);
-    }
-}
-
-function restart(): void {
-    clarity.start();
-    metric.max(Metric.SinglePage, BooleanFlag.True);
-}
-
-function getCurrentUrl(): string {
-    return location.href ? location.href.replace(location.hash, Constant.Empty) : location.href;
-}
-
-export function stop(): void {
-    url = null;
-    count = 0;
-}
+import { BooleanFlag, Code, Constant, Metric, Setting, Severity } from "@clarity-types/data";
+import * as clarity from "@src/clarity";
+import * as core from "@src/core"
+import { bind } from "@src/core/event";
+import * as internal from "@src/diagnostic/internal";
+import * as metric from "@src/data/metric";
+
+let pushState = null;
+let replaceState = null;
+let url = null;
+let count = 0;
+
+export function start(): void {
+    url = getCurrentUrl();
+    count = 0;
+    bind(window, "popstate", compute);
+
+    // Add a proxy to history.pushState function
+    if (pushState === null) { 
+        pushState = history.pushState; 
+        history.pushState = function(): void {
+            pushState.apply(this, arguments);
+            if (core.active() && check()) {
+                compute();
+            }
+        };
+    }
+
+    // Add a proxy to history.replaceState function
+    if (replaceState === null) 
+    { 
+        replaceState = history.replaceState; 
+        history.replaceState = function(): void {
+            replaceState.apply(this, arguments);
+            if (core.active() && check()) {
+                compute();
+            }
+        };
+    }
+}
+
+function check(): boolean {
+    if (count++ > Setting.CallStackDepth) {
+        internal.log(Code.CallStackDepth, Severity.Info);
+        return false;
+    }
+    return true;
+}
+
+function compute(): void {
+    count = 0; // Reset the counter
+    if (url !== getCurrentUrl()) {
+        // If the url changed, start tracking it as a new page
+        clarity.stop();
+        window.setTimeout(restart, Setting.RestartDelay);
+    }
+}
+
+function restart(): void {
+    clarity.start();
+    metric.max(Metric.SinglePage, BooleanFlag.True);
+}
+
+function getCurrentUrl(): string {
+    return location.href ? location.href.replace(location.hash, Constant.Empty) : location.href;
+}
+
+export function stop(): void {
+    url = null;
+    count = 0;
+}