clarity-js 0.8.12 → 0.8.14

package/src/layout/selector.ts

@@ -1,5 +1,5 @@
 import { Character } from "../../types/data";
-import { Constant, Selector, type SelectorInput } from "../../types/layout";
+import { Constant, Selector, SelectorInput } from "../../types/layout";
 
 const excludeClassNames = Constant.ExcludeClassNames.split(Constant.Comma);
 let selectorMap: { [selector: string]: number[] } = {};
@@ -9,9 +9,9 @@ export function reset(): void {
 }
 
 export function get(input: SelectorInput, type: Selector): string {
-    const a = input.attributes;
+    let a = input.attributes;
     let prefix = input.prefix ? input.prefix[type] : null;
-    const suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position - 1}` : `:nth-of-type(${input.position})`;
+    let suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position-1}` : `:nth-of-type(${input.position})`;
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
@@ -22,37 +22,24 @@ export function get(input: SelectorInput, type: Selector): string {
             return Constant.Empty;
         case "HTML":
             return Constant.HTML;
-        default: {
-            if (prefix === null) {
-                return Constant.Empty;
-            }
+        default:
+            if (prefix === null) { return Constant.Empty; }
             prefix = `${prefix}${Constant.Separator}`;
             input.tag = input.tag.indexOf(Constant.SvgPrefix) === 0 ? input.tag.substr(Constant.SvgPrefix.length) : input.tag;
             let selector = `${prefix}${input.tag}${suffix}`;
-            const id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
-            const classes =
-                input.tag !== Constant.BodyTag && Constant.Class in a && a[Constant.Class].length > 0
-                    ? a[Constant.Class]
-                          .trim()
-                          .split(/\s+/)
-                          .filter((c) => filter(c))
-                          .join(Constant.Period)
-                    : null;
+            let id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
+            let classes = input.tag !== Constant.BodyTag && Constant.Class in a && a[Constant.Class].length > 0 ? a[Constant.Class].trim().split(/\s+/).filter(c => filter(c)).join(Constant.Period) : null;
             if (classes && classes.length > 0) {
                 if (type === Selector.Alpha) {
                     // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
                     // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
-                    const key = `${getDomPath(prefix)}${input.tag}${Constant.Dot}${classes}`;
-                    if (!(key in selectorMap)) {
-                        selectorMap[key] = [];
-                    }
-                    if (selectorMap[key].indexOf(input.id) < 0) {
-                        selectorMap[key].push(input.id);
-                    }
+                    let key = `${getDomPath(prefix)}${input.tag}${Constant.Dot}${classes}`;
+                    if (!(key in selectorMap)) { selectorMap[key] = []; }
+                    if (selectorMap[key].indexOf(input.id) < 0) { selectorMap[key].push(input.id); }
                     selector = `${key}${Constant.Tilde}${selectorMap[key].indexOf(input.id)}`;
                 } else {
                     // In Beta mode, we continue to look at query selectors in context of the full page
-                    selector = `${prefix}${input.tag}.${classes}${suffix}`;
+                    selector = `${prefix}${input.tag}.${classes}${suffix}`
                 }
             }
             // Update selector to use "id" field when available. There are two exceptions:
@@ -60,45 +47,36 @@ export function get(input: SelectorInput, type: Selector): string {
             // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
             selector = id && filter(id) ? `${getDomPrefix(prefix)}${Constant.Hash}${id}` : selector;
             return selector;
-        }
     }
 }
 
 function getDomPrefix(prefix: string): string {
-    const shadowDomStart = prefix.lastIndexOf(Constant.ShadowDomTag);
-    const iframeDomStart = prefix.lastIndexOf(`${Constant.IFramePrefix}${Constant.HTML}`);
-    const domStart = Math.max(shadowDomStart, iframeDomStart);
-
-    if (domStart < 0) {
-        return Constant.Empty;
-    }
+  const shadowDomStart = prefix.lastIndexOf(Constant.ShadowDomTag);
+  const iframeDomStart = prefix.lastIndexOf(`${Constant.IFramePrefix}${Constant.HTML}`);
+  const domStart = Math.max(shadowDomStart, iframeDomStart);
+  
+  if (domStart < 0) { return Constant.Empty; }
 
-    return prefix.substring(0, prefix.indexOf(Constant.Separator, domStart) + 1);
+  return prefix.substring(0, prefix.indexOf(Constant.Separator, domStart) + 1);
 }
 
 function getDomPath(input: string): string {
-    const parts = input.split(Constant.Separator);
+    let parts = input.split(Constant.Separator);
     for (let i = 0; i < parts.length; i++) {
-        const tIndex = parts[i].indexOf(Constant.Tilde);
-        const dIndex = parts[i].indexOf(Constant.Dot);
-        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : tIndex > 0 ? tIndex : parts[i].length);
+        let tIndex = parts[i].indexOf(Constant.Tilde);
+        let dIndex = parts[i].indexOf(Constant.Dot);
+        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
     }
     return parts.join(Constant.Separator);
 }
 
 // Check if the given input string has digits or excluded class names
 function filter(value: string): boolean {
-    if (!value) {
-        return false;
-    } // Do not process empty strings
-    if (excludeClassNames.some((x) => value.toLowerCase().indexOf(x) >= 0)) {
-        return false;
-    }
+    if (!value) { return false; } // Do not process empty strings
+    if (excludeClassNames.some(x => value.toLowerCase().indexOf(x) >= 0)) { return false; }
     for (let i = 0; i < value.length; i++) {
-        const c = value.charCodeAt(i);
-        if (c >= Character.Zero && c <= Character.Nine) {
-            return false;
-        }
+        let c = value.charCodeAt(i);
+        if (c >= Character.Zero && c <= Character.Nine) { return false };
     }
     return true;
 }

package/src/layout/style.ts

@@ -1,70 +1,67 @@
-import { Event } from "@clarity-types/data";
-import { type IWindowWithOverrides, StyleSheetOperation, type StyleSheetState } from "@clarity-types/layout";
-import * as core from "@src/core";
-import config from "@src/core/config";
+import { Event, Metric } from "@clarity-types/data";
+import { StyleSheetOperation, StyleSheetState } from "@clarity-types/layout";
 import { time } from "@src/core/time";
 import { shortid } from "@src/data/metadata";
-import { getId } from "@src/layout/dom";
 import encode from "@src/layout/encode";
+import { getId } from "@src/layout/dom";
+import * as core from "@src/core";
+import config from "@src/core/config";
 import { getCssRules } from "./node";
 
 export let sheetUpdateState: StyleSheetState[] = [];
 export let sheetAdoptionState: StyleSheetState[] = [];
-const styleSheetId = "claritySheetId";
+const styleSheetId = 'claritySheetId';
 let styleSheetMap = {};
-let styleTimeMap: { [key: string]: number } = {};
+let styleTimeMap: {[key: string]: number} = {};
 let documentNodes = [];
 let createdSheetIds = [];
 
-function proxyStyleRules(win: IWindowWithOverrides) {
+function proxyStyleRules(win: any) {
     if ((config.lean && config.lite) || win === null || win === undefined) {
         return;
     }
-
+    
     win.clarityOverrides = win.clarityOverrides || {};
 
-    if (win.CSSStyleSheet?.prototype) {
-        if (win.clarityOverrides.replace === undefined) {
-            win.clarityOverrides.replace = win.CSSStyleSheet.prototype.replace;
-            win.CSSStyleSheet.prototype.replace = function (...args): Promise<CSSStyleSheet> {
+    if (win['CSSStyleSheet'] && win.CSSStyleSheet.prototype) {
+        if (win.clarityOverrides.replace === undefined) { 
+            win.clarityOverrides.replace = win.CSSStyleSheet.prototype.replace; 
+            win.CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
                 if (core.active()) {
                     // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
                     // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
                     // to when it is used in the document rather than potentially being misaligned during the traverse process.
                     if (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
-                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, args[0]);
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, arguments[0]);
                     }
                 }
-                return win.clarityOverrides.replace.apply(this, args);
+                return win.clarityOverrides.replace.apply(this, arguments);
             };
         }
 
-        if (win.clarityOverrides.replaceSync === undefined) {
-            win.clarityOverrides.replaceSync = win.CSSStyleSheet.prototype.replaceSync;
-            win.CSSStyleSheet.prototype.replaceSync = function (...args): void {
+        if (win.clarityOverrides.replaceSync === undefined) { 
+            win.clarityOverrides.replaceSync = win.CSSStyleSheet.prototype.replaceSync; 
+            win.CSSStyleSheet.prototype.replaceSync = function(): void {
                 if (core.active()) {
                     // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
                     // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
                     // to when it is used in the document rather than potentially being misaligned during the traverse process.
                     if (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
-                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, args[0]);
-                    }
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
+                    }                
                 }
-                win.clarityOverrides.replaceSync.apply(this, args);
-                return;
+                return win.clarityOverrides.replaceSync.apply(this, arguments);
             };
         }
-    }
+    }   
 }
 
 export function start(): void {
     proxyStyleRules(window);
 }
 
-export function checkDocumentStyles(documentNode: Document, cachedTimestamp: number): void {
-    if (config.lean && config.lite) {
-        return;
-    }
+export function checkDocumentStyles(documentNode: Document, timestamp: number): void {
+    if (config.lean && config.lite) { return; }
 
     if (documentNodes.indexOf(documentNode) === -1) {
         documentNodes.push(documentNode);
@@ -72,13 +69,13 @@ export function checkDocumentStyles(documentNode: Document, cachedTimestamp: num
             proxyStyleRules(documentNode.defaultView);
         }
     }
-    const timestamp = cachedTimestamp || time();
+    timestamp = timestamp || time();
     if (!documentNode?.adoptedStyleSheets) {
         // if we don't have adoptedStyledSheets on the Node passed to us, we can short circuit.
         return;
     }
-    const currentStyleSheets: string[] = [];
-    for (const styleSheet of documentNode.adoptedStyleSheets) {
+    let currentStyleSheets: string[] = [];
+    for (var styleSheet of documentNode.adoptedStyleSheets) {
         // If we haven't seen this style sheet on this page yet, we create a reference to it for the visualizer.
         // For SPA or times in which Clarity restarts on a given page, our visualizer would lose context
         // on the previously created style sheet for page N-1.
@@ -93,27 +90,22 @@ export function checkDocumentStyles(documentNode: Document, cachedTimestamp: num
         currentStyleSheets.push(styleSheet[styleSheetId]);
     }
 
-    const documentId = getId(documentNode, true);
+    let documentId = getId(documentNode, true);
     if (!styleSheetMap[documentId]) {
         styleSheetMap[documentId] = [];
     }
     if (!arraysEqual(currentStyleSheets, styleSheetMap[documentId])) {
         // Using -1 to signify the root document node as we don't track that as part of our nodeMap
-        trackStyleAdoption(
-            timestamp,
-            documentNode === document ? -1 : getId(documentNode),
-            StyleSheetOperation.SetAdoptedStyles,
-            currentStyleSheets,
-        );
+        trackStyleAdoption(timestamp, documentNode == document ? -1 : getId(documentNode), StyleSheetOperation.SetAdoptedStyles, currentStyleSheets);
         styleSheetMap[documentId] = currentStyleSheets;
         styleTimeMap[documentId] = timestamp;
     }
 }
 
 export function compute(): void {
-    for (const documentNode of documentNodes) {
-        const docId = documentNode === document ? -1 : getId(documentNode);
-        const ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
+    for (var documentNode of documentNodes) {
+        var docId = documentNode == document ? -1 : getId(documentNode);
+        let ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
         checkDocumentStyles(documentNode, ts);
     }
 }
@@ -138,8 +130,8 @@ function trackStyleChange(time: number, id: string, operation: StyleSheetOperati
         data: {
             id,
             operation,
-            cssRules,
-        },
+            cssRules
+        }
     });
 
     encode(Event.StyleSheetUpdate);
@@ -152,8 +144,8 @@ function trackStyleAdoption(time: number, id: number, operation: StyleSheetOpera
         data: {
             id,
             operation,
-            newIds,
-        },
+            newIds
+        }
     });
 
     encode(Event.StyleSheetAdoption);
@@ -165,4 +157,4 @@ function arraysEqual(a: string[], b: string[]): boolean {
     }
 
     return a.every((value, index) => value === b[index]);
-}
+}

package/src/layout/target.ts

@@ -1,34 +1,30 @@
 import { Privacy } from "@clarity-types/core";
-import type { Event } from "@clarity-types/data";
-import type { TargetMetadata } from "@clarity-types/layout";
+import { Event } from "@clarity-types/data";
+import { TargetMetadata } from "@clarity-types/layout";
 import * as fraud from "@src/diagnostic/fraud";
+import * as region from "@src/layout/region";
 import * as dom from "@src/layout/dom";
 import * as mutation from "@src/layout/mutation";
-import * as region from "@src/layout/region";
 
 export function target(evt: UIEvent): Node {
-    const path = evt.composed && evt.composedPath ? evt.composedPath() : null;
-    const node = (path && path.length > 0 ? path[0] : evt.target) as Node;
+    let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
+    let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
     mutation.active(); // Mark active periods of time so mutations can continue uninterrupted
     return node && node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
 }
 
 export function metadata(node: Node, event: Event, text: string = null): TargetMetadata {
     // If the node is null, we return a reserved value for id: 0. Valid assignment of id begins from 1+.
-    const output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text };
+    let output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text };
     if (node) {
-        const value = dom.get(node);
+        let value = dom.get(node);
         if (value !== null) {
-            const metadata = value.metadata;
+            let metadata = value.metadata;
             output.id = value.id;
             output.hash = value.hash;
             output.privacy = metadata.privacy;
-            if (value.region) {
-                region.track(value.region, event);
-            }
-            if (metadata.fraud) {
-                fraud.check(metadata.fraud, value.id, text || value.data.value);
-            }
+            if (value.region) { region.track(value.region, event); }
+            if (metadata.fraud) { fraud.check(metadata.fraud, value.id, text || value.data.value); }
         }
     }
 

package/src/layout/traverse.ts

@@ -1,34 +1,28 @@
-import { Task, type Timer } from "@clarity-types/core";
-import type { Source } from "@clarity-types/layout";
+import { Task, Timer } from "@clarity-types/core";
+import { Source } from "@clarity-types/layout";
 import * as task from "@src/core/task";
 import node from "@src/layout/node";
 
-export default async function (root: Node, timer: Timer, source: Source, timestamp: number): Promise<void> {
-    const queue = [root];
+export default async function(root: Node, timer: Timer, source: Source, timestamp: number): Promise<void> {
+    let queue = [root];
     while (queue.length > 0) {
-        const entry = queue.shift();
+        let entry = queue.shift();
         let next = entry.firstChild;
 
         while (next) {
             queue.push(next);
             next = next.nextSibling;
         }
-
+      
         // Check the status of current task to see if we should yield before continuing
         let state = task.state(timer);
-        if (state === Task.Wait) {
-            state = await task.suspend(timer);
-        }
-        if (state === Task.Stop) {
-            break;
-        }
+        if (state === Task.Wait) { state = await task.suspend(timer); }
+        if (state === Task.Stop) { break; }
 
         // Check if processing a node gives us a pointer to one of its sub nodes for traversal
         // E.g. an element node may give us a pointer to traverse shadowDom if shadowRoot property is set
         // Or, an iframe from the same origin could give a pointer to it's document for traversing contents of iframe.
-        const subnode = node(entry, source, timestamp);
-        if (subnode) {
-            queue.push(subnode);
-        }
+        let subnode = node(entry, source, timestamp);
+        if (subnode) { queue.push(subnode); }
     }
-}
+}

package/src/performance/blank.ts

@@ -1,6 +1,6 @@
 export * from "@src/insight/blank";
 
-export const keys = [];
+export let keys = [];
 
 /* Intentionally blank module with empty code */
 export function hashText(): void {}

package/src/performance/encode.ts

@@ -1,11 +1,11 @@
-import { Event, type Token } from "@clarity-types/data";
+import {Event, Token} from "@clarity-types/data";
 import { time } from "@src/core/time";
 import { queue } from "@src/data/upload";
 import * as navigation from "@src/performance/navigation";
 
-export default async function (type: Event): Promise<void> {
-    const t = time();
-    const tokens: Token[] = [t, type];
+export default async function(type: Event): Promise<void> {
+    let t = time();
+    let tokens: Token[] = [t, type];
     switch (type) {
         case Event.Navigation:
             tokens.push(navigation.data.fetchStart);

package/src/performance/interaction.ts

@@ -1,8 +1,8 @@
-import type { Interaction, PerformanceEventTiming } from "@clarity-types/data";
+import { PerformanceEventTiming, Interaction } from '@clarity-types/data';
 
 // Estimate variables to keep track of interactions
 let interactionCountEstimate = 0;
-let minKnownInteractionId = Number.POSITIVE_INFINITY;
+let minKnownInteractionId = Infinity;
 let maxKnownInteractionId = 0;
 
 let prevInteractionCount = 0; // Used to track interaction count between pages
@@ -21,25 +21,33 @@ const longestInteractionMap: Map<number, Interaction> = new Map();
  * Dividing by 7 helps approximate the interaction count more accurately, since interaction IDs are spread out across a large range.
  */
 const countInteractions = (entry: PerformanceEventTiming) => {
-    if ("interactionCount" in performance) {
-        interactionCountEstimate = performance.interactionCount as number;
-        return;
-    }
-
-    if (entry.interactionId) {
-        minKnownInteractionId = Math.min(minKnownInteractionId, entry.interactionId);
-        maxKnownInteractionId = Math.max(maxKnownInteractionId, entry.interactionId);
-
-        interactionCountEstimate = maxKnownInteractionId ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1 : 0;
-    }
+  if ('interactionCount' in performance) {
+    interactionCountEstimate = performance.interactionCount as number;
+    return;
+  }
+
+  if (entry.interactionId) {
+    minKnownInteractionId = Math.min(
+      minKnownInteractionId,
+      entry.interactionId
+    );
+    maxKnownInteractionId = Math.max(
+      maxKnownInteractionId,
+      entry.interactionId
+    );
+
+    interactionCountEstimate = maxKnownInteractionId
+      ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
+      : 0;
+  }
 };
 
 const getInteractionCount = () => {
-    return interactionCountEstimate || 0;
+  return interactionCountEstimate || 0;
 };
 
 const getInteractionCountForNavigation = () => {
-    return getInteractionCount() - prevInteractionCount;
+  return getInteractionCount() - prevInteractionCount;
 };
 
 /**
@@ -47,67 +55,71 @@ const getInteractionCountForNavigation = () => {
  * the candidate interaction based on the current interaction count.
  * Dividing by 50 is a heuristic to estimate the 98th percentile (P98) interaction.
  * This assumes one out of every 50 interactions represents the P98 interaction.
- * By dividing the total interaction count by 50, we get an index to approximate
+ * By dividing the total interaction count by 50, we get an index to approximate 
  * the slowest 2% of interactions, helping identify a likely P98 candidate.
  */
 export const estimateP98LongestInteraction = () => {
-    if (!longestInteractionList.length) {
-        return -1;
-    }
+  if(!longestInteractionList.length){
+    return -1;
+  }
 
-    const candidateInteractionIndex = Math.min(longestInteractionList.length - 1, Math.floor(getInteractionCountForNavigation() / 50));
+  const candidateInteractionIndex = Math.min(
+    longestInteractionList.length - 1,
+    Math.floor(getInteractionCountForNavigation() / 50)
+  );
 
-    return longestInteractionList[candidateInteractionIndex].latency;
+  return longestInteractionList[candidateInteractionIndex].latency;
 };
 
 /**
  * Resets the interaction tracking, usually called after navigation to a new page.
  */
 export const resetInteractions = () => {
-    prevInteractionCount = getInteractionCount();
-    longestInteractionList.length = 0;
-    longestInteractionMap.clear();
+  prevInteractionCount = getInteractionCount();
+  longestInteractionList.length = 0;
+  longestInteractionMap.clear();
 };
 
 /**
  * Processes a PerformanceEventTiming entry by updating the longest interaction list.
  */
 export const processInteractionEntry = (entry: PerformanceEventTiming) => {
-    // Ignore entries with 0 interactionId or very short durations
-    if (!entry.interactionId || entry.duration < DEFAULT_DURATION_THRESHOLD) {
-        return;
+  // Ignore entries with 0 interactionId or very short durations
+  if (!entry.interactionId || entry.duration < DEFAULT_DURATION_THRESHOLD) {
+    return;
+  }
+
+  countInteractions(entry);
+
+  const minLongestInteraction =
+    longestInteractionList[longestInteractionList.length - 1];
+
+  const existingInteraction = longestInteractionMap.get(entry.interactionId!);
+
+  // Either update existing, add new, or replace shortest interaction if necessary
+  if (
+    existingInteraction ||
+    longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
+    entry.duration > minLongestInteraction?.latency
+  ) {
+    if (!existingInteraction) {
+      const interaction = {
+        id: entry.interactionId,
+        latency: entry.duration,
+      };
+      longestInteractionMap.set(interaction.id, interaction);
+      longestInteractionList.push(interaction);
+    } else if (entry.duration > existingInteraction.latency) {
+      existingInteraction.latency = entry.duration;
     }
 
-    countInteractions(entry);
-
-    const minLongestInteraction = longestInteractionList[longestInteractionList.length - 1];
-
-    const existingInteraction = longestInteractionMap.get(entry.interactionId);
-
-    // Either update existing, add new, or replace shortest interaction if necessary
-    if (
-        existingInteraction ||
-        longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
-        entry.duration > minLongestInteraction?.latency
-    ) {
-        if (!existingInteraction) {
-            const interaction = {
-                id: entry.interactionId,
-                latency: entry.duration,
-            };
-            longestInteractionMap.set(interaction.id, interaction);
-            longestInteractionList.push(interaction);
-        } else if (entry.duration > existingInteraction.latency) {
-            existingInteraction.latency = entry.duration;
-        }
-
-        longestInteractionList.sort((a, b) => b.latency - a.latency);
-
-        // Trim the list to the maximum number of interactions to consider
-        if (longestInteractionList.length > MAX_INTERACTIONS_TO_CONSIDER) {
-            for (const i of longestInteractionList.splice(MAX_INTERACTIONS_TO_CONSIDER)) {
-                longestInteractionMap.delete(i.id);
-            }
-        }
+    longestInteractionList.sort((a, b) => b.latency - a.latency);
+
+    // Trim the list to the maximum number of interactions to consider
+    if (longestInteractionList.length > MAX_INTERACTIONS_TO_CONSIDER) {
+      longestInteractionList
+        .splice(MAX_INTERACTIONS_TO_CONSIDER)
+        .forEach((i) => longestInteractionMap.delete(i.id));
     }
+  }
 };

package/src/performance/navigation.ts

@@ -1,5 +1,5 @@
 import { Event } from "@clarity-types/data";
-import type { NavigationData } from "@clarity-types/performance";
+import { NavigationData } from "@clarity-types/performance";
 import encode from "./encode";
 
 export let data: NavigationData = null;
@@ -25,7 +25,7 @@ export function compute(entry: PerformanceNavigationTiming): void {
         type: entry.type,
         protocol: entry.nextHopProtocol,
         encodedSize: entry.encodedBodySize ? entry.encodedBodySize : 0,
-        decodedSize: entry.decodedBodySize ? entry.decodedBodySize : 0,
+        decodedSize: entry.decodedBodySize ? entry.decodedBodySize : 0
     };
     encode(Event.Navigation);
 }