clarity-js 0.7.58 → 0.7.60

package/src/interaction/pointer.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { PointerState, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -11,7 +12,8 @@ import encode from "./encode";
 
 export let state: PointerState[] = [];
 let timeout: number = null;
-let activeTouchPointId = 0;
+let hasPrimaryTouch = false;
+let primaryTouchId = 0;
 const activeTouchPointIds = new Set<number>();
 
 export function start(): void {
@@ -45,6 +47,7 @@ function mouse(event: Event, root: Node, evt: MouseEvent): void {
     // Check for null values before processing this event
     if (x !== null && y !== null) { handler({ time: time(evt), event, data: { target: target(evt), x, y } }); }
 }
+mouse.dn = FunctionNames.PointerMouse;
 
 function touch(event: Event, root: Node, evt: TouchEvent): void {
     let frame = iframe(root);
@@ -67,7 +70,9 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
             switch(event) {
                 case Event.TouchStart:
                     if (activeTouchPointIds.size === 0) {
-                        activeTouchPointId = id;
+                        // Track presence of primary touch separately to handle scenarios when same id is repeated
+                        hasPrimaryTouch = true;  
+                        primaryTouchId = id;
                     }
                     activeTouchPointIds.add(id);
                     break;
@@ -76,13 +81,19 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
                     activeTouchPointIds.delete(id);
                     break;
             }
-            const isPrimary = activeTouchPointId === id;
+            const isPrimary = hasPrimaryTouch && primaryTouchId === id;
 
             // Check for null values before processing this event
             if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y, id, isPrimary } }); }
+
+            // Reset primary touch point id once touch event ends
+            if (event === Event.TouchCancel || event === Event.TouchEnd) {
+                if (primaryTouchId === id) { hasPrimaryTouch = false; }
+            }
         }
     }
 }
+touch.dn = FunctionNames.PointerTouch;
 
 function handler(current: PointerState): void {
     switch (current.event) {

package/src/interaction/resize.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { ResizeData, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import { bind } from "@src/core/event";
 import encode from "./encode";
@@ -31,6 +32,7 @@ function recompute(): void {
         initialStateLogged = true;
     }
 }
+recompute.dn = FunctionNames.ResizeRecompute;
 
 function process(event: Event): void {
     schedule(encode.bind(this, event));

package/src/interaction/scroll.ts

@@ -1,5 +1,6 @@
 import { Constant, Dimension, Event } from "@clarity-types/data";
 import { ScrollState, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -68,6 +69,7 @@ function recompute(event: UIEvent = null): void {
     clearTimeout(timeout);
     timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
 }
+recompute.dn = FunctionNames.ScrollRecompute;
 
 function getPositionNode(x: number, y: number): Node {
     let node: Node;
@@ -112,6 +114,7 @@ export function compute(): void {
         dimension.log(Dimension.InitialScrollBottom, bottom?.hash?.join(Constant.Dot));
     }
 }
+compute.dn = FunctionNames.ScrollCompute;
 
 export function stop(): void {
     clearTimeout(timeout);

package/src/interaction/selection.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { SelectionData, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
@@ -50,6 +51,7 @@ function recompute(root: Node): void {
     clearTimeout(timeout);
     timeout = setTimeout(process, Setting.LookAhead, Event.Selection);
 }
+recompute.dn = FunctionNames.SelectionRecompute;
 
 function process(event: Event): void {
     schedule(encode.bind(this, event));

package/src/interaction/submit.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { SubmitState } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -20,6 +21,7 @@ function recompute(evt: UIEvent): void {
     state.push({ time: time(evt), event: Event.Submit, data: { target: target(evt) } });
     schedule(encode.bind(this, Event.Submit));
 }
+recompute.dn = FunctionNames.SubmitRecompute;
 
 export function reset(): void {
     state = [];

package/src/interaction/unload.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { UnloadData } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import * as clarity from "@src/clarity";
 import { bind } from "@src/core/event";
 import { time } from "@src/core/time";
@@ -16,6 +17,7 @@ function recompute(evt: UIEvent): void {
     encode(Event.Unload, time(evt));
     clarity.stop();
 }
+recompute.dn = FunctionNames.UnloadRecompute;
 
 export function reset(): void {
     data = null;

package/src/interaction/visibility.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { VisibilityData } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { time } from "@src/core/time";
 import encode from "./encode";
@@ -15,6 +16,7 @@ function recompute(evt: UIEvent = null): void {
     data = { visible: "visibilityState" in document ? document.visibilityState : "default" };
     encode(Event.Visibility, time(evt));
 }
+recompute.dn = FunctionNames.VisibilityRecompute;
 
 export function reset(): void {
     data = null;

package/src/layout/document.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { DocumentData } from "@clarity-types/layout";
+import { FunctionNames } from "@clarity-types/performance";
 import encode from "@src/layout/encode";
 
 export let data: DocumentData;
@@ -40,6 +41,7 @@ export function compute(): void {
         encode(Event.Document);
     }
 }
+compute.dn = FunctionNames.DocumentCompute;
 
 export function stop(): void {
     reset();

package/src/layout/index.ts

@@ -1,3 +1,4 @@
+import { FunctionNames } from "@clarity-types/performance";
 import * as discover from "@src/layout/discover";
 import * as doc from "@src/layout/document";
 import * as dom from "@src/layout/dom";
@@ -28,6 +29,7 @@ export function start(): void {
     style.start();
     animation.start();
 }
+start.dn = FunctionNames.LayoutStart;
 
 export function stop(): void {
     region.stop();

package/src/layout/mutation.ts

@@ -1,6 +1,7 @@
 import { Priority, Task, Timer } from "@clarity-types/core";
 import { Code, Event, Metric, Severity } from "@clarity-types/data";
 import { Constant, MutationHistory, MutationRecordWithTime, MutationQueue, Setting, Source } from "@clarity-types/layout";
+import { FunctionNames } from "@clarity-types/performance";
 import api from "@src/core/api";
 import * as core from "@src/core";
 import { bind } from "@src/core/event";
@@ -13,6 +14,7 @@ import * as summary from "@src/data/summary";
 import * as internal from "@src/diagnostic/internal";
 import * as doc from "@src/layout/document";
 import * as dom from "@src/layout/dom";
+import * as metric from "@src/data/metric";
 import encode from "@src/layout/encode";
 import * as region from "@src/layout/region";
 import traverse from "@src/layout/traverse";
@@ -89,6 +91,7 @@ export function start(): void {
      } catch { attachShadow = null; }
   } 
 }
+start.dn = FunctionNames.MutationStart;
 
 export function observe(node: Node): void {
   // Create a new observer for every time a new DOM tree (e.g. root document or shadowdom root) is discovered on the page
@@ -139,6 +142,7 @@ function handle(m: MutationRecord[]): void {
       measure(region.compute)();
   });
 }
+handle.dn = FunctionNames.MutationHandle;
 
 async function processMutation(timer: Timer, mutation: MutationRecord, instance: number, timestamp: number): Promise<void> {
   let state = task.state(timer);
@@ -192,10 +196,27 @@ async function process(): Promise<void> {
   if (Object.keys(throttledMutations).length === 0 && processedMutations) {
     await encode(Event.Mutation, timer, time());
   }
+
+  cleanHistory();
   
   task.stop(timer);
 }
 
+function cleanHistory(): void {
+  let now = time();
+  if (Object.keys(history).length > Setting.MaxMutationHistoryCount) { 
+    history = {};
+    metric.count(Metric.HistoryClear);
+  }
+
+  for (let key of Object.keys(history)) {
+    let h = history[key];
+    if (now > h[1] + Setting.MaxMutationHistoryTime) {
+      delete history[key];
+    }
+  }
+}
+
 function track(m: MutationRecord, timer: Timer, instance: number, timestamp: number): string {
   let value = m.target ? dom.get(m.target.parentNode) : null;
   // Check if the parent is already discovered and that the parent is not the document root
@@ -299,3 +320,4 @@ function generate(target: Node, type: MutationRecordType): void {
     type
   }]);
 }
+generate.dn = FunctionNames.MutationGenerate;

package/src/layout/region.ts

@@ -1,5 +1,6 @@
 import { Event, Setting } from "@clarity-types/data";
 import { InteractionState, RegionData, RegionState, RegionQueue, RegionVisibility } from "@clarity-types/layout";
+import { FunctionNames } from "@clarity-types/performance";
 import { time } from "@src/core/time";
 import * as dom from "@src/layout/dom";
 import encode from "@src/layout/encode";
@@ -76,6 +77,7 @@ export function compute(): void {
     // Schedule encode only when we have at least one valid data entry
     if (state.length > 0) { encode(Event.Region); }
 }
+compute.dn = FunctionNames.RegionCompute;
 
 function handler(entries: IntersectionObserverEntry[]): void {
     for (let entry of entries) {

package/src/layout/style.ts

@@ -19,37 +19,39 @@ let styleTimeMap: {[key: string]: number} = {};
 let documentNodes = [];
 
 export function start(): void {
-    if (replace === null) { 
-        replace = CSSStyleSheet.prototype.replace; 
-        CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
-            if (core.active()) {
-                metric.max(Metric.ConstructedStyles, 1);
-                // 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 (this[styleSheetPageNum] === metadataFields.pageNum) {
-                    trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, arguments[0]);
+    if (window['CSSStyleSheet'] && CSSStyleSheet.prototype) {
+        if (replace === null) { 
+            replace = CSSStyleSheet.prototype.replace; 
+            CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
+                if (core.active()) {
+                    metric.max(Metric.ConstructedStyles, 1);
+                    // 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 (this[styleSheetPageNum] === metadataFields.pageNum) {
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, arguments[0]);
+                    }
                 }
-            }
-            return replace.apply(this, arguments);
-        };
-    }
-
-    if (replaceSync === null) { 
-        replaceSync = CSSStyleSheet.prototype.replaceSync; 
-        CSSStyleSheet.prototype.replaceSync = function(): void {
-            if (core.active()) {
-                metric.max(Metric.ConstructedStyles, 1);
-                // 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 (this[styleSheetPageNum] === metadataFields.pageNum) {
-                    trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
-                }                
-            }
-            return replaceSync.apply(this, arguments);
-        };
-    }
+                return replace.apply(this, arguments);
+            };
+        }
+    
+        if (replaceSync === null) { 
+            replaceSync = CSSStyleSheet.prototype.replaceSync; 
+            CSSStyleSheet.prototype.replaceSync = function(): void {
+                if (core.active()) {
+                    metric.max(Metric.ConstructedStyles, 1);
+                    // 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 (this[styleSheetPageNum] === metadataFields.pageNum) {
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
+                    }                
+                }
+                return replaceSync.apply(this, arguments);
+            };
+        }
+    }    
 }
 
 export function checkDocumentStyles(documentNode: Document, timestamp: number): void {

package/src/performance/index.ts

@@ -1,3 +1,4 @@
+import { FunctionNames } from "@clarity-types/performance";
 import * as navigation from "@src/performance/navigation";
 import * as observer from "@src/performance/observer";
 
@@ -5,6 +6,7 @@ export function start(): void {
     navigation.reset();
     observer.start();
 }
+start.dn = FunctionNames.PerformanceStart;
 
 export function stop(): void {
     observer.stop();

package/src/performance/observer.ts

@@ -1,4 +1,5 @@
 import { Code, Constant, Dimension, Metric, Severity, PerformanceEventTiming } from "@clarity-types/data";
+import { FunctionNames } from "@clarity-types/performance";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
 import measure from "@src/core/measure";
@@ -49,10 +50,12 @@ function observe(): void {
         }
     } catch { internal.log(Code.PerformanceObserver, Severity.Warning); }
 }
+observe.dn = FunctionNames.ObserverObserve;
 
 function handle(entries: PerformanceObserverEntryList): void {
     process(entries.getEntries());
 }
+handle.dn = FunctionNames.ObserverHandle;
 
 function process(entries: PerformanceEntryList): void {
     let visible = "visibilityState" in document ? document.visibilityState === "visible" : true;

package/types/data.d.ts

@@ -127,7 +127,8 @@ export const enum Metric {
 /**
  * @deprecated Move it to dimension as it'll report only last value
  */
-    InteractionNextPaint = 37
+    InteractionNextPaint = 37,
+    HistoryClear = 38
 }
 
 export const enum Dimension {
@@ -194,7 +195,8 @@ export const enum Code {
  * @deprecated No longer support ContentSecurityPolicy
  */
     ContentSecurityPolicy = 7,
-    Config = 8
+    Config = 8,
+    FunctionExecutionTime = 9
 }
 
 export const enum Severity {

package/types/layout.d.ts

@@ -156,7 +156,9 @@ export const enum JsonLD {
 export const enum Setting {
     LookAhead = 33, // 33ms
     MutationSuspendThreshold = 10, // Stop listening for mutations after hitting a threshold count
-    MutationActivePeriod = 3000 // Unit: milliseconds. Let mutations continue as normal during active periods of user interactions
+    MutationActivePeriod = 3000, // Unit: milliseconds. Let mutations continue as normal during active periods of user interactions
+    MaxMutationHistoryCount = 10000,
+    MaxMutationHistoryTime = 30000, // Unit: milliseconds. Maximum time to keep mutation history in memory
 }
 
 export const enum StyleSheetOperation {

package/types/performance.d.ts

@@ -31,3 +31,35 @@ export interface NavigationData {
     encodedSize: number;
     decodedSize: number;
 }
+
+export const enum FunctionNames {
+    HistoryCompute = 1,
+    Restart = 2,
+    DiagnosticStart = 3,
+    ScriptHandler = 4,
+    ChangeRecompute = 5,
+    ClickHandler = 6,
+    ClipboardRecompute = 7,
+    InteractionStart = 8,
+    InputRecompute = 9,
+    PointerMouse = 10,
+    PointerTouch = 11,
+    ResizeRecompute = 12,
+    ScrollRecompute = 13,
+    ScrollCompute = 14,
+    SelectionRecompute = 15,
+    SubmitRecompute = 16,
+    UnloadRecompute = 17,
+    VisibilityRecompute = 18,
+    DocumentCompute = 19,
+    LayoutStart = 20,
+    MutationStart = 21,
+    MutationHandle = 22,
+    MutationGenerate = 23,
+    RegionCompute = 24,
+    PerformanceStart = 25,
+    ObserverObserve = 26,
+    ObserverHandle = 27
+}
+
+declare global { interface Function { dn?: FunctionNames; } }