clarity-js 0.8.11-beta → 0.8.12

package/src/performance/observer.ts

@@ -1,4 +1,4 @@
-import { Code, Constant, Dimension, Metric, Severity, PerformanceEventTiming } from "@clarity-types/data";
+import { Code, Constant, Dimension, Metric, PerformanceEventTiming, Severity } from "@clarity-types/data";
 import { FunctionNames } from "@clarity-types/performance";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
@@ -7,27 +7,40 @@ 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 navigation from "@src/performance/navigation";
 import * as interaction from "@src/performance/interaction";
+import * as navigation from "@src/performance/navigation";
 
 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) {
-        dimension.log(Dimension.ConnectionType, navigator["connection"]["effectiveType"]);
+        // biome-ignore lint/complexity/useLiteralKeys: connection isn't on every browser, so effectiveType gives unncessary typescript error
+        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 {
@@ -35,21 +48,27 @@ 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 (let x of types) {
+        for (const 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 {
@@ -58,51 +77,65 @@ function handle(entries: PerformanceObserverEntryList): void {
 }
 
 function process(entries: PerformanceEntryList): void {
-    let visible = "visibilityState" in document ? document.visibilityState === "visible" : true;
+    const visible = "visibilityState" in document ? document.visibilityState === "visible" : true;
     for (let i = 0; i < entries.length; i++) {
-        let entry = entries[i];
+        const entry = entries[i];
         switch (entry.entryType) {
             case Constant.Navigation:
                 navigation.compute(entry as PerformanceNavigationTiming);
                 break;
-            case Constant.Resource:
-                let name = entry.name;
+            case Constant.Resource: {
+                const 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:
-                if (visible) { metric.max(Metric.FirstInputDelay, entry["processingStart"] - entry.startTime); }
+                // 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);
+                }
                 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
-                if (visible && !entry["hadRecentInput"]) { metric.sum(Metric.CumulativeLayoutShift, entry["value"] * 1000); }
+                // 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);
+                }
                 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 {
-    let a = document.createElement("a");
+    const a = document.createElement("a");
     a.href = url;
     return a.host;
 }

package/src/queue.ts

@@ -1,16 +1,19 @@
 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] = function() {
-            (w[c].q = w[c].q || []).push(arguments);
+        w[c] = (...args) => {
+            if (!w[c].q) {
+                w[c].q = [];
+            }
+            w[c].q.push(args);
             // if the start function was called, don't queue it and instead process the queue
-            arguments[0] === "start" && w[c].q.unshift(w[c].q.pop()) && process();
+            args[0] === "start" && w[c].q.unshift(w[c].q.pop()) && process();
         };
     }
 }
@@ -18,16 +21,20 @@ 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] && w[c].v) { return console.warn("Error CL001: Multiple Clarity tags detected."); }
+        if (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
-        let queue = w[c] ? (w[c].q || []) : [];
-        w[c] = function(method: string, ...args: any[]): void { return clarity[method](...args); }
+        const queue = w[c] ? w[c].q || [] : [];
+        w[c] = (method: string, ...args): void => 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,33 +1,26 @@
 {
-  "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 * as Data from "./data";
+import type * 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,16 +1,15 @@
 import { Time } from "@clarity-types/core";
-export type Target = (number | Node);
-export type Token = (string | number | number[] | string[] | (string | number)[]);
-export type DecodedToken = (any | any[]);
+export type Target = number | Node;
+export type Token = string | number | number[] | string[] | (string | number)[];
 
 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 {
@@ -80,7 +79,7 @@ export const enum Event {
     Keystrokes = 104,
     BackGesture = 105,
     WebViewStatus = 106,
-    AppInstallReferrer = 107
+    AppInstallReferrer = 107,
 }
 
 export const enum Metric {
@@ -131,7 +130,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 {
@@ -172,7 +171,7 @@ export const enum Dimension {
     Timezone = 34,
     TimezoneOffset = 35,
     Consent = 36,
-    InteractionNextPaint = 37
+    InteractionNextPaint = 37,
 }
 
 export const enum Check {
@@ -183,7 +182,7 @@ export const enum Check {
     Bytes = 4,
     Collection = 5,
     Server = 6,
-    Page = 7
+    Page = 7,
 }
 
 export const enum Code {
@@ -201,43 +200,48 @@ export const enum Code {
     Config = 8,
     FunctionExecutionTime = 9,
     LeanLimit = 10,
+    AngularZone = 11,
 }
 
 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
@@ -256,6 +260,7 @@ 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
@@ -270,11 +275,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 {
@@ -353,22 +358,21 @@ 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 {
@@ -501,8 +505,8 @@ export interface UploadData {
 }
 
 export interface ClaritySignal {
-    type: string
-    value?: number
+    type: string;
+    value?: number;
 }
 
 export interface PerformanceEventTiming extends PerformanceEntry {
@@ -513,4 +517,4 @@ export interface PerformanceEventTiming extends PerformanceEntry {
 export interface Interaction {
     id: number;
     latency: number;
-}
+}

package/types/diagnostic.d.ts

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

package/types/interaction.d.ts

@@ -1,6 +1,6 @@
-import { BooleanFlag } from "@clarity-types/data";
+import type { BooleanFlag } from "@clarity-types/data";
 import { Time } from "./core";
-import { Event, Target } from "./data";
+import type { Event, Target } from "./data";
 
 /* Enum */
 
@@ -8,22 +8,24 @@ export const enum BrowsingContext {
     Self = 0,
     Blank = 1,
     Parent = 2,
-    Top = 3
+    Top = 3,
 }
 
 export const enum Setting {
     LookAhead = 500, // 500ms
     InputLookAhead = 1000, // 1s
     Distance = 20, // 20 pixels
-    Interval = 50, // 50 milliseconds
+    ScrollInterval = 50, // 25 milliseconds
+    PointerInterval = 25, // 25 milliseconds
     Throttle = 25, // 25 milliseconds
+    // biome-ignore lint/style/useLiteralEnumMembers: Time.Second is a const enum, it is compiled to a number
     TimelineSpan = 2 * Time.Second, // 2 seconds
 }
 
 export const enum Clipboard {
     Cut = 0,
     Copy = 1,
-    Paste = 2
+    Paste = 2,
 }
 
 /* Helper Interfaces */