clarity-js 0.8.42 → 0.8.44

package/src/layout/animation.ts

@@ -1,133 +1,133 @@
-import { Event } from "@clarity-types/data";
-import { AnimationOperation, AnimationState } from "@clarity-types/layout";
-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";
-
-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 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
-    ) {
-        reset();
-        overrideAnimationHelper(animationPlay, "play");
-        overrideAnimationHelper(animationPause, "pause");
-        overrideAnimationHelper(animationCommitStyles, "commitStyles");
-        overrideAnimationHelper(animationCancel, "cancel");
-        overrideAnimationHelper(animationFinish, "finish");
-        if (elementAnimate === null) {
-            elementAnimate = Element.prototype.animate;
-            Element.prototype.animate = function(): Animation {
-                var createdAnimation = elementAnimate.apply(this, arguments);
-                trackAnimationOperation(createdAnimation, "play");
-                return createdAnimation;
-            }
-        }
-        if (document.getAnimations) {
-            for (var animation of document.getAnimations()) {
-                if (animation.playState === "finished") {
-                    trackAnimationOperation(animation, "finish");
-                }
-                else if (animation.playState === "paused" || animation.playState === "idle") {
-                    trackAnimationOperation(animation, "pause");
-                }
-                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 {
-    state.push({
-        time,
-        event: Event.Animation,
-        data: {
-            id,
-            operation,
-            keyFrames,
-            timing,
-            targetId,
-            timeline
-        }
-    });
-
-    encode(Event.Animation);
-}
-
-export function stop(): void {
-    reset();
-}
-
-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);
-      }
-    }
-  }
-
-function trackAnimationOperation(animation: Animation, name: string) {
-    if (core.active()) {
-        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;
-                
-                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)  {
-                let operation: AnimationOperation = null;
-                switch (name) {
-                    case "play":
-                        operation = AnimationOperation.Play;
-                        break;
-                    case "pause":
-                        operation = AnimationOperation.Pause;
-                        break;
-                    case "cancel":
-                        operation = AnimationOperation.Cancel;
-                        break;
-                    case "finish":
-                        operation = AnimationOperation.Finish;
-                        break;
-                    case "commitStyles":
-                        operation = AnimationOperation.CommitStyles;
-                        break;
-                }
-                if (operation) {
-                    track(time(), animation[animationId], operation);
-                }
-            }
-        }            
-    }
-}
+import { Event } from "@clarity-types/data";
+import { AnimationOperation, AnimationState } from "@clarity-types/layout";
+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";
+
+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 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
+    ) {
+        reset();
+        overrideAnimationHelper(animationPlay, "play");
+        overrideAnimationHelper(animationPause, "pause");
+        overrideAnimationHelper(animationCommitStyles, "commitStyles");
+        overrideAnimationHelper(animationCancel, "cancel");
+        overrideAnimationHelper(animationFinish, "finish");
+        if (elementAnimate === null) {
+            elementAnimate = Element.prototype.animate;
+            Element.prototype.animate = function(): Animation {
+                var createdAnimation = elementAnimate.apply(this, arguments);
+                trackAnimationOperation(createdAnimation, "play");
+                return createdAnimation;
+            }
+        }
+        if (document.getAnimations) {
+            for (var animation of document.getAnimations()) {
+                if (animation.playState === "finished") {
+                    trackAnimationOperation(animation, "finish");
+                }
+                else if (animation.playState === "paused" || animation.playState === "idle") {
+                    trackAnimationOperation(animation, "pause");
+                }
+                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 {
+    state.push({
+        time,
+        event: Event.Animation,
+        data: {
+            id,
+            operation,
+            keyFrames,
+            timing,
+            targetId,
+            timeline
+        }
+    });
+
+    encode(Event.Animation);
+}
+
+export function stop(): void {
+    reset();
+}
+
+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);
+      }
+    }
+  }
+
+function trackAnimationOperation(animation: Animation, name: string) {
+    if (core.active()) {
+        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;
+                
+                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)  {
+                let operation: AnimationOperation = null;
+                switch (name) {
+                    case "play":
+                        operation = AnimationOperation.Play;
+                        break;
+                    case "pause":
+                        operation = AnimationOperation.Pause;
+                        break;
+                    case "cancel":
+                        operation = AnimationOperation.Cancel;
+                        break;
+                    case "finish":
+                        operation = AnimationOperation.Finish;
+                        break;
+                    case "commitStyles":
+                        operation = AnimationOperation.CommitStyles;
+                        break;
+                }
+                if (operation) {
+                    track(time(), animation[animationId], operation);
+                }
+            }
+        }            
+    }
+}

package/src/layout/custom.ts

@@ -1,43 +1,43 @@
-import { Event } from "@clarity-types/data";
-import { active } from "@src/core";
-import { schedule } from "@src/core/task";
-import encode from "@src/layout/encode";
-
-export const elements: string[] = [];
-
-const definedElements = new Set<string>();
-function register(tag: string) {
-    if (!definedElements.has(tag)) {
-        definedElements.add(tag);
-        elements.push(tag);
-        schedule(encode.bind(this, Event.CustomElement));
-    }
-}
-
-export function check(tag: string) {
-    if (window.customElements?.get && window.customElements.get(tag)) {
-        register(tag);
-    }
-}
-
-export function start() {
-    window.clarityOverrides = window.clarityOverrides || {};
-    if (window.customElements?.define && !window.clarityOverrides.define) {
-        window.clarityOverrides.define = window.customElements.define;
-        window.customElements.define = function () {
-            if (active()) {
-                register(arguments[0]);
-            }
-            return window.clarityOverrides.define.apply(this, arguments);
-        };
-    }
-}
-
-export function reset() {
-    elements.length = 0;
-}
-
-export function stop() {
-    reset();
-    definedElements.clear();
+import { Event } from "@clarity-types/data";
+import { active } from "@src/core";
+import { schedule } from "@src/core/task";
+import encode from "@src/layout/encode";
+
+export const elements: string[] = [];
+
+const definedElements = new Set<string>();
+function register(tag: string) {
+    if (!definedElements.has(tag)) {
+        definedElements.add(tag);
+        elements.push(tag);
+        schedule(encode.bind(this, Event.CustomElement));
+    }
+}
+
+export function check(tag: string) {
+    if (window.customElements?.get && window.customElements.get(tag)) {
+        register(tag);
+    }
+}
+
+export function start() {
+    window.clarityOverrides = window.clarityOverrides || {};
+    if (window.customElements?.define && !window.clarityOverrides.define) {
+        window.clarityOverrides.define = window.customElements.define;
+        window.customElements.define = function () {
+            if (active()) {
+                register(arguments[0]);
+            }
+            return window.clarityOverrides.define.apply(this, arguments);
+        };
+    }
+}
+
+export function reset() {
+    elements.length = 0;
+}
+
+export function stop() {
+    reset();
+    definedElements.clear();
 }

package/src/layout/discover.ts

@@ -1,31 +1,31 @@
-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 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";
-
-export function start(): void {
-    task.schedule(discover, Priority.High).then((): void => {
-        measure(doc.compute)();
-        measure(region.compute)();
-        measure(scroll.compute)();
-    });
-}
-
-async function discover(): Promise<void> {
-    let ts = time();
-    let timer: Timer = { id: id(), cost: Metric.LayoutCost };
-    task.start(timer);
-    await traverse(document, timer, Source.Discover, ts);
-    checkDocumentStyles(document, ts);
-    await encode(Event.Discover, timer, ts);
-    task.stop(timer);
-}
+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 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";
+
+export function start(): void {
+    task.schedule(discover, Priority.High).then((): void => {
+        measure(doc.compute)();
+        measure(region.compute)();
+        measure(scroll.compute)();
+    });
+}
+
+async function discover(): Promise<void> {
+    let ts = time();
+    let timer: Timer = { id: id(), cost: Metric.LayoutCost };
+    task.start(timer);
+    await traverse(document, timer, Source.Discover, ts);
+    checkDocumentStyles(document, ts);
+    await encode(Event.Discover, timer, ts);
+    task.stop(timer);
+}

package/src/layout/document.ts

@@ -1,46 +1,46 @@
-import { Event } from "@clarity-types/data";
-import { DocumentData } from "@clarity-types/layout";
-import encode from "@src/layout/encode";
-
-export let data: DocumentData;
-
-export function reset(): void {
-    data = null;
-}
-
-export function start(): void {
-    reset();
-    compute();
-}
-
-export function compute(): void {
-    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);
-
-    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) {
-        data = { width, height };
-        encode(Event.Document);
-    }
-}
-
-export function stop(): void {
-    reset();
-}
+import { Event } from "@clarity-types/data";
+import { DocumentData } from "@clarity-types/layout";
+import encode from "@src/layout/encode";
+
+export let data: DocumentData;
+
+export function reset(): void {
+    data = null;
+}
+
+export function start(): void {
+    reset();
+    compute();
+}
+
+export function compute(): void {
+    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);
+
+    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) {
+        data = { width, height };
+        encode(Event.Document);
+    }
+}
+
+export function stop(): void {
+    reset();
+}