clarity-js 0.8.11 → 0.8.13-beta

package/src/performance/observer.ts

@@ -1,4 +1,4 @@
-import { Code, Constant, Dimension, Metric, PerformanceEventTiming, Severity } from "@clarity-types/data";
+import { Code, Constant, Dimension, Metric, Severity, PerformanceEventTiming } from "@clarity-types/data";
 import { FunctionNames } from "@clarity-types/performance";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
@@ -7,40 +7,27 @@ import { setTimeout } from "@src/core/timeout";
 import * as dimension from "@src/data/dimension";
 import * as metric from "@src/data/metric";
 import * as internal from "@src/diagnostic/internal";
-import * as interaction from "@src/performance/interaction";
 import * as navigation from "@src/performance/navigation";
+import * as interaction from "@src/performance/interaction";
 
 let observer: PerformanceObserver;
-const types: string[] = [
-    Constant.Navigation,
-    Constant.Resource,
-    Constant.LongTask,
-    Constant.FID,
-    Constant.CLS,
-    Constant.LCP,
-    Constant.PerformanceEventTiming,
-];
+const types: string[] = [Constant.Navigation, Constant.Resource, Constant.LongTask, Constant.FID, Constant.CLS, Constant.LCP, Constant.PerformanceEventTiming];
 
 export function start(): void {
     // Capture connection properties, if available
     if (navigator && "connection" in navigator) {
-        // biome-ignore lint/complexity/useLiteralKeys: connection isn't on every browser, so effectiveType gives unncessary typescript error
-        dimension.log(Dimension.ConnectionType, navigator.connection["effectiveType"]);
+        dimension.log(Dimension.ConnectionType, navigator["connection"]["effectiveType"]);
     }
 
     // Check the browser support performance observer as a pre-requisite for any performance measurement
-    if (window.PerformanceObserver && PerformanceObserver.supportedEntryTypes) {
+    if (window["PerformanceObserver"] && PerformanceObserver.supportedEntryTypes) {
         // Start monitoring performance data after page has finished loading.
         // If the document.readyState is not yet complete, we intentionally call observe using a setTimeout.
         // This allows us to capture loadEventEnd on navigation timeline.
         if (document.readyState !== "complete") {
             bind(window, "load", setTimeout.bind(this, observe, 0));
-        } else {
-            observe();
-        }
-    } else {
-        internal.log(Code.PerformanceObserver, Severity.Info);
-    }
+        } else { observe(); }
+    } else { internal.log(Code.PerformanceObserver, Severity.Info); }
 }
 
 function observe(): void {
@@ -48,27 +35,21 @@ function observe(): void {
     // Some browsers will throw an error for unsupported entryType, e.g. "layout-shift"
     // In those cases, we log it as a warning and continue with rest of the Clarity processing
     try {
-        if (observer) {
-            observer.disconnect();
-        }
+        if (observer) { observer.disconnect(); }
         observer = new PerformanceObserver(measure(handle) as PerformanceObserverCallback);
         // Reference: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe
         // "buffered" flag indicates whether buffered entries should be queued into the observer's buffer.
         // It must only be used only with the "type" option, and cannot be used with entryTypes.
         // This is why we need to individually "observe" each supported type
-        for (const x of types) {
+        for (let x of types) {
             if (PerformanceObserver.supportedEntryTypes.indexOf(x) >= 0) {
                 // Initialize CLS with a value of zero. It's possible (and recommended) for sites to not have any cumulative layout shift.
                 // In those cases, we want to still initialize the metric in Clarity
-                if (x === Constant.CLS) {
-                    metric.sum(Metric.CumulativeLayoutShift, 0);
-                }
-                observer.observe({ type: x, buffered: true });
+                if (x === Constant.CLS) { metric.sum(Metric.CumulativeLayoutShift, 0); }
+                observer.observe({type: x, buffered: true});
             }
         }
-    } catch {
-        internal.log(Code.PerformanceObserver, Severity.Warning);
-    }
+    } catch { internal.log(Code.PerformanceObserver, Severity.Warning); }
 }
 
 function handle(entries: PerformanceObserverEntryList): void {
@@ -77,65 +58,51 @@ function handle(entries: PerformanceObserverEntryList): void {
 }
 
 function process(entries: PerformanceEntryList): void {
-    const visible = "visibilityState" in document ? document.visibilityState === "visible" : true;
+    let visible = "visibilityState" in document ? document.visibilityState === "visible" : true;
     for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i];
+        let entry = entries[i];
         switch (entry.entryType) {
             case Constant.Navigation:
                 navigation.compute(entry as PerformanceNavigationTiming);
                 break;
-            case Constant.Resource: {
-                const name = entry.name;
+            case Constant.Resource:
+                let name = entry.name;
                 dimension.log(Dimension.NetworkHosts, host(name));
-                if (name === config.upload || name === config.fallback) {
-                    metric.max(Metric.UploadTime, entry.duration);
-                }
+                if (name === config.upload || name === config.fallback) { metric.max(Metric.UploadTime, entry.duration); }
                 break;
-            }
             case Constant.LongTask:
                 metric.count(Metric.LongTaskCount);
                 break;
             case Constant.FID:
-                // biome-ignore lint/suspicious/noExplicitAny: not all browsers support processingstart
-                if (visible && (entry as any).processingStart) {
-                    // biome-ignore lint/suspicious/noExplicitAny: not all browsers support processingstart
-                    metric.max(Metric.FirstInputDelay, (entry as any).processingStart - entry.startTime);
-                }
+                if (visible) { metric.max(Metric.FirstInputDelay, entry["processingStart"] - entry.startTime); }
                 break;
             case Constant.PerformanceEventTiming:
-                if (visible && "PerformanceEventTiming" in window && "interactionId" in PerformanceEventTiming.prototype) {
-                    interaction.processInteractionEntry(entry as PerformanceEventTiming);
+                if (visible && 'PerformanceEventTiming' in window &&  'interactionId' in PerformanceEventTiming.prototype)
+                {
+                    interaction.processInteractionEntry(entry as PerformanceEventTiming); 
                     // Logging it as dimension because we're always looking for the last value.
-                    dimension.log(Dimension.InteractionNextPaint, interaction.estimateP98LongestInteraction().toString());
+                    dimension.log(Dimension.InteractionNextPaint, interaction.estimateP98LongestInteraction().toString()); 
                 }
                 break;
             case Constant.CLS:
                 // Scale the value to avoid sending back floating point number
-                // biome-ignore lint/suspicious/noExplicitAny: not all browsers support hadRecentInput
-                if (visible && !(entry as any).hadRecentInput) {
-                    // biome-ignore lint/suspicious/noExplicitAny: not all browsers support layoutshift value
-                    metric.sum(Metric.CumulativeLayoutShift, (entry as any).value * 1000);
-                }
+                if (visible && !entry["hadRecentInput"]) { metric.sum(Metric.CumulativeLayoutShift, entry["value"] * 1000); }
                 break;
             case Constant.LCP:
-                if (visible) {
-                    metric.max(Metric.LargestPaint, entry.startTime);
-                }
+                if (visible) { metric.max(Metric.LargestPaint, entry.startTime); }
                 break;
         }
     }
 }
 
 export function stop(): void {
-    if (observer) {
-        observer.disconnect();
-    }
+    if (observer) { observer.disconnect(); }
     observer = null;
     interaction.resetInteractions();
 }
 
 function host(url: string): string {
-    const a = document.createElement("a");
+    let a = document.createElement("a");
     a.href = url;
     return a.host;
 }

package/src/queue.ts

@@ -1,19 +1,16 @@
 import { Constant } from "@clarity-types/data";
 import * as clarity from "@src/clarity";
 
-const w = window;
+const w = window; 
 const c = Constant.Clarity;
 
 export function setup() {
-    // Start queuing up calls while Clarity is inactive and we are in a browser enviornment
+    // Start queuing up calls while Clarity is inactive and we are in a browser enviornment    
     if (typeof w !== "undefined") {
-        w[c] = (...args) => {
-            if (!w[c].q) {
-                w[c].q = [];
-            }
-            w[c].q.push(args);
+        w[c] = function() {
+            (w[c].q = w[c].q || []).push(arguments);
             // if the start function was called, don't queue it and instead process the queue
-            args[0] === "start" && w[c].q.unshift(w[c].q.pop()) && process();
+            arguments[0] === "start" && w[c].q.unshift(w[c].q.pop()) && process();
         };
     }
 }
@@ -21,20 +18,16 @@ export function setup() {
 export function process() {
     if (typeof w !== "undefined") {
         // Do not execute or reset global "clarity" variable if a version of Clarity is already running on the page
-        if (w[c]?.v) {
-            return console.warn("Error CL001: Multiple Clarity tags detected.");
-        }
+        if (w[c] && w[c].v) { return console.warn("Error CL001: Multiple Clarity tags detected."); }
 
         // Expose clarity in a browser environment
         // To be efficient about queuing up operations while Clarity is wiring up, we expose clarity.*(args) => clarity(*, args);
         // This allows us to reprocess any calls that we missed once Clarity is available on the page
         // Once Clarity script bundle is loaded on the page, we also initialize a "v" property that holds current version
         // We use the presence or absence of "v" to determine if we are attempting to run a duplicate instance
-        const queue = w[c] ? w[c].q || [] : [];
-        w[c] = (method: string, ...args): void => clarity[method](...args);
+        let queue = w[c] ? (w[c].q || []) : [];
+        w[c] = function(method: string, ...args: any[]): void { return clarity[method](...args); }
         w[c].v = clarity.version;
-        while (queue.length > 0) {
-            w[c](...queue.shift());
-        }
+        while (queue.length > 0) { w[c](...queue.shift()); }
     }
 }

package/tsconfig.json

@@ -16,6 +16,6 @@
             "@clarity-types/*": ["types/*"]
         }
     },
-    "include": ["src/**/*.ts", "types/**/*.d.ts", "rollup.config.ts"],
+    "include":["src/**/*.ts","types/**/*.d.ts", "rollup.config.ts"],
     "exclude": ["test", "node_modules", "build"]
 }

package/tslint.json

@@ -1,26 +1,33 @@
 {
-    "extends": "tslint:recommended",
-    "rules": {
-        "max-line-length": [true, 140],
-        "no-console": [false],
-        "no-string-literal": false,
-        "prefer-const": false,
-        "prefer-for-of": false,
-        "object-literal-sort-keys": false,
-        "one-variable-per-declaration": false,
-        "trailing-comma": [false],
-        "variable-name": false,
-        "interface-name": false,
-        "interface-over-type-literal": false,
-        "only-arrow-functions": false,
-        "typedef": [
-            true,
-            "call-signature",
-            "parameter",
-            "property-declaration",
-            "member-variable-declaration",
-            "object-destructuring",
-            "array-destructuring"
-        ]
-    }
-}
+  "extends": "tslint:recommended",
+  "rules": {
+    "max-line-length": [
+      true,
+      140
+    ],
+    "no-console": [
+      false
+    ],
+    "no-string-literal": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "object-literal-sort-keys": false,
+    "one-variable-per-declaration": false,
+    "trailing-comma": [
+      false
+    ],
+    "variable-name": false,
+    "interface-name": false,
+    "interface-over-type-literal": false,
+    "only-arrow-functions": false,
+    "typedef": [
+      true,
+      "call-signature",
+      "parameter",
+      "property-declaration",
+      "member-variable-declaration",
+      "object-destructuring",
+      "array-destructuring"
+    ]
+  }
+}

package/types/core.d.ts

@@ -1,4 +1,4 @@
-import type * as Data from "./data";
+import * as Data from "./data";
 
 type TaskFunction = () => Promise<void>;
 type TaskResolve = () => void;
@@ -10,20 +10,20 @@ type Checksum = [number /* FraudId */, string /* Query Selector */];
 
 export const enum Priority {
     Normal = 0,
-    High = 1,
+    High = 1
 }
 
 export const enum Time {
     Second = 1000,
     Minute = 60 * 1000,
     Hour = 60 * 60 * 1000,
-    Day = 24 * 60 * 60 * 1000,
+    Day = 24 * 60 * 60 * 1000
 }
 
 export const enum Task {
     Wait = 0,
     Run = 1,
-    Stop = 2,
+    Stop = 2
 }
 
 export const enum ExtractSource {
@@ -31,20 +31,20 @@ export const enum ExtractSource {
     Cookie = 1,
     Text = 2,
     Fragment = 3,
-    Hash = 4,
+    Hash = 4
 }
 
 export const enum Type {
     Array = 1,
     Object = 2,
-    Simple = 3,
+    Simple = 3
 }
 
 export type Syntax = {
-    name: string;
-    type: Type;
-    condition: string;
-};
+    name: string,
+    type: Type,
+    condition: string
+}
 
 export const enum Privacy {
     None = 0,
@@ -52,7 +52,7 @@ export const enum Privacy {
     Text = 2,
     TextImage = 3,
     Exclude = 4,
-    Snapshot = 5,
+    Snapshot = 5
 }
 
 /* Helper Interfaces */
@@ -83,7 +83,7 @@ export interface RequestIdleCallbackOptions {
 
 export interface RequestIdleCallbackDeadline {
     didTimeout: boolean;
-    timeRemaining: () => number;
+    timeRemaining: (() => number);
 }
 
 export interface AsyncTask {
@@ -146,5 +146,5 @@ export const enum Constant {
     Zone = "Zone",
     Symbol = "__symbol__",
     AddEventListener = "addEventListener",
-    RemoveEventListener = "removeEventListener",
+    RemoveEventListener = "removeEventListener"
 }

package/types/data.d.ts

@@ -1,15 +1,16 @@
 import { Time } from "@clarity-types/core";
-export type Target = number | Node;
-export type Token = string | number | number[] | string[] | (string | number)[];
+export type Target = (number | Node);
+export type Token = (string | number | number[] | string[] | (string | number)[]);
+export type DecodedToken = (any | any[]);
 
 export type MetadataCallback = (data: Metadata, playback: boolean) => void;
 export interface MetadataCallbackOptions {
-    callback: MetadataCallback;
-    wait: boolean;
-    recall: boolean;
-    called: boolean;
+    callback: MetadataCallback,
+    wait: boolean,
+    recall: boolean,
+    called: boolean
 }
-export type SignalCallback = (data: ClaritySignal) => void;
+export type SignalCallback = (data: ClaritySignal) => void
 
 /* Enum */
 export const enum Event {
@@ -79,7 +80,7 @@ export const enum Event {
     Keystrokes = 104,
     BackGesture = 105,
     WebViewStatus = 106,
-    AppInstallReferrer = 107,
+    AppInstallReferrer = 107
 }
 
 export const enum Metric {
@@ -130,7 +131,7 @@ export const enum Metric {
      * @deprecated Move it to dimension as it'll report only last value
      */
     InteractionNextPaint = 37,
-    HistoryClear = 38,
+    HistoryClear = 38
 }
 
 export const enum Dimension {
@@ -171,7 +172,7 @@ export const enum Dimension {
     Timezone = 34,
     TimezoneOffset = 35,
     Consent = 36,
-    InteractionNextPaint = 37,
+    InteractionNextPaint = 37
 }
 
 export const enum Check {
@@ -182,7 +183,7 @@ export const enum Check {
     Bytes = 4,
     Collection = 5,
     Server = 6,
-    Page = 7,
+    Page = 7
 }
 
 export const enum Code {
@@ -206,41 +207,37 @@ export const enum Severity {
     Info = 0,
     Warning = 1,
     Error = 2,
-    Fatal = 3,
+    Fatal = 3
 }
 
 export const enum Upload {
     Async = 0,
-    Beacon = 1,
+    Beacon = 1
 }
 
 export const enum BooleanFlag {
     False = 0,
-    True = 1,
+    True = 1
 }
 
 export const enum IframeStatus {
     Unknown = 0,
     TopFrame = 1,
-    Iframe = 2,
+    Iframe = 2
 }
 
 export const enum Setting {
     Expire = 365, // 1 Year
     SessionExpire = 1, // 1 Day
     CookieVersion = 2, // Increment this version every time there's a cookie schema change
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Minute is a const enum, it is compiled to a number
     SessionTimeout = 30 * Time.Minute, // 30 minutes
     CookieInterval = 1, // 1 Day
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Minute is a const enum, it is compiled to a number
     PingInterval = 1 * Time.Minute, // 1 Minute
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Minute is a const enum, it is compiled to a number
     PingTimeout = 5 * Time.Minute, // 5 Minutes
     SummaryInterval = 100, // Same events within 100ms will be collapsed into single summary
     ClickText = 25, // Maximum number of characters to send as part of Click event's text field
     PayloadLimit = 128, // Do not allow more than specified payloads per page
     PageLimit = 128, // Do not allow more than 128 pages in a session
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Hour is a const enum, it is compiled to a number
     ShutdownLimit = 2 * Time.Hour, // Shutdown instrumentation after specified time
     RetryLimit = 1, // Maximum number of attempts to upload a payload before giving up
     PlaybackBytesLimit = 10 * 1024 * 1024, // 10MB
@@ -259,7 +256,6 @@ export const enum Setting {
     MegaByte = 1024 * 1024, // 1MB
     UploadFactor = 3, // Slow down sequence by specified factor
     MinUploadDelay = 100, // Minimum time before we are ready to flush events to the server
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Second is a const enum, it is compiled to a number
     MaxUploadDelay = 30 * Time.Second, // Do flush out payload once every 30s,
     ExtractLimit = 10000, // Do not extract more than 10000 characters
     ChecksumPrecision = 28, // n-bit integer to represent token hash
@@ -274,11 +270,11 @@ export const enum Character {
     Blank = 32,
     Tab = 9,
     NewLine = 10,
-    Return = 13,
+    Return = 13
 }
 
 export const enum ApplicationPlatform {
-    WebApp = 0,
+    WebApp = 0
 }
 
 export const enum Constant {
@@ -357,21 +353,22 @@ export const enum XMLReadyState {
     Opened = 1,
     Headers_Recieved = 2,
     Loading = 3,
-    Done = 4,
+    Done = 4
 }
 
+
 /* Helper Interfaces */
 
 export interface Payload {
-    e: Token[] /* Envelope */;
-    a: Token[][] /* Events that are used for data analysis */;
-    p: Token[][] /* Events that are primarily used for session playback */;
+    e: Token[]; /* Envelope */
+    a: Token[][]; /* Events that are used for data analysis */
+    p: Token[][]; /* Events that are primarily used for session playback */
 }
 
 export interface EncodedPayload {
-    e: string /* Envelope */;
-    a: string /* Analytics Payload */;
-    p: string /* Playback Payload */;
+    e: string; /* Envelope */
+    a: string; /* Analytics Payload */
+    p: string; /* Playback Payload */
 }
 
 export interface Metadata {
@@ -504,8 +501,8 @@ export interface UploadData {
 }
 
 export interface ClaritySignal {
-    type: string;
-    value?: number;
+    type: string
+    value?: number
 }
 
 export interface PerformanceEventTiming extends PerformanceEntry {
@@ -516,4 +513,4 @@ export interface PerformanceEventTiming extends PerformanceEntry {
 export interface Interaction {
     id: number;
     latency: number;
-}
+}

package/types/diagnostic.d.ts

@@ -1,4 +1,4 @@
-import type { Code, Severity } from "./data";
+import { Code, Severity, Target } from "./data";
 
 /* Event Data */
 export interface ScriptErrorData {

package/types/interaction.d.ts

@@ -1,6 +1,6 @@
-import type { BooleanFlag } from "@clarity-types/data";
+import { BooleanFlag } from "@clarity-types/data";
 import { Time } from "./core";
-import type { Event, Target } from "./data";
+import { Event, Target } from "./data";
 
 /* Enum */
 
@@ -8,7 +8,7 @@ export const enum BrowsingContext {
     Self = 0,
     Blank = 1,
     Parent = 2,
-    Top = 3,
+    Top = 3
 }
 
 export const enum Setting {
@@ -25,7 +25,7 @@ export const enum Setting {
 export const enum Clipboard {
     Cut = 0,
     Copy = 1,
-    Paste = 2,
+    Paste = 2
 }
 
 /* Helper Interfaces */