@gemx-dev/clarity-js 0.8.46 → 0.8.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-js",
-  "version": "0.8.46",
+  "version": "0.8.47",
   "description": "Clarity js",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -20,16 +20,11 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@types/chai": "^4.3.0",
     "@types/resize-observer-browser": "^0.1.6",
-    "chai": "^4.3.0",
     "del-cli": "^5.0.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.1.0",
-    "playwright": "^1.6.2",
     "rollup": "^3.0.0",
-    "ts-mocha": "^11.1.0",
-    "tslib": "^2.3.0",
     "tslint": "^6.1.3",
     "typescript": "^4.3.5"
   },
@@ -37,7 +32,7 @@
     "build": "yarn build:clean && yarn build:main",
     "build:main": "rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",
     "build:clean": "del-cli build/*",
-    "test": "ts-mocha -p test/tsconfig.test.json test/stub.test.ts",
+    "test": "playwright test --config ../../playwright.config.ts --project=clarity-js",
     "tslint": "tslint --project ./",
     "tslint:fix": "tslint --fix --project ./ --force"
   },

package/src/clarity.ts

@@ -22,19 +22,17 @@ export { measure };
 const modules: Module[] = [diagnostic, layout, interaction, performance, dynamic];
 
 export function start(config: Config = null): void {
-    // Check that browser supports required APIs and we do not attempt to start Clarity multiple times
-    if (core.check()) {
-        core.config(config);
-        core.start();
-        data.start();
-        modules.forEach((x) => measure(x.start)());
+  // Check that browser supports required APIs and we do not attempt to start Clarity multiple times
+  if (core.check()) {
+    core.config(config);
+    core.start();
+    data.start();
+    modules.forEach(x => measure(x.start)());
 
-        // If it's an internal call to start, without explicit configuration,
-        // re-process any newly accumulated items in the queue
-        if (config === null) {
-            queue.process();
-        }
-    }
+    // If it's an internal call to start, without explicit configuration,
+    // re-process any newly accumulated items in the queue
+    if (config === null) { queue.process(); }
+  }
 }
 
 // By default Clarity is asynchronous and will yield by looking for requestIdleCallback.
@@ -43,29 +41,26 @@ export function start(config: Config = null): void {
 // we do allow external clients to manually pause Clarity for that short burst of time and minimize
 // performance impact even further. For reference, we are talking single digit milliseconds optimization here, not seconds.
 export function pause(): void {
-    if (core.active()) {
-        data.event(Constant.Clarity, Constant.Pause);
-        task.pause();
-    }
+  if (core.active()) {
+    data.event(Constant.Clarity, Constant.Pause);
+    task.pause();
+  }
 }
 
 // This is how external clients can get out of pause state, and resume Clarity to continue monitoring the page
 export function resume(): void {
-    if (core.active()) {
-        task.resume();
-        data.event(Constant.Clarity, Constant.Resume);
-    }
+  if (core.active()) {
+    task.resume();
+    data.event(Constant.Clarity, Constant.Resume);
+  }
 }
 
 export function stop(): void {
-    if (core.active()) {
-        // Stop modules in the reverse order of their initialization and start queuing up items again
-        modules
-            .slice()
-            .reverse()
-            .forEach((x) => measure(x.stop)());
-        data.stop();
-        core.stop();
-        queue.setup();
-    }
-}
+  if (core.active()) {
+    // Stop modules in the reverse order of their initialization and start queuing up items again
+    modules.slice().reverse().forEach(x => measure(x.stop)());
+    data.stop();
+    core.stop();
+    queue.setup();
+  }
+}

package/src/core/report.ts

@@ -9,23 +9,16 @@ export function reset(): void {
 }
 
 export function report(e: Error): Error {
-    console.log(`🚀 🐥 ~ report ~ e:`, e);
     // Do not report the same message twice for the same page
     if (history && history.indexOf(e.message) === -1) {
         const url = config.report;
-        console.log(`🚀 🐥 ~ report ~ url:`, url);
         if (url && url.length > 0 && data) {
-            let payload: Report = { v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum };
-            if (e.message) {
-                payload.m = e.message;
-            }
-            if (e.stack) {
-                payload.e = e.stack;
-            }
+            let payload: Report = {v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum};
+            if (e.message) { payload.m = e.message; }
+            if (e.stack) { payload.e = e.stack; }
             // Using POST request instead of a GET request (img-src) to not violate existing CSP rules
             // Since, Clarity already uses XHR to upload data, we stick with similar POST mechanism for reporting too
             let xhr = new XMLHttpRequest();
-            console.log(`🚀 🐥 ~ report ~ xhr:`, xhr);
             xhr.open("POST", url, true);
             xhr.send(JSON.stringify(payload));
             history.push(e.message);

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.8.46";
+let version = "0.8.47";
 export default version;

package/src/data/consent.ts

@@ -30,12 +30,13 @@ function processConsent(): void {
 
     const analytics_storage = ics.getConsentState(Constant.AnalyticsStorage);
     const ad_storage = ics.getConsentState(Constant.AdStorage);
-    const consentState = getConsentState({ ad_Storage: ad_storage, analytics_Storage: analytics_storage });
-    consentv2(consentState, ConsentSource.GCM);
+    const consentState = getGcmConsentState({ ad_Storage: ad_storage, analytics_Storage: analytics_storage });
+    consentv2(consentState);
 }
 
-function getConsentState(googleConsent: GCMConsentState): ConsentState {
+function getGcmConsentState(googleConsent: GCMConsentState): ConsentState {
     const consentState: ConsentState = {
+        source: ConsentSource.GCM,
         ad_Storage: googleConsent.ad_Storage === GCMConsent.Granted ? Constant.Granted : Constant.Denied,
         analytics_Storage: googleConsent.analytics_Storage === GCMConsent.Granted ? Constant.Granted : Constant.Denied,
     };

package/src/data/cookie.ts

@@ -0,0 +1,90 @@
+import { Constant } from "@clarity-types/data";
+import config from "@src/core/config";
+import { decodeCookieValue, encodeCookieValue, supported } from "@src/data/util";
+
+let rootDomain = null;
+export const COOKIE_SEP = Constant.Caret;
+
+export function start() {
+  rootDomain = null;
+}
+
+export function stop() {
+  rootDomain = null;
+}
+
+export function getCookie(key: string, limit = false): string {
+  if (supported(document, Constant.Cookie)) {
+    let cookies: string[] = document.cookie.split(Constant.Semicolon);
+    if (cookies) {
+      for (let i = 0; i < cookies.length; i++) {
+        let pair: string[] = cookies[i].split(Constant.Equals);
+        if (pair.length > 1 && pair[0] && pair[0].trim() === key) {
+          // Some browsers automatically url encode cookie values if they are not url encoded.
+          // We therefore encode and decode cookie values ourselves.
+          // For backwards compatability we need to consider 3 cases:
+          // * Cookie was previously not encoded by Clarity and browser did not encode it
+          // * Cookie was previously not encoded by Clarity and browser encoded it once or more
+          // * Cookie was previously encoded by Clarity and browser did not encode it
+          let [isEncoded, decodedValue] = decodeCookieValue(pair[1]);
+
+          while (isEncoded) {
+            [isEncoded, decodedValue] = decodeCookieValue(decodedValue);
+          }
+
+          // If we are limiting cookies, check if the cookie value is limited
+          if (limit) {
+            return decodedValue.endsWith(`${Constant.Tilde}1`) ? decodedValue.substring(0, decodedValue.length - 2) : null;
+          }
+
+          return decodedValue;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export function setCookie(key: string, value: string, time: number): void {
+  // only write cookies if we are currently in a cookie writing mode (and they are supported)
+  // OR if we are trying to write an empty cookie (i.e. clear the cookie value out)
+  if ((config.track || value == Constant.Empty) && ((navigator && navigator.cookieEnabled) || supported(document, Constant.Cookie))) {
+    // Some browsers automatically url encode cookie values if they are not url encoded.
+    // We therefore encode and decode cookie values ourselves.
+    let encodedValue = encodeCookieValue(value);
+
+    let expiry = new Date();
+    expiry.setDate(expiry.getDate() + time);
+    let expires = expiry ? Constant.Expires + expiry.toUTCString() : Constant.Empty;
+    let cookie = `${key}=${encodedValue}${Constant.Semicolon}${expires}${Constant.Path}`;
+    try {
+      // Attempt to get the root domain only once and fall back to writing cookie on the current domain.
+      if (rootDomain === null) {
+        let hostname = location.hostname ? location.hostname.split(Constant.Dot) : [];
+        // Walk backwards on a domain and attempt to set a cookie, until successful
+        for (let i = hostname.length - 1; i >= 0; i--) {
+          rootDomain = `.${hostname[i]}${rootDomain ? rootDomain : Constant.Empty}`;
+          // We do not wish to attempt writing a cookie on the absolute last part of the domain, e.g. .com or .net.
+          // So we start attempting after second-last part, e.g. .domain.com (PASS) or .co.uk (FAIL)
+          if (i < hostname.length - 1) {
+            // Write the cookie on the current computed top level domain
+            document.cookie = `${cookie}${Constant.Semicolon}${Constant.Domain}${rootDomain}`;
+            // Once written, check if the cookie exists and its value matches exactly with what we intended to set
+            // Checking for exact value match helps us eliminate a corner case where the cookie may already be present with a different value
+            // If the check is successful, no more action is required and we can return from the function since rootDomain cookie is already set
+            // If the check fails, continue with the for loop until we can successfully set and verify the cookie
+            if (getCookie(key) === value) {
+              return;
+            }
+          }
+        }
+        // Finally, if we were not successful and gone through all the options, play it safe and reset rootDomain to be empty
+        // This forces our code to fall back to always writing cookie to the current domain
+        rootDomain = Constant.Empty;
+      }
+    } catch {
+      rootDomain = Constant.Empty;
+    }
+    document.cookie = rootDomain ? `${cookie}${Constant.Semicolon}${Constant.Domain}${rootDomain}` : cookie;
+  }
+}

package/src/data/index.ts

@@ -13,6 +13,7 @@ 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";
 export { event } from "@src/data/custom";
 export { consent, consentv2, metadata } from "@src/data/metadata";
 export { upgrade } from "@src/data/upgrade";
@@ -21,7 +22,7 @@ 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[] = [baseline, dimension, variable, limit, summary, consent, metadata, envelope, upload, ping, upgrade, extract];
+const modules: Module[] = [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

package/src/data/metadata.ts

@@ -1,25 +1,24 @@
-import { Time } from "@clarity-types/core";
-import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, MetadataCallbackOptions, Metric, Session, User, Setting, ConsentState, ConsentSource, ConsentData } from "@clarity-types/data";
+import { Constant as CoreConstant, Time } from "@clarity-types/core";
+import { BooleanFlag, ConsentData, ConsentSource, ConsentState, Constant, Dimension, Metadata, MetadataCallback, MetadataCallbackOptions, Metric, Session, Setting, User } from "@clarity-types/data";
 import * as clarity from "@src/clarity";
 import * as core from "@src/core";
 import config from "@src/core/config";
 import hash from "@src/core/hash";
 import * as scrub from "@src/core/scrub";
+import * as trackConsent from "@src/data/consent";
+import { COOKIE_SEP, getCookie, setCookie } from "@src/data/cookie";
 import * as dimension from "@src/data/dimension";
 import * as metric from "@src/data/metric";
+import { supported } from "@src/data/util";
 import { set } from "@src/data/variable";
-import * as trackConsent from "@src/data/consent";
-import { Constant as CoreConstant } from "@clarity-types/core";
 
 export let data: Metadata = null;
 export let callbacks: MetadataCallbackOptions[] = [];
 export let electron = BooleanFlag.False;
-let rootDomain = null;
 let consentStatus: ConsentState = null;
-let defaultStatus: ConsentState = { source: ConsentSource.API, ad_Storage: Constant.Denied, analytics_Storage: Constant.Denied };
+let defaultStatus: ConsentState = { source: ConsentSource.Default, ad_Storage: Constant.Denied, analytics_Storage: Constant.Denied };
 
 export function start(): void {
-  rootDomain = null;
   const ua = navigator && "userAgent" in navigator ? navigator.userAgent : Constant.Empty;
   const timezone = (typeof Intl !== 'undefined' && Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone) ?? '';
   const timezoneOffset = new Date().getTimezoneOffset().toString();
@@ -89,7 +88,7 @@ export function start(): void {
   // If consent status is not already set, initialize it based on project configuration. Otherwise, use the existing consent status.
   if (consentStatus === null) {
     consentStatus = {
-      source: ConsentSource.Implicit,
+      source: u.consent ? ConsentSource.Cookie : ConsentSource.Implicit,
       ad_Storage: config.track ? Constant.Granted : Constant.Denied,
       analytics_Storage: config.track ? Constant.Granted : Constant.Denied,
     };
@@ -114,7 +113,6 @@ function userAgentData(): void {
 }
 
 export function stop(): void {
-  rootDomain = null;
   data = null;
   callbacks.forEach(cb => { cb.called = false; });
 }
@@ -142,15 +140,15 @@ export function id(): string {
 //TODO: Remove this function once consentv2 is fully released
 export function consent(status = true): void {
   if (!status) {
-    consentv2();
+    consentv2({ source: ConsentSource.APIv1, ad_Storage: Constant.Denied, analytics_Storage: Constant.Denied });
     return;
   }
 
-  consentv2({ ad_Storage: Constant.Granted, analytics_Storage: Constant.Granted });
+  consentv2({ source: ConsentSource.APIv1, ad_Storage: Constant.Granted, analytics_Storage: Constant.Granted });
   trackConsent.consent();
 }
 
-export function consentv2(consentState: ConsentState = defaultStatus, source: number = ConsentSource.API): void {
+export function consentv2(consentState: ConsentState = defaultStatus, source: number = ConsentSource.APIv2): void {
   const updatedStatus = {
     source: consentState.source ?? source,
     ad_Storage: normalizeConsent(consentState.ad_Storage, consentStatus?.ad_Storage),
@@ -162,6 +160,9 @@ export function consentv2(consentState: ConsentState = defaultStatus, source: nu
     updatedStatus.ad_Storage === consentStatus.ad_Storage &&
     updatedStatus.analytics_Storage === consentStatus.analytics_Storage
   ) {
+    consentStatus.source = updatedStatus.source;
+    trackConsent.trackConsentv2(getConsentData(consentStatus));
+    trackConsent.consent();
     return;
   }
 
@@ -171,8 +172,7 @@ export function consentv2(consentState: ConsentState = defaultStatus, source: nu
 
   if (!consentData.analytics_Storage && config.track) {
     config.track = false;
-    setCookie(Constant.SessionKey, Constant.Empty, -Number.MAX_VALUE);
-    setCookie(Constant.CookieKey, Constant.Empty, -Number.MAX_VALUE);
+    clear(true);
     clarity.stop();
     window.setTimeout(clarity.start, Setting.RestartDelay);
     return;
@@ -202,9 +202,14 @@ function normalizeConsent(value: unknown, fallback: string = Constant.Denied): s
   return typeof value === 'string' ? value.toLowerCase() : fallback;
 }
 
-export function clear(): void {
+export function clear(all: boolean = false): void {
   // Clear any stored information in the cookie that tracks session information so we can restart fresh the next time
-  setCookie(Constant.SessionKey, Constant.Empty, 0);
+  setCookie(Constant.SessionKey, Constant.Empty, -Number.MAX_VALUE);
+
+  // Clear user cookie as well if all flag is set
+  if (all) {
+    setCookie(Constant.CookieKey, Constant.Empty, -Number.MAX_VALUE);
+  }
 }
 
 function tab(): string {
@@ -227,7 +232,7 @@ export function save(): void {
   let ts = Math.round(Date.now());
   let upload = config.upload && typeof config.upload === Constant.String ? (config.upload as string).replace(Constant.HTTPS, Constant.Empty) : Constant.Empty;
   let upgrade = config.lean ? BooleanFlag.False : BooleanFlag.True;
-  setCookie(Constant.SessionKey, [data.sessionId, ts, data.pageNum, upgrade, upload].join(Constant.Caret), Setting.SessionExpire);
+  setCookie(Constant.SessionKey, [data.sessionId, ts, data.pageNum, upgrade, upload].join(COOKIE_SEP), Setting.SessionExpire);
 }
 
 function processCallback(upgrade: BooleanFlag, consentUpdate: boolean = false): void {
@@ -250,10 +255,6 @@ function processCallback(upgrade: BooleanFlag, consentUpdate: boolean = false):
   }
 }
 
-function supported(target: Window | Document, api: string): boolean {
-  try { return !!target[api]; } catch { return false; }
-}
-
 function track(u: User, consent: BooleanFlag = null): void {
   // If consent is not explicitly specified, infer it from the user object
   consent = consent === null ? u.consent : consent;
@@ -266,7 +267,7 @@ function track(u: User, consent: BooleanFlag = null): void {
   // To avoid cookie churn, write user id cookie only once every day
   if (u.expiry === null || Math.abs(end - u.expiry) >= Setting.CookieInterval || u.consent !== consent || u.dob !== dob) {
     let cookieParts = [data.userId, Setting.CookieVersion, end.toString(36), consent, dob];
-    setCookie(Constant.CookieKey, cookieParts.join(Constant.Caret), Setting.Expire);
+    setCookie(Constant.CookieKey, cookieParts.join(COOKIE_SEP), Setting.Expire);
   }
 }
 
@@ -321,91 +322,3 @@ function user(): User {
   return output;
 }
 
-function getCookie(key: string, limit = false): string {
-  if (supported(document, Constant.Cookie)) {
-    let cookies: string[] = document.cookie.split(Constant.Semicolon);
-    if (cookies) {
-      for (let i = 0; i < cookies.length; i++) {
-        let pair: string[] = cookies[i].split(Constant.Equals);
-        if (pair.length > 1 && pair[0] && pair[0].trim() === key) {
-          // Some browsers automatically url encode cookie values if they are not url encoded.
-          // We therefore encode and decode cookie values ourselves.
-          // For backwards compatability we need to consider 3 cases:
-          // * Cookie was previously not encoded by Clarity and browser did not encode it
-          // * Cookie was previously not encoded by Clarity and browser encoded it once or more
-          // * Cookie was previously encoded by Clarity and browser did not encode it
-          let [isEncoded, decodedValue] = decodeCookieValue(pair[1]);
-
-          while (isEncoded) {
-            [isEncoded, decodedValue] = decodeCookieValue(decodedValue);
-          }
-
-          // If we are limiting cookies, check if the cookie value is limited
-          if (limit) {
-            return decodedValue.endsWith(`${Constant.Tilde}1`)
-              ? decodedValue.substring(0, decodedValue.length - 2)
-              : null;
-          }
-
-          return decodedValue;
-        }
-      }
-    }
-  }
-  return null;
-}
-
-function decodeCookieValue(value: string): [boolean, string] {
-  try {
-    let decodedValue = decodeURIComponent(value);
-    return [decodedValue != value, decodedValue];
-  }
-  catch {
-  }
-
-  return [false, value];
-}
-
-function encodeCookieValue(value: string): string {
-  return encodeURIComponent(value);
-}
-
-function setCookie(key: string, value: string, time: number): void {
-  // only write cookies if we are currently in a cookie writing mode (and they are supported)
-  // OR if we are trying to write an empty cookie (i.e. clear the cookie value out)
-  if ((config.track || value == Constant.Empty) && ((navigator && navigator.cookieEnabled) || supported(document, Constant.Cookie))) {
-    // Some browsers automatically url encode cookie values if they are not url encoded.
-    // We therefore encode and decode cookie values ourselves.
-    let encodedValue = encodeCookieValue(value);
-
-    let expiry = new Date();
-    expiry.setDate(expiry.getDate() + time);
-    let expires = expiry ? Constant.Expires + expiry.toUTCString() : Constant.Empty;
-    let cookie = `${key}=${encodedValue}${Constant.Semicolon}${expires}${Constant.Path}`;
-    try {
-      // Attempt to get the root domain only once and fall back to writing cookie on the current domain.
-      if (rootDomain === null) {
-        let hostname = location.hostname ? location.hostname.split(Constant.Dot) : [];
-        // Walk backwards on a domain and attempt to set a cookie, until successful
-        for (let i = hostname.length - 1; i >= 0; i--) {
-          rootDomain = `.${hostname[i]}${rootDomain ? rootDomain : Constant.Empty}`;
-          // We do not wish to attempt writing a cookie on the absolute last part of the domain, e.g. .com or .net.
-          // So we start attempting after second-last part, e.g. .domain.com (PASS) or .co.uk (FAIL)
-          if (i < hostname.length - 1) {
-            // Write the cookie on the current computed top level domain
-            document.cookie = `${cookie}${Constant.Semicolon}${Constant.Domain}${rootDomain}`;
-            // Once written, check if the cookie exists and its value matches exactly with what we intended to set
-            // Checking for exact value match helps us eliminate a corner case where the cookie may already be present with a different value
-            // If the check is successful, no more action is required and we can return from the function since rootDomain cookie is already set
-            // If the check fails, continue with the for loop until we can successfully set and verify the cookie
-            if (getCookie(key) === value) { return; }
-          }
-        }
-        // Finally, if we were not successful and gone through all the options, play it safe and reset rootDomain to be empty
-        // This forces our code to fall back to always writing cookie to the current domain
-        rootDomain = Constant.Empty;
-      }
-    } catch { rootDomain = Constant.Empty; }
-    document.cookie = rootDomain ? `${cookie}${Constant.Semicolon}${Constant.Domain}${rootDomain}` : cookie;
-  }
-}

package/src/data/util.ts

@@ -0,0 +1,18 @@
+export function supported(target: Window | Document, api: string): boolean {
+  try { return !!target[api]; } catch { return false; }
+}
+
+export function encodeCookieValue(value: string): string {
+  return encodeURIComponent(value);
+}
+
+export function decodeCookieValue(value: string): [boolean, string] {
+  try {
+    let decodedValue = decodeURIComponent(value);
+    return [decodedValue != value, decodedValue];
+  }
+  catch {
+  }
+
+  return [false, value];
+}

package/src/index.ts

@@ -3,7 +3,7 @@ import hash from "./core/hash";
 import * as selector from "./layout/selector";
 import { get, getNode, lookup } from "./layout/dom";
 
-const helper = { hash, selector, get, getNode, lookup };
+const helper = { hash, selector, get, getNode, lookup }
 const version = clarity.version;
 
 export { clarity, version, helper };

package/src/insight/snapshot.ts

@@ -38,7 +38,7 @@ export function metadata(node: Node): TargetMetadata {
     return output;
 }
 
-export function snapshot(): void {
+export function snapshot(): void {    
     values = [];
     traverse(document);
     encode(Event.Snapshot);
@@ -54,13 +54,13 @@ function traverse(root: Node): void {
         let attributes = null, tag = null, value = null;
         let node = queue.shift();
         let next = node.firstChild;
-        let parent = node.parentElement ? node.parentElement : (node.parentNode ? node.parentNode : null);
+        let parent = node.parentElement ? node.parentElement : (node.parentNode ?  node.parentNode : null);
 
         while (next) {
             queue.push(next);
             next = next.nextSibling;
         }
-
+      
         // Process the node
         let type = node.nodeType;
         switch (type) {
@@ -69,7 +69,7 @@ function traverse(root: Node): void {
                 tag = Constant.DocumentTag;
                 attributes = { name: doctype.name, publicId: doctype.publicId, systemId: doctype.systemId }
                 break;
-            case Node.TEXT_NODE:
+            case Node.TEXT_NODE: 
                 value = node.nodeValue;
                 tag = idMap.get(parent) ? Constant.TextTag : tag;
                 break;
@@ -79,7 +79,7 @@ function traverse(root: Node): void {
                 tag = ["NOSCRIPT", "SCRIPT", "STYLE"].indexOf(element.tagName) < 0 ? element.tagName : tag;
                 break;
         }
-        add(node, parent, { tag, attributes, value });
+        add(node, parent, { tag, attributes, value });     
     }
 }
 
@@ -88,7 +88,7 @@ function getAttributes(element: HTMLElement): { [key: string]: string } {
     let output = {};
     let attributes = element.attributes;
     if (attributes && attributes.length > 0) {
-        for (let i = 0; i < attributes.length; i++) {
+        for (let i = 0; i < attributes.length; i++) {            
             output[attributes[i].name] = attributes[i].value;
         }
     }
@@ -112,4 +112,4 @@ function add(node: Node, parent: Node, data: NodeInfo): void {
     }
 }
 
-export function get(_node: Node): NodeValue { return null; }
+export function get(_node: Node): NodeValue {return null;}

package/test/hash.test.ts

@@ -0,0 +1,68 @@
+import { expect, test } from "@playwright/test";
+import hash from "@src/core/hash";
+
+test.describe("Core Utilities - Hash", () => {
+    test("hash function should generate consistent hash for same input", () => {
+        const input = "test-string";
+        const hash1 = hash(input);
+        const hash2 = hash(input);
+
+        expect(hash1).toBe(hash2);
+        expect(hash1).toBeTruthy();
+        expect(typeof hash1).toBe("string");
+    });
+
+    test("hash function should generate different hashes for different inputs", () => {
+        const hash1 = hash("input1");
+        const hash2 = hash("input2");
+        const hash3 = hash("completely-different-input");
+
+        expect(hash1).not.toBe(hash2);
+        expect(hash2).not.toBe(hash3);
+        expect(hash1).not.toBe(hash3);
+    });
+
+    test("hash function should respect precision parameter", () => {
+        const input = "test-precision";
+        const hashNoPrecision = hash(input);
+        const hash16 = hash(input, 16);
+        const hash8 = hash(input, 8);
+
+        expect(hashNoPrecision).toBeTruthy();
+        expect(hash16).toBeTruthy();
+        expect(hash8).toBeTruthy();
+
+        // Hash with precision should be different from no precision
+        expect(hashNoPrecision).not.toBe(hash16);
+
+        // Verify precision limits: 2^16 = 65536, 2^8 = 256
+        const hash16Num = parseInt(hash16, 36);
+        const hash8Num = parseInt(hash8, 36);
+        expect(hash16Num).toBeLessThan(65536);
+        expect(hash8Num).toBeLessThan(256);
+    });
+
+    test("hash function should handle empty strings", () => {
+        const result = hash("");
+        expect(result).toBeTruthy();
+        expect(typeof result).toBe("string");
+    });
+
+    test("hash function should handle special characters", () => {
+        const hash1 = hash("test@example.com");
+        const hash2 = hash("test#$%^&*()");
+        const hash3 = hash("🎉🎊✨");
+
+        expect(hash1).toBeTruthy();
+        expect(hash2).toBeTruthy();
+        expect(hash3).toBeTruthy();
+        expect(hash1).not.toBe(hash2);
+        expect(hash2).not.toBe(hash3);
+    });
+
+    test("hash function should produce base36 output", () => {
+        const result = hash("test-base36");
+        // Base36 should only contain 0-9 and a-z
+        expect(/^[0-9a-z]+$/.test(result)).toBe(true);
+    });
+});

package/test/time.test.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "@playwright/test";
+import { start, stop, time } from "@src/core/time";
+
+test.describe("Time Utilities", () => {
+    test("time module should start and stop", () => {
+        start();
+        const time1 = time();
+
+        expect(time1).toBeGreaterThanOrEqual(0);
+
+        stop();
+        const time2 = time();
+
+        // After stop, time should still work but use different baseline
+        expect(time2).toBeGreaterThanOrEqual(0);
+    });
+
+    test("time function should track elapsed time", async () => {
+        start();
+        const time1 = time();
+
+        // Wait a bit
+        await new Promise((resolve) => setTimeout(resolve, 50));
+
+        const time2 = time();
+
+        expect(time2).toBeGreaterThan(time1);
+        expect(time2 - time1).toBeGreaterThanOrEqual(50);
+
+        stop();
+    });
+
+    test("time function should handle null event parameter", () => {
+        start();
+        const result = time(null);
+
+        expect(result).toBeGreaterThanOrEqual(0);
+        expect(typeof result).toBe("number");
+
+        stop();
+    });
+});

package/tsconfig.json

@@ -1,21 +1,12 @@
 {
+    "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "module": "esnext",
-        "target": "es5",
-        "lib": ["es6", "dom", "es2016", "es2017"],
-        "moduleResolution": "node",
-        "forceConsistentCasingInFileNames": true,
-        "noImplicitReturns": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
         "baseUrl": ".",
         "paths": {
             "@src/*": ["src/*"],
             "@clarity-types/*": ["types/*"]
         }
     },
-    "include":["src/**/*.ts","types/**/*.d.ts", "rollup.config.ts"],
-    "exclude": ["test", "node_modules", "build"]
+    "include":["src/**/*.ts", "types/**/*.d.ts", "test/**/*.ts", "rollup.config.ts"],
+    "exclude": ["node_modules", "build"]
 }

package/types/data.d.ts

@@ -1,17 +1,17 @@
 import { Time } from "@clarity-types/core";
-export type Target = number | Node;
-export type Token = string | number | number[] | string[] | (string | number)[];
-export type DecodedToken = any | any[];
+export type Target = (number | Node);
+export type Token = (string | number | number[] | string[] | (string | number)[]);
+export type DecodedToken = (any | any[]);
 
 export type MetadataCallback = (data: Metadata, playback: boolean, consentStatus?: ConsentState) => void;
 export interface MetadataCallbackOptions {
-    callback: MetadataCallback;
-    wait: boolean;
-    recall: boolean;
-    called: boolean;
-    consentInfo: boolean;
+    callback: MetadataCallback,
+    wait: boolean,
+    recall: boolean,
+    called: boolean,
+    consentInfo: boolean
 }
-export type SignalCallback = (data: ClaritySignal) => void;
+export type SignalCallback = (data: ClaritySignal) => void
 
 /* Enum */
 export const enum Event {
@@ -87,7 +87,7 @@ export const enum Event {
     Keystrokes = 104,
     BackGesture = 105,
     WebViewStatus = 106,
-    AppInstallReferrer = 107,
+    AppInstallReferrer = 107
     // 200-300 reserved for internal use
 }
 
@@ -182,7 +182,7 @@ export const enum Dimension {
     Timezone = 34,
     TimezoneOffset = 35,
     Consent = 36,
-    InteractionNextPaint = 37,
+    InteractionNextPaint = 37
     // 200-300 reserved for internal use
 }
 
@@ -194,7 +194,7 @@ export const enum Check {
     Bytes = 4,
     Collection = 5,
     Server = 6,
-    Page = 7,
+    Page = 7
 }
 
 export const enum Code {
@@ -218,29 +218,29 @@ export const enum Severity {
     Info = 0,
     Warning = 1,
     Error = 2,
-    Fatal = 3,
+    Fatal = 3
 }
 
 export const enum Upload {
     Async = 0,
-    Beacon = 1,
+    Beacon = 1
 }
 
 export const enum BooleanFlag {
     False = 0,
-    True = 1,
+    True = 1
 }
 
 export const enum GCMConsent {
     Unknown = 0,
     Granted = 1,
-    Denied = 2,
+    Denied = 2
 }
 
 export const enum IframeStatus {
     Unknown = 0,
     TopFrame = 1,
-    Iframe = 2,
+    Iframe = 2
 }
 
 export const enum Setting {
@@ -291,11 +291,11 @@ export const enum Character {
     Blank = 32,
     Tab = 9,
     NewLine = 10,
-    Return = 13,
+    Return = 13
 }
 
 export const enum ApplicationPlatform {
-    WebApp = 0,
+    WebApp = 0
 }
 
 export const enum Constant {
@@ -380,27 +380,36 @@ export const enum XMLReadyState {
     Opened = 1,
     Headers_Recieved = 2,
     Loading = 3,
-    Done = 4,
+    Done = 4
 }
 
 export const enum ConsentSource {
     Implicit = 0,
     API = 1,
     GCM = 2,
+    TCF = 3,
+    APIv1 = 4,
+    APIv2 = 5,
+    Cookie = 6,
+    Default = 7,
+    // 100-255 Reserved for CMP integration, both internal and external
+    ClarityShopifyPixel = 100,
+    ClarityShopifyApp = 101,
+    UET = 102
 }
 
 /* Helper Interfaces */
 
 export interface Payload {
-    e: Token[] /* Envelope */;
-    a: Token[][] /* Events that are used for data analysis */;
-    p: Token[][] /* Events that are primarily used for session playback */;
+    e: Token[]; /* Envelope */
+    a: Token[][]; /* Events that are used for data analysis */
+    p: Token[][]; /* Events that are primarily used for session playback */
 }
 
 export interface EncodedPayload {
-    e: string /* Envelope */;
-    a: string /* Analytics Payload */;
-    p: string /* Playback Payload */;
+    e: string; /* Envelope */
+    a: string; /* Analytics Payload */
+    p: string; /* Playback Payload */
 }
 
 export interface Metadata {
@@ -534,8 +543,8 @@ export interface UploadData {
 }
 
 export interface ClaritySignal {
-    type: string;
-    value?: number;
+    type: string
+    value?: number
 }
 
 export interface PerformanceEventTiming extends PerformanceEntry {
@@ -557,7 +566,7 @@ export interface ConsentState {
 export const enum ConsentType {
     None = 0,
     Implicit = 1,
-    General = 2,
+    General = 2
 }
 
 export interface ConsentData {

package/types/index.d.ts

@@ -11,12 +11,12 @@ interface Clarity {
   pause: () => void;
   resume: () => void;
   upgrade: (key: string) => void;
-  consent: () => void;
-  consentv2: () => void;
+  consent: (status?: boolean) => void;
+  consentv2: (consentState?: Data.ConsentState, source?: number) => void;
   event: (name: string, value: string) => void;
   set: (variable: string, value: string | string[]) => void;
   identify: (userId: string, sessionId?: string, pageId?: string, userHint?: string) => void;
-  metadata: (callback: Data.MetadataCallback, wait?: boolean) => void;
+  metadata: (callback: Data.MetadataCallback, wait?: boolean, recall?: boolean, consentInfo?: boolean) => void;
   signal: (callback: Data.SignalCallback) => void;
 }
 

package/test/core.test.ts

@@ -1,139 +0,0 @@
-import { assert } from "chai";
-import { Browser, Page } from "playwright";
-import { changes, clicks, inputs, launch, markup, node, text } from "./helper";
-import { decode } from "@gemx-dev/clarity-decode";
-
-let browser: Browser;
-let page: Page;
-
-describe("Core Tests", () => {
-    before(async () => {
-        browser = await launch();
-    });
-
-    beforeEach(async () => {
-        page = await browser.newPage();
-        await page.goto("about:blank");
-    });
-
-    afterEach(async () => {
-        await page.close();
-    });
-
-    after(async () => {
-        await browser.close();
-        browser = null;
-    });
-
-    it("should mask sensitive content by default", async () => {
-        let encoded: string[] = await markup(page, "core.html");
-        let decoded = encoded.map((x) => decode(x));
-        let heading = text(decoded, "one");
-        let address = text(decoded, "two");
-        let email = node(decoded, "attributes.id", "eml");
-        let password = node(decoded, "attributes.id", "pwd");
-        let search = node(decoded, "attributes.id", "search");
-        let card = node(decoded, "attributes.id", "cardnum");
-        let option = text(decoded, "option1");
-        let textarea = text(decoded, "textarea");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        let group = changes(decoded);
-
-        // Non-sensitive fields continue to pass through with sensitive bits masked off
-        assert.equal(heading, "Thanks for your order #▫▪▪▫▫▫▪▪");
-
-        // Sensitive fields, including input fields, are randomized and masked
-        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••");
-        assert.equal(search.attributes.value, "••••• •••• ••••");
-        assert.equal(card.attributes.value, "•••••");
-        assert.equal(textarea, "••••• •••••");
-        assert.equal(option, "• •••••");
-
-        // Clicked text and input value should be consistent with uber masking configuration
-        assert.equal(click.data.text, "Hello ▪▪▪▫▪");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-        assert.equal(group.length, 2);
-        // Search change - we should captured mangled input and hash
-        assert.equal(group[0].data.type, "search");
-        assert.equal(group[0].data.value, "••••• •••• •••• ••••");
-        assert.equal(group[0].data.checksum, "4y7m6");
-        // Password change - we should capture placholder value and empty hash
-        assert.equal(group[1].data.type, "password");
-        assert.equal(group[1].data.value, "••••");
-        assert.equal(group[1].data.checksum, "");
-    });
-
-    it("should mask all text in strict mode", async () => {
-        let encoded: string[] = await markup(page, "core.html", { content: false });
-        let decoded = encoded.map((x) => decode(x));
-        let heading = text(decoded, "one");
-        let address = text(decoded, "two");
-        let email = node(decoded, "attributes.id", "eml");
-        let password = node(decoded, "attributes.id", "pwd");
-        let search = node(decoded, "attributes.id", "search");
-        let card = node(decoded, "attributes.id", "cardnum");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        let option = text(decoded, "option1");
-
-        // All fields are randomized and masked
-        assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
-        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••");
-        assert.equal(search.attributes.value, "••••• •••• ••••");
-        assert.equal(card.attributes.value, "•••••");
-        assert.equal(option, "• •••••");
-
-        // Clicked text and input value should also be masked in strict mode
-        assert.equal(click.data.text, "••••• •••• ••••");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-    });
-
-    it("should unmask non-sensitive text in relaxed mode", async () => {
-        let encoded: string[] = await markup(page, "core.html", { unmask: ["body"] });
-        let decoded = encoded.map((x) => decode(x));
-        let heading = text(decoded, "one");
-        let address = text(decoded, "two");
-        let email = node(decoded, "attributes.id", "eml");
-        let password = node(decoded, "attributes.id", "pwd");
-        let search = node(decoded, "attributes.id", "search");
-        let card = node(decoded, "attributes.id", "cardnum");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-        let option = text(decoded, "option1");
-
-        // Text flows through unmasked for non-sensitive fields, with exception of input fields
-        assert.equal(heading, "Thanks for your order #2AB700GH");
-        assert.equal(address, "1 Microsoft Way, Redmond, WA - 98052");
-        assert.equal(search.attributes.value, "••••• •••• ••••");
-        assert.equal(option, "• •••••");
-
-        // Sensitive fields are still masked
-        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••");
-        assert.equal(card.attributes.value, "•••••");
-
-        // Clicked text comes through unmasked in relaxed mode but input is still masked
-        assert.equal(click.data.text, "Hello Wor1d");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-    });
-
-    it("should respect mask config even in relaxed mode", async () => {
-        let encoded: string[] = await markup(page, "core.html", { mask: ["#mask"], unmask: ["body"] });
-        let decoded = encoded.map((x) => decode(x));
-        let subtree = text(decoded, "child");
-        let click = clicks(decoded)[0];
-        let input = inputs(decoded)[0];
-
-        // Masked sub-trees continue to stay masked
-        assert.equal(subtree, "••••• •••••");
-
-        // Clicked text is masked due to masked configuration and input value is also masked
-        assert.equal(click.data.text, "••••• •••• ••••");
-        assert.equal(input.data.value, "••••• •••• •••• ••••");
-    });
-});

package/test/helper.ts

@@ -1,167 +0,0 @@
-import { Core, Data, decode, Interaction, Layout } from "@gemx-dev/clarity-decode";
-import * as fs from "fs";
-import * as url from "url";
-import * as path from "path";
-import { Browser, Page, chromium } from "playwright";
-
-export async function launch(): Promise<Browser> {
-    return chromium.launch({ headless: false, args: ["--no-sandbox"] });
-}
-
-export async function markup(page: Page, file: string, override: Core.Config = null): Promise<string[]> {
-    const htmlPath = path.resolve(__dirname, `./html/${file}`);
-    const htmlFileUrl = url.pathToFileURL(htmlPath).toString();
-    const html = fs.readFileSync(htmlPath, "utf8");
-    await Promise.all([page.goto(htmlFileUrl), page.waitForNavigation()]);
-    await page.setContent(
-        html.replace(
-            "</body>",
-            `
-        <script>
-          window.payloads = [];
-          ${fs.readFileSync(path.resolve(__dirname, `../build/clarity.min.js`), "utf8")};
-          clarity("start", ${config(override)});
-        </script>
-        </body>
-    `
-        )
-    );
-    await page.hover("#two");
-    await page.click("#child");
-    await page.locator("#search").fill("");
-    await page.locator("#search").type("query with numb3rs");
-    await page.locator("#pwd").type("p1ssw0rd");
-    await page.locator("#eml").fill("");
-    await page.locator("#eml").type("hello@world.com");
-    await page.waitForFunction("payloads && payloads.length > 2");
-    return await page.evaluate("payloads");
-}
-
-export function clicks(decoded: Data.DecodedPayload[]): Interaction.ClickEvent[] {
-    let output: Interaction.ClickEvent[] = [];
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].click) {
-            for (let j = 0; j < decoded[i].click.length; j++) {
-                output.push(decoded[i].click[j]);
-            }
-        }
-    }
-    return output;
-}
-
-export function inputs(decoded: Data.DecodedPayload[]): Interaction.InputEvent[] {
-    let output: Interaction.InputEvent[] = [];
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].input) {
-            for (let j = 0; j < decoded[i].input.length; j++) {
-                output.push(decoded[i].input[j]);
-            }
-        }
-    }
-    return output;
-}
-
-export function changes(decoded: Data.DecodedPayload[]): Interaction.ChangeEvent[] {
-    let output: Interaction.ChangeEvent[] = [];
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].change) {
-            for (let j = 0; j < decoded[i].change.length; j++) {
-                output.push(decoded[i].change[j]);
-            }
-        }
-    }
-    return output;
-}
-
-export function node(
-    decoded: Data.DecodedPayload[],
-    key: string,
-    value: string | number,
-    tag: string = null
-): Layout.DomData {
-    let sub = null;
-
-    // Exploding nested keys into key and sub key
-    if (key.indexOf(".") > 0) {
-        const parts = key.split(".");
-        if (parts.length === 2) {
-            key = parts[0];
-            sub = parts[1];
-        }
-    }
-
-    // Walking over the decoded payload to find the right match
-    for (let i = decoded.length - 1; i >= 0; i--) {
-        if (decoded[i].dom) {
-            for (let j = 0; j < decoded[i].dom.length; j++) {
-                if (decoded[i].dom[j].data) {
-                    for (let k = 0; k < decoded[i].dom[j].data.length; k++) {
-                        let d = decoded[i].dom[j].data[k];
-                        if ((sub && d[key] && d[key][sub] === value) || (d[key] && d[key] === value)) {
-                            if ((tag && d.tag === tag) || tag === null) {
-                                return d;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    return null;
-}
-
-export function text(decoded: Data.DecodedPayload[], id: string): string {
-    let parent = node(decoded, "attributes.id", id);
-    if (parent) {
-        let child = node(decoded, "parent", parent.id, "*T");
-        if (child && child.value) {
-            return child.value;
-        }
-    }
-    return null;
-}
-
-function config(override: Core.Config): string {
-    const settings = {
-        delay: 100,
-        content: true,
-        fraud: [],
-        regions: [],
-        mask: [],
-        unmask: [],
-        upload: (payload) => {
-            window["payloads"].push(payload);
-            window["clarity"]("upgrade", "test");
-        },
-    };
-
-    // Process overrides
-    if (override) {
-        for (let key of Object.keys(override)) {
-            settings[key] = override[key];
-        }
-    }
-
-    // Serialize configuration
-    let output = "";
-    for (let key of Object.keys(settings)) {
-        switch (key) {
-            case "upload":
-                output += `${JSON.stringify(key)}: ${settings[key].toString()},`;
-                break;
-            case "projectId":
-            case "mask":
-            case "unmask":
-            case "regions":
-            case "cookies":
-            case "fraud":
-                output += `${JSON.stringify(key)}: ${JSON.stringify(settings[key])},`;
-                break;
-            default:
-                output += `${JSON.stringify(key)}: ${settings[key]},`;
-                break;
-        }
-    }
-    output += `"projectId": "test"`;
-    return "{" + output + "}";
-}

package/test/html/core.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Core Tests</title>
-        <style>
-            input,
-            textarea,
-            select {
-                margin: 10px;
-                display: block;
-            }
-        </style>
-    </head>
-    <body>
-        <div>
-            <h1 id="one">Thanks for your order #2AB700GH</h1>
-            <p id="two" class="address-details">1 Microsoft Way, Redmond, WA - 98052</p>
-        </div>
-        <div id="mask">
-            <span id="child">Hello Wor1d</span>
-        </div>
-        <form name="login">
-            <input type="email" id="eml" title="Email" value="random@email.test" />
-            <input type="password" id="pwd" title="Password" maxlength="16" value="passw0rd" />
-            <input type="search" id="search" title="Search" value="hello w0rld" />
-            <input type="text" id="cardnum" title="CC" value="1234" />
-            <textarea id="textarea" autocapitalize="off" role="combobox" rows="5" placeholder="" spellcheck="false">Hell0 World</textarea>
-            <select id="select" ng-options="origin.code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
-                <option id="option1" label="Halifax" value="string:YHZ">Halifax</option>
-                <option id="option2" label="Montréal" value="string:YUL" selected="selected">Montréal</option>
-            </select>
-        </form>
-    </body>
-</html>

package/test/stub.test.ts

@@ -1,7 +0,0 @@
-import { assert } from 'chai';
-
-describe('Stub Tests! Replace with working real tests!', () => {
-    it('should be a successful test', () => {
-        assert.isTrue(true);
-    });
-});

package/test/tsconfig.test.json

@@ -1,6 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-      "module": "commonjs"
-    }
-}