clarity-js 0.7.57 → 0.7.59

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,6 +12,9 @@ import encode from "./encode";
 
 export let state: PointerState[] = [];
 let timeout: number = null;
+let hasPrimaryTouch = false;
+let primaryTouchId = 0;
+const activeTouchPointIds = new Set<number>();
 
 export function start(): void {
     reset();
@@ -43,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);
@@ -58,16 +63,37 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
             x = x && frame ? x + Math.round(frame.offsetLeft) : x;
             y = y && frame ? y + Math.round(frame.offsetTop) : y;
 
-            // identifier is 0-based, unique for each touch point and resets when all fingers are lifted
-            // that is not a part of the spec, but it is how it is implemented in browsers
-            // tested in Chromium-based browsers as well as Firefox
+            // We cannot rely on identifier to determine primary touch as its value doesn't always start with 0.
+            // Safari/Webkit uses the address of the UITouch object as the identifier value for each touch point.
             const id = "identifier" in entry ? entry["identifier"] : undefined;
 
+            switch(event) {
+                case Event.TouchStart:
+                    if (activeTouchPointIds.size === 0) {
+                        // Track presence of primary touch separately to handle scenarios when same id is repeated
+                        hasPrimaryTouch = true;  
+                        primaryTouchId = id;
+                    }
+                    activeTouchPointIds.add(id);
+                    break;
+                case Event.TouchEnd:
+                case Event.TouchCancel:
+                    activeTouchPointIds.delete(id);
+                    break;
+            }
+            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 } }); }
+            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";
@@ -7,8 +8,10 @@ import { schedule } from "@src/core/task";
 
 export let data: ResizeData;
 let timeout: number = null;
+let initialStateLogged = false;
 
 export function start(): void {
+    initialStateLogged = false;
     bind(window, "resize", recompute);
     recompute();
 }
@@ -21,9 +24,15 @@ function recompute(): void {
         width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
         height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
     };
-    clearTimeout(timeout);
-    timeout = setTimeout(process, Setting.LookAhead, Event.Resize);
+    if (initialStateLogged) {
+        clearTimeout(timeout);
+        timeout = setTimeout(process, Setting.LookAhead, Event.Resize);
+    } else {
+        encode(Event.Resize);
+        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";
@@ -89,6 +90,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 +141,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);
@@ -299,3 +302,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/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

@@ -194,7 +194,8 @@ export const enum Code {
  * @deprecated No longer support ContentSecurityPolicy
  */
     ContentSecurityPolicy = 7,
-    Config = 8
+    Config = 8,
+    FunctionExecutionTime = 9
 }
 
 export const enum Severity {

package/types/interaction.d.ts

@@ -105,6 +105,7 @@ export interface PointerData {
     x: number;
     y: number;
     id?: number;
+    isPrimary?: boolean;
 }
 
 export interface ClickData {

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; } }