clarity-js 0.8.11-beta → 0.8.11

package/src/layout/node.ts

@@ -1,46 +1,47 @@
-import { Constant, Source } from "@clarity-types/layout";
 import { Code, Dimension, Severity } from "@clarity-types/data";
-import * as dom from "./dom";
+import { Constant, Source } from "@clarity-types/layout";
 import * as event from "@src/core/event";
 import * as dimension from "@src/data/dimension";
+import { electron } from "@src/data/metadata";
 import * as internal from "@src/diagnostic/internal";
 import * as interaction from "@src/interaction";
 import * as mutation from "@src/layout/mutation";
 import * as schema from "@src/layout/schema";
 import { checkDocumentStyles } from "@src/layout/style";
-import { electron } from "@src/data/metadata";
+import * as dom from "./dom";
 
 const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror", "data-drupal-form-submit-last", "aria-label"];
 const newlineRegex = /[\r\n]+/g;
 
-export default function (node: Node, source: Source, timestamp: number): Node {
+export default function (inputNode: Node, source: Source, timestamp: number): Node {
+    let node = inputNode;
     let child: Node = null;
 
     // Do not track this change if we are attempting to remove a node before discovering it
-    if (source === Source.ChildListRemove && dom.has(node) === false) { return child; }
+    if (source === Source.ChildListRemove && dom.has(node) === false) {
+        return child;
+    }
 
     // Special handling for text nodes that belong to style nodes
-    if (source !== Source.Discover &&
-        node.nodeType === Node.TEXT_NODE &&
-        node.parentElement &&
-        node.parentElement.tagName === "STYLE") {
+    if (source !== Source.Discover && node.nodeType === Node.TEXT_NODE && node.parentElement && node.parentElement.tagName === "STYLE") {
         node = node.parentNode;
     }
 
-    let add = dom.has(node) === false;
-    let call = add ? "add" : "update";
+    const add = dom.has(node) === false;
+    const call = add ? "add" : "update";
     let parent = node.parentElement ? node.parentElement : null;
-    let insideFrame = node.ownerDocument !== document;
+    const insideFrame = node.ownerDocument !== document;
     switch (node.nodeType) {
-        case Node.DOCUMENT_TYPE_NODE:
+        case Node.DOCUMENT_TYPE_NODE: {
             parent = insideFrame && node.parentNode ? dom.iframe(node.parentNode) : parent;
-            let docTypePrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
-            let doctype = node as DocumentType;
-            let docName = doctype.name ? doctype.name : Constant.HTML; 
-            let docAttributes = { name: docName, publicId: doctype.publicId, systemId: doctype.systemId };
-            let docData = { tag: docTypePrefix + Constant.DocumentTag, attributes: docAttributes };
+            const docTypePrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
+            const doctype = node as DocumentType;
+            const docName = doctype.name ? doctype.name : Constant.HTML;
+            const docAttributes = { name: docName, publicId: doctype.publicId, systemId: doctype.systemId };
+            const docData = { tag: docTypePrefix + Constant.DocumentTag, attributes: docAttributes };
             dom[call](node, parent, docData, source);
             break;
+        }
         case Node.DOCUMENT_NODE:
             // We check for regions in the beginning when discovering document and
             // later whenever there are new additions or modifications to DOM (mutations)
@@ -50,20 +51,20 @@ export default function (node: Node, source: Source, timestamp: number): Node {
             checkDocumentStyles(node as Document, timestamp);
             observe(node as Document);
             break;
-        case Node.DOCUMENT_FRAGMENT_NODE:
-            let shadowRoot = (node as ShadowRoot);
+        case Node.DOCUMENT_FRAGMENT_NODE: {
+            const shadowRoot = node as ShadowRoot;
             if (shadowRoot.host) {
                 dom.parse(shadowRoot);
-                let type = typeof (shadowRoot.constructor);
+                const type = typeof shadowRoot.constructor;
                 if (type === Constant.Function && shadowRoot.constructor.toString().indexOf(Constant.NativeCode) >= 0) {
                     observe(shadowRoot);
-                    
+
                     // See: https://wicg.github.io/construct-stylesheets/ for more details on adoptedStyleSheets.
                     // At the moment, we are only able to capture "open" shadow DOM nodes. If they are closed, they are not accessible.
                     // In future we may decide to proxy "attachShadow" call to gain access, but at the moment, we don't want to
                     // cause any unintended side effect to the page. We will re-evaluate after we gather more real world data on this.
-                    let style = Constant.Empty as string;
-                    let fragmentData = { tag: Constant.ShadowDomTag, attributes: { style } };
+                    const style = Constant.Empty as string;
+                    const fragmentData = { tag: Constant.ShadowDomTag, attributes: { style } };
                     dom[call](node, shadowRoot.host, fragmentData, source);
                 } else {
                     // If the browser doesn't support shadow DOM natively, we detect that, and send appropriate tag back.
@@ -74,91 +75,100 @@ export default function (node: Node, source: Source, timestamp: number): Node {
                 checkDocumentStyles(node as Document, timestamp);
             }
             break;
+        }
         case Node.TEXT_NODE:
             // In IE11 TEXT_NODE doesn't expose a valid parentElement property. Instead we need to lookup parentNode property.
-            parent = parent ? parent : node.parentNode as HTMLElement;
+            parent = parent ? parent : (node.parentNode as HTMLElement);
             // Account for this text node only if we are tracking the parent node
             // We do not wish to track text nodes for ignored parent nodes, like script tags
             // Also, we do not track text nodes for STYLE tags
             // The only exception is when we receive a mutation to remove the text node, in that case
             // parent will be null, but we can still process the node by checking it's an update call.
             if (call === "update" || (parent && dom.has(parent) && parent.tagName !== "STYLE" && parent.tagName !== "NOSCRIPT")) {
-                let textData = { tag: Constant.TextTag, value: node.nodeValue };
+                const textData = { tag: Constant.TextTag, value: node.nodeValue };
                 dom[call](node, parent, textData, source);
             }
             break;
-        case Node.ELEMENT_NODE:
-            let element = (node as HTMLElement);
+        case Node.ELEMENT_NODE: {
+            const element = node as HTMLElement;
             let tag = element.tagName;
-            let attributes = getAttributes(element);
+            const attributes = getAttributes(element);
             // In some cases, external libraries like vue-fragment, can modify parentNode property to not be in sync with the DOM
             // For correctness, we first look at parentElement and if it not present then fall back to using parentNode
-            parent = node.parentElement ? node.parentElement : (node.parentNode ? node.parentNode as HTMLElement : null);
+            parent = node.parentElement ? node.parentElement : node.parentNode ? (node.parentNode as HTMLElement) : null;
             // If we encounter a node that is part of SVG namespace, prefix the tag with SVG_PREFIX
-            if (element.namespaceURI === Constant.SvgNamespace) { tag = Constant.SvgPrefix + tag; }
+            if (element.namespaceURI === Constant.SvgNamespace) {
+                tag = Constant.SvgPrefix + tag;
+            }
 
             switch (tag) {
-                case "HTML":
+                case "HTML": {
                     parent = insideFrame && parent ? dom.iframe(parent) : parent;
-                    let htmlPrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
-                    let htmlData = { tag: htmlPrefix + tag, attributes };
+                    const htmlPrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
+                    const htmlData = { tag: htmlPrefix + tag, attributes };
                     dom[call](node, parent, htmlData, source);
                     break;
+                }
                 case "SCRIPT":
                     if (Constant.Type in attributes && attributes[Constant.Type] === Constant.JsonLD) {
                         try {
                             schema.ld(JSON.parse((element as HTMLScriptElement).text.replace(newlineRegex, Constant.Empty)));
-                        } catch { /* do nothing */ }
+                        } catch {
+                            /* do nothing */
+                        }
                     }
                     break;
-                case "NOSCRIPT":
+                case "NOSCRIPT": {
                     // keeping the noscript tag but ignoring its contents. Some HTML markup relies on having these tags
                     // to maintain parity with the original css view, but we don't want to execute any noscript in Clarity
-                    let noscriptData = { tag, attributes: {}, value: '' };
+                    const noscriptData = { tag, attributes: {}, value: "" };
                     dom[call](node, parent, noscriptData, source);
                     break;
-                case "META":
-                    var key = (Constant.Property in attributes ?
-                                    Constant.Property : 
-                                    (Constant.Name in attributes ? Constant.Name : null));
+                }
+                case "META": {
+                    const key = Constant.Property in attributes ? Constant.Property : Constant.Name in attributes ? Constant.Name : null;
                     if (key && Constant.Content in attributes) {
-                        let content = attributes[Constant.Content]
-                        switch(attributes[key]) {
+                        const content = attributes[Constant.Content];
+                        switch (attributes[key]) {
                             case Constant.ogTitle:
-                                dimension.log(Dimension.MetaTitle, content)
+                                dimension.log(Dimension.MetaTitle, content);
                                 break;
                             case Constant.ogType:
-                                dimension.log(Dimension.MetaType, content)
+                                dimension.log(Dimension.MetaType, content);
                                 break;
                             case Constant.Generator:
-                                dimension.log(Dimension.Generator, content)
+                                dimension.log(Dimension.Generator, content);
                                 break;
                         }
                     }
                     break;
-                case "HEAD":
-                    let head = { tag, attributes };
-                    let l = insideFrame && node.ownerDocument?.location ? node.ownerDocument.location : location;
-                    head.attributes[Constant.Base] = l.protocol + "//" + l.host + l.pathname;
+                }
+                case "HEAD": {
+                    const head = { tag, attributes };
+                    const l = insideFrame && node.ownerDocument?.location ? node.ownerDocument.location : location;
+                    head.attributes[Constant.Base] = `${l.protocol}//${l.host}${l.pathname}`;
                     dom[call](node, parent, head, source);
                     break;
-                case "BASE":
+                }
+                case "BASE": {
                     // Override the auto detected base path to explicit value specified in this tag
-                    let baseHead = dom.get(node.parentElement);
+                    const baseHead = dom.get(node.parentElement);
                     if (baseHead) {
                         // We create "a" element so we can generate protocol and hostname for relative paths like "/path/"
-                        let a = document.createElement("a");
-                        a.href = attributes["href"];
-                        baseHead.data.attributes[Constant.Base] = a.protocol + "//" + a.host + a.pathname;
+                        const a = document.createElement("a");
+                        a.href = attributes.href;
+                        baseHead.data.attributes[Constant.Base] = `${a.protocol}//${a.host}${a.pathname}`;
                     }
                     break;
-                case "STYLE":
-                    let styleData = { tag, attributes, value: getStyleValue(element as HTMLStyleElement) };
+                }
+                case "STYLE": {
+                    const styleData = { tag, attributes, value: getStyleValue(element as HTMLStyleElement) };
                     dom[call](node, parent, styleData, source);
                     break;
-                case "IFRAME":
-                    let iframe = node as HTMLIFrameElement;
-                    let frameData = { tag, attributes };
+                }
+                case "IFRAME": {
+                    const iframe = node as HTMLIFrameElement;
+                    const frameData = { tag, attributes };
                     if (dom.sameorigin(iframe)) {
                         mutation.monitor(iframe);
                         frameData.attributes[Constant.SameOrigin] = "true";
@@ -171,14 +181,15 @@ export default function (node: Node, source: Source, timestamp: number): Node {
                     }
                     dom[call](node, parent, frameData, source);
                     break;
-                case "LINK":
+                }
+                case "LINK": {
                     // electron stylesheets reference the local file system - translating those
                     // to inline styles so playback can work
-                    if (electron && attributes['rel'] === Constant.StyleSheet) {
-                        for (var styleSheetIndex in Object.keys(document.styleSheets)) {
-                            var currentStyleSheet = document.styleSheets[styleSheetIndex];
-                            if (currentStyleSheet.ownerNode == element) {
-                                let syntheticStyleData = { tag: "STYLE", attributes, value: getCssRules(currentStyleSheet) };
+                    if (electron && attributes.rel === Constant.StyleSheet) {
+                        for (const styleSheetIndex in Object.keys(document.styleSheets)) {
+                            const currentStyleSheet = document.styleSheets[styleSheetIndex];
+                            if (currentStyleSheet.ownerNode === element) {
+                                const syntheticStyleData = { tag: "STYLE", attributes, value: getCssRules(currentStyleSheet) };
                                 dom[call](node, parent, syntheticStyleData, source);
                                 break;
                             }
@@ -186,26 +197,32 @@ export default function (node: Node, source: Source, timestamp: number): Node {
                         break;
                     }
                     // for links that aren't electron style sheets we can process them normally
-                    let linkData = { tag, attributes };
+                    const linkData = { tag, attributes };
                     dom[call](node, parent, linkData, source);
                     break;
+                }
                 case "VIDEO":
                 case "AUDIO":
-                case "SOURCE":
+                case "SOURCE": {
                     // Ignoring any base64 src attribute for media elements to prevent big unused tokens to be sent and shock the network
                     if (Constant.Src in attributes && attributes[Constant.Src].startsWith("data:")) {
                         attributes[Constant.Src] = "";
                     }
-                    let mediaTag = { tag, attributes };
+                    const mediaTag = { tag, attributes };
                     dom[call](node, parent, mediaTag, source);
                     break;
-                default:
-                    let data = { tag, attributes };
-                    if (element.shadowRoot) { child = element.shadowRoot; }
+                }
+                default: {
+                    const data = { tag, attributes };
+                    if (element.shadowRoot) {
+                        child = element.shadowRoot;
+                    }
                     dom[call](node, parent, data, source);
                     break;
+                }
             }
             break;
+        }
         default:
             break;
     }
@@ -213,7 +230,9 @@ export default function (node: Node, source: Source, timestamp: number): Node {
 }
 
 function observe(root: Document | ShadowRoot): void {
-    if (dom.has(root) || event.has(root)) { return; }
+    if (dom.has(root) || event.has(root)) {
+        return;
+    }
     mutation.observe(root); // Observe mutations for this root node
     interaction.observe(root); // Observe interactions for this root node
 }
@@ -228,13 +247,13 @@ export function removeObserver(root: HTMLIFrameElement): void {
         // For iframes, scroll event is observed on content window and this needs to be removed as well
         event.unbind(win);
     }
-    
+
     if (doc) {
         // When an iframe is removed, we should also remove all listeners attached to its document
         // to avoid memory leaks.
         event.unbind(doc);
         mutation.disconnect(doc);
-        
+
         // Remove iframe and content document from maps tracking them
         dom.removeIFrame(root, doc);
     }
@@ -246,7 +265,7 @@ function getStyleValue(style: HTMLStyleElement): string {
     // Additionally, check if style node has an id - if so it's at a high risk to have experienced dynamic
     // style updates which would make the textContent out of date with its true style contribution.
     let value = style.textContent ? style.textContent.trim() : Constant.Empty;
-    let dataset = style.dataset ? Object.keys(style.dataset).length : 0;
+    const dataset = style.dataset ? Object.keys(style.dataset).length : 0;
     if (value.length === 0 || dataset > 0 || style.id.length > 0) {
         value = getCssRules(style.sheet as CSSStyleSheet);
     }
@@ -257,9 +276,13 @@ export function getCssRules(sheet: CSSStyleSheet): string {
     let value = Constant.Empty as string;
     let cssRules = null;
     // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
-    try { cssRules = sheet ? sheet.cssRules : []; } catch (e) {
+    try {
+        cssRules = sheet ? sheet.cssRules : [];
+    } catch (e) {
         internal.log(Code.CssRules, Severity.Warning, e ? e.name : null);
-        if (e && e.name !== "SecurityError") { throw e; }
+        if (e && e.name !== "SecurityError") {
+            throw e;
+        }
     }
 
     if (cssRules !== null) {
@@ -272,11 +295,11 @@ export function getCssRules(sheet: CSSStyleSheet): string {
 }
 
 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++) {
-            let name = attributes[i].name;
+            const name = attributes[i].name;
             if (IGNORE_ATTRIBUTES.indexOf(name) < 0) {
                 output[name] = attributes[i].value;
             }

package/src/layout/offset.ts

@@ -1,15 +1,16 @@
-import { OffsetDistance } from "@clarity-types/core";
+import type { OffsetDistance } from "@clarity-types/core";
 import { iframe } from "@src/layout/dom";
 
-export function offset(element: HTMLElement): OffsetDistance {
-    let output: OffsetDistance = { x: 0, y: 0 };
+export function offset(inputElement: HTMLElement): OffsetDistance {
+    let element = inputElement;
+    const output: OffsetDistance = { x: 0, y: 0 };
 
     // Walk up the chain to ensure we compute offset distance correctly
     // In case where we may have nested IFRAMEs, we keep walking up until we get to the top most parent page
-    if (element && element.offsetParent) {
+    if (element?.offsetParent) {
         do {
-            let parent = element.offsetParent as HTMLElement;
-            let frame = parent === null ? iframe(element.ownerDocument) : null;
+            const parent = element.offsetParent as HTMLElement;
+            const frame = parent === null ? iframe(element.ownerDocument) : null;
             output.x += element.offsetLeft;
             output.y += element.offsetTop;
             element = frame ? frame : parent;

package/src/layout/region.ts

@@ -1,5 +1,5 @@
 import { Event, Setting } from "@clarity-types/data";
-import { InteractionState, RegionData, RegionState, RegionQueue, RegionVisibility } from "@clarity-types/layout";
+import { InteractionState, type RegionData, type RegionQueue, type RegionState, RegionVisibility } from "@clarity-types/layout";
 import { FunctionNames } from "@clarity-types/performance";
 import { time } from "@src/core/time";
 import * as dom from "@src/layout/dom";
@@ -18,20 +18,22 @@ export function start(): void {
     regionMap = new WeakMap();
     regions = {};
     queue = [];
-    watch = window["IntersectionObserver"] ? true : false;
-    
+    watch = !!window.IntersectionObserver;
 }
 
 export function observe(node: Node, name: string): void {
     if (regionMap.has(node) === false) {
         regionMap.set(node, name);
-        observer = observer === null && watch ? new IntersectionObserver(handler, {
-            // Get notified as intersection continues to change
-            // This allows us to process regions that get partially hidden during the lifetime of the page
-            // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
-            // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
-            threshold: [0, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
-        }) : observer;
+        observer =
+            observer === null && watch
+                ? new IntersectionObserver(handler, {
+                      // Get notified as intersection continues to change
+                      // This allows us to process regions that get partially hidden during the lifetime of the page
+                      // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
+                      // By default, intersection observers only fire an event when even a single pixel is visible and not thereafter.
+                      threshold: [0, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+                  })
+                : observer;
         if (observer && node && node.nodeType === Node.ELEMENT_NODE) {
             observer.observe(node as Element);
         }
@@ -42,18 +44,25 @@ export function exists(node: Node): boolean {
     // Check if regionMap is not null before looking up a node
     // Since, dom module stops after region module, it's possible that we may set regionMap to be null
     // and still attempt to call exists on a late coming DOM mutation (or addition), effectively causing a script error
-    return regionMap && regionMap.has(node);
+    return regionMap?.has(node);
 }
 
 export function track(id: number, event: Event): void {
-    let node = dom.getNode(id);
-    let data = id in regions ? regions[id] : { id, visibility: RegionVisibility.Rendered, interaction: InteractionState.None, name: regionMap.get(node) };
-    
+    const node = dom.getNode(id);
+    const data =
+        id in regions
+            ? regions[id]
+            : { id, visibility: RegionVisibility.Rendered, interaction: InteractionState.None, name: regionMap.get(node) };
+
     // Determine the interaction state based on incoming event
     let interaction = InteractionState.None;
     switch (event) {
-        case Event.Click: interaction = InteractionState.Clicked; break;
-        case Event.Input: interaction = InteractionState.Input; break;
+        case Event.Click:
+            interaction = InteractionState.Clicked;
+            break;
+        case Event.Input:
+            interaction = InteractionState.Input;
+            break;
     }
     // Process updates to this region, if applicable
     process(node, data, interaction, data.visibility);
@@ -64,59 +73,73 @@ export function compute(): void {
     // Process any regions where we couldn't resolve an "id" for at the time of last intersection observer event
     // This could happen in cases where elements are not yet processed by Clarity's virtual DOM but browser reports a change, regardless.
     // For those cases we add them to the queue and re-process them below
-    let q = [];
-    for (let r of queue) {
-        let id = dom.getId(r.node);
+    const q = [];
+    for (const r of queue) {
+        const id = dom.getId(r.node);
         if (id) {
             r.state.data.id = id;
             regions[id] = r.state.data;
             state.push(r.state);
-        } else { q.push(r); }
+        } else {
+            q.push(r);
+        }
     }
     queue = q;
 
     // Schedule encode only when we have at least one valid data entry
-    if (state.length > 0) { encode(Event.Region); }
+    if (state.length > 0) {
+        encode(Event.Region);
+    }
 }
 
 function handler(entries: IntersectionObserverEntry[]): void {
-    for (let entry of entries) {
-        let target = entry.target;
-        let rect = entry.boundingClientRect;
-        let overlap = entry.intersectionRect;
-        let viewport = entry.rootBounds;
+    for (const entry of entries) {
+        const target = entry.target;
+        const rect = entry.boundingClientRect;
+        const overlap = entry.intersectionRect;
+        const viewport = entry.rootBounds;
         // Only capture regions that have non-zero width or height to avoid tracking and sending regions
         // that cannot ever be seen by the user. In some cases, websites will have a multiple copy of the same region
         // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
         // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
-        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport.width > 0 && viewport.height > 0) {
-            let id = target ? dom.getId(target) : null;
-            let data = id in regions ? regions[id] : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
-            
+        if (regionMap.has(target) && rect.width + rect.height > 0 && viewport && viewport.width > 0 && viewport.height > 0) {
+            const id = target ? dom.getId(target) : null;
+            const data =
+                id in regions
+                    ? regions[id]
+                    : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
+
             // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
             // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
-            let viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
-            let visible = viewportRatio > Setting.ViewportIntersectionRatio || entry.intersectionRatio > Setting.IntersectionRatio;
+            const viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;
+            const visible = viewportRatio > Setting.ViewportIntersectionRatio || entry.intersectionRatio > Setting.IntersectionRatio;
             // If an element is either visible or was visible and has been scrolled to the end
-            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height. 
+            // i.e. Scrolled to end is determined by if the starting position of the element + the window height is more than the total element height.
             // starting position is relative to the viewport - so Intersection observer returns a negative value for rect.top to indicate that the element top is above the viewport
-            let scrolledToEnd = (visible || data.visibility == RegionVisibility.Visible) && Math.abs(rect.top) + viewport.height > rect.height;
+            const scrolledToEnd =
+                (visible || data.visibility === RegionVisibility.Visible) && Math.abs(rect.top) + viewport.height > rect.height;
             // Process updates to this region, if applicable
-            process(target, data, data.interaction, 
-                        (scrolledToEnd ? 
-                            RegionVisibility.ScrolledToEnd :
-                            (visible ? RegionVisibility.Visible : RegionVisibility.Rendered)));
+            process(
+                target,
+                data,
+                data.interaction,
+                scrolledToEnd ? RegionVisibility.ScrolledToEnd : visible ? RegionVisibility.Visible : RegionVisibility.Rendered,
+            );
 
             // Stop observing this element now that we have already received scrolled signal
-            if (data.visibility >= RegionVisibility.ScrolledToEnd && observer) { observer.unobserve(target); }
+            if (data.visibility >= RegionVisibility.ScrolledToEnd && observer) {
+                observer.unobserve(target);
+            }
         }
     }
-    if (state.length > 0) { encode(Event.Region); }
+    if (state.length > 0) {
+        encode(Event.Region);
+    }
 }
 
 function process(n: Node, d: RegionData, s: InteractionState, v: RegionVisibility): void {
     // Check if received a state that supersedes existing state
-    let updated = s > d.interaction || v > d.visibility;
+    const updated = s > d.interaction || v > d.visibility;
     d.interaction = s > d.interaction ? s : d.interaction;
     d.visibility = v > d.visibility ? v : d.visibility;
     // If the corresponding node is already discovered, update the internal state
@@ -128,16 +151,16 @@ function process(n: Node, d: RegionData, s: InteractionState, v: RegionVisibilit
         }
     } else {
         // Get the time before adding to queue to ensure accurate event time
-        queue.push({node: n, state: clone(d)}); 
+        queue.push({ node: n, state: clone(d) });
     }
 }
 
 function clone(r: RegionData): RegionState {
-    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name }};
+    return { time: time(), data: { id: r.id, interaction: r.interaction, visibility: r.visibility, name: r.name } };
 }
 
 export function reset(): void {
-    state = [];   
+    state = [];
 }
 
 export function stop(): void {

package/src/layout/schema.ts

@@ -6,8 +6,9 @@ import * as metric from "@src/data/metric";
 const digitsRegex = /[^0-9\.]/g;
 
 /* JSON+LD (Linked Data) Recursive Parser */
+// biome-ignore lint/suspicious/noExplicitAny: specifically parsing json with any type
 export function ld(json: any): void {
-    for (let key of Object.keys(json)) {
+    for (const key of Object.keys(json)) {
         let value = json[key];
         if (key === JsonLD.Type && typeof value === "string") {
             value = value.toLowerCase();
@@ -17,14 +18,16 @@ export function ld(json: any): void {
                 case JsonLD.Article:
                 case JsonLD.Recipe:
                     dimension.log(Dimension.SchemaType, json[key]);
-                    dimension.log(Dimension.AuthorName,  json[JsonLD.Creator]);
-                    dimension.log(Dimension.Headline,  json[JsonLD.Headline]);
+                    dimension.log(Dimension.AuthorName, json[JsonLD.Creator]);
+                    dimension.log(Dimension.Headline, json[JsonLD.Headline]);
                     break;
                 case JsonLD.Product:
                     dimension.log(Dimension.SchemaType, json[key]);
                     dimension.log(Dimension.ProductName, json[JsonLD.Name]);
                     dimension.log(Dimension.ProductSku, json[JsonLD.Sku]);
-                    if (json[JsonLD.Brand]) { dimension.log(Dimension.ProductBrand, json[JsonLD.Brand][JsonLD.Name]); }
+                    if (json[JsonLD.Brand]) {
+                        dimension.log(Dimension.ProductBrand, json[JsonLD.Brand][JsonLD.Name]);
+                    }
                     break;
                 case JsonLD.AggregateRating:
                     if (json[JsonLD.RatingValue]) {
@@ -48,15 +51,19 @@ export function ld(json: any): void {
             }
         }
         // Continue parsing nested objects
-        if (value !== null && typeof(value) === Constant.Object) { ld(value); }
+        if (value !== null && typeof value === "object") {
+            ld(value);
+        }
     }
 }
 
-function num(input: string | number, scale: number = 1): number {
+function num(input: string | number, scale = 1): number {
     if (input !== null) {
         switch (typeof input) {
-            case Constant.Number: return Math.round((input as number) * scale);
-            case Constant.String: return Math.round(parseFloat((input as string).replace(digitsRegex, Constant.Empty)) * scale);
+            case Constant.Number:
+                return Math.round((input as number) * scale);
+            case Constant.String:
+                return Math.round(Number.parseFloat((input as string).replace(digitsRegex, Constant.Empty)) * scale);
         }
     }
     return null;