clarity-js 0.8.5 → 0.8.6-beta

package/src/core/config.ts

@@ -1,32 +1,33 @@
-import { Config, Time } from "@clarity-types/core";
-
-let config: Config = {
-    projectId: null,
-    delay: 1 * Time.Second,
-    lean: 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,
-    throttleMutations: false,
-    dropMutations: false,
-    criticalMs: 200,
-    discard: [],
-};
-
-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,
+    throttleMutations: false,
+    dropMutations: false,
+    criticalMs: 200,
+    discard: [],
+};
+
+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/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,73 +1,73 @@
-import { BooleanFlag, Code, Constant, Metric, Setting, Severity } from "@clarity-types/data";
-import { FunctionNames } from "@clarity-types/performance";
-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 {
-    compute.dn = FunctionNames.HistoryCompute;
-    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 { FunctionNames } from "@clarity-types/performance";
+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 {
+    compute.dn = FunctionNames.HistoryCompute;
+    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;
+}

package/src/core/index.ts

@@ -1,83 +1,83 @@
-import { Config } from "@clarity-types/core";
-import { Constant } from "@clarity-types/data";
-import { FunctionNames } from "@clarity-types/performance";
-import configuration from "@src/core/config";
-import * as event from "@src/core/event";
-import * as history from "@src/core/history";
-import * as report from "@src/core/report";
-import * as task from "@src/core/task";
-import * as time from "@src/core/time";
-import * as clarity from "@src/clarity";
-import * as custom from "@src/data/custom";
-
-let status = false;
-
-export function start(): void {
-    status = true;
-    time.start();
-    task.reset();
-    event.reset();
-    report.reset();
-    history.start();
-}
-
-export function stop(): void {
-    history.stop();
-    report.reset();
-    event.reset();
-    task.reset();
-    time.stop();
-    status = false;
-}
-
-export function active(): boolean {
-    return status;
-}
-
-export function check(): boolean {
-    try {
-        let globalPrivacyControlSet = navigator && "globalPrivacyControl" in navigator && navigator['globalPrivacyControl'] == true;
-        return status === false &&
-            typeof Promise !== "undefined" &&
-            window["MutationObserver"] &&
-            document["createTreeWalker"] &&
-            "now" in Date &&
-            "now" in performance &&
-            typeof WeakMap !== "undefined" &&
-            !globalPrivacyControlSet
-    } catch (ex) {
-        return false;
-    }
-}
-
-export function config(override: Config): boolean {
-    // Process custom configuration overrides, if available
-    if (override === null || status) { return false; }
-    for (let key in override) {
-        if (key in configuration) { configuration[key] = override[key]; }
-    }
-    return true;
-}
-
-// Suspend ends the current Clarity instance after a configured timeout period
-// The way it differs from the "end" call is that it starts listening to
-// user interaction events as soon as it terminates existing clarity instance.
-// On the next interaction, it automatically starts another instance under a different page id
-// E.g. if configured timeout is 10m, and user stays inactive for an hour.
-// In this case, we will suspend clarity after 10m of inactivity and after another 50m when user interacts again
-// Clarity will restart and start another instance seamlessly. Effectively not missing any active time, but also
-// not holding the session during inactive time periods.
-export function suspend(): void {
-    if (status) {
-        custom.event(Constant.Clarity, Constant.Suspend);
-        clarity.stop();
-        ["mousemove", "touchstart"].forEach(x => event.bind(document, x, restart));
-        ["resize", "scroll", "pageshow"].forEach(x => event.bind(window, x, restart));
-    }
-}
-
-function restart(): void {
-    restart.dn = FunctionNames.Restart;
-    clarity.start();
-    custom.event(Constant.Clarity, Constant.Restart);
-}
+import { Config } from "@clarity-types/core";
+import { Constant } from "@clarity-types/data";
+import { FunctionNames } from "@clarity-types/performance";
+import configuration from "@src/core/config";
+import * as event from "@src/core/event";
+import * as history from "@src/core/history";
+import * as report from "@src/core/report";
+import * as task from "@src/core/task";
+import * as time from "@src/core/time";
+import * as clarity from "@src/clarity";
+import * as custom from "@src/data/custom";
+
+let status = false;
+
+export function start(): void {
+    status = true;
+    time.start();
+    task.reset();
+    event.reset();
+    report.reset();
+    history.start();
+}
+
+export function stop(): void {
+    history.stop();
+    report.reset();
+    event.reset();
+    task.reset();
+    time.stop();
+    status = false;
+}
+
+export function active(): boolean {
+    return status;
+}
+
+export function check(): boolean {
+    try {
+        let globalPrivacyControlSet = navigator && "globalPrivacyControl" in navigator && navigator['globalPrivacyControl'] == true;
+        return status === false &&
+            typeof Promise !== "undefined" &&
+            window["MutationObserver"] &&
+            document["createTreeWalker"] &&
+            "now" in Date &&
+            "now" in performance &&
+            typeof WeakMap !== "undefined" &&
+            !globalPrivacyControlSet
+    } catch (ex) {
+        return false;
+    }
+}
+
+export function config(override: Config): boolean {
+    // Process custom configuration overrides, if available
+    if (override === null || status) { return false; }
+    for (let key in override) {
+        if (key in configuration) { configuration[key] = override[key]; }
+    }
+    return true;
+}
+
+// Suspend ends the current Clarity instance after a configured timeout period
+// The way it differs from the "end" call is that it starts listening to
+// user interaction events as soon as it terminates existing clarity instance.
+// On the next interaction, it automatically starts another instance under a different page id
+// E.g. if configured timeout is 10m, and user stays inactive for an hour.
+// In this case, we will suspend clarity after 10m of inactivity and after another 50m when user interacts again
+// Clarity will restart and start another instance seamlessly. Effectively not missing any active time, but also
+// not holding the session during inactive time periods.
+export function suspend(): void {
+    if (status) {
+        custom.event(Constant.Clarity, Constant.Suspend);
+        clarity.stop();
+        ["mousemove", "touchstart"].forEach(x => event.bind(document, x, restart));
+        ["resize", "scroll", "pageshow"].forEach(x => event.bind(window, x, restart));
+    }
+}
+
+function restart(): void {
+    restart.dn = FunctionNames.Restart;
+    clarity.start();
+    custom.event(Constant.Clarity, Constant.Restart);
+}

package/src/core/measure.ts

@@ -1,19 +1,19 @@
-import { Code, Metric, Setting, Severity } from "@clarity-types/data";
-import { report } from "@src/core/report";
-import * as metric from "@src/data/metric";
-import * as internal from "@src/diagnostic/internal";
-
-// tslint:disable-next-line: ban-types
-export default function (method: Function): Function {
-    return function (): void {
-        let start = performance.now();
-        try { method.apply(this, arguments); } catch (ex) { throw report(ex); }
-        let duration = performance.now() - start;
-        metric.sum(Metric.TotalCost, duration);
-        if (duration > Setting.LongTask) {
-            metric.count(Metric.LongTaskCount);
-            metric.max(Metric.ThreadBlockedTime, duration);
-            internal.log(Code.FunctionExecutionTime, Severity.Info, `${method.dn || method.name}-${duration}`);
-        }
-    };
-}
+import { Code, Metric, Setting, Severity } from "@clarity-types/data";
+import { report } from "@src/core/report";
+import * as metric from "@src/data/metric";
+import * as internal from "@src/diagnostic/internal";
+
+// tslint:disable-next-line: ban-types
+export default function (method: Function): Function {
+    return function (): void {
+        let start = performance.now();
+        try { method.apply(this, arguments); } catch (ex) { throw report(ex); }
+        let duration = performance.now() - start;
+        metric.sum(Metric.TotalCost, duration);
+        if (duration > Setting.LongTask) {
+            metric.count(Metric.LongTaskCount);
+            metric.max(Metric.ThreadBlockedTime, duration);
+            internal.log(Code.FunctionExecutionTime, Severity.Info, `${method.dn || method.name}-${duration}`);
+        }
+    };
+}

package/src/core/report.ts

@@ -1,28 +1,28 @@
-import { Report } from "@clarity-types/core";
-import config from "@src/core/config";
-import { data } from "@src/data/envelope";
-
-let history: string[];
-
-export function reset(): void {
-    history = [];
-}
-
-export function report(e: Error): Error {
-    // Do not report the same message twice for the same page
-    if (history && history.indexOf(e.message) === -1) {
-        const url = config.report;
-        if (url && url.length > 0) {
-            let payload: Report = {v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum};
-            if (e.message) { payload.m = e.message; }
-            if (e.stack) { payload.e = e.stack; }
-            // Using POST request instead of a GET request (img-src) to not violate existing CSP rules
-            // Since, Clarity already uses XHR to upload data, we stick with similar POST mechanism for reporting too
-            let xhr = new XMLHttpRequest();
-            xhr.open("POST", url, true);
-            xhr.send(JSON.stringify(payload));
-            history.push(e.message);
-        }
-    }
-    return e;
-}
+import { Report } from "@clarity-types/core";
+import config from "@src/core/config";
+import { data } from "@src/data/envelope";
+
+let history: string[];
+
+export function reset(): void {
+    history = [];
+}
+
+export function report(e: Error): Error {
+    // Do not report the same message twice for the same page
+    if (history && history.indexOf(e.message) === -1) {
+        const url = config.report;
+        if (url && url.length > 0) {
+            let payload: Report = {v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum};
+            if (e.message) { payload.m = e.message; }
+            if (e.stack) { payload.e = e.stack; }
+            // Using POST request instead of a GET request (img-src) to not violate existing CSP rules
+            // Since, Clarity already uses XHR to upload data, we stick with similar POST mechanism for reporting too
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", url, true);
+            xhr.send(JSON.stringify(payload));
+            history.push(e.message);
+        }
+    }
+    return e;
+}