clarity-js 0.8.11-beta → 0.8.12

package/src/layout/animation.ts

@@ -1,30 +1,29 @@
 import { Event } from "@clarity-types/data";
-import { AnimationOperation, AnimationState } from "@clarity-types/layout";
+import { AnimationOperation, type AnimationState } from "@clarity-types/layout";
+import * as core from "@src/core";
 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 encode from "@src/layout/encode";
 
 export let state: AnimationState[] = [];
 let elementAnimate: (keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: number | KeyframeAnimationOptions) => Animation = null;
-let animationPlay: () => void = null;
-let animationPause: () => void = null;
-let animationCommitStyles: () => void = null;
-let animationCancel: () => void = null;
-let animationFinish: () => void = null;
-const animationId = 'clarityAnimationId';
-const operationCount = 'clarityOperationCount';
+const animationPlay: () => void = null;
+const animationPause: () => void = null;
+const animationCommitStyles: () => void = null;
+const animationCancel: () => void = null;
+const animationFinish: () => void = null;
+const animationId = "clarityAnimationId";
+const operationCount = "clarityOperationCount";
 const maxOperations = 20;
 
 export function start(): void {
     if (
-        window["Animation"] && 
-        window["Animation"].prototype && 
-        window["KeyframeEffect"] && 
-        window["KeyframeEffect"].prototype && 
-        window["KeyframeEffect"].prototype.getKeyframes &&
-        window["KeyframeEffect"].prototype.getTiming
+        window.Animation?.prototype &&
+        window.KeyframeEffect &&
+        window.KeyframeEffect.prototype &&
+        window.KeyframeEffect.prototype.getKeyframes &&
+        window.KeyframeEffect.prototype.getTiming
     ) {
         reset();
         overrideAnimationHelper(animationPlay, "play");
@@ -34,33 +33,39 @@ export function start(): void {
         overrideAnimationHelper(animationFinish, "finish");
         if (elementAnimate === null) {
             elementAnimate = Element.prototype.animate;
-            Element.prototype.animate = function(): Animation {
-                var createdAnimation = elementAnimate.apply(this, arguments);
+            Element.prototype.animate = function (...args): Animation {
+                const createdAnimation = elementAnimate.apply(this, args);
                 trackAnimationOperation(createdAnimation, "play");
                 return createdAnimation;
-            }
+            };
         }
         if (document.getAnimations) {
-            for (var animation of document.getAnimations()) {
+            for (const animation of document.getAnimations()) {
                 if (animation.playState === "finished") {
                     trackAnimationOperation(animation, "finish");
-                }
-                else if (animation.playState === "paused" || animation.playState === "idle") {
+                } else if (animation.playState === "paused" || animation.playState === "idle") {
                     trackAnimationOperation(animation, "pause");
-                }
-                else if (animation.playState === "running") {
+                } else if (animation.playState === "running") {
                     trackAnimationOperation(animation, "play");
                 }
             }
         }
-    }    
+    }
 }
 
 export function reset(): void {
     state = [];
 }
 
-function track(time: number, id: string, operation: AnimationOperation, keyFrames?: string, timing?: string, targetId?: number, timeline?: string): void {
+function track(
+    time: number,
+    id: string,
+    operation: AnimationOperation,
+    keyFrames?: string,
+    timing?: string,
+    targetId?: number,
+    timeline?: string,
+): void {
     state.push({
         time,
         event: Event.Animation,
@@ -70,8 +75,8 @@ function track(time: number, id: string, operation: AnimationOperation, keyFrame
             keyFrames,
             timing,
             targetId,
-            timeline
-        }
+            timeline,
+        },
     });
 
     encode(Event.Animation);
@@ -83,29 +88,30 @@ export function stop(): void {
 
 function overrideAnimationHelper(functionToOverride: () => void, name: string) {
     if (functionToOverride === null) {
-      functionToOverride = Animation.prototype[name];
-      Animation.prototype[name] = function(): void {
-        trackAnimationOperation(this, name);
-        return functionToOverride.apply(this, arguments);
-      }
+        // biome-ignore lint/style/noParameterAssign: function intentionally reassigns parameter for shimming
+        functionToOverride = Animation.prototype[name];
+        Animation.prototype[name] = function (...args): void {
+            trackAnimationOperation(this, name);
+            functionToOverride.apply(this, args);
+        };
     }
-  }
+}
 
 function trackAnimationOperation(animation: Animation, name: string) {
     if (core.active()) {
-        let effect = <KeyframeEffect>animation.effect;
-        let target = getId(effect.target);
+        const effect = <KeyframeEffect>animation.effect;
+        const target = effect?.target ? getId(effect.target) : null;
         if (target !== null && effect.getKeyframes && effect.getTiming) {
             if (!animation[animationId]) {
                 animation[animationId] = shortid();
                 animation[operationCount] = 0;
-                
-                let keyframes = effect.getKeyframes();
-                let timing = effect.getTiming();
+
+                const keyframes = effect.getKeyframes();
+                const timing = effect.getTiming();
                 track(time(), animation[animationId], AnimationOperation.Create, JSON.stringify(keyframes), JSON.stringify(timing), target);
             }
 
-            if (animation[operationCount]++ < maxOperations)  {
+            if (animation[operationCount]++ < maxOperations) {
                 let operation: AnimationOperation = null;
                 switch (name) {
                     case "play":
@@ -128,6 +134,6 @@ function trackAnimationOperation(animation: Animation, name: string) {
                     track(time(), animation[animationId], operation);
                 }
             }
-        }            
+        }
     }
 }

package/src/layout/discover.ts

@@ -1,16 +1,16 @@
-import { Priority, Timer } from "@clarity-types/core";
+import { Priority, type Timer } from "@clarity-types/core";
 import { Event, Metric } from "@clarity-types/data";
 import { Source } from "@clarity-types/layout";
 import measure from "@src/core/measure";
 import * as task from "@src/core/task";
 import { time } from "@src/core/time";
 import { id } from "@src/data/metadata";
+import * as scroll from "@src/interaction/scroll";
 import * as doc from "@src/layout/document";
 import encode from "@src/layout/encode";
 import * as region from "@src/layout/region";
-import traverse from "@src/layout/traverse";
 import { checkDocumentStyles } from "@src/layout/style";
-import * as scroll from "@src/interaction/scroll";
+import traverse from "@src/layout/traverse";
 
 export function start(): void {
     task.schedule(discover, Priority.High).then((): void => {
@@ -21,8 +21,8 @@ export function start(): void {
 }
 
 async function discover(): Promise<void> {
-    let ts = time();
-    let timer: Timer = { id: id(), cost: Metric.LayoutCost };
+    const ts = time();
+    const timer: Timer = { id: id(), cost: Metric.LayoutCost };
     task.start(timer);
     await traverse(document, timer, Source.Discover, ts);
     checkDocumentStyles(document, ts);

package/src/layout/document.ts

@@ -1,5 +1,5 @@
 import { Event } from "@clarity-types/data";
-import { DocumentData } from "@clarity-types/layout";
+import type { DocumentData } from "@clarity-types/layout";
 import { FunctionNames } from "@clarity-types/performance";
 import encode from "@src/layout/encode";
 
@@ -16,25 +16,37 @@ export function start(): void {
 
 export function compute(): void {
     compute.dn = FunctionNames.DocumentCompute;
-    let body = document.body;
-    let d = document.documentElement;
-    let bodyClientWidth = body ? body.clientWidth : null;
-    let bodyScrollWidth = body ? body.scrollWidth : null;
-    let bodyOffsetWidth = body ? body.offsetWidth : null;
-    let documentClientWidth = d ? d.clientWidth : null;
-    let documentScrollWidth = d ? d.scrollWidth : null;
-    let documentOffsetWidth = d ? d.offsetWidth : null;
-    let width = Math.max(bodyClientWidth, bodyScrollWidth, bodyOffsetWidth,
-        documentClientWidth, documentScrollWidth, documentOffsetWidth);
+    const body = document.body;
+    const d = document.documentElement;
+    const bodyClientWidth = body ? body.clientWidth : null;
+    const bodyScrollWidth = body ? body.scrollWidth : null;
+    const bodyOffsetWidth = body ? body.offsetWidth : null;
+    const documentClientWidth = d ? d.clientWidth : null;
+    const documentScrollWidth = d ? d.scrollWidth : null;
+    const documentOffsetWidth = d ? d.offsetWidth : null;
+    const width = Math.max(
+        bodyClientWidth,
+        bodyScrollWidth,
+        bodyOffsetWidth,
+        documentClientWidth,
+        documentScrollWidth,
+        documentOffsetWidth,
+    );
 
-    let bodyClientHeight = body ? body.clientHeight : null;
-    let bodyScrollHeight = body ? body.scrollHeight : null;
-    let bodyOffsetHeight = body ? body.offsetHeight : null;
-    let documentClientHeight = d ? d.clientHeight : null;
-    let documentScrollHeight = d ? d.scrollHeight : null;
-    let documentOffsetHeight = d ? d.offsetHeight : null;
-    let height = Math.max(bodyClientHeight, bodyScrollHeight, bodyOffsetHeight,
-    documentClientHeight, documentScrollHeight, documentOffsetHeight);
+    const bodyClientHeight = body ? body.clientHeight : null;
+    const bodyScrollHeight = body ? body.scrollHeight : null;
+    const bodyOffsetHeight = body ? body.offsetHeight : null;
+    const documentClientHeight = d ? d.clientHeight : null;
+    const documentScrollHeight = d ? d.scrollHeight : null;
+    const documentOffsetHeight = d ? d.offsetHeight : null;
+    const height = Math.max(
+        bodyClientHeight,
+        bodyScrollHeight,
+        bodyOffsetHeight,
+        documentClientHeight,
+        documentScrollHeight,
+        documentOffsetHeight,
+    );
 
     // Check that width or height has changed from before, and also that width & height are not null values
     if ((data === null || width !== data.width || height !== data.height) && width !== null && height !== null) {