clarity-js 0.7.2 → 0.7.4

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "clarity-js",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
   "main": "build/clarity.js",
   "module": "build/clarity.module.js",
   "unpkg": "build/clarity.min.js",
+  "insight": "build/clarity.insight.js",
   "types": "types/index.d.ts",
   "keywords": [
     "clarity",
@@ -26,28 +27,29 @@
     "url": "https://github.com/microsoft/clarity/issues"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@rollup/plugin-alias": "^4.0.0",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/chai": "^4.2.21",
-    "@types/mocha": "^8.2.3",
+    "@types/mocha": "^10.0.0",
     "@types/resize-observer-browser": "^0.1.6",
     "chai": "^4.2.0",
-    "del-cli": "^4.0.1",
-    "husky": "^7.0.1",
-    "lint-staged": "^11.0.1",
-    "mocha": "^9.0.2",
+    "del-cli": "^5.0.0",
+    "husky": "^8.0.0",
+    "lint-staged": "^13.1.0",
+    "mocha": "^10.2.0",
     "playwright": "^1.6.2",
-    "rollup": "^2.53.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "ts-mocha": "^8.0.0",
+    "rollup": "^3.0.0",
+    "ts-mocha": "^10.0.0",
     "tslib": "^2.3.0",
     "tslint": "^6.1.3",
     "typescript": "^4.3.5"
   },
   "scripts": {
     "build": "yarn build:clean && yarn build:main",
-    "build:main": "rollup -c rollup.config.ts",
+    "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/**/*.test.ts",
     "tslint": "tslint --project ./",

package/rollup.config.ts

@@ -1,8 +1,9 @@
+import alias from "@rollup/plugin-alias";
 import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
-import typescript from "rollup-plugin-typescript2";
-import { terser } from "rollup-plugin-terser";
-import pkg from "./package.json";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import pkg from "./package.json" assert { type: 'json' };
 
 export default [
   {
@@ -13,7 +14,7 @@ export default [
     ],
     plugins: [
       resolve(),
-      typescript({ rollupCommonJSResolveHack: true, clean: true }),
+      typescript(),
       commonjs({ include: ["node_modules/**"] })
     ],
     onwarn(message, warn) {
@@ -30,7 +31,30 @@ export default [
     },
     plugins: [
       resolve(),
-      typescript({ rollupCommonJSResolveHack: true, clean: true }),
+      typescript(),
+      terser({output: {comments: false}}),
+      commonjs({ include: ["node_modules/**"] })
+    ]
+  },
+  {
+    input: "src/global.ts",
+    output: [ { file: pkg.insight, format: "iife", exports: "named" } ],
+    onwarn(message, warn) {
+      if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
+      warn(message);
+    },
+    plugins: [
+      alias({
+        entries: [
+          { find: '@src/interaction/change', replacement: '@src/core/blank' },
+          { find: '@src/interaction/clipboard', replacement: '@src/core/blank' },
+          { find: '@src/interaction/input', replacement: '@src/core/blank' },
+          { find: '@src/interaction/pointer', replacement: '@src/core/blank' },
+          { find: '@src/interaction/selection', replacement: '@src/core/blank' }          
+        ]
+      }),
+      resolve(),
+      typescript(),
       terser({output: {comments: false}}),
       commonjs({ include: ["node_modules/**"] })
     ]

package/src/core/blank.ts

@@ -0,0 +1,9 @@
+export let state = [];
+export let data = null;
+
+/* Intentionally blank module with empty code */
+
+export function start(): void {}
+export function observe(): void {}
+export function reset(): void {}
+export function stop(): void {}

package/src/core/config.ts

@@ -10,7 +10,6 @@ let config: Config = {
     mask: [],
     unmask: [],
     regions: [],
-    extract: [],
     cookies: [],
     fraud: true,
     checksum: [],

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.7.2";
+let version = "0.7.4";
 export default version;

package/src/data/encode.ts

@@ -110,7 +110,7 @@ export default function(event: Event): void {
             let extractKeys = extract.keys;
             for (let e of extractKeys) {
                 tokens.push(e);
-                tokens.push(extract.data[e]);
+                tokens.push([].concat(...extract.data[e]));
             }
             extract.reset();
             queue(tokens, false);

package/src/data/extract.ts

@@ -1,38 +1,36 @@
 import { ExtractSource, Syntax, Type } from "@clarity-types/core";
 import { Event, Setting, ExtractData } from "@clarity-types/data";
-import config from "@src/core/config";
 import encode from "./encode";
 import * as internal from "@src/diagnostic/internal";
 import { Code, Constant, Severity } from "@clarity-types/data";
 
 export let data: ExtractData = {};
-export let keys: (number | string)[] = [];
-
-let variables : { [key: number]: Syntax[] } = {};
-let selectors : { [key: number]: string } = {};
-export let fragments: string[] = [];
+export let keys: number[] = [];
 
+let variables : { [key: number]: { [key: number]: Syntax[] }} = {};
+let selectors : { [key: number]: { [key: number]: string }} = {};
 export function start(): void {
+    reset();
+}
+
+export function trigger(input: string): void { 
     try {
-        let e = config.extract;
-        if (!e) { return; }
-        for (let i = 0; i < e.length; i+=3) {
-            let source = e[i] as ExtractSource;
-            let key = e[i+1] as number;
+        var parts = input && input.length > 0 ? input.split(/ (.*)/) : [Constant.Empty];
+        var key = parseInt(parts[0]);
+        var values = parts.length > 1 ? JSON.parse(parts[1]) : {};
+        variables[key] = {};
+        selectors[key] = {};
+        for (var v in values) {
+            let id = parseInt(v);
+            let value = values[v] as string;
+            let source = value.startsWith(Constant.Tilde) ? ExtractSource.Javascript : ExtractSource.Text;
             switch (source) {
                 case ExtractSource.Javascript:
-                    let variable = e[i+2] as string;
-                    variables[key] = parse(variable);
-                    break;
-                case ExtractSource.Cookie:
-                    /*Todo: Add cookie extract logic*/
+                    let variable = value.substring(1, value.length);
+                    variables[key][id] = parse(variable);
                     break;
                 case ExtractSource.Text:
-                    let match = e[i+2] as string;
-                    selectors[key] = match;
-                    break;
-                case ExtractSource.Fragment:
-                    fragments =  e[i+2] as string[];
+                    selectors[key][id] = value;
                     break;
             }
         }
@@ -49,13 +47,25 @@ export function clone(v: Syntax[]): Syntax[] {
 export function compute(): void {
     try {
         for (let v in variables) {
-            let value = str(evaluate(clone(variables[v])));
-            if (value) { update(v, value); }
-        }
+            let key = parseInt(v);
+            if (!(key in keys)) {
+                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); }
+                }
 
-        for (let s in selectors) {
-            let node = document.querySelector(selectors[s] as string) as HTMLElement;
-            if (node) { update(s, node.innerText); }
+                let selectorData = selectors[key];
+                for (let s in selectorData) {
+                    let selectorKey = parseInt(s);
+                    let nodes = document.querySelectorAll(selectorData[selectorKey]) as NodeListOf<HTMLElement>;
+                    if (nodes) {
+                        let text = Array.from(nodes).map(e => e.innerText)
+                        update(key, selectorKey, text.join(Constant.Seperator).substring(0, Setting.ExtractLimit));
+                    }
+                }
+            }
         }
     }
     catch (e) { internal.log(Code.Selector, Severity.Warning, e ? e.name : null); }
@@ -64,21 +74,22 @@ export function compute(): void {
 }
 
 export function reset(): void {
+    data = {};
     keys = [];
+    variables = {};
+    selectors = {};
 }
 
-export function update(key: string, value: string | number, force: boolean = false): void {
-    if (!(key in data) || (key in data && data[key] !== value) || force ) {
-        data[key] = value;
+export function update(key: number, subkey: number,  value: string): void {
+    if (!(key in data)) {
+        data[key] = []
         keys.push(key);
     }
+    data[key].push([subkey, value]);
 }
 
 export function stop(): void {
-    data = {};
-    keys = [];
-    variables = {};
-    selectors = {};
+   reset();
 }
 
 function parse(variable: string): Syntax[] {

package/src/data/upload.ts

@@ -15,6 +15,7 @@ import * as metric from "@src/data/metric";
 import * as ping from "@src/data/ping";
 import * as timeline from "@src/interaction/timeline";
 import * as region from "@src/layout/region";
+import * as extract from "@src/data/extract";
 
 let discoverBytes: number = 0;
 let playbackBytes: number = 0;
@@ -242,19 +243,26 @@ function delay(): number {
 }
 
 function response(payload: string): void {
-    let parts = payload && payload.length > 0 ? payload.split(" ") : [Constant.Empty];
-    switch (parts[0]) {
-        case Constant.End:
-            // Clear out session storage and end the session so we can start fresh the next time
-            limit.trigger(Check.Server);
-            break;
-        case Constant.Upgrade:
-            // Upgrade current session to send back playback information
-            clarity.upgrade(Constant.Auto);
-            break;
-        case Constant.Action:
-            // Invoke action callback, if configured and has a valid value
-            if (config.action && parts.length > 1) { config.action(parts[1]); }
-            break;
+    let lines = payload && payload.length > 0 ? payload.split("\n") : [];
+    for (var line of lines)
+    {
+        let parts = line && line.length > 0 ? line.split(/ (.*)/) : [Constant.Empty];
+        switch (parts[0]) {
+            case Constant.End:
+                // Clear out session storage and end the session so we can start fresh the next time
+                limit.trigger(Check.Server);
+                break;
+            case Constant.Upgrade:
+                // Upgrade current session to send back playback information
+                clarity.upgrade(Constant.Auto);
+                break;
+            case Constant.Action:
+                // Invoke action callback, if configured and has a valid value
+                if (config.action && parts.length > 1) { config.action(parts[1]); }
+                break;
+            case Constant.Extract:
+                if (parts.length > 1) { extract.trigger(parts[1]); }
+                break;
+        }
     }
 }

package/src/diagnostic/index.ts

@@ -1,6 +1,6 @@
-import * as fraud from "./fraud";
-import * as internal from "./internal";
-import * as script from "./script";
+import * as fraud from "@src/diagnostic/fraud";
+import * as internal from "@src/diagnostic/internal";
+import * as script from "@src/diagnostic/script";
 
 export function start(): void {
     fraud.start();

package/src/interaction/encode.ts

@@ -4,18 +4,18 @@ import { time } from "@src/core/time";
 import * as baseline from "@src/data/baseline";
 import { queue } from "@src/data/upload";
 import { metadata } from "@src/layout/target";
-import * as change from "./change";
-import * as click from "./click";
-import * as clipboard from "./clipboard";
-import * as input from "./input";
-import * as pointer from "./pointer";
-import * as resize from "./resize";
-import * as scroll from "./scroll";
-import * as selection from "./selection";
-import * as submit from "./submit";
-import * as timeline from "./timeline";
-import * as unload from "./unload";
-import * as visibility from "./visibility";
+import * as change from "@src/interaction/change";
+import * as click from "@src/interaction/click";
+import * as clipboard from "@src/interaction/clipboard";
+import * as input from "@src/interaction/input";
+import * as pointer from "@src/interaction/pointer";
+import * as resize from "@src/interaction/resize";
+import * as scroll from "@src/interaction/scroll";
+import * as selection from "@src/interaction/selection";
+import * as submit from "@src/interaction/submit";
+import * as timeline from "@src/interaction/timeline";
+import * as unload from "@src/interaction/unload";
+import * as visibility from "@src/interaction/visibility";
 
 export default async function (type: Event, ts: number = null): Promise<void> {
     let t = ts || time();

package/src/layout/dom.ts

@@ -6,8 +6,6 @@ import hash from "@src/core/hash";
 import * as internal from "@src/diagnostic/internal";
 import * as region from "@src/layout/region";
 import * as selector from "@src/layout/selector";
-import * as mutation from "@src/layout/mutation";
-import * as extract from "@src/data/extract";
 let index: number = 1;
 let nodes: Node[] = [];
 let values: NodeValue[] = [];
@@ -15,7 +13,6 @@ let updateMap: number[] = [];
 let hashMap: { [hash: string]: number } = {};
 let override = [];
 let unmask = [];
-let updatedFragments: { [fragment: number]: string } = {};
 let maskText = [];
 let maskExclude = [];
 let maskDisable = [];
@@ -92,14 +89,12 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
     let previousId = getPreviousId(node);
     let parentValue: NodeValue = null;
     let regionId = region.exists(node) ? id : null;
-    let fragmentId = null;
     let fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
     let privacyId = config.content ? Privacy.Sensitive : Privacy.TextImage
     if (parentId >= 0 && values[parentId]) {
         parentValue = values[parentId];
         parentValue.children.push(id);
         regionId = regionId === null ? parentValue.region : regionId;
-        fragmentId = parentValue.fragment;
         fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
         privacyId = parentValue.metadata.privacy;
     }
@@ -121,13 +116,12 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
         hash: null,
         region: regionId,
         metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
-        fragment: fragmentId,
     };
 
     privacy(node, values[id], parentValue);
     updateSelector(values[id]);
     size(values[id]);
-    track(id, source, values[id].fragment);
+    track(id, source);
 }
 
 export function update(node: Node, parent: Node, data: NodeInfo, source: Source): void {
@@ -181,14 +175,9 @@ export function update(node: Node, parent: Node, data: NodeInfo, source: Source)
             }
         }
 
-        // track node if it is a part of scheduled fragment mutation
-        if(value.fragment && updatedFragments[value.fragment]) {
-            changed = true;
-        }
-
         // Update selector
         updateSelector(value);
-        track(id, source, values[id].fragment, changed, parentChanged);
+        track(id, source, changed, parentChanged);
     }
 }
 
@@ -299,10 +288,6 @@ function updateSelector(value: NodeValue): void {
     value.selector = [selector.get(s, Selector.Alpha), selector.get(s, Selector.Beta)];
     value.hash = value.selector.map(x => x ? hash(x) : null) as [string, string];
     value.hash.forEach(h => hashMap[h] = value.id);
-    // Match fragment configuration against both alpha and beta hash
-    if (value.hash.some(h => extract.fragments.indexOf(h) !== -1)) {
-        value.fragment = value.id;
-    }
 }
 
 export function hashText(hash: string): string {
@@ -344,11 +329,7 @@ export function updates(): NodeValue[] {
         if (id in values) { output.push(values[id]); }
     }
     updateMap = [];
-    for (let id in updatedFragments) {
-        extract.update(updatedFragments[id], id, true)
-    }
-
-    updatedFragments = {}
+   
     return output;
 }
 
@@ -377,19 +358,7 @@ function getPreviousId(node: Node): number {
     return id;
 }
 
-function track(id: number, source: Source, fragment: number = null, changed: boolean = true, parentChanged: boolean = false): void {
-    // if updated node is a part of fragment and the fragment is not being tracked currently, schedule a mutation on the fragment node
-    if (fragment && !updatedFragments[fragment]) {
-        let node = getNode(fragment)
-        let value = getValue(fragment);
-        if (node && value) {
-            mutation.schedule(node, true);
-            value.hash.forEach(h => {
-                if(extract.fragments.indexOf(h) !== -1) { updatedFragments[fragment] = h;}
-            });
-        }
-    }
-
+function track(id: number, source: Source, changed: boolean = true, parentChanged: boolean = false): void {
     // Keep track of the order in which mutations happened, they may not be sequential
     // Edge case: If an element is added later on, and pre-discovered element is moved as a child.
     // In that case, we need to reorder the pre-discovered element in the update list to keep visualization consistent.

package/src/layout/mutation.ts

@@ -210,7 +210,7 @@ async function processNodeList(list: NodeList, source: Source, timer: Timer): Pr
   }
 }
 
-export function schedule(node: Node, fragment: boolean = false): Node {
+export function schedule(node: Node): Node {
   // Only schedule manual trigger for this node if it's not already in the queue
   if (queue.indexOf(node) < 0) { queue.push(node); }
 
@@ -218,19 +218,19 @@ export function schedule(node: Node, fragment: boolean = false): Node {
   // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
   // And in those cases we do not wish to monitor changes multiple times for the same node.
   if (timeout) { clearTimeout(timeout); }
-  timeout = setTimeout(() => { trigger(fragment) }, Setting.LookAhead);
+  timeout = setTimeout(() => { trigger() }, Setting.LookAhead);
 
   return node;
 }
 
-function trigger(fragment: boolean): void {
+function trigger(): void {
   for (let node of queue) {
     // Generate a mutation for this node only if it still exists
     if (node) {
       let shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
       // Skip re-processing shadowRoot if it was already discovered
       if (shadowRoot && dom.has(node)) { continue; }
-      generate(node, shadowRoot || fragment ? Constant.ChildList : Constant.CharacterData);
+      generate(node, shadowRoot ? Constant.ChildList : Constant.CharacterData);
     }
   }
   queue = [];

package/src/performance/observer.ts

@@ -1,4 +1,4 @@
-import { Code, Constant, Dimension, Metric, Setting, Severity } from "@clarity-types/data";
+import { Code, Constant, Dimension, Metric, Severity } from "@clarity-types/data";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
 import measure from "@src/core/measure";
@@ -81,11 +81,6 @@ function process(entries: PerformanceEntryList): void {
                 break;
         }
     }
-    if (performance && Constant.Memory in performance && performance[Constant.Memory].usedJSHeapSize) {
-        // Track consumed memory (MBs) where "memory" API is available
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
-        metric.max(Metric.UsedMemory, Math.abs(performance[Constant.Memory].usedJSHeapSize / Setting.MegaByte));
-    }
 }
 
 export function stop(): void {

package/tsconfig.json

@@ -16,6 +16,6 @@
             "@clarity-types/*": ["types/*"]
         }
     },
-    "include":["src/**/*.ts","types/**/*.d.ts"],
+    "include":["src/**/*.ts","types/**/*.d.ts", "rollup.config.ts"],
     "exclude": ["test", "node_modules", "build"]
 }

package/types/core.d.ts

@@ -5,7 +5,6 @@ type TaskResolve = () => void;
 type UploadCallback = (data: string) => void;
 type Region = [number /* RegionId */, string /* Query Selector */];
 type Checksum = [number /* FraudId */, string /* Query Selector */];
-export type Extract = ExtractSource /* Extraction Source */ | number /* Extract Id */ | string  | string[] /* Hash or Query Selector or String Token */;
 
 /* Enum */
 
@@ -127,7 +126,6 @@ export interface Config {
     mask?: string[];
     unmask?: string[];
     regions?: Region[];
-    extract?: Extract[];
     cookies?: string[];
     fraud?: boolean;
     checksum?: Checksum[];

package/types/data.d.ts

@@ -1,6 +1,6 @@
 import { Time } from "@clarity-types/core";
 export type Target = (number | Node);
-export type Token = (string | number | number[] | string[]);
+export type Token = (string | number | number[] | string[] | (string | number)[]);
 export type DecodedToken = (any | any[]);
 
 export type MetadataCallback = (data: Metadata, playback: boolean) => void;
@@ -97,6 +97,9 @@ export const enum Metric {
     Mobile = 27,
     UploadTime = 28,
     SinglePage = 29,
+/**
+ * @deprecated Browser API is deprecated. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
+ */
     UsedMemory = 30,
     Iframed = 31,
     MaxTouchPoints = 32,
@@ -260,6 +263,7 @@ export const enum Constant {
     End = "END",
     Upgrade = "UPGRADE",
     Action = "ACTION",
+    Extract = "EXTRACT",
     UserId = "userId",
     SessionId = "sessionId",
     PageId = "pageId",
@@ -281,7 +285,8 @@ export const enum Constant {
     Tilde = "~",
     ArrayStart = "[",
     ConditionStart = "{",
-    ConditionEnd = "}"
+    ConditionEnd = "}",
+    Seperator = "<SEP>"
 }
 
 export const enum XMLReadyState {
@@ -401,7 +406,7 @@ export interface UpgradeData {
 }
 
 export interface ExtractData {
-    [key: string]: string | number;
+    [key: number]: [number, string][]; // Array of [id, value] for every extracted data
 }
 
 export interface UploadData {

package/types/layout.d.ts

@@ -168,7 +168,6 @@ export interface NodeValue {
     hash: [string, string];
     region: number;
     metadata: NodeMeta;
-    fragment: number;
 }
 
 export interface NodeMeta {