clarity-js 0.8.12 → 0.8.13-beta

package/src/layout/animation.ts

@@ -1,29 +1,30 @@
 import { Event } from "@clarity-types/data";
-import { AnimationOperation, type AnimationState } from "@clarity-types/layout";
-import * as core from "@src/core";
+import { AnimationOperation, AnimationState } 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";
 
 export let state: AnimationState[] = [];
 let elementAnimate: (keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: number | KeyframeAnimationOptions) => Animation = null;
-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";
+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 maxOperations = 20;
 
 export function start(): void {
     if (
-        window.Animation?.prototype &&
-        window.KeyframeEffect &&
-        window.KeyframeEffect.prototype &&
-        window.KeyframeEffect.prototype.getKeyframes &&
-        window.KeyframeEffect.prototype.getTiming
+        window["Animation"] && 
+        window["Animation"].prototype && 
+        window["KeyframeEffect"] && 
+        window["KeyframeEffect"].prototype && 
+        window["KeyframeEffect"].prototype.getKeyframes &&
+        window["KeyframeEffect"].prototype.getTiming
     ) {
         reset();
         overrideAnimationHelper(animationPlay, "play");
@@ -33,39 +34,33 @@ export function start(): void {
         overrideAnimationHelper(animationFinish, "finish");
         if (elementAnimate === null) {
             elementAnimate = Element.prototype.animate;
-            Element.prototype.animate = function (...args): Animation {
-                const createdAnimation = elementAnimate.apply(this, args);
+            Element.prototype.animate = function(): Animation {
+                var createdAnimation = elementAnimate.apply(this, arguments);
                 trackAnimationOperation(createdAnimation, "play");
                 return createdAnimation;
-            };
+            }
         }
         if (document.getAnimations) {
-            for (const animation of document.getAnimations()) {
+            for (var 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,
@@ -75,8 +70,8 @@ function track(
             keyFrames,
             timing,
             targetId,
-            timeline,
-        },
+            timeline
+        }
     });
 
     encode(Event.Animation);
@@ -88,30 +83,29 @@ export function stop(): void {
 
 function overrideAnimationHelper(functionToOverride: () => void, name: string) {
     if (functionToOverride === null) {
-        // 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);
-        };
+      functionToOverride = Animation.prototype[name];
+      Animation.prototype[name] = function(): void {
+        trackAnimationOperation(this, name);
+        return functionToOverride.apply(this, arguments);
+      }
     }
-}
+  }
 
 function trackAnimationOperation(animation: Animation, name: string) {
     if (core.active()) {
-        const effect = <KeyframeEffect>animation.effect;
-        const target = effect?.target ? getId(effect.target) : null;
+        let effect = <KeyframeEffect>animation.effect;
+        let target = effect?.target ? getId(effect.target) : null;
         if (target !== null && effect.getKeyframes && effect.getTiming) {
             if (!animation[animationId]) {
                 animation[animationId] = shortid();
                 animation[operationCount] = 0;
-
-                const keyframes = effect.getKeyframes();
-                const timing = effect.getTiming();
+                
+                let keyframes = effect.getKeyframes();
+                let 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":
@@ -134,6 +128,6 @@ function trackAnimationOperation(animation: Animation, name: string) {
                     track(time(), animation[animationId], operation);
                 }
             }
-        }
+        }            
     }
 }

package/src/layout/discover.ts

@@ -1,16 +1,16 @@
-import { Priority, type Timer } from "@clarity-types/core";
+import { Priority, 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 { checkDocumentStyles } from "@src/layout/style";
 import traverse from "@src/layout/traverse";
+import { checkDocumentStyles } from "@src/layout/style";
+import * as scroll from "@src/interaction/scroll";
 
 export function start(): void {
     task.schedule(discover, Priority.High).then((): void => {
@@ -21,8 +21,8 @@ export function start(): void {
 }
 
 async function discover(): Promise<void> {
-    const ts = time();
-    const timer: Timer = { id: id(), cost: Metric.LayoutCost };
+    let ts = time();
+    let 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 type { DocumentData } from "@clarity-types/layout";
+import { DocumentData } from "@clarity-types/layout";
 import { FunctionNames } from "@clarity-types/performance";
 import encode from "@src/layout/encode";
 
@@ -16,37 +16,25 @@ export function start(): void {
 
 export function compute(): void {
     compute.dn = FunctionNames.DocumentCompute;
-    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 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 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,
-    );
+    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);
 
     // 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) {