clarity-js 0.7.1 → 0.7.3

package/build/clarity.module.js

@@ -1,79 +1,130 @@
 var dom = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get start () { return start$i; },
-    get stop () { return stop$g; },
-    get parse () { return parse$1; },
-    get getId () { return getId; },
     get add () { return add; },
-    get update () { return update$1; },
-    get sameorigin () { return sameorigin; },
-    get iframe () { return iframe; },
-    get hashText () { return hashText; },
+    get get () { return get; },
+    get getId () { return getId; },
     get getNode () { return getNode; },
     get getValue () { return getValue; },
-    get get () { return get; },
-    get lookup () { return lookup; },
     get has () { return has; },
+    get hashText () { return hashText; },
+    get iframe () { return iframe; },
+    get lookup () { return lookup; },
+    get parse () { return parse$1; },
+    get sameorigin () { return sameorigin; },
+    get start () { return start$i; },
+    get stop () { return stop$g; },
+    get update () { return update$1; },
     get updates () { return updates$2; }
 });
 var upload$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get track () { return track$1; },
-    get start () { return start$f; },
     get queue () { return queue; },
-    get stop () { return stop$d; }
+    get start () { return start$f; },
+    get stop () { return stop$d; },
+    get track () { return track$1; }
 });
 var extract = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get data () { return data$5; },
-    get keys () { return keys; },
-    get fragments () { return fragments; },
-    get start () { return start$c; },
     get clone () { return clone; },
     get compute () { return compute$4; },
+    get data () { return data$5; },
+    get fragments () { return fragments; },
+    get keys () { return keys; },
     get reset () { return reset$4; },
-    get update () { return update; },
-    get stop () { return stop$b; }
+    get start () { return start$c; },
+    get stop () { return stop$b; },
+    get update () { return update; }
 });
 var limit = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get data () { return data$4; },
-    get start () { return start$b; },
     get check () { return check$2; },
-    get trigger () { return trigger; },
     get compute () { return compute$3; },
-    get stop () { return stop$a; }
+    get data () { return data$4; },
+    get start () { return start$b; },
+    get stop () { return stop$a; },
+    get trigger () { return trigger; }
 });
 var dimension = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    get compute () { return compute$2; },
     get data () { return data$3; },
-    get updates () { return updates; },
+    get log () { return log; },
+    get reset () { return reset$3; },
     get start () { return start$a; },
     get stop () { return stop$9; },
-    get log () { return log; },
-    get compute () { return compute$2; },
-    get reset () { return reset$3; }
+    get updates () { return updates; }
 });
 var metadata$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get data () { return data$2; },
     get callbacks () { return callbacks; },
-    get start () { return start$9; },
-    get stop () { return stop$8; },
-    get metadata () { return metadata; },
-    get id () { return id; },
-    get consent () { return consent; },
     get clear () { return clear; },
-    get save () { return save; }
+    get consent () { return consent; },
+    get data () { return data$2; },
+    get id () { return id; },
+    get metadata () { return metadata; },
+    get save () { return save; },
+    get start () { return start$9; },
+    get stop () { return stop$8; }
 });
 var envelope$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$1; },
+    get envelope () { return envelope; },
     get start () { return start$8; },
-    get stop () { return stop$7; },
-    get envelope () { return envelope; }
+    get stop () { return stop$7; }
+});
+var clarity = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get consent () { return consent; },
+    get event () { return event; },
+    get hashText () { return hashText; },
+    get identify () { return identify; },
+    get metadata () { return metadata; },
+    get pause () { return pause; },
+    get resume () { return resume; },
+    get set () { return set; },
+    get start () { return start; },
+    get stop () { return stop; },
+    get upgrade () { return upgrade; },
+    get version () { return version$1; }
 });
 
+var w = window;
+var c = "clarity" /* Constant.Clarity */;
+function setup() {
+    // Start queuing up calls while Clarity is inactive and we are in a browser enviornment    
+    if (typeof w !== "undefined") {
+        w[c] = function () {
+            (w[c].q = w[c].q || []).push(arguments);
+        };
+    }
+}
+function process$7() {
+    if (typeof w !== "undefined") {
+        // Do not execute or reset global "clarity" variable if a version of Clarity is already running on the page
+        if (w[c] && w[c].v) {
+            return console.warn("Error CL001: Multiple Clarity tags detected.");
+        }
+        // Expose clarity in a browser environment
+        // To be efficient about queuing up operations while Clarity is wiring up, we expose clarity.*(args) => clarity(*, args);
+        // This allows us to reprocess any calls that we missed once Clarity is available on the page
+        // Once Clarity script bundle is loaded on the page, we also initialize a "v" property that holds current version
+        // We use the presence or absence of "v" to determine if we are attempting to run a duplicate instance
+        var queue = w[c] ? (w[c].q || []) : [];
+        w[c] = function (method) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            return clarity[method].apply(clarity, args);
+        };
+        w[c].v = version$1;
+        while (queue.length > 0) {
+            w[c].apply(w, queue.shift());
+        }
+    }
+}
+
 var config$1 = {
     projectId: null,
     delay: 1 * 1000 /* Time.Second */,
@@ -115,7 +166,7 @@ function stop$C() {
     startTime = 0;
 }
 
-var version$1 = "0.7.1";
+var version$1 = "0.7.3";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -363,14 +414,14 @@ function stop$B() {
 
 var baseline = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get state () { return state$a; },
-    start: start$F,
-    reset: reset$q,
-    track: track$7,
     activity: activity,
-    visibility: visibility,
     compute: compute$c,
-    stop: stop$B
+    reset: reset$q,
+    start: start$F,
+    get state () { return state$a; },
+    stop: stop$B,
+    track: track$7,
+    visibility: visibility
 });
 
 var data$j = null;
@@ -481,8 +532,8 @@ function stop$z() {
 var ping$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$h; },
-    start: start$D,
     reset: reset$o,
+    start: start$D,
     stop: stop$z
 });
 
@@ -519,12 +570,12 @@ function reset$n() {
 
 var summary = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    compute: compute$a,
     get data () { return data$g; },
+    reset: reset$n,
     start: start$C,
     stop: stop$y,
-    track: track$6,
-    compute: compute$a,
-    reset: reset$n
+    track: track$6
 });
 
 var data$f = null;
@@ -560,8 +611,8 @@ var upgrade$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$f; },
     start: start$B,
-    upgrade: upgrade,
-    stop: stop$x
+    stop: stop$x,
+    upgrade: upgrade
 });
 
 var data$e = null;
@@ -606,12 +657,12 @@ function stop$w() {
 
 var variable = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    compute: compute$9,
     get data () { return data$e; },
-    start: start$A,
-    set: set,
     identify: identify,
-    compute: compute$9,
     reset: reset$m,
+    set: set,
+    start: start$A,
     stop: stop$w
 });
 
@@ -646,7 +697,7 @@ function __generator(thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -864,8 +915,8 @@ function filter(value) {
 
 var selector = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    reset: reset$l,
-    get: get$1
+    get: get$1,
+    reset: reset$l
 });
 
 // Track the start time to be able to compute duration at the end of the task
@@ -1812,9 +1863,9 @@ function observe$4(root) {
 
 var interaction = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    observe: observe$4,
     start: start$k,
-    stop: stop$i,
-    observe: observe$4
+    stop: stop$i
 });
 
 var digitsRegex = /[^0-9\.]/g;
@@ -2254,7 +2305,7 @@ function handle$1(m) {
 }
 function process$2() {
     return __awaiter(this, void 0, void 0, function () {
-        var timer, record, _i, _a, mutation, state, target, type, value;
+        var timer, record, instance, _i, _a, mutation, state, target, type, value;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -2264,6 +2315,7 @@ function process$2() {
                 case 1:
                     if (!(mutations.length > 0)) return [3 /*break*/, 8];
                     record = mutations.shift();
+                    instance = time();
                     _i = 0, _a = record.mutations;
                     _b.label = 2;
                 case 2:
@@ -2280,7 +2332,7 @@ function process$2() {
                         return [3 /*break*/, 6];
                     }
                     target = mutation.target;
-                    type = track$5(mutation, timer);
+                    type = track$5(mutation, timer, instance);
                     if (type && target && target.ownerDocument) {
                         parse$1(target.ownerDocument);
                     }
@@ -2320,7 +2372,7 @@ function process$2() {
         });
     });
 }
-function track$5(m, timer) {
+function track$5(m, timer, instance) {
     var value = m.target ? get(m.target.parentNode) : null;
     // Check if the parent is already discovered and that the parent is not the document root
     if (value && value.data.tag !== "HTML" /* Constant.HTML */) {
@@ -2333,19 +2385,20 @@ function track$5(m, timer) {
         // In those cases, IDs will change however the selector (which is relative to DOM xPath) remains the same
         var key = [parent_1, element, m.attributeName, names(m.addedNodes), names(m.removedNodes)].join();
         // Initialize an entry if it doesn't already exist
-        history$4[key] = key in history$4 ? history$4[key] : [0];
+        history$4[key] = key in history$4 ? history$4[key] : [0, instance];
         var h = history$4[key];
         // Lookup any pending nodes queued up for removal, and process them now if we suspended a mutation before
         if (inactive === false && h[0] >= 10 /* Setting.MutationSuspendThreshold */) {
-            processNodeList(h[1], 2 /* Source.ChildListRemove */, timer);
+            processNodeList(h[2], 2 /* Source.ChildListRemove */, timer);
         }
         // Update the counter
-        h[0] = inactive ? h[0] + 1 : 1;
+        h[0] = inactive ? (h[1] === instance ? h[0] : h[0] + 1) : 1;
+        h[1] = instance;
         // Return updated mutation type based on if we have already hit the threshold or not
         if (h[0] === 10 /* Setting.MutationSuspendThreshold */) {
             // Store a reference to removedNodes so we can process them later
             // when we resume mutations again on user interactions
-            h[1] = m.removedNodes;
+            h[2] = m.removedNodes;
             return "suspend" /* Constant.Suspend */;
         }
         else if (h[0] > 10 /* Setting.MutationSuspendThreshold */) {
@@ -4457,9 +4510,9 @@ function stop$3() {
 
 var layout = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    hashText: hashText,
     start: start$3,
-    stop: stop$3,
-    hashText: hashText
+    stop: stop$3
 });
 
 function encode (type) {
@@ -4611,11 +4664,6 @@ function process(entries) {
                 break;
         }
     }
-    if (performance && "memory" /* Constant.Memory */ in performance && performance["memory" /* Constant.Memory */].usedJSHeapSize) {
-        // Track consumed memory (MBs) where "memory" API is available
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
-        max(30 /* Metric.UsedMemory */, Math.abs(performance["memory" /* Constant.Memory */].usedJSHeapSize / 1048576 /* Setting.MegaByte */));
-    }
 }
 function stop$2() {
     if (observer) {
@@ -4653,6 +4701,11 @@ function start(config$1) {
         start$6();
         start$z();
         modules.forEach(function (x) { return 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$1 === null) {
+            process$7();
+        }
     }
 }
 // By default Clarity is asynchronous and will yield by looking for requestIdleCallback.
@@ -4675,29 +4728,14 @@ function resume() {
 }
 function stop() {
     if (active()) {
-        // Stop modules in the reverse order of their initialization
+        // Stop modules in the reverse order of their initialization and start queuing up items again
         modules.slice().reverse().forEach(function (x) { return measure(x.stop)(); });
         stop$v();
         stop$5();
+        setup();
     }
 }
 
-var clarity = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    version: version$1,
-    start: start,
-    pause: pause,
-    resume: resume,
-    stop: stop,
-    consent: consent,
-    event: event,
-    identify: identify,
-    set: set,
-    upgrade: upgrade,
-    metadata: metadata,
-    hashText: hashText
-});
-
 var helper = { hash: hash, selector: selector, get: get, getNode: getNode, lookup: lookup };
 var version = version$1;
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "clarity-js",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "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/clarity.ts

@@ -1,5 +1,6 @@
 import { Config, Module } from "@clarity-types/core";
 import { Constant } from "@clarity-types/data";
+import * as queue from "@src/queue";
 import * as core from "@src/core";
 import measure from "@src/core/measure";
 import * as task from "@src/core/task";
@@ -22,6 +23,10 @@ export function start(config: Config = null): void {
     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(); }
   }
 }
 
@@ -47,9 +52,10 @@ export function resume(): void {
 
 export function stop(): void {
   if (core.active()) {
-    // Stop modules in the reverse order of their initialization
+    // 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/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/version.ts

@@ -1,2 +1,2 @@
-let version = "0.7.1";
+let version = "0.7.3";
 export default version;

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/global.ts

@@ -1,22 +1,6 @@
-import * as clarity from "@src/clarity";
+import * as queue from "@src/queue";
 
-// Expose clarity in a browser environment
-// To be efficient about queuing up operations while Clarity is wiring up, we expose clarity.*(args) => clarity(*, args);
-// This allows us to reprocess any calls that we missed once Clarity is available on the page
-// Once Clarity script bundle is loaded on the page, we also initialize a "v" property that holds current version
-// We use the presence or absence of "v" to determine if we are attempting to run a duplicate instance
+// Process anything that was queued up before the script loaded
 (function(): void {
-    if (typeof window !== "undefined") {
-        const w = window as any;
-        const c = 'clarity';
-        
-        // Do not execute or reset global "clarity" variable if a version of Clarity is already running on the page
-        if (w[c] && w[c].v) { return console.warn("Error CL001: Multiple Clarity tags detected."); }
-        
-        // Re-wire global "clarity" variable to map it to current instance of Clarity
-        const queue = w[c] ? (w[c].q || []) : [];
-        w[c] = function(method: string, ...args: any[]): void { return clarity[method](...args); }
-        w[c].v = clarity.version;
-        while (queue.length > 0) { w[c](...queue.shift()); }
-    }
+    queue.process();
 })();

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();