clarity-js 0.6.32 → 0.6.35

package/types/data.d.ts

@@ -4,9 +4,12 @@ export type Token = (string | number | number[] | string[]);
 export type DecodedToken = (any | any[]);
 
 export type MetadataCallback = (data: Metadata, playback: boolean) => void;
+export interface MetadataCallbackOptions {
+    callback: MetadataCallback, 
+    wait: boolean
+}
 
 /* Enum */
-
 export const enum Event {
     /* Data */
     Metric = 0,
@@ -52,9 +55,14 @@ export const enum Event {
     Variable = 34,
     Limit = 35,
     Summary = 36,
+/**
+ * @deprecated No longer support Box event
+ */
     Box = 37,
     Clipboard = 38,
-    Submit = 39
+    Submit = 39,
+    Extract = 40,
+    Fraud = 41
 }
 
 export const enum Metric {
@@ -85,7 +93,10 @@ export const enum Metric {
     CartTotal = 24,
     EventCount = 25,
     Automation = 26,
-    Mobile = 27
+    Mobile = 27,
+    UploadTime = 28,
+    SinglePage = 29,
+    UsedMemory = 30
 }
 
 export const enum Dimension {
@@ -138,7 +149,8 @@ export const enum Code {
 /**
  * @deprecated No longer support ContentSecurityPolicy
  */
-    ContentSecurityPolicy = 7
+    ContentSecurityPolicy = 7,
+    Config = 8
 }
 
 export const enum Severity {
@@ -175,7 +187,6 @@ export const enum Setting {
     CollectionLimit = 128, // Number of unique entries for dimensions
     ClickPrecision = 32767, // 2^15 - 1
     BoxPrecision = 100, // Up to 2 decimal points (e.g. 34.56)
-    ResizeObserverThreshold = 15, // At least 15 characters before we attach a resize observer for the node
     ScriptErrorLimit = 5, // Do not send the same script error more than 5 times per page
     DimensionLimit = 256, // Do not extract dimensions which are over 256 characters
     WordLength = 5, // Estimated average size of a word,
@@ -185,9 +196,11 @@ export const enum Setting {
     ViewportIntersectionRatio = 0.05, // Ratio of intersection area in comparison to viewport area before it's marked visible
     IntersectionRatio = 0.8, // Ratio of intersection area in comparison to element's area before it's marked visible
     MaxFirstPayloadBytes = 1 * 1024 * 1024, // 1MB: Cap the very first payload to a maximum of 1MB
+    MegaByte = 1024 * 1024, // 1MB
     UploadFactor = 3, // Slow down sequence by specified factor
     MinUploadDelay = 100, // Minimum time before we are ready to flush events to the server
-    MaxUploadDelay = 30 * Time.Second // Do flush out payload once every 30s
+    MaxUploadDelay = 30 * Time.Second, // Do flush out payload once every 30s,
+    ExtractLimit = 10000 // Do not extract more than 10000 characters
 }
 
 export const enum Character {
@@ -209,6 +222,7 @@ export const enum Constant {
     Pause = "pause",
     Resume = "resume",
     Report = "report",
+    Memory = "memory",
     Empty = "",
     Space = " ",
     Expires = "expires=",
@@ -233,7 +247,6 @@ export const enum Constant {
     UserId = "userId",
     SessionId = "sessionId",
     PageId = "pageId",
-    ResizeObserver = "ResizeObserver",
     Mask = "•",
     SessionStorage = "sessionStorage",
     Cookie = "cookie",
@@ -248,6 +261,9 @@ export const enum Constant {
     Accept = "Accept",
     ClarityGzip = "application/x-clarity-gzip",
     Tilde = "~",
+    ArrayStart = "[",
+    ConditionStart = "{",
+    ConditionEnd = "}"
 }
 
 export const enum XMLReadyState {
@@ -366,6 +382,10 @@ export interface UpgradeData {
     key: string;
 }
 
+export interface ExtractData {
+    [key: string]: string | number;
+}
+
 export interface UploadData {
     sequence: number;
     attempts: number;

package/types/diagnostic.d.ts

@@ -16,3 +16,9 @@ export interface LogData {
     stack: string;
     severity: Severity;
 }
+
+export interface FraudData {
+    id: number;
+    target: number;
+    hash: string;
+}

package/types/interaction.d.ts

@@ -103,6 +103,7 @@ export interface ClickData {
     text: string;
     link: string;
     hash: string;
+    trust: number;
 }
 
 export interface ClipboardData {

package/types/layout.d.ts

@@ -28,6 +28,11 @@ export const enum RegionVisibility {
     ScrolledToEnd = 13
 }
 
+export const enum Mask {
+    Text = "password,secret,pass,social,ssn,name,code,dob,cell,mob,contact,hidden,account,cvv,ccv,email,tel,phone,address,addr,card,zip",
+    Disable = "radio,checkbox,range,button,reset,submit"
+}
+
 export const enum Constant {
     Empty = "",
     SvgPrefix = "svg:",
@@ -42,6 +47,7 @@ export const enum Constant {
     Box = "#",
     Bang = "!",
     Period = ".",
+    Comma = ",",
     MaskData = "data-clarity-mask",
     UnmaskData = "data-clarity-unmask",
     RegionData = "data-clarity-region",
@@ -154,6 +160,7 @@ export interface NodeValue {
     hash: [string, string];
     region: number;
     metadata: NodeMeta;
+    fragment: number;
 }
 
 export interface NodeMeta {
@@ -161,6 +168,7 @@ export interface NodeMeta {
     suspend: boolean;
     privacy: Privacy;
     position: number;
+    fraud: number;
     size: number[];
 }
 
@@ -197,12 +205,6 @@ export interface RegionData {
     name: string;    
 }
 
-export interface BoxData {
-    id: number;
-    width: number;
-    height: number;
-}
-
 export interface TargetMetadata {
     id: number;
     hash: [string, string];

package/types/performance.d.ts

@@ -31,10 +31,3 @@ export interface NavigationData {
     encodedSize: number;
     decodedSize: number;
 }
-
-export interface ConnectionData {
-    downlink: number;
-    rtt: number;
-    saveData: BooleanFlag;
-    type: string;
-}

package/src/layout/box.ts

@@ -1,83 +0,0 @@
-import { Event, Setting } from "@clarity-types/data";
-import { BoxData } from "@clarity-types/layout";
-import * as dom from "@src/layout/dom";
-import encode from "@src/layout/encode";
-
-export let data: BoxData[] = [];
-let enabled = false;
-let observer: ResizeObserver = null;
-
-export function start(): void {
-    reset();
-    observer = null;
-    enabled = window["ResizeObserver"] ? true : false;
-}
-
-export function compute(id: number): void {
-    if (enabled === false) { return; }
-    observer = observer === null ? new ResizeObserver(handler) : observer;
-    if (observer) {
-        let value = dom.getValue(id);
-        // If this is the first time computing size for this node, go ahead and wire up ResizeObserver
-        // In all other cases, value.metadata.size will be null or an array with two elements [width, height]
-        // And, in those cases, we will skip through the following section and not attach the observer
-        if (value && value.metadata.size !== null && value.metadata.size.length === 0) {
-            let node = dom.getNode(id);
-            if (node && node.nodeType === Node.ELEMENT_NODE) {
-                let e = node as HTMLElement;
-                let r = e.getBoundingClientRect();
-                value.metadata.size = [Math.floor(r.width * Setting.BoxPrecision), Math.floor(r.height * Setting.BoxPrecision)];
-                observer.observe(e);
-            }
-        }
-    }
-}
-
-function handler(entries: ResizeObserverEntry[]): void {
-    window.requestAnimationFrame(() => {
-        for (let entry of entries) {
-            let target = entry.target;
-            let id = target ? dom.getId(target) : null;
-            if (id) {
-                let v = dom.getValue(id);
-                let s = v.metadata.size;
-                let b = entry.borderBoxSize as any;
-                let w = null;
-                let h = null;
-                // Check if browser supports borderBoxSize property on ResizeObserverEntry object
-                // Otherwise, fall back to using getBoundingClientRect() to be cross browser compatible
-                // Reference: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize
-                if(b && b.length > 0) {
-                    w = Math.floor(b[0].inlineSize * Setting.BoxPrecision);
-                    h = Math.floor(b[0].blockSize * Setting.BoxPrecision);
-                } else {
-                    let r = target.getBoundingClientRect();
-                    w = Math.floor(r.width * Setting.BoxPrecision);
-                    h = Math.floor(r.height * Setting.BoxPrecision);
-                }
-
-                // Capture new width & height only if they are different from what we have in in-memory cache
-                if (w !== s[0] && h !== s[1]) {
-                    s = [w,h];
-                    data.push({ id, width: w, height: h });
-                }
-            }
-        }
-
-        // Schedule encode only when we have at least one valid data entry
-        if (data.length > 0) { encode(Event.Box); }
-    });
-}
-
-export function reset(): void {
-    data = [];
-}
-
-export function stop(): void {
-    reset();
-    if (observer) {
-        observer.disconnect();
-        observer = null;
-    }
-    enabled = false;
-}

package/src/layout/extract.ts

@@ -1,94 +0,0 @@
-import { Dimension, Extract, Metric, Region, RegionFilter } from "@clarity-types/core";
-import { Constant, Setting } from "@clarity-types/data";
-import * as dimension from "@src/data/dimension";
-import * as metric from "@src/data/metric";
-import * as region from "@src/layout/region";
-
-const formatRegex = /1/g;
-const digitsRegex = /[^0-9\.]/g;
-const digitsWithCommaRegex = /[^0-9\.,]/g;
-const regexCache: {[key: string]: RegExp} = {};
-
-export function regions(root: ParentNode, value: Region[]): void {
-    for (let v of value) {
-        const [regionId, selector, filter, match] = v;
-        let valid = true;
-        switch (filter) {
-            case RegionFilter.Url: valid = match && !!top.location.href.match(regex(match)); break;
-            case RegionFilter.Javascript: valid = match && !!evaluate(match); break;
-        }
-        if (valid) { root.querySelectorAll(selector).forEach(e => region.observe(e, regionId.toString())); }
-    }
-}
-
-export function metrics(root: ParentNode, value: Metric[]): void {
-    for (let v of value) {
-        const [metricId, source, match, scale] = v;
-        if (match) {
-            switch (source) {
-                case Extract.Text:  root.querySelectorAll(match).forEach(e => { metric.max(metricId, num((e as HTMLElement).innerText, scale)); }); break;
-                case Extract.Attribute: root.querySelectorAll(`[${match}]`).forEach(e => { metric.max(metricId, num(e.getAttribute(match), scale, false)); }); break;
-                case Extract.Javascript: metric.max(metricId, evaluate(match, Constant.Number) as number); break;
-            }
-        }
-    }
-}
-
-export function dimensions(root: ParentNode, value: Dimension[]): void {
-    for (let v of value) {
-        const [dimensionId, source, match] = v;
-        if (match) {
-            switch (source) {
-                case Extract.Text:  root.querySelectorAll(match).forEach(e => { dimension.log(dimensionId, str((e as HTMLElement).innerText)); }); break;
-                case Extract.Attribute: root.querySelectorAll(`[${match}]`).forEach(e => { dimension.log(dimensionId, str(e.getAttribute(match))); }); break;
-                case Extract.Javascript: dimension.log(dimensionId, str(evaluate(match, Constant.String))); break;
-            }
-        }
-    }
-}
-
-function regex(match: string): RegExp {
-    regexCache[match] = match in regexCache ? regexCache[match] : new RegExp(match);
-    return regexCache[match];
-}
-
-// The function below takes in a variable name in following format: "a.b.c" and safely evaluates its value in javascript context
-// For instance, for a.b.c, it will first check window["a"]. If it exists, it will recursively look at: window["a"]["b"] and finally,
-// return the value for window["a"]["b"]["c"].
-function evaluate(variable: string, type: string = null, base: Object = window): any {
-    let parts = variable.split(Constant.Dot);
-    let first = parts.shift();
-    if (base && base[first]) {
-        if (parts.length > 0) { return evaluate(parts.join(Constant.Dot), type, base[first]); } 
-        let output = type === null || type === typeof base[first] ? base[first] : null;
-        return output;
-    }
-    return null;
-}
-
-function str(input: string): string {
-    // Automatically trim string to max of Setting.DimensionLimit to avoid fetching long strings
-    return input ? input.substr(0, Setting.DimensionLimit) : input;
-}
-
-function num(text: string, scale: number, localize: boolean = true): number {
-    try {
-        scale = scale || 1; 
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-        let lang = document.documentElement.lang;
-        if (Intl && Intl.NumberFormat && lang && localize) {
-            text = text.replace(digitsWithCommaRegex, Constant.Empty);
-            // Infer current group and decimal separator from current locale
-            let group = Intl.NumberFormat(lang).format(11111).replace(formatRegex, Constant.Empty);
-            let decimal = Intl.NumberFormat(lang).format(1.1).replace(formatRegex, Constant.Empty);
-            
-            // Parse number using inferred group and decimal separators
-            return Math.round(parseFloat(text
-                .replace(new RegExp('\\' + group, 'g'), Constant.Empty)
-                .replace(new RegExp('\\' + decimal), Constant.Dot)
-            ) * scale);
-        }
-        // Fallback to en locale
-        return Math.round(parseFloat(text.replace(digitsRegex, Constant.Empty)) * scale);
-    } catch { return null; }
-}