clarity-js 0.8.10-beta → 0.8.10

package/src/diagnostic/internal.ts

@@ -1,5 +1,5 @@
-import { Code, Event, Severity } from "@clarity-types/data";
-import { LogData } from "@clarity-types/diagnostic";
+import { type Code, Event, type Severity } from "@clarity-types/data";
+import type { LogData } from "@clarity-types/diagnostic";
 import encode from "./encode";
 
 let history: { [key: number]: string[] } = {};
@@ -10,15 +10,21 @@ export function start(): void {
 }
 
 export function log(code: Code, severity: Severity, name: string = null, message: string = null, stack: string = null): void {
-    let key = name ? `${name}|${message}`: "";
+    const key = name ? `${name}|${message}` : "";
     // While rare, it's possible for code to fail repeatedly during the lifetime of the same page
     // In those cases, we only want to log the failure once and not spam logs with redundant information.
-    if (code in history && history[code].indexOf(key) >= 0) { return; }
+    if (code in history && history[code].indexOf(key) >= 0) {
+        return;
+    }
 
     data = { code, name, message, stack, severity };
 
     // Maintain history of errors in memory to avoid sending redundant information
-    if (code in history) { history[code].push(key); } else { history[code] = [key]; }
+    if (code in history) {
+        history[code].push(key);
+    } else {
+        history[code] = [key];
+    }
 
     encode(Event.Log);
 }

package/src/diagnostic/script.ts

@@ -1,5 +1,5 @@
 import { Event, Setting } from "@clarity-types/data";
-import { ScriptErrorData } from "@clarity-types/diagnostic";
+import type { ScriptErrorData } from "@clarity-types/diagnostic";
 import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import encode from "./encode";
@@ -14,20 +14,24 @@ export function start(): void {
 
 function handler(error: ErrorEvent): boolean {
     handler.dn = FunctionNames.ScriptHandler;
-    let e = error["error"] || error;
+    const e = error.error || error;
     // While rare, it's possible for code to fail repeatedly during the lifetime of the same page
     // In those cases, we only want to log the failure first few times and not spam logs with redundant information.
-    if (!(e.message in history)) { history[e.message] = 0; }
-    if (history[e.message]++ >= Setting.ScriptErrorLimit) { return true; }
+    if (!(e.message in history)) {
+        history[e.message] = 0;
+    }
+    if (history[e.message]++ >= Setting.ScriptErrorLimit) {
+        return true;
+    }
 
     // Send back information only if the handled error has valid information
-    if (e && e.message) {
+    if (e?.message) {
         data = {
             message: e.message,
-            line: error["lineno"],
-            column: error["colno"],
+            line: error.lineno,
+            column: error.colno,
             stack: e.stack,
-            source: error["filename"]
+            source: error.filename,
         };
 
         encode(Event.ScriptError);

package/src/global.ts

@@ -1,6 +1,6 @@
 import * as queue from "@src/queue";
 
 // Process anything that was queued up before the script loaded
-(function(): void {
+((): void => {
     queue.process();
 })();

package/src/insight/blank.ts

@@ -1,7 +1,7 @@
-export let state = [];
-export let sheetAdoptionState = [];
-export let sheetUpdateState = [];
-export let data = null;
+export const state = [];
+export const sheetAdoptionState = [];
+export const sheetUpdateState = [];
+export const data = null;
 
 /* Intentionally blank module with empty code */
 

package/src/insight/encode.ts

@@ -1,6 +1,6 @@
-import { Privacy } from "@clarity-types/core";
-import { Event, Token } from "@clarity-types/data";
-import { Constant, NodeInfo } from "@clarity-types/layout";
+import type { Privacy } from "@clarity-types/core";
+import { Event, type Token } from "@clarity-types/data";
+import { Constant, type NodeInfo } from "@clarity-types/layout";
 import * as scrub from "@src/core/scrub";
 import { time } from "@src/core/time";
 import * as baseline from "@src/data/baseline";
@@ -10,34 +10,39 @@ import * as snapshot from "@src/insight/snapshot";
 import * as doc from "@src/layout/document";
 
 export default async function (type: Event): Promise<void> {
-    let eventTime = time()
-    let tokens: Token[] = [eventTime, type];
+    const eventTime = time();
+    const tokens: Token[] = [eventTime, type];
     switch (type) {
-        case Event.Document:
-            let d = doc.data;
+        case Event.Document: {
+            const d = doc.data;
             tokens.push(d.width);
             tokens.push(d.height);
             baseline.track(type, d.width, d.height);
             queue(tokens);
             break;
-        case Event.Snapshot:
-            let values = snapshot.values;
+        }
+        case Event.Snapshot: {
+            const values = snapshot.values;
             // Only encode and queue DOM updates if we have valid updates to report back
             if (values.length > 0) {
-                for (let value of values) {
-                    let privacy = value.metadata.privacy;
-                    let data: NodeInfo = value.data;
-                    for (let key of ["tag", "attributes", "value"]) {
+                for (const value of values) {
+                    const privacy = value.metadata.privacy;
+                    const data: NodeInfo = value.data;
+                    for (const key of ["tag", "attributes", "value"]) {
                         if (data[key]) {
                             switch (key) {
                                 case "tag":
                                     tokens.push(value.id);
-                                    if (value.parent) { tokens.push(value.parent); }
-                                    if (value.previous) { tokens.push(value.previous); }
+                                    if (value.parent) {
+                                        tokens.push(value.parent);
+                                    }
+                                    if (value.previous) {
+                                        tokens.push(value.previous);
+                                    }
                                     tokens.push(data[key]);
                                     break;
                                 case "attributes":
-                                    for (let attr in data[key]) {
+                                    for (const attr in data[key]) {
                                         if (data[key][attr] !== undefined) {
                                             tokens.push(attribute(attr, data[key][attr], privacy));
                                         }
@@ -53,9 +58,10 @@ export default async function (type: Event): Promise<void> {
                 queue(tokenize(tokens), true);
             }
             break;
+        }
     }
 }
 
 function attribute(key: string, value: string, privacy: Privacy): string {
     return `${key}=${scrub.text(value, key.indexOf(Constant.DataAttribute) === 0 ? Constant.DataAttribute : key, privacy)}`;
-}
+}

package/src/insight/snapshot.ts

@@ -1,12 +1,12 @@
-import { OffsetDistance, Privacy } from "@clarity-types/core";
+import { type OffsetDistance, Privacy } from "@clarity-types/core";
 import { Event } from "@clarity-types/data";
-import { Constant, NodeInfo, NodeValue, TargetMetadata } from "@clarity-types/layout";
-import * as doc from "@src/layout/document";
+import { Constant, type NodeInfo, type NodeValue, type TargetMetadata } from "@clarity-types/layout";
+import config from "@src/core/config";
 import encode from "@src/insight/encode";
 import * as interaction from "@src/interaction";
-import config from "@src/core/config";
+import * as doc from "@src/layout/document";
 export let values: NodeValue[] = [];
-let index: number = 1;
+let index = 1;
 let idMap: WeakMap<Node, number> = null; // Maps node => id.
 
 export function start(): void {
@@ -21,24 +21,34 @@ export function stop(): void {
     doc.stop();
 }
 
-export function compute(): void { /* Intentionally Blank */ }
-export function iframe(): boolean { return false; }
-export function offset(): OffsetDistance { return { x: 0, y: 0 }; }
-export function hashText(): void { /* Intentionally Blank */ }
+export function compute(): void {
+    /* Intentionally Blank */
+}
+export function iframe(): boolean {
+    return false;
+}
+export function offset(): OffsetDistance {
+    return { x: 0, y: 0 };
+}
+export function hashText(): void {
+    /* Intentionally Blank */
+}
 
 export function target(evt: UIEvent): Node {
-    let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
-    let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
+    const path = evt.composed && evt.composedPath ? evt.composedPath() : null;
+    const node = (path && path.length > 0 ? path[0] : evt.target) as Node;
     return node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
 }
 
 export function metadata(node: Node): TargetMetadata {
-    let output: TargetMetadata = { id: 0, hash: null, privacy: config.conversions ? Privacy.Sensitive : Privacy.Snapshot };
-    if (node) { output.id = idMap.has(node) ? idMap.get(node) : getId(node); }
+    const output: TargetMetadata = { id: 0, hash: null, privacy: config.conversions ? Privacy.Sensitive : Privacy.Snapshot };
+    if (node) {
+        output.id = idMap.has(node) ? idMap.get(node) : getId(node);
+    }
     return output;
 }
 
-export function snapshot(): void {    
+export function snapshot(): void {
     values = [];
     traverse(document);
     encode(Event.Snapshot);
@@ -49,46 +59,50 @@ function reset(): void {
 }
 
 function traverse(root: Node): void {
-    let queue = [root];
+    const queue = [root];
     while (queue.length > 0) {
-        let attributes = null, tag = null, value = null;
-        let node = queue.shift();
+        let attributes = null;
+        let tag = null;
+        let value = null;
+        const node = queue.shift();
         let next = node.firstChild;
-        let parent = node.parentElement ? node.parentElement : (node.parentNode ?  node.parentNode : null);
+        const parent = node.parentElement ? node.parentElement : node.parentNode ? node.parentNode : null;
 
         while (next) {
             queue.push(next);
             next = next.nextSibling;
         }
-      
+
         // Process the node
-        let type = node.nodeType;
+        const type = node.nodeType;
         switch (type) {
-            case Node.DOCUMENT_TYPE_NODE:
-                let doctype = node as DocumentType;
+            case Node.DOCUMENT_TYPE_NODE: {
+                const doctype = node as DocumentType;
                 tag = Constant.DocumentTag;
-                attributes = { name: doctype.name, publicId: doctype.publicId, systemId: doctype.systemId }
+                attributes = { name: doctype.name, publicId: doctype.publicId, systemId: doctype.systemId };
                 break;
-            case Node.TEXT_NODE: 
+            }
+            case Node.TEXT_NODE:
                 value = node.nodeValue;
                 tag = idMap.get(parent) ? Constant.TextTag : tag;
                 break;
-            case Node.ELEMENT_NODE:
-                let element = node as HTMLElement;
+            case Node.ELEMENT_NODE: {
+                const element = node as HTMLElement;
                 attributes = getAttributes(element);
                 tag = ["NOSCRIPT", "SCRIPT", "STYLE"].indexOf(element.tagName) < 0 ? element.tagName : tag;
                 break;
+            }
         }
-        add(node, parent, { tag, attributes, value });     
+        add(node, parent, { tag, attributes, value });
     }
 }
 
 /* Helper Functions - Snapshot Traversal */
 function getAttributes(element: HTMLElement): { [key: string]: string } {
-    let output = {};
-    let attributes = element.attributes;
+    const output = {};
+    const attributes = element.attributes;
     if (attributes && attributes.length > 0) {
-        for (let i = 0; i < attributes.length; i++) {            
+        for (let i = 0; i < attributes.length; i++) {
             output[attributes[i].name] = attributes[i].value;
         }
     }
@@ -96,20 +110,26 @@ function getAttributes(element: HTMLElement): { [key: string]: string } {
 }
 
 function getId(node: Node): number {
-    if (node === null) { return null; }
-    if (idMap.has(node)) { return idMap.get(node); }
+    if (node === null) {
+        return null;
+    }
+    if (idMap.has(node)) {
+        return idMap.get(node);
+    }
     idMap.set(node, index);
     return index++;
 }
 
 function add(node: Node, parent: Node, data: NodeInfo): void {
     if (node && data && data.tag) {
-        let id = getId(node);
-        let parentId = parent ? idMap.get(parent) : null;
-        let previous = node.previousSibling ? idMap.get(node.previousSibling) : null;
-        let metadata = { active: true, suspend: false, privacy: Privacy.Snapshot, position: null, fraud: null, size: null };
+        const id = getId(node);
+        const parentId = parent ? idMap.get(parent) : null;
+        const previous = node.previousSibling ? idMap.get(node.previousSibling) : null;
+        const metadata = { active: true, suspend: false, privacy: Privacy.Snapshot, position: null, fraud: null, size: null };
         values.push({ id, parent: parentId, previous, children: [], data, selector: null, hash: null, region: null, metadata });
     }
 }
 
-export function get(_node: Node): NodeValue {return null;}
+export function get(_node: Node): NodeValue {
+    return null;
+}

package/src/interaction/change.ts

@@ -1,5 +1,6 @@
 import { Constant, Event, Setting } from "@clarity-types/data";
-import { ChangeState } from "@clarity-types/interaction";
+import type { ChangeState } from "@clarity-types/interaction";
+import { Mask } from "@clarity-types/layout";
 import { FunctionNames } from "@clarity-types/performance";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
@@ -8,7 +9,6 @@ import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { target } from "@src/layout/target";
 import encode from "./encode";
-import { Mask } from "@clarity-types/layout";
 
 export let state: ChangeState[] = [];
 
@@ -22,13 +22,16 @@ export function observe(root: Node): void {
 
 function recompute(evt: UIEvent): void {
     recompute.dn = FunctionNames.ChangeRecompute;
-    let element = target(evt) as HTMLInputElement;
+    const element = target(evt) as HTMLInputElement;
     if (element) {
-        let value = element.value;
-        let checksum = value && value.length >= Setting.WordLength && config.fraud && Mask.Exclude.indexOf(element.type) === -1 ? hash(value, Setting.ChecksumPrecision) : Constant.Empty;
+        const value = element.value;
+        const checksum =
+            value && value.length >= Setting.WordLength && config.fraud && Mask.Exclude.indexOf(element.type) === -1
+                ? hash(value, Setting.ChecksumPrecision)
+                : Constant.Empty;
         state.push({ time: time(evt), event: Event.Change, data: { target: target(evt), type: element.type, value, checksum } });
         schedule(encode.bind(this, Event.Change));
-    }    
+    }
 }
 
 export function reset(): void {

package/src/interaction/click.ts

@@ -1,6 +1,6 @@
 import { BooleanFlag, Constant, Event, Setting } from "@clarity-types/data";
-import { BrowsingContext, ClickState, TextInfo } from "@clarity-types/interaction";
-import { Box } from "@clarity-types/layout";
+import { BrowsingContext, type ClickState, type TextInfo } from "@clarity-types/interaction";
+import type { Box } from "@clarity-types/layout";
 import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
@@ -23,41 +23,43 @@ export function observe(root: Node): void {
 
 function handler(event: Event, root: Node, evt: MouseEvent): void {
     handler.dn = FunctionNames.ClickHandler;
-    let frame = iframe(root);
-    let d = frame ? frame.contentDocument.documentElement : document.documentElement;
-    let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
-    let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
+    const frame = iframe(root);
+    const d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    let x = "pageX" in evt ? Math.round(evt.pageX) : "clientX" in evt ? Math.round((evt as MouseEvent).clientX + d.scrollLeft) : null;
+    let y = "pageY" in evt ? Math.round(evt.pageY) : "clientY" in evt ? Math.round((evt as MouseEvent).clientY + d.scrollTop) : null;
     // In case of iframe, we adjust (x,y) to be relative to top parent's origin
     if (frame) {
-        let distance = offset(frame);
+        const distance = offset(frame);
         x = x ? x + Math.round(distance.x) : x;
         y = y ? y + Math.round(distance.y) : y;
     }
 
-    let t = target(evt);
+    const t = target(evt);
     // Find nearest anchor tag (<a/>) parent if current target node is part of one
     // If present, we use the returned link element to populate text and link properties below
-    let a = link(t);
+    const a = link(t);
 
     // Get layout rectangle for the target element
-    let l = layout(t as Element);
+    const l = layout(t as Element);
 
     // Reference: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
     // This property helps differentiate between a keyboard navigation vs. pointer click
     // In case of a keyboard navigation, we use center of target element as (x,y)
     if (evt.detail === 0 && l) {
-        x = Math.round(l.x + (l.w / 2));
-        y = Math.round(l.y + (l.h / 2));
+        x = Math.round(l.x + l.w / 2);
+        y = Math.round(l.y + l.h / 2);
     }
 
-    let eX = l ? Math.max(Math.floor(((x - l.x) / l.w) * Setting.ClickPrecision), 0) : 0;
-    let eY = l ? Math.max(Math.floor(((y - l.y) / l.h) * Setting.ClickPrecision), 0) : 0;
+    const eX = l ? Math.max(Math.floor(((x - l.x) / l.w) * Setting.ClickPrecision), 0) : 0;
+    const eY = l ? Math.max(Math.floor(((y - l.y) / l.h) * Setting.ClickPrecision), 0) : 0;
 
     // Check for null values before processing this event
     if (x !== null && y !== null) {
         const textInfo = text(t);
         state.push({
-            time: time(evt), event, data: {
+            time: time(evt),
+            event,
+            data: {
                 target: t,
                 x,
                 y,
@@ -71,16 +73,17 @@ function handler(event: Event, root: Node, evt: MouseEvent): void {
                 hash: null,
                 trust: evt.isTrusted ? BooleanFlag.True : BooleanFlag.False,
                 isFullText: textInfo.isFullText,
-            }
+            },
         });
         schedule(encode.bind(this, event));
     }
 }
 
-function link(node: Node): HTMLAnchorElement {
+function link(inputNode: Node): HTMLAnchorElement {
+    let node = inputNode;
     while (node && node !== document) {
         if (node.nodeType === Node.ELEMENT_NODE) {
-            let element = node as HTMLElement;
+            const element = node as HTMLElement;
             if (element.tagName === "A") {
                 return element as HTMLAnchorElement;
             }
@@ -95,11 +98,11 @@ function text(element: Node): TextInfo {
     let isFullText = false;
     if (element) {
         // Grab text using "textContent" for most HTMLElements, however, use "value" for HTMLInputElements and "alt" for HTMLImageElement.
-        let t = element.textContent || String((element as HTMLInputElement).value || '') || (element as HTMLImageElement).alt;
+        const t = element.textContent || String((element as HTMLInputElement).value || "") || (element as HTMLImageElement).alt;
         if (t) {
             // Replace multiple occurrence of space characters with a single white space
             // Also, trim any spaces at the beginning or at the end of string
-            const trimmedText =  t.replace(/\s+/g, Constant.Space).trim();
+            const trimmedText = t.replace(/\s+/g, Constant.Space).trim();
             // Finally, send only first few characters as specified by the Setting
             output = trimmedText.substring(0, Setting.ClickText);
             isFullText = output.length === trimmedText.length;
@@ -111,7 +114,7 @@ function text(element: Node): TextInfo {
 
 function reaction(element: Node): BooleanFlag {
     if (element.nodeType === Node.ELEMENT_NODE) {
-        let tag = (element as HTMLElement).tagName.toLowerCase();
+        const tag = (element as HTMLElement).tagName.toLowerCase();
         if (UserInputTags.indexOf(tag) >= 0) {
             return BooleanFlag.False;
         }
@@ -121,10 +124,10 @@ function reaction(element: Node): BooleanFlag {
 
 function layout(element: Element): Box {
     let box: Box = null;
-    let de = document.documentElement;
+    const de = document.documentElement;
     if (typeof element.getBoundingClientRect === "function") {
         // getBoundingClientRect returns rectangle relative positioning to viewport
-        let rect = element.getBoundingClientRect();
+        const rect = element.getBoundingClientRect();
 
         if (rect && rect.width > 0 && rect.height > 0) {
             // Add viewport's scroll position to rectangle to get position relative to document origin
@@ -135,7 +138,7 @@ function layout(element: Element): Box {
                 x: Math.floor(rect.left + ("pageXOffset" in window ? window.pageXOffset : de.scrollLeft)),
                 y: Math.floor(rect.top + ("pageYOffset" in window ? window.pageYOffset : de.scrollTop)),
                 w: Math.floor(rect.width),
-                h: Math.floor(rect.height)
+                h: Math.floor(rect.height),
             };
         }
     }
@@ -143,11 +146,14 @@ function layout(element: Element): Box {
 }
 
 function context(a: HTMLAnchorElement): BrowsingContext {
-    if (a && a.hasAttribute(Constant.Target)) {
+    if (a?.hasAttribute(Constant.Target)) {
         switch (a.getAttribute(Constant.Target)) {
-            case Constant.Blank: return BrowsingContext.Blank;
-            case Constant.Parent: return BrowsingContext.Parent;
-            case Constant.Top: return BrowsingContext.Top;
+            case Constant.Blank:
+                return BrowsingContext.Blank;
+            case Constant.Parent:
+                return BrowsingContext.Parent;
+            case Constant.Top:
+                return BrowsingContext.Top;
         }
     }
     return BrowsingContext.Self;

package/src/interaction/clipboard.ts

@@ -1,11 +1,11 @@
 import { Event } from "@clarity-types/data";
-import { Clipboard, ClipboardState } from "@clarity-types/interaction";
+import { Clipboard, type ClipboardState } from "@clarity-types/interaction";
 import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
-import encode from "./encode";
 import { target } from "@src/layout/target";
+import encode from "./encode";
 
 export let state: ClipboardState[] = [];