clarity-js 0.8.1 → 0.8.2

package/src/layout/style.ts

@@ -1,150 +1,150 @@
-import { Event, Metric } from "@clarity-types/data";
-import { StyleSheetOperation, StyleSheetState } 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";
-import { getCssRules } from "./node";
-import * as metric from "@src/data/metric";
-
-export let sheetUpdateState: StyleSheetState[] = [];
-export let sheetAdoptionState: StyleSheetState[] = [];
-let replace: (text?: string) => Promise<CSSStyleSheet> = null;
-let replaceSync: (text?: string) => void = null;
-const styleSheetId = 'claritySheetId';
-let styleSheetMap = {};
-let styleTimeMap: {[key: string]: number} = {};
-let documentNodes = [];
-let createdSheetIds = [];
-
-export function start(): void {
-    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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
-                        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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
-                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
-                    }                
-                }
-                return replaceSync.apply(this, arguments);
-            };
-        }
-    }    
-}
-
-export function checkDocumentStyles(documentNode: Document, timestamp: number): void {
-    if (documentNodes.indexOf(documentNode) === -1) {
-        documentNodes.push(documentNode);
-    }
-    timestamp = timestamp || time();
-    if (!documentNode?.adoptedStyleSheets) {
-        // if we don't have adoptedStyledSheets on the Node passed to us, we can short circuit.
-        return;
-    }
-    metric.max(Metric.ConstructedStyles, 1);
-    let currentStyleSheets: string[] = [];
-    for (var styleSheet of documentNode.adoptedStyleSheets) {
-        // If we haven't seen this style sheet on this page yet, we create a reference to it for the visualizer.
-        // For SPA or times in which Clarity restarts on a given page, our visualizer would lose context
-        // on the previously created style sheet for page N-1.
-        // Then we synthetically call replaceSync with its contents to bootstrap it
-        if (!styleSheet[styleSheetId] || createdSheetIds.indexOf(styleSheet[styleSheetId]) === -1) {
-            styleSheet[styleSheetId] = shortid();
-            createdSheetIds.push(styleSheet[styleSheetId]);
-            trackStyleChange(timestamp, styleSheet[styleSheetId], StyleSheetOperation.Create);
-            trackStyleChange(timestamp, styleSheet[styleSheetId], StyleSheetOperation.ReplaceSync, getCssRules(styleSheet));
-        }
-
-        currentStyleSheets.push(styleSheet[styleSheetId]);
-    }
-
-    let documentId = getId(documentNode, true);
-    if (!styleSheetMap[documentId]) {
-        styleSheetMap[documentId] = [];
-    }
-    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(timestamp, documentNode == document ? -1 : getId(documentNode), StyleSheetOperation.SetAdoptedStyles, currentStyleSheets);
-        styleSheetMap[documentId] = currentStyleSheets;
-        styleTimeMap[documentId] = timestamp;
-    }
-}
-
-export function compute(): void {
-    for (var documentNode of documentNodes) {
-        var docId = documentNode == document ? -1 : getId(documentNode);
-        let ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
-        checkDocumentStyles(document, ts);
-    }
-}
-
-export function reset(): void {
-    sheetAdoptionState = [];
-    sheetUpdateState = [];
-}
-
-export function stop(): void {
-    styleSheetMap = {};
-    styleTimeMap = {};
-    documentNodes = [];
-    createdSheetIds = [];
-    reset();
-}
-
-function trackStyleChange(time: number, id: string, operation: StyleSheetOperation, cssRules?: string): void {
-    sheetUpdateState.push({
-        time,
-        event: Event.StyleSheetUpdate,
-        data: {
-            id,
-            operation,
-            cssRules
-        }
-    });
-
-    encode(Event.StyleSheetUpdate);
-}
-
-function trackStyleAdoption(time: number, id: number, operation: StyleSheetOperation, newIds: string[]): void {
-    sheetAdoptionState.push({
-        time,
-        event: Event.StyleSheetAdoption,
-        data: {
-            id,
-            operation,
-            newIds
-        }
-    });
-
-    encode(Event.StyleSheetAdoption);
-}
-
-function arraysEqual(a: string[], b: string[]): boolean {
-    if (a.length !== b.length) {
-        return false;
-    }
-
-    return a.every((value, index) => value === b[index]);
-}
+import { Event, Metric } from "@clarity-types/data";
+import { StyleSheetOperation, StyleSheetState } 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";
+import { getCssRules } from "./node";
+import * as metric from "@src/data/metric";
+
+export let sheetUpdateState: StyleSheetState[] = [];
+export let sheetAdoptionState: StyleSheetState[] = [];
+let replace: (text?: string) => Promise<CSSStyleSheet> = null;
+let replaceSync: (text?: string) => void = null;
+const styleSheetId = 'claritySheetId';
+let styleSheetMap = {};
+let styleTimeMap: {[key: string]: number} = {};
+let documentNodes = [];
+let createdSheetIds = [];
+
+export function start(): void {
+    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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
+                        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 (createdSheetIds.indexOf(this[styleSheetId]) > -1) {
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
+                    }                
+                }
+                return replaceSync.apply(this, arguments);
+            };
+        }
+    }    
+}
+
+export function checkDocumentStyles(documentNode: Document, timestamp: number): void {
+    if (documentNodes.indexOf(documentNode) === -1) {
+        documentNodes.push(documentNode);
+    }
+    timestamp = timestamp || time();
+    if (!documentNode?.adoptedStyleSheets) {
+        // if we don't have adoptedStyledSheets on the Node passed to us, we can short circuit.
+        return;
+    }
+    metric.max(Metric.ConstructedStyles, 1);
+    let currentStyleSheets: string[] = [];
+    for (var styleSheet of documentNode.adoptedStyleSheets) {
+        // If we haven't seen this style sheet on this page yet, we create a reference to it for the visualizer.
+        // For SPA or times in which Clarity restarts on a given page, our visualizer would lose context
+        // on the previously created style sheet for page N-1.
+        // Then we synthetically call replaceSync with its contents to bootstrap it
+        if (!styleSheet[styleSheetId] || createdSheetIds.indexOf(styleSheet[styleSheetId]) === -1) {
+            styleSheet[styleSheetId] = shortid();
+            createdSheetIds.push(styleSheet[styleSheetId]);
+            trackStyleChange(timestamp, styleSheet[styleSheetId], StyleSheetOperation.Create);
+            trackStyleChange(timestamp, styleSheet[styleSheetId], StyleSheetOperation.ReplaceSync, getCssRules(styleSheet));
+        }
+
+        currentStyleSheets.push(styleSheet[styleSheetId]);
+    }
+
+    let documentId = getId(documentNode, true);
+    if (!styleSheetMap[documentId]) {
+        styleSheetMap[documentId] = [];
+    }
+    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(timestamp, documentNode == document ? -1 : getId(documentNode), StyleSheetOperation.SetAdoptedStyles, currentStyleSheets);
+        styleSheetMap[documentId] = currentStyleSheets;
+        styleTimeMap[documentId] = timestamp;
+    }
+}
+
+export function compute(): void {
+    for (var documentNode of documentNodes) {
+        var docId = documentNode == document ? -1 : getId(documentNode);
+        let ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
+        checkDocumentStyles(document, ts);
+    }
+}
+
+export function reset(): void {
+    sheetAdoptionState = [];
+    sheetUpdateState = [];
+}
+
+export function stop(): void {
+    styleSheetMap = {};
+    styleTimeMap = {};
+    documentNodes = [];
+    createdSheetIds = [];
+    reset();
+}
+
+function trackStyleChange(time: number, id: string, operation: StyleSheetOperation, cssRules?: string): void {
+    sheetUpdateState.push({
+        time,
+        event: Event.StyleSheetUpdate,
+        data: {
+            id,
+            operation,
+            cssRules
+        }
+    });
+
+    encode(Event.StyleSheetUpdate);
+}
+
+function trackStyleAdoption(time: number, id: number, operation: StyleSheetOperation, newIds: string[]): void {
+    sheetAdoptionState.push({
+        time,
+        event: Event.StyleSheetAdoption,
+        data: {
+            id,
+            operation,
+            newIds
+        }
+    });
+
+    encode(Event.StyleSheetAdoption);
+}
+
+function arraysEqual(a: string[], b: string[]): boolean {
+    if (a.length !== b.length) {
+        return false;
+    }
+
+    return a.every((value, index) => value === b[index]);
+}

package/src/layout/target.ts

@@ -1,32 +1,32 @@
-import { Privacy } from "@clarity-types/core";
-import { Event } from "@clarity-types/data";
-import { TargetMetadata } from "@clarity-types/layout";
-import * as fraud from "@src/diagnostic/fraud";
-import * as region from "@src/layout/region";
-import * as dom from "@src/layout/dom";
-import * as mutation from "@src/layout/mutation";
-
-export function target(evt: UIEvent): Node {
-    let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
-    let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
-    mutation.active(); // Mark active periods of time so mutations can continue uninterrupted
-    return node && node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
-}
-
-export function metadata(node: Node, event: Event, text: string = null): TargetMetadata {
-    // If the node is null, we return a reserved value for id: 0. Valid assignment of id begins from 1+.
-    let output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text };
-    if (node) {
-        let value = dom.get(node);
-        if (value !== null) {
-            let metadata = value.metadata;
-            output.id = value.id;
-            output.hash = value.hash;
-            output.privacy = metadata.privacy;
-            if (value.region) { region.track(value.region, event); }
-            if (metadata.fraud) { fraud.check(metadata.fraud, value.id, text || value.data.value); }
-        }
-    }
-
-    return output;
-}
+import { Privacy } from "@clarity-types/core";
+import { Event } from "@clarity-types/data";
+import { TargetMetadata } from "@clarity-types/layout";
+import * as fraud from "@src/diagnostic/fraud";
+import * as region from "@src/layout/region";
+import * as dom from "@src/layout/dom";
+import * as mutation from "@src/layout/mutation";
+
+export function target(evt: UIEvent): Node {
+    let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
+    let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
+    mutation.active(); // Mark active periods of time so mutations can continue uninterrupted
+    return node && node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
+}
+
+export function metadata(node: Node, event: Event, text: string = null): TargetMetadata {
+    // If the node is null, we return a reserved value for id: 0. Valid assignment of id begins from 1+.
+    let output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text };
+    if (node) {
+        let value = dom.get(node);
+        if (value !== null) {
+            let metadata = value.metadata;
+            output.id = value.id;
+            output.hash = value.hash;
+            output.privacy = metadata.privacy;
+            if (value.region) { region.track(value.region, event); }
+            if (metadata.fraud) { fraud.check(metadata.fraud, value.id, text || value.data.value); }
+        }
+    }
+
+    return output;
+}

package/src/layout/traverse.ts

@@ -1,28 +1,28 @@
-import { Task, Timer } from "@clarity-types/core";
-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, timestamp: number): Promise<void> {
-    let queue = [root];
-    while (queue.length > 0) {
-        let entry = queue.shift();
-        let next = entry.firstChild;
-
-        while (next) {
-            queue.push(next);
-            next = next.nextSibling;
-        }
-      
-        // Check the status of current task to see if we should yield before continuing
-        let state = task.state(timer);
-        if (state === Task.Wait) { state = await task.suspend(timer); }
-        if (state === Task.Stop) { break; }
-
-        // 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, timestamp);
-        if (subnode) { queue.push(subnode); }
-    }
+import { Task, Timer } from "@clarity-types/core";
+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, timestamp: number): Promise<void> {
+    let queue = [root];
+    while (queue.length > 0) {
+        let entry = queue.shift();
+        let next = entry.firstChild;
+
+        while (next) {
+            queue.push(next);
+            next = next.nextSibling;
+        }
+      
+        // Check the status of current task to see if we should yield before continuing
+        let state = task.state(timer);
+        if (state === Task.Wait) { state = await task.suspend(timer); }
+        if (state === Task.Stop) { break; }
+
+        // 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, timestamp);
+        if (subnode) { queue.push(subnode); }
+    }
 }

package/src/performance/blank.ts

@@ -1,7 +1,7 @@
-export * from "@src/insight/blank";
-
-export let keys = [];
-
-/* Intentionally blank module with empty code */
-export function hashText(): void {}
-export function trigger(): void {}
+export * from "@src/insight/blank";
+
+export let keys = [];
+
+/* Intentionally blank module with empty code */
+export function hashText(): void {}
+export function trigger(): void {}

package/src/performance/encode.ts

@@ -1,31 +1,31 @@
-import {Event, Token} from "@clarity-types/data";
-import { time } from "@src/core/time";
-import { queue } from "@src/data/upload";
-import * as navigation from "@src/performance/navigation";
-
-export default async function(type: Event): Promise<void> {
-    let t = time();
-    let tokens: Token[] = [t, type];
-    switch (type) {
-        case Event.Navigation:
-            tokens.push(navigation.data.fetchStart);
-            tokens.push(navigation.data.connectStart);
-            tokens.push(navigation.data.connectEnd);
-            tokens.push(navigation.data.requestStart);
-            tokens.push(navigation.data.responseStart);
-            tokens.push(navigation.data.responseEnd);
-            tokens.push(navigation.data.domInteractive);
-            tokens.push(navigation.data.domComplete);
-            tokens.push(navigation.data.loadEventStart);
-            tokens.push(navigation.data.loadEventEnd);
-            tokens.push(navigation.data.redirectCount);
-            tokens.push(navigation.data.size);
-            tokens.push(navigation.data.type);
-            tokens.push(navigation.data.protocol);
-            tokens.push(navigation.data.encodedSize);
-            tokens.push(navigation.data.decodedSize);
-            navigation.reset();
-            queue(tokens);
-            break;
-    }
-}
+import {Event, Token} from "@clarity-types/data";
+import { time } from "@src/core/time";
+import { queue } from "@src/data/upload";
+import * as navigation from "@src/performance/navigation";
+
+export default async function(type: Event): Promise<void> {
+    let t = time();
+    let tokens: Token[] = [t, type];
+    switch (type) {
+        case Event.Navigation:
+            tokens.push(navigation.data.fetchStart);
+            tokens.push(navigation.data.connectStart);
+            tokens.push(navigation.data.connectEnd);
+            tokens.push(navigation.data.requestStart);
+            tokens.push(navigation.data.responseStart);
+            tokens.push(navigation.data.responseEnd);
+            tokens.push(navigation.data.domInteractive);
+            tokens.push(navigation.data.domComplete);
+            tokens.push(navigation.data.loadEventStart);
+            tokens.push(navigation.data.loadEventEnd);
+            tokens.push(navigation.data.redirectCount);
+            tokens.push(navigation.data.size);
+            tokens.push(navigation.data.type);
+            tokens.push(navigation.data.protocol);
+            tokens.push(navigation.data.encodedSize);
+            tokens.push(navigation.data.decodedSize);
+            navigation.reset();
+            queue(tokens);
+            break;
+    }
+}

package/src/performance/index.ts

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