@gem-sdk/clarity-js 0.8.94

package/src/data/envelope.ts

@@ -0,0 +1,53 @@
+import { BooleanFlag, Token, Upload, Envelope, ApplicationPlatform } from "@clarity-types/data";
+import { time } from "@src/core/time";
+import version from "@src/core/version";
+import * as metadata from "@src/data/metadata";
+import * as scrub from "@src/core/scrub";
+
+export let data: Envelope = null;
+
+export function start(): void {
+  const m = metadata.data;
+  data = {
+    version,
+    sequence: 0,
+    start: 0,
+    duration: 0,
+    projectId: m.projectId,
+    userId: m.userId,
+    sessionId: m.sessionId,
+    pageNum: m.pageNum,
+    upload: Upload.Async,
+    end: BooleanFlag.False,
+    applicationPlatform: ApplicationPlatform.WebApp,
+    url: ''
+  };
+}
+
+export function stop(): void {
+    data = null;
+}
+
+export function envelope(last: boolean): Token[] {
+  data.start = data.start + data.duration;
+  data.duration = time() - data.start;
+  data.sequence++;
+  data.upload = last && "sendBeacon" in navigator ? Upload.Beacon : Upload.Async;
+  data.end = last ? BooleanFlag.True : BooleanFlag.False;
+  data.applicationPlatform = ApplicationPlatform.WebApp;
+  data.url = scrub.url(location.href, false, true);
+  return [
+    data.version,
+    data.sequence,
+    data.start,
+    data.duration,
+    data.projectId,
+    data.userId,
+    data.sessionId,
+    data.pageNum,
+    data.upload,
+    data.end,
+    data.applicationPlatform,
+    data.url
+  ];
+}

package/src/data/extract.ts

@@ -0,0 +1,217 @@
+import { ExtractSource, Syntax, Type } from "@clarity-types/core";
+import { Event, Setting, ExtractData } from "@clarity-types/data";
+import encode from "./encode";
+import * as internal from "@src/diagnostic/internal";
+import { Code, Constant, Severity } from "@clarity-types/data";
+import { hashText } from "@src/clarity";
+import hash from "@src/core/hash";
+
+export let data: ExtractData = {};
+export let keys: Set<number> = new Set();
+
+let variables : { [key: number]: { [key: number]: Syntax[] }} = {};
+let selectors : { [key: number]: { [key: number]: string }} = {};
+let hashes : { [key: number]: { [key: number]: string }} = {};
+let validation : { [key: number]: string } = {};
+
+export function start(): void {
+    reset();
+}
+
+// Input string is of the following form:
+// EXTRACT 101|element { "1": ".class1", "2": "~window.a.b", "3": "!abc"}
+// if element is present on the page it will set up event 101 to grab the contents of the class1 selector into component 1,
+// the javascript evaluated contents of window.a.b into component 2,
+// and the contents of Clarity's hash abc into component 3
+export function trigger(input: string): void { 
+    try {
+        var parts = input && input.length > 0 ? input.split(/ (.*)/) : [Constant.Empty];
+        var keyparts = parts[0].split(/\|(.*)/);
+        var key = parseInt(keyparts[0]);
+        var element = keyparts.length > 1 ?  keyparts[1] : Constant.Empty;
+        var values = parts.length > 1 ? JSON.parse(parts[1]) : {};
+        variables[key] = {};
+        selectors[key] = {};
+        hashes[key] = {};
+        validation[key] = element;
+        for (var v in values) {
+            // values is a set of strings for proper JSON parsing, but it's more efficient 
+            // to interact with them as numbers
+            let id = parseInt(v);
+            let value = values[v] as string;
+            let source = ExtractSource.Text;
+            if (value.startsWith(Constant.Tilde)) {
+                source = ExtractSource.Javascript
+            } else if (value.startsWith(Constant.Bang)) {
+                source = ExtractSource.Hash
+            }
+            switch (source) {
+                case ExtractSource.Javascript:
+                    let variable = value.slice(1);
+                    variables[key][id] = parse(variable);
+                    break;
+                case ExtractSource.Text:
+                    selectors[key][id] = value;
+                    break;
+                case ExtractSource.Hash:
+                    let hash = value.slice(1);
+                    hashes[key][id] = hash;
+                    break;
+            }
+        }
+    }
+    catch(e) {
+        internal.log(Code.Config, Severity.Warning, e ? e.name : null);
+    }
+}
+
+export function clone(v: Syntax[]): Syntax[] {
+    return JSON.parse(JSON.stringify(v));
+}
+
+export function compute(): void {
+    try {
+        for (let v in variables) {
+            let key = parseInt(v);
+            if (validation[key] == Constant.Empty || document.querySelector(validation[key]))
+            {
+                let variableData = variables[key];
+                for (let v in variableData) {
+                    let variableKey = parseInt(v);
+                    let value = str(evaluate(clone(variableData[variableKey])));
+                    if (value) { 
+                        update(key, variableKey, value);
+                    }
+                }
+
+                let selectorData = selectors[key];
+                for (let s in selectorData) {
+                    let shouldMask = false;
+                    let selectorKey = parseInt(s);
+                    let selector = selectorData[selectorKey];
+                    if (selector.startsWith(Constant.At)){
+                        shouldMask = true;
+                        selector = selector.slice(1);
+                    }
+                    let nodes = document.querySelectorAll(selector) as NodeListOf<HTMLElement>;
+                    if (nodes) {
+                        let text = Array.from(nodes).map(e => {
+                            if (e.tagName === "IMG") {
+                                let img = e as HTMLImageElement;
+                                return img.src || img.currentSrc || Constant.Empty;
+                            }
+                            return e.textContent;
+                        }).join(Constant.Seperator);
+                        update(key, selectorKey, (shouldMask ? hash(text).trim() : text).slice(0, Setting.ExtractLimit));
+                    }
+                }
+
+                let hashData = hashes[key];
+                for (let h in hashData) {
+                    let hashKey = parseInt(h);
+                    let content = hashText(hashData[hashKey]).trim().slice(0, Setting.ExtractLimit);
+                    update(key, hashKey, content);
+                }
+            }
+        }
+
+        if (keys.size > 0) {
+            encode(Event.Extract);
+        }
+    }
+    catch (e) { internal.log(Code.Selector, Severity.Warning, e ? e.name : null); }
+}
+
+export function reset(): void {
+    keys.clear();
+}
+
+export function update(key: number, subkey: number, value: string): void {
+    var update = false;
+    if (!(key in data)) {
+        data[key] = {};
+        update = true;
+    }
+    
+    if (!isEmpty(hashes[key]) 
+        && (!(subkey in data[key]) || data[key][subkey] != value))
+    {
+        update = true;
+    }
+
+    data[key][subkey] = value;
+    if (update) {
+        keys.add(key);
+    }
+
+    return;
+}
+
+export function stop(): void {
+   reset();
+}
+
+function parse(variable: string): Syntax[] {
+    let syntax: Syntax[] = [];
+    let parts = variable.split(Constant.Dot);
+    while (parts.length > 0) {
+        let part = parts.shift();
+        let arrayStart = part.indexOf(Constant.ArrayStart);
+        let conditionStart = part.indexOf(Constant.ConditionStart);
+        let conditionEnd = part.indexOf(Constant.ConditionEnd);
+        syntax.push({
+            name : arrayStart > 0 ? part.slice(0, arrayStart) : (conditionStart > 0 ? part.slice(0, conditionStart) : part),
+            type : arrayStart > 0 ? Type.Array : (conditionStart > 0 ? Type.Object : Type.Simple),
+            condition : conditionStart > 0 ? part.slice(conditionStart + 1, conditionEnd) : null
+        });
+    }
+
+    return syntax;
+}
+
+// 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: Syntax[], base: Object = window): any {
+    if (variable.length == 0) { return base; }
+    let part = variable.shift();
+    let output;
+    if (base && base[part.name]) {
+        let obj = base[part.name];
+        if (part.type !== Type.Array && match(obj, part.condition)) {
+            output = evaluate(variable, obj);
+        }
+        else if (Array.isArray(obj)) {
+            let filtered = [];
+            for (var value of obj) {
+                if (match(value, part.condition)) {
+                    let op = evaluate(variable, value)
+                    if (op) { filtered.push(op); }
+                }
+            }
+            output = filtered;
+        }
+        
+        return output;
+    }
+
+    return null;
+}
+
+function str(input: string): string {
+    // Automatically trim string to max of Setting.ExtractLimit to avoid fetching long strings
+    return input ? JSON.stringify(input).slice(0, Setting.ExtractLimit) : input;
+}
+
+function match(base: Object, condition: string): boolean {
+    if (condition) {
+        let prop = condition.split(":");
+        return prop.length > 1 ? base[prop[0]] == prop[1] : base[prop[0]]
+    }
+
+    return true;
+}
+
+function isEmpty(obj: Object): boolean {
+    return Object.keys(obj).length == 0;
+}

package/src/data/gemx-upload.ts

@@ -0,0 +1,51 @@
+import { Token } from "@clarity-types/data";
+
+// Deferred upload buffer for GemX mode.
+// Buffers ALL playback events until discoverTrigger conditions are met.
+// Scheduling and trigger logic lives in layout/gemx-snapshot.ts.
+let buffer: Token[][] = [];
+let bufferBytes = 0;
+let active = false;
+let maxBytes = 0;
+
+let onBytesLimit: (() => void) | null = null;
+
+export function start(): void {
+    buffer = [];
+    bufferBytes = 0;
+    active = true;
+}
+
+export function config(bytesLimit?: number, onLimit?: () => void): boolean {
+    maxBytes = bytesLimit ?? 0;
+    onBytesLimit = onLimit ?? null;
+    return true;
+}
+
+export function stop(): void {
+    buffer = [];
+    bufferBytes = 0;
+    active = false;
+    maxBytes = 0;
+    onBytesLimit = null;
+}
+
+export function isActive(): boolean { return active; }
+
+export function getBytes(): number { return bufferBytes; }
+
+export function hold(tokens: Token[], byteLength: number): void {
+    buffer.push(tokens);
+    bufferBytes += byteLength;
+    if (maxBytes > 0 && bufferBytes >= maxBytes && onBytesLimit) {
+        onBytesLimit();
+    }
+}
+
+export function drain(): Token[][] {
+    active = false;
+    const pending = buffer;
+    buffer = [];
+    bufferBytes = 0;
+    return pending;
+}

package/src/data/gemx.ts

@@ -0,0 +1,35 @@
+import { GemXConfig } from "@clarity-types/data";
+
+const defaultConfig: GemXConfig = {
+    debug: false,
+    excludeClassNames: [],
+    ignoreMutationClassNames: [],
+    discoverTrigger: null,
+};
+
+let _config: GemXConfig = { ...defaultConfig };
+
+export function start(): void {
+    _config = {
+        debug: new URLSearchParams(window.location.search).has("gemx_debug") || (window?.GemXHeatmap?.debug ?? false),
+        excludeClassNames: (window?.GemXHeatmap?.excludeClassNames ?? []),
+        ignoreMutationClassNames: (window?.GemXHeatmap?.ignoreMutationClassNames ?? []),
+        discoverTrigger: (window?.GemXHeatmap?.discoverTrigger ?? null),
+    };
+}
+
+export function stop(): void {
+    _config = { ...defaultConfig };
+}
+
+export function set(config: Partial<GemXConfig>): void {
+    _config = { ..._config, ...config };
+}
+
+export function get(): GemXConfig {
+    return _config;
+}
+
+export function isDebug(): boolean {
+    return _config.debug;
+}

package/src/data/index.ts

@@ -0,0 +1,57 @@
+import measure from "@src/core/measure";
+import * as baseline from "@src/data/baseline";
+import * as consent from "@src/data/consent";
+import * as envelope from "@src/data/envelope";
+import * as dimension from "@src/data/dimension";
+import * as metadata from "@src/data/metadata";
+import { Module } from "@clarity-types/core";
+import config from "@src/core/config";
+import * as metric from "@src/data/metric";
+import * as ping from "@src/data/ping";
+import * as limit from "@src/data/limit";
+import * as summary from "@src/data/summary";
+import * as upgrade from "@src/data/upgrade";
+import * as upload from "@src/data/upload";
+import * as variable from "@src/data/variable";
+import * as extract from "@src/data/extract";
+import * as cookie from "@src/data/cookie";
+import * as gemx from "@src/data/gemx";
+import * as gemxUpload from "@src/data/gemx-upload";
+export { event } from "@src/data/custom";
+export { consent, consentv2, metadata } from "@src/data/metadata";
+export { upgrade } from "@src/data/upgrade";
+export { set, identify } from "@src/data/variable";
+export { signal } from "@src/data/signal";
+export { max as maxMetric } from "@src/data/metric";
+export { log as dlog } from "@src/data/dimension";
+
+const modules: Module[] = [gemx, gemxUpload, baseline, dimension, variable, limit, summary, cookie, consent, metadata, envelope, upload, ping, upgrade, extract];
+
+export function start(): void {
+    // Metric needs to be initialized before we can start measuring. so metric is not wrapped in measure
+    metric.start();
+    modules.forEach(x => measure(x.start)());
+}
+
+export function stop(): void {
+    // Stop modules in the reverse order of their initialization
+    // The ordering below should respect inter-module dependency.
+    // E.g. if upgrade depends on upload, then upgrade needs to end before upload.
+    // Similarly, if upload depends on metadata, upload needs to end before metadata.
+    modules.slice().reverse().forEach(x => measure(x.stop)());
+    metric.stop();
+}
+
+export function compute(): void {
+    baseline.compute();
+    limit.compute();
+    consent.compute();
+    
+    if (config.mode !== "gemx") {
+        variable.compute();
+        dimension.compute();
+        metric.compute();
+        summary.compute();
+        extract.compute();
+    }
+}

package/src/data/limit.ts

@@ -0,0 +1,44 @@
+import { Check, Event, LimitData, Setting } from "@clarity-types/data";
+import * as clarity from "@src/clarity";
+import { time } from "@src/core/time";
+import * as envelope from "@src/data/envelope";
+import * as metadata from "@src/data/metadata";
+import encode from "./encode";
+
+export let data: LimitData;
+
+export function start(): void {
+    data = { check: Check.None };
+}
+
+export function check(bytes: number): void {
+    if (data.check === Check.None) {
+        let reason = data.check;
+        reason = envelope.data.sequence >= Setting.PayloadLimit ? Check.Payload : reason;
+        reason = envelope.data.pageNum >= Setting.PageLimit ? Check.Page : reason;
+        reason = time() > Setting.ShutdownLimit ? Check.Shutdown : reason;
+        reason = bytes > Setting.PlaybackBytesLimit ? Check.Shutdown : reason;
+        if (reason !== data.check) {
+            trigger(reason);
+        }
+    }
+}
+
+export function trigger(reason: Check): void {
+    data.check = reason;
+    // limit the dimensions we collect, but we don't need to stop Clarity entirely if we hit the limit
+    if (reason !== Check.Collection) {
+        metadata.clear();
+        clarity.stop();
+    }
+}
+
+export function compute(): void {
+    if (data.check !== Check.None) {
+        encode(Event.Limit);
+    }
+}
+
+export function stop(): void {
+    data = null;
+}