@gemx-dev/clarity-js 0.8.89 → 0.8.91

package/src/layout/gemx-snapshot.ts

@@ -36,27 +36,46 @@ function fire(): void {
     flush();
 }
 
-function schedule(trigger: { scrollDepthPercent?: number; clickCount?: number; activeTimeMs?: number; maxPlaybackBytes?: number }): void {
+function schedule(trigger: { scrollDepthPercent?: number; clickCount?: number; activeTimeMs?: number; delayMs?: number; maxPlaybackBytes?: number }): void {
     triggered = false;
-    let clickCount = 0;
+    let windowExpired = false;
+    let delayScheduled = false;
+
+    const scheduleDelayedFire = (type: 'scroll' | 'click'): void => {
+        if (delayScheduled || windowExpired) return;
+        delayScheduled = true;
+        console.log(`[GemX Snapshot] ${type} triggered:`);
+        setTimeout(fire, trigger.delayMs ?? 0);
+    };
+
+    if (trigger.activeTimeMs) {
+        setTimeout((): void => {
+            windowExpired = true;
+            scroll.onTrustedScroll(null);
+            click.onTrustedClick(null);
+        }, trigger.activeTimeMs);
+    }
 
     if (trigger.scrollDepthPercent) {
         scroll.onTrustedScroll((): void => {
-            const scrolled = window.scrollY + window.innerHeight;
-            const total = document.documentElement.scrollHeight;
-            if ((scrolled / total) * 100 >= trigger.scrollDepthPercent) { fire(); }
+            const docH = document.documentElement.scrollHeight;
+            const vpH = window.innerHeight;
+            const maxScrollY = docH - vpH;
+            if (maxScrollY <= 0) return;
+            
+            const scrollY = "pageYOffset" in window ? Math.round(window.pageYOffset) : Math.round((document.documentElement as HTMLElement).scrollTop);
+            const pct = Math.min(100, Math.round(scrollY / maxScrollY * 100));
+            if (pct >= trigger.scrollDepthPercent) { scheduleDelayedFire('scroll'); }
         });
     }
 
     if (trigger.clickCount) {
+        let clickCount = 0;
         click.onTrustedClick((): void => {
             clickCount++;
-            if (clickCount >= trigger.clickCount) { fire(); }
+            if (clickCount >= trigger.clickCount) { scheduleDelayedFire('click'); }
         });
     }
-
-    if (trigger.activeTimeMs) { setTimeout(fire, trigger.activeTimeMs); }
-    // maxPlaybackBytes trigger is handled via gemxUpload.start() callback above
 }
 
 function flush(): void {

package/src/layout/mutation.ts

@@ -20,6 +20,8 @@ import traverse from "@src/layout/traverse";
 import processNode from "./node";
 import config from "@src/core/config";
 import * as gemx from "@src/data/gemx";
+import * as gemxUpload from "@src/data/gemx-upload";
+
 
 let observers: Set<MutationObserver> = new Set();
 let mutations: MutationQueue[] = [];
@@ -129,7 +131,9 @@ async function processMutation(timer: Timer, mutation: MutationRecord, instance:
   let target = mutation.target;
 
   const ignoredClasses = gemx.get().ignoreMutationClassNames;
-  if (ignoredClasses.length > 0 && target instanceof Element) {
+  // Before processed snapshot, we need to check if the mutation is ignored
+  const isSnapshotProcessed = gemxUpload.isActive();
+  if (!isSnapshotProcessed && ignoredClasses.length > 0 && target instanceof Element) {
     const el = target as Element;
     if (ignoredClasses.some(cls => el.classList.contains(cls))) { return; }
   }

package/src/layout/selector.ts

@@ -6,9 +6,13 @@ import * as gemx from "@src/data/gemx";
 const excludeClassNames = ExcludeClassNamesList;
 
 let selectorMap: { [selector: string]: number[] } = {};
+// Tracks how many times each HTML id attribute has been seen during a traversal.
+// If count > 1, the id is duplicated in the DOM and must not be used as a CSS selector.
+let htmlIdCountMap: Map<string, number> = new Map();
 
 export function reset(): void {
     selectorMap = {};
+    htmlIdCountMap = new Map();
 }
 
 export function get(input: SelectorInput, type: Selector): string {
@@ -54,7 +58,16 @@ export function get(input: SelectorInput, type: Selector): string {
             // Update selector to use "id" field when available. There are two exceptions:
             // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
             // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-            selector = id && filter(id) ? `${getDomPrefix(prefix)}${Constant.Hash}${id}` : selector;
+            // (3) if "id" is duplicated in the DOM — using it would resolve to the wrong element during replay.
+            //     Note: the very first occurrence of a duplicated id may still use #id until a duplicate is encountered.
+            if (id && filter(id)) {
+                const count = (htmlIdCountMap.get(id) ?? 0) + 1;
+                htmlIdCountMap.set(id, count);
+                if (count === 1) {
+                    selector = `${getDomPrefix(prefix)}${Constant.Hash}${id}`;
+                }
+                // count > 1 means duplicate — fall through to keep the class/position-based selector
+            }
             return selector;
     }
 }

package/types/data.d.ts

@@ -598,11 +598,13 @@ export interface GCMConsentState {
 export interface DiscoverTrigger {
     scrollDepthPercent?: number; // trigger khi scroll đến X% chiều cao trang
     clickCount?: number;         // trigger sau X lần click
-    activeTimeMs?: number;       // trigger sau X ms kể từ window.load
+    activeTimeMs?: number;       // window tối đa để nhận trigger (ms)
+    delayMs?: number;            // delay thêm sau khi điều kiện thỏa trước khi fire
     maxPlaybackBytes?: number;   // trigger khi buffer đạt X bytes
 }
 
 export interface GemXConfig {
+    debug: boolean;
     excludeClassNames: string[];
     ignoreMutationClassNames: string[];
     discoverTrigger: DiscoverTrigger | null;

package/types/global.d.ts

@@ -2,6 +2,7 @@ declare global {
   interface Window {
       clarityOverrides?: { [key: string]: ((...args: any[]) => any) | undefined };
     GemXHeatmap?: {
+      debug: boolean;
       excludeClassNames: string[];
       ignoreMutationClassNames?: string[];
       discoverTrigger?: {