clarity-js 0.7.27 → 0.7.31

package/src/layout/mutation.ts

@@ -129,19 +129,19 @@ async function process(): Promise<void> {
       if (state === Task.Wait) { state = await task.suspend(timer); }
       if (state === Task.Stop) { break; }      
       let target = mutation.target;
-      let type = track(mutation, timer, instance);
+      let type = track(mutation, timer, instance, record.time);
       if (type && target && target.ownerDocument) { dom.parse(target.ownerDocument); }
       if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && (target as ShadowRoot).host) { dom.parse(target as ShadowRoot); }
       switch (type) {
         case Constant.Attributes:
-            processNode(target, Source.Attributes);
+            processNode(target, Source.Attributes, record.time);
             break;
         case Constant.CharacterData:
-            processNode(target, Source.CharacterData);
+            processNode(target, Source.CharacterData, record.time);
             break;
         case Constant.ChildList:
-          processNodeList(mutation.addedNodes, Source.ChildListAdd, timer);
-          processNodeList(mutation.removedNodes, Source.ChildListRemove, timer);
+          processNodeList(mutation.addedNodes, Source.ChildListAdd, timer, record.time);
+          processNodeList(mutation.removedNodes, Source.ChildListRemove, timer, record.time);
           break;
         case Constant.Suspend:
           let value = dom.get(target);
@@ -156,7 +156,7 @@ async function process(): Promise<void> {
   task.stop(timer);
 }
 
-function track(m: MutationRecord, timer: Timer, instance: number): string {
+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
   if (value && value.data.tag !== Constant.HTML) {
@@ -172,7 +172,7 @@ function track(m: MutationRecord, timer: Timer, instance: number): string {
     history[key] = key in history ? history[key] : [0, instance];
     let h = history[key];
     // Lookup any pending nodes queued up for removal, and process them now if we suspended a mutation before
-    if (inactive === false && h[0] >= Setting.MutationSuspendThreshold) { processNodeList(h[2], Source.ChildListRemove, timer); }
+    if (inactive === false && h[0] >= Setting.MutationSuspendThreshold) { processNodeList(h[2], Source.ChildListRemove, timer, timestamp); }
     // Update the counter
     h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
     h[1] = instance;
@@ -195,16 +195,16 @@ function names(nodes: NodeList): string {
   return output.join();
 }
 
-async function processNodeList(list: NodeList, source: Source, timer: Timer): Promise<void> {
+async function processNodeList(list: NodeList, source: Source, timer: Timer, timestamp: number): Promise<void> {
   let length = list ? list.length : 0;
   for (let i = 0; i < length; i++) {
     if (source === Source.ChildListAdd) {
-      traverse(list[i], timer, source);
+      traverse(list[i], timer, source, timestamp);
     } else {
       let state = task.state(timer);
       if (state === Task.Wait) { state = await task.suspend(timer); }
       if (state === Task.Stop) { break; }
-      processNode(list[i], source);
+      processNode(list[i], source, timestamp);
     }
   }
 }

package/src/layout/node.ts

@@ -12,7 +12,7 @@ import { electron } from "@src/data/metadata";
 const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror", "data-drupal-form-submit-last"];
 const newlineRegex = /[\r\n]+/g;
 
-export default function (node: Node, source: Source): Node {
+export default function (node: Node, source: Source, timestamp: number): Node {
     let child: Node = null;
 
     // Do not track this change if we are attempting to remove a node before discovering it
@@ -43,7 +43,7 @@ export default function (node: Node, source: Source): Node {
             // We check for regions in the beginning when discovering document and
             // later whenever there are new additions or modifications to DOM (mutations)
             if (node === document) dom.parse(document);
-            checkDocumentStyles(node as Document);
+            checkDocumentStyles(node as Document, timestamp);
             observe(node);
             break;
         case Node.DOCUMENT_FRAGMENT_NODE:
@@ -67,7 +67,7 @@ export default function (node: Node, source: Source): Node {
                     // the same way we observe real shadow DOM nodes (encapsulation provided by the browser).
                     dom[call](node, shadowRoot.host, { tag: Constant.PolyfillShadowDomTag, attributes: {} }, source);
                 }
-                checkDocumentStyles(node as Document);
+                checkDocumentStyles(node as Document, timestamp);
             }
             break;
         case Node.TEXT_NODE:
@@ -187,7 +187,7 @@ export default function (node: Node, source: Source): Node {
                 case "SOURCE":
                     // Ignoring any base64 src attribute for media elements to prevent big unused tokens to be sent and shock the network 
                     if (Constant.Src in attributes && attributes[Constant.Src].startsWith("data:")) {
-                        delete attributes[Constant.Src]
+                        attributes[Constant.Src] = "";
                     }
                     let mediaTag = { tag, attributes };
                     dom[call](node, parent, mediaTag, source);

package/src/layout/style.ts

@@ -14,6 +14,7 @@ let replaceSync: (text?: string) => void = null;
 const styleSheetId = 'claritySheetId';
 const styleSheetPageNum = 'claritySheetNum';
 let styleSheetMap = {};
+let styleTimeMap: {[key: string]: number} = {};
 
 export function start(): void {
     reset();
@@ -56,7 +57,8 @@ function bootStrapStyleSheet(styleSheet: CSSStyleSheet): void {
     }
 }
 
-export function checkDocumentStyles(documentNode: Document): void {
+export function checkDocumentStyles(documentNode: Document, timestamp: number): void {
+    timestamp = timestamp || time();
     if (!documentNode?.adoptedStyleSheets) {
         // if we don't have adoptedStyledSheets on the Node passed to us, we can short circuit.
         return;
@@ -69,8 +71,8 @@ export function checkDocumentStyles(documentNode: Document): void {
         if (styleSheet[styleSheetPageNum] !== pageNum) {
             styleSheet[styleSheetPageNum] = pageNum;
             styleSheet[styleSheetId] = shortid();
-            trackStyleChange(time(), styleSheet[styleSheetId], StyleSheetOperation.Create);
-            trackStyleChange(time(), styleSheet[styleSheetId], StyleSheetOperation.ReplaceSync, getCssRules(styleSheet));
+            trackStyleChange(timestamp, styleSheet[styleSheetId], StyleSheetOperation.Create);
+            trackStyleChange(timestamp, styleSheet[styleSheetId], StyleSheetOperation.ReplaceSync, getCssRules(styleSheet));
         }
         currentStyleSheets.push(styleSheet[styleSheetId]);
     }
@@ -81,14 +83,16 @@ export function checkDocumentStyles(documentNode: Document): void {
     }
     if (!arraysEqual(currentStyleSheets, styleSheetMap[documentId])) {
         // Using -1 to signify the root document node as we don't track that as part of our nodeMap
-        trackStyleAdoption(time(), documentNode == document ? -1 : getId(documentNode), StyleSheetOperation.SetAdoptedStyles, currentStyleSheets);
+        trackStyleAdoption(timestamp, documentNode == document ? -1 : getId(documentNode), StyleSheetOperation.SetAdoptedStyles, currentStyleSheets);
         styleSheetMap[documentId] = currentStyleSheets;
+        styleTimeMap[documentId] = timestamp;
     }
 }
 
 export function compute(): void {
-    checkDocumentStyles(document);
-    Object.keys(styleSheetMap).forEach((x) => checkDocumentStyles(getNode(parseInt(x, 10)) as Document));
+    let ts = -1 in styleTimeMap ? styleTimeMap[-1] : null;
+    checkDocumentStyles(document, ts);
+    Object.keys(styleSheetMap).forEach((x) => checkDocumentStyles(getNode(parseInt(x, 10)) as Document, styleTimeMap[x]));
 }
 
 export function reset(): void {
@@ -97,6 +101,7 @@ export function reset(): void {
 
 export function stop(): void {
     styleSheetMap = {};
+    styleTimeMap = {};
     reset();
 }
 

package/src/layout/traverse.ts

@@ -3,7 +3,7 @@ import { Source } from "@clarity-types/layout";
 import * as task from "@src/core/task";
 import node from "@src/layout/node";
 
-export default async function(root: Node, timer: Timer, source: Source): Promise<void> {
+export default async function(root: Node, timer: Timer, source: Source, timestamp: number): Promise<void> {
     let queue = [root];
     while (queue.length > 0) {
         let entry = queue.shift();
@@ -22,7 +22,7 @@ export default async function(root: Node, timer: Timer, source: Source): Promise
         // Check if processing a node gives us a pointer to one of its sub nodes for traversal
         // E.g. an element node may give us a pointer to traverse shadowDom if shadowRoot property is set
         // Or, an iframe from the same origin could give a pointer to it's document for traversing contents of iframe.
-        let subnode = node(entry, source);
+        let subnode = node(entry, source, timestamp);
         if (subnode) { queue.push(subnode); }
     }
 }

package/types/core.d.ts

@@ -137,6 +137,7 @@ export interface Config {
     upgrade?: (key: string) => void;
     action?: (key: string) => void;
     dob?: number;
+    delayDom?: boolean;
 }
 
 export const enum Constant {

package/types/data.d.ts

@@ -8,6 +8,7 @@ export interface MetadataCallbackOptions {
     callback: MetadataCallback,
     wait: boolean
 }
+export type SignalCallback = (data: ClaritySignal) => void
 
 /* Enum */
 export const enum Event {
@@ -278,6 +279,7 @@ export const enum Constant {
     End = "END",
     Upgrade = "UPGRADE",
     Action = "ACTION",
+    Signal = "SIGNAL",
     Extract = "EXTRACT",
     UserHint = "userHint",
     UserType = "userType",
@@ -389,6 +391,7 @@ export interface BaselineData {
     pointerX: number;
     pointerY: number;
     activityTime: number;
+    scrollTime: number;
 }
 
 export interface IdentityData {
@@ -444,3 +447,8 @@ export interface UploadData {
     attempts: number;
     status: number;
 }
+
+export interface ClaritySignal {
+    type: string
+    value?: number
+}

package/types/index.d.ts

@@ -16,6 +16,7 @@ interface Clarity {
   set: (variable: string, value: string | string[]) => void;
   identify: (userId: string, sessionId?: string, pageId?: string, userHint?: string) => void;
   metadata: (callback: Data.MetadataCallback, wait?: boolean) => void;
+  signal: (callback: Data.SignalCallback) => void;
 }
 
 interface Selector {

package/types/interaction.d.ts

@@ -134,6 +134,8 @@ export interface ScrollData {
     target: Target;
     x: number;
     y: number;
+    top: string;
+    bottom: string;
 }
 
 export interface SelectionData {