clarity-js 0.8.45 → 0.8.47-beta

package/src/data/metadata.ts

@@ -16,7 +16,7 @@ export let data: Metadata = null;
 export let callbacks: MetadataCallbackOptions[] = [];
 export let electron = BooleanFlag.False;
 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 {
   const ua = navigator && "userAgent" in navigator ? navigator.userAgent : Constant.Empty;
@@ -140,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),
@@ -160,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;
   }
 

package/src/interaction/index.ts

@@ -11,6 +11,7 @@ import * as timeline from "@src/interaction/timeline";
 import * as unload from "@src/interaction/unload";
 import * as visibility from "@src/interaction/visibility";
 import * as focus from "@src/interaction/focus";
+import * as pageshow from "@src/interaction/pageshow";
 
 export function start(): void {
     timeline.start();
@@ -21,6 +22,7 @@ export function start(): void {
     resize.start();
     visibility.start();
     focus.start();
+    pageshow.start();
     scroll.start();
     selection.start();
     change.start();
@@ -37,6 +39,7 @@ export function stop(): void {
     resize.stop();
     visibility.stop();
     focus.stop();
+    pageshow.stop();
     scroll.stop();
     selection.stop();
     change.stop();

package/src/interaction/pageshow.ts

@@ -0,0 +1,35 @@
+import { Constant } from "@clarity-types/core";
+import { Code, Severity } from "@clarity-types/data";
+import * as clarity from "@src/clarity";
+import api from "@src/core/api";
+import measure from "@src/core/measure";
+import * as internal from "@src/diagnostic/internal";
+
+let bound = false;
+
+export function start(): void {
+    // Only bind once - this listener must persist even when Clarity stops
+    // to detect when the page is restored from bfcache
+    if (!bound) {
+        try {
+            window[api(Constant.AddEventListener)]("pageshow", measure(handler) as EventListener, { capture: false, passive: true });
+            bound = true;
+        } catch {
+            /* do nothing */
+        }
+    }
+}
+
+function handler(evt: PageTransitionEvent): void {
+    // The persisted property indicates if the page was loaded from bfcache
+    if (evt && evt.persisted) {
+        // Restart Clarity since it was stopped when the page entered bfcache
+        clarity.start();
+        internal.log(Code.BFCache, Severity.Info);
+    }
+}
+
+export function stop(): void {
+    // Intentionally don't remove the listener or reset 'bound' flag
+    // We need the listener to persist to detect bfcache restoration
+}

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

@@ -212,6 +212,7 @@ export const enum Code {
     Config = 8,
     FunctionExecutionTime = 9,
     LeanLimit = 10,
+    BFCache = 11,
 }
 
 export const enum Severity {

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 "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,162 +0,0 @@
-import { Core, Data, decode, Interaction, Layout } from "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: true, 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,27 +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"
-    }
-}