clarity-js 0.8.10-beta → 0.8.10

package/src/layout/selector.ts

@@ -1,5 +1,5 @@
 import { Character } from "../../types/data";
-import { Constant, Selector, SelectorInput } from "../../types/layout";
+import { Constant, Selector, type 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 {
-    let a = input.attributes;
+    const a = input.attributes;
     let prefix = input.prefix ? input.prefix[type] : null;
-    let suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position-1}` : `:nth-of-type(${input.position})`;
+    const suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position - 1}` : `:nth-of-type(${input.position})`;
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
@@ -22,24 +22,37 @@ 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}`;
-            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;
+            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;
             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.
-                    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); }
+                    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);
+                    }
                     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:
@@ -47,36 +60,45 @@ 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 {
-    let parts = input.split(Constant.Separator);
+    const parts = input.split(Constant.Separator);
     for (let i = 0; i < parts.length; i++) {
-        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));
+        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);
     }
     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++) {
-        let c = value.charCodeAt(i);
-        if (c >= Character.Zero && c <= Character.Nine) { return false };
+        const c = value.charCodeAt(i);
+        if (c >= Character.Zero && c <= Character.Nine) {
+            return false;
+        }
     }
     return true;
 }

package/src/layout/style.ts

@@ -1,67 +1,70 @@
 import { Event } from "@clarity-types/data";
-import { StyleSheetOperation, StyleSheetState } from "@clarity-types/layout";
+import { type IWindowWithOverrides, StyleSheetOperation, type StyleSheetState } from "@clarity-types/layout";
+import * as core from "@src/core";
+import config from "@src/core/config";
 import { time } from "@src/core/time";
 import { shortid } from "@src/data/metadata";
-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 encode from "@src/layout/encode";
 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: any) {
+function proxyStyleRules(win: IWindowWithOverrides) {
     if ((config.lean && config.lite) || win === null || win === undefined) {
         return;
     }
-    
+
     win.clarityOverrides = win.clarityOverrides || {};
 
-    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 (win.CSSStyleSheet?.prototype) {
+        if (win.clarityOverrides.replace === undefined) {
+            win.clarityOverrides.replace = win.CSSStyleSheet.prototype.replace;
+            win.CSSStyleSheet.prototype.replace = function (...args): 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, arguments[0]);
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, args[0]);
                     }
                 }
-                return win.clarityOverrides.replace.apply(this, arguments);
+                return win.clarityOverrides.replace.apply(this, args);
             };
         }
 
-        if (win.clarityOverrides.replaceSync === undefined) { 
-            win.clarityOverrides.replaceSync = win.CSSStyleSheet.prototype.replaceSync; 
-            win.CSSStyleSheet.prototype.replaceSync = function(): void {
+        if (win.clarityOverrides.replaceSync === undefined) {
+            win.clarityOverrides.replaceSync = win.CSSStyleSheet.prototype.replaceSync;
+            win.CSSStyleSheet.prototype.replaceSync = function (...args): 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, arguments[0]);
-                    }                
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, args[0]);
+                    }
                 }
-                return win.clarityOverrides.replaceSync.apply(this, arguments);
+                win.clarityOverrides.replaceSync.apply(this, args);
+                return;
             };
         }
-    }   
+    }
 }
 
 export function start(): void {
     proxyStyleRules(window);
 }
 
-export function checkDocumentStyles(documentNode: Document, timestamp: number): void {
-    if (config.lean && config.lite) { return; }
+export function checkDocumentStyles(documentNode: Document, cachedTimestamp: number): void {
+    if (config.lean && config.lite) {
+        return;
+    }
 
     if (documentNodes.indexOf(documentNode) === -1) {
         documentNodes.push(documentNode);
@@ -69,13 +72,13 @@ export function checkDocumentStyles(documentNode: Document, timestamp: number):
             proxyStyleRules(documentNode.defaultView);
         }
     }
-    timestamp = timestamp || time();
+    const timestamp = cachedTimestamp || time();
     if (!documentNode?.adoptedStyleSheets) {
         // if we don't have adoptedStyledSheets on the Node passed to us, we can short circuit.
         return;
     }
-    let currentStyleSheets: string[] = [];
-    for (var styleSheet of documentNode.adoptedStyleSheets) {
+    const currentStyleSheets: string[] = [];
+    for (const 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.
@@ -90,22 +93,27 @@ export function checkDocumentStyles(documentNode: Document, timestamp: number):
         currentStyleSheets.push(styleSheet[styleSheetId]);
     }
 
-    let documentId = getId(documentNode, true);
+    const 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 (var documentNode of documentNodes) {
-        var docId = documentNode == document ? -1 : getId(documentNode);
-        let ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
+    for (const documentNode of documentNodes) {
+        const docId = documentNode === document ? -1 : getId(documentNode);
+        const ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
         checkDocumentStyles(documentNode, ts);
     }
 }
@@ -130,8 +138,8 @@ function trackStyleChange(time: number, id: string, operation: StyleSheetOperati
         data: {
             id,
             operation,
-            cssRules
-        }
+            cssRules,
+        },
     });
 
     encode(Event.StyleSheetUpdate);
@@ -144,8 +152,8 @@ function trackStyleAdoption(time: number, id: number, operation: StyleSheetOpera
         data: {
             id,
             operation,
-            newIds
-        }
+            newIds,
+        },
     });
 
     encode(Event.StyleSheetAdoption);
@@ -157,4 +165,4 @@ function arraysEqual(a: string[], b: string[]): boolean {
     }
 
     return a.every((value, index) => value === b[index]);
-}
+}

package/src/layout/target.ts

@@ -1,30 +1,34 @@
 import { Privacy } from "@clarity-types/core";
-import { Event } from "@clarity-types/data";
-import { TargetMetadata } from "@clarity-types/layout";
+import type { Event } from "@clarity-types/data";
+import type { 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 {
-    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;
     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+.
-    let output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text };
+    const output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text };
     if (node) {
-        let value = dom.get(node);
+        const value = dom.get(node);
         if (value !== null) {
-            let metadata = value.metadata;
+            const 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,28 +1,34 @@
-import { Task, Timer } from "@clarity-types/core";
-import { Source } from "@clarity-types/layout";
+import { Task, type Timer } from "@clarity-types/core";
+import type { 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> {
-    let queue = [root];
+export default async function (root: Node, timer: Timer, source: Source, timestamp: number): Promise<void> {
+    const queue = [root];
     while (queue.length > 0) {
-        let entry = queue.shift();
+        const 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.
-        let subnode = node(entry, source, timestamp);
-        if (subnode) { queue.push(subnode); }
+        const 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 let keys = [];
+export const keys = [];
 
 /* Intentionally blank module with empty code */
 export function hashText(): void {}

package/src/performance/encode.ts

@@ -1,11 +1,11 @@
-import {Event, Token} from "@clarity-types/data";
+import { Event, type 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> {
-    let t = time();
-    let tokens: Token[] = [t, type];
+export default async function (type: Event): Promise<void> {
+    const t = time();
+    const tokens: Token[] = [t, type];
     switch (type) {
         case Event.Navigation:
             tokens.push(navigation.data.fetchStart);

package/src/performance/interaction.ts

@@ -1,8 +1,8 @@
-import { PerformanceEventTiming, Interaction } from '@clarity-types/data';
+import type { Interaction, PerformanceEventTiming } from "@clarity-types/data";
 
 // Estimate variables to keep track of interactions
 let interactionCountEstimate = 0;
-let minKnownInteractionId = Infinity;
+let minKnownInteractionId = Number.POSITIVE_INFINITY;
 let maxKnownInteractionId = 0;
 
 let prevInteractionCount = 0; // Used to track interaction count between pages
@@ -21,33 +21,25 @@ 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;
 };
 
 /**
@@ -55,71 +47,67 @@ 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;
-  }
-
-  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;
+    // Ignore entries with 0 interactionId or very short durations
+    if (!entry.interactionId || entry.duration < DEFAULT_DURATION_THRESHOLD) {
+        return;
     }
 
-    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));
+    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);
+            }
+        }
     }
-  }
 };

package/src/performance/navigation.ts

@@ -1,5 +1,5 @@
 import { Event } from "@clarity-types/data";
-import { NavigationData } from "@clarity-types/performance";
+import type { 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);
 }