Optimizations for smaller minified output

lerna.json

@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.8.59",
+  "version": "0.8.60",
   "npmClient": "yarn"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.8.59",
+  "version": "0.8.60",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.8.59",
+  "version": "0.8.60",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.8.59"
+    "clarity-js": "^0.8.60"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.8.59",
+  "version": "0.8.60",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.8.59",
-    "clarity-js": "^0.8.59",
-    "clarity-visualize": "^0.8.59"
+    "clarity-decode": "^0.8.60",
+    "clarity-js": "^0.8.60",
+    "clarity-visualize": "^0.8.60"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 3,
   "name": "Microsoft Clarity Developer Tools",
   "description": "Clarity helps you understand how users are interacting with your website.",
-  "version": "0.8.59",
-  "version_name": "0.8.59",
+  "version": "0.8.60",
+  "version_name": "0.8.60",
   "minimum_chrome_version": "88",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.8.59",
+  "version": "0.8.60",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/rollup.config.ts

@@ -6,6 +6,15 @@ import typescript from "@rollup/plugin-typescript";
 import { readFileSync } from "fs";
 
 const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
+const terserOpts = {
+  compress: {
+    passes: 3,
+    hoist_vars: true,
+  },
+  mangle: {
+  },
+  output: { comments: false }
+};
 export default [
   {
     input: "src/index.ts",
@@ -25,35 +34,35 @@ export default [
   },
   {
     input: "src/global.ts",
-    output: [ { file: pkg.unpkg, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.unpkg, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
     },
     plugins: [
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   },
   {
     input: "src/global.ts",
-    output: [ { file: pkg.extended, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.extended, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
     },
     plugins: [
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   },
   {
     input: "src/global.ts",
-    output: [ { file: pkg.insight, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.insight, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
@@ -71,13 +80,13 @@ export default [
       }),
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   },
   {
     input: "src/global.ts",
-    output: [ { file: pkg.performance, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.performance, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
@@ -94,13 +103,13 @@ export default [
       }),
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   },
   {
     input: "src/dynamic/agent/index.ts",
-    output: [ { file: pkg.livechat, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.livechat, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
@@ -114,13 +123,13 @@ export default [
       }),
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   },
   {
     input: "src/dynamic/agent/index.ts",
-    output: [ { file: pkg.tidio, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.tidio, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
@@ -134,13 +143,13 @@ export default [
       }),
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   },
   {
     input: "src/dynamic/agent/index.ts",
-    output: [ { file: pkg.crisp, format: "iife", exports: "named" } ],
+    output: [ { file: pkg.crisp, format: "iife", exports: "named", freeze: false } ],
     onwarn(message, warn) {
       if (message.code === 'CIRCULAR_DEPENDENCY') { return; }
       warn(message);
@@ -154,7 +163,7 @@ export default [
       }),
       resolve(),
       typescript(),
-      terser({output: {comments: false}}),
+      terser(terserOpts),
       commonjs({ include: ["node_modules/**"] })
     ]
   }

packages/clarity-js/src/clarity.ts

@@ -6,11 +6,11 @@ import measure from "@src/core/measure";
 import * as task from "@src/core/task";
 import version from "@src/core/version";
 import * as data from "@src/data";
-import * as diagnostic from "@src/diagnostic";
-import * as interaction from "@src/interaction";
-import * as layout from "@src/layout";
-import * as performance from "@src/performance";
-import * as dynamic from "@src/core/dynamic";
+import { start as diagStart, stop as diagStop } from "@src/diagnostic";
+import { start as interStart, stop as interStop } from "@src/interaction";
+import { start as layoutStart, stop as layoutStop } from "@src/layout";
+import { start as perfStart, stop as perfStop } from "@src/performance";
+import { start as dynStart, stop as dynStop } from "@src/core/dynamic";
 export { version };
 export { consent, consentv2, event, identify, set, upgrade, metadata, signal, maxMetric, dlog } from "@src/data";
 export { queue } from "@src/data/upload";
@@ -19,7 +19,13 @@ export { schedule } from "@src/core/task";
 export { time } from "@src/core/time";
 export { hashText } from "@src/layout";
 export { measure };
-const modules: Module[] = [diagnostic, layout, interaction, performance, dynamic];
+const modules: Module[] = [
+  { start: diagStart, stop: diagStop },
+  { start: layoutStart, stop: layoutStop },
+  { start: interStart, stop: interStop },
+  { start: perfStart, stop: perfStop },
+  { start: dynStart, stop: dynStop },
+];
 
 export function start(config: Config = null): void {
   // Check that browser supports required APIs and we do not attempt to start Clarity multiple times

packages/clarity-js/src/core/dynamic.ts

@@ -59,7 +59,7 @@ function load(url: string, mid: number | null): void {
       }
     };
     script.onerror = () => {
-      report(new Error(`${DataConstant.Module}: ${url}`));
+      report(new Error(DataConstant.Module + ": " + url));
     };
     document.head.appendChild(script);
   } catch (error) {

packages/clarity-js/src/core/history.ts

@@ -14,40 +14,26 @@ export function start(): void {
     url = getCurrentUrl();
     count = 0;
     bind(window, "popstate", compute);
+    pushState = proxyHistory(pushState, "pushState");
+    replaceState = proxyHistory(replaceState, "replaceState");
+}
 
-    // Add a proxy to history.pushState function
-    // Wrap in try-catch to handle Safari iOS where history methods may be readonly
-    if (pushState === null) {
-        try {
-            pushState = history.pushState;
-            history.pushState = function(): void {
-                pushState.apply(this, arguments);
-                if (core.active() && check()) {
-                    compute();
-                }
-            };
-        } catch (e) {
-            // history.pushState is readonly in this environment (e.g., Safari iOS WKWebView)
-            pushState = null;
-        }
-    }
-
-    // Add a proxy to history.replaceState function
-    // Wrap in try-catch to handle Safari iOS where history methods may be readonly
-    if (replaceState === null) {
+function proxyHistory(original: Function, method: string): Function {
+    if (original === null) {
         try {
-            replaceState = history.replaceState;
-            history.replaceState = function(): void {
-                replaceState.apply(this, arguments);
+            original = history[method];
+            history[method] = function(): void {
+                original.apply(this, arguments);
                 if (core.active() && check()) {
                     compute();
                 }
             };
         } catch (e) {
-            // history.replaceState is readonly in this environment (e.g., Safari iOS WKWebView)
-            replaceState = null;
+            // history method may be readonly (e.g., Safari iOS WKWebView)
+            original = null;
         }
     }
+    return original;
 }
 
 function check(): boolean {

packages/clarity-js/src/core/measure.ts

@@ -13,7 +13,7 @@ export default function (method: Function): Function {
         if (duration > Setting.LongTask) {
             metric.count(Metric.LongTaskCount);
             metric.max(Metric.ThreadBlockedTime, duration);
-            method.dn && internal.log(Code.FunctionExecutionTime, Severity.Info, `${method.dn}-${duration}`);
+            method.dn && internal.log(Code.FunctionExecutionTime, Severity.Info, method.dn + "-" + duration);
         }
     };
 }

packages/clarity-js/src/core/report.ts

@@ -10,7 +10,7 @@ export function reset(): void {
 
 export function report(e: Error): Error {
     // Do not report the same message twice for the same page
-    if (history && history.indexOf(e.message) === -1) {
+    if (history && !history.includes(e.message)) {
         const url = config.report;
         if (url && url.length > 0 && data) {
             let payload: Report = {v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum};

packages/clarity-js/src/core/scrub.ts

@@ -97,13 +97,13 @@ export function url(input: string, electron: boolean = false, truncate: boolean
     let result = input;
     // Replace the URL for Electron apps so we don't send back file:/// URL
     if (electron) {
-        result = `${Data.Constant.HTTPS}${Data.Constant.Electron}`;
+        result = Data.Constant.HTTPS + Data.Constant.Electron;
     } else {
         let drop = config.drop;
         if (drop && drop.length > 0 && input && input.indexOf("?") > 0) {
             let [path, query] = input.split("?");
             let swap = Data.Constant.Dropped;
-            result = path + "?" + query.split("&").map(p => drop.some(x => p.indexOf(`${x}=`) === 0) ? `${p.split("=")[0]}=${swap}` : p).join("&");
+            result = path + "?" + query.split("&").map(p => drop.some(x => p.indexOf(x + "=") === 0) ? (p.split("=")[0] + "=" + swap) : p).join("&");
         }
     }
 
@@ -120,7 +120,7 @@ function mangleText(value: string): string {
         let index = value.indexOf(first);
         let prefix = value.substr(0, index);
         let suffix = value.substr(index + trimmed.length);
-        return `${prefix}${trimmed.length.toString(36)}${suffix}`;
+        return prefix + trimmed.length.toString(36) + suffix;
     }
     return value;
 }

packages/clarity-js/src/core/task.ts

@@ -136,7 +136,7 @@ export async function suspend(timer: Timer): Promise<Task> {
 }
 
 function key(timer: Timer): string {
-    return `${timer.id}.${timer.cost}`;
+    return timer.id + "." + timer.cost;
 }
 
 async function wait(): Promise<RequestIdleCallbackDeadline> {

packages/clarity-js/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.8.59";
+let version = "0.8.60";
 export default version;