mixpanel-browser 2.70.0 → 2.71.0

package/dist/rrweb-compiled.js

@@ -1578,7 +1578,8 @@ function snapshot(n2, options) {
         week: true,
         textarea: true,
         select: true,
-        password: true
+        password: true,
+        hidden: true
     } : maskAllInputs === false ? {
         password: true
     } : maskAllInputs;
@@ -15194,7 +15195,8 @@ function record(options) {
         week: true,
         textarea: true,
         select: true,
-        password: true
+        password: true,
+        hidden: true
     } : _maskInputOptions !== void 0 ? _maskInputOptions : {
         password: true
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.70.0",
+  "version": "2.71.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "module": "dist/mixpanel.module.js",
@@ -23,23 +23,6 @@
     "validate": "npm ls"
   },
   "types": "./src/index.d.ts",
-  "exports": {
-    "./src/loaders/loader-module-core": {
-      "types": "./src/index.d.ts",
-      "import": "./src/loaders/loader-module-core.js",
-      "require": "./src/loaders/loader-module-core.js"
-    },
-    "./src/loaders/loader-module-with-async-recorder": {
-      "types": "./src/index.d.ts",
-      "import": "./src/loaders/loader-module-with-async-recorder.js",
-      "require": "./src/loaders/loader-module-with-async-recorder.js"
-    },
-    ".": {
-      "types": "./src/index.d.ts",
-      "import": "./dist/mixpanel.module.js",
-      "require": "./dist/mixpanel.cjs.js"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/mixpanel/mixpanel-js.git"
@@ -83,6 +66,6 @@
     "webpack": "1.12.2"
   },
   "dependencies": {
-    "@mixpanel/rrweb": "2.0.0-alpha.18.1"
+    "@mixpanel/rrweb": "2.0.0-alpha.18.2"
   }
 }

package/rollup.config.mjs

@@ -3,6 +3,8 @@ import swc from '@rollup/plugin-swc';
 import esbuild from 'rollup-plugin-esbuild';
 import alias from '@rollup/plugin-alias';
 import closureCompiler from '@ampproject/rollup-plugin-closure-compiler';
+import fs from 'fs';
+import path from 'path';
 
 const COMPILED_RRWEB_PATH = 'build/rrweb-compiled.js';
 
@@ -12,6 +14,24 @@ const aliasRrweb = () => alias({
     ]
 });
 
+const copyTypes = () => ({
+    name: 'copy-types',
+    generateBundle(_options, bundle) {
+        try {
+            for (const builtFileName of Object.keys(bundle)) {
+                const buildDir = 'build';
+                const types = fs.readFileSync('src/index.d.ts', 'utf8');
+                const builtFile = path.basename(builtFileName, path.extname(builtFileName)) + '.d.ts';
+                fs.writeFileSync(path.join(buildDir, builtFile), types);
+            }
+
+        } catch (err) {
+            console.warn('Could not copy type files:', err.message);
+            throw err;
+        }
+    }
+});
+
 const COMMON_CLOSURE_FLAGS = {
     compilation_level: 'ADVANCED_OPTIMIZATIONS',
     language_in: 'ECMASCRIPT5',
@@ -140,7 +160,8 @@ const ALL_BUILDS = [
                 browser: true,
                 main: true,
                 jsnext: true,
-            })
+            }),
+            copyTypes(),
         ],
     },
 
@@ -176,7 +197,8 @@ const ALL_BUILDS = [
                 browser: true,
                 main: true,
                 jsnext: true,
-            })
+            }),
+            copyTypes(),
         ],
     },
 
@@ -197,7 +219,8 @@ const ALL_BUILDS = [
                 browser: true,
                 main: true,
                 jsnext: true,
-            })
+            }),
+            copyTypes(),
         ],
     },
     {
@@ -215,7 +238,8 @@ const ALL_BUILDS = [
                 browser: true,
                 main: true,
                 jsnext: true,
-            })
+            }),
+            copyTypes(),
         ],
     }
 ];

package/src/autocapture/deadclick.js

@@ -0,0 +1,254 @@
+import { EV_CHANGE, EV_HASHCHANGE, EV_INPUT, EV_SCROLLEND, EV_SELECT, EV_SUBMIT, EV_TOGGLE, isDefinitelyNonInteractive, logger } from './utils';
+import { ShadowDOMObserver } from './shadow-dom-observer';
+
+/** @const */ var DEFAULT_DEAD_CLICK_TIMEOUT_MS = 500;
+/** @const */ var INTERACTION_EVENTS = [EV_CHANGE, EV_INPUT, EV_SUBMIT, EV_SELECT, EV_TOGGLE];
+/** @const */ var LAYOUT_EVENTS = [EV_SCROLLEND];
+/** @const */ var NAVIGATION_EVENTS = [EV_HASHCHANGE];
+/** @const */ var MUTATION_OBSERVER_CONFIG = {
+    characterData: true,
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['style', 'class', 'hidden', 'checked', 'selected', 'value', 'display', 'visibility']
+};
+
+
+function DeadClickTracker(onDeadClickCallback) {
+    this.eventListeners = [];
+    this.mutationObserver = null;
+    this.shadowDOMObserver = null;
+
+    this.isTracking = false;
+    this.lastChangeEventTimestamp = 0;
+    this.pendingClicks = [];
+    this.onDeadClickCallback = onDeadClickCallback;
+    this.processingActive = false;
+    this.processingTimeout = null;
+}
+
+
+DeadClickTracker.prototype.addClick = function(event) {
+    var element = this.shadowDOMObserver && this.shadowDOMObserver.getEventTarget(event);
+
+    if (!element) {
+        element = event['target'] || event['srcElement'];
+    }
+
+    if (!element || isDefinitelyNonInteractive(element)) {
+        return false;
+    }
+
+    if (this.shadowDOMObserver) {
+        this.shadowDOMObserver.observeFromEvent(event);
+    }
+    this.pendingClicks.push({
+        element: element,
+        event: event,
+        timestamp: Date.now()
+    });
+    return true;
+};
+
+DeadClickTracker.prototype.trackClick = function(event, config) {
+    if (!this.isTracking) {
+        return false;
+    }
+
+    var added = this.addClick(event);
+    if (added) {
+        this.triggerProcessing(config);
+    }
+    return added;
+};
+
+DeadClickTracker.prototype.getDeadClicks = function(config) {
+    if (this.pendingClicks.length === 0) {
+        return [];
+    }
+
+    var timeoutMs = config['timeout_ms'];
+    var now = Date.now();
+    var clicksToEvaluate = this.pendingClicks.slice(); // Copy array
+    this.pendingClicks = []; // Clear original
+
+    var deadClicks = [];
+
+    for (var i = 0; i < clicksToEvaluate.length; i++) {
+        var click = clicksToEvaluate[i];
+
+        if (now - click.timestamp >= timeoutMs) {
+            // Click has exceeded timeout, check if it's dead by looking for changes after this specific click
+            if (!this.hasChangesAfter(click.timestamp)) {
+                deadClicks.push(click);
+            }
+        } else {
+            // Still pending - add back
+            this.pendingClicks.push(click);
+        }
+    }
+
+    return deadClicks;
+};
+
+DeadClickTracker.prototype.hasChangesAfter = function(timestamp) {
+    // 100ms tolerance for race condition between when we record the click and the change event
+    return this.lastChangeEventTimestamp >= (timestamp - 100);
+};
+
+DeadClickTracker.prototype.recordChangeEvent = function() {
+    this.lastChangeEventTimestamp = Date.now();
+};
+
+DeadClickTracker.prototype.triggerProcessing = function(config) {
+    // Prevent multiple concurrent processing chains
+    if (this.processingActive) {
+        return;
+    }
+    this.processingActive = true;
+    this.processRecursively(config);
+};
+
+DeadClickTracker.prototype.processRecursively = function(config) {
+    if (!this.isTracking || !this.onDeadClickCallback) {
+        this.processingActive = false;
+        return;
+    }
+
+    var timeoutMs = config['timeout_ms'];
+    var self = this;
+
+    this.processingTimeout = setTimeout(function() {
+        if (!self.processingActive) {
+            return;
+        }
+
+        var deadClicks = self.getDeadClicks(config);
+
+        for (var i = 0; i < deadClicks.length; i++) {
+            self.onDeadClickCallback(deadClicks[i].event);
+        }
+
+        if (self.pendingClicks.length > 0) {
+            self.processRecursively(config);
+        } else {
+            self.processingActive = false;
+        }
+    }, timeoutMs);
+};
+
+DeadClickTracker.prototype.startTracking = function() {
+    if (this.isTracking) {
+        return;
+    }
+
+    this.isTracking = true;
+
+    var self = this;
+
+    INTERACTION_EVENTS.forEach(function(event) {
+        var handler = function() {
+            self.recordChangeEvent();
+        };
+        document.addEventListener(event, handler, { capture: true, passive: true });
+        self.eventListeners.push({ target: document, event: event, handler: handler, options: { capture: true, passive: true } });
+    });
+    NAVIGATION_EVENTS.forEach(function(event) {
+        var handler = function() {
+            self.recordChangeEvent();
+        };
+        window.addEventListener(event, handler);
+        self.eventListeners.push({ target: window, event: event, handler: handler });
+    });
+    LAYOUT_EVENTS.forEach(function(event) {
+        var handler = function() {
+            self.recordChangeEvent();
+        };
+        window.addEventListener(event, handler, { passive: true });
+        self.eventListeners.push({ target: window, event: event, handler: handler, options: { passive: true } });
+    });
+    var selectionHandler = function() {
+        self.recordChangeEvent();
+    };
+    document.addEventListener('selectionchange', selectionHandler);
+    self.eventListeners.push({ target: document, event: 'selectionchange', handler: selectionHandler });
+
+    // Set up MutationObserver
+    if (window.MutationObserver) {
+        try {
+            this.mutationObserver = new window.MutationObserver(function() {
+                self.recordChangeEvent();
+            });
+
+            this.mutationObserver.observe(document.body || document.documentElement, MUTATION_OBSERVER_CONFIG);
+        } catch (e) {
+            logger.critical('Error while setting up mutation observer', e);
+        }
+    }
+
+    // Set up Shadow DOM observer
+    if (window.customElements) {
+        try {
+            this.shadowDOMObserver = new ShadowDOMObserver(
+                function() {
+                    self.recordChangeEvent();
+                },
+                MUTATION_OBSERVER_CONFIG
+            );
+            this.shadowDOMObserver.start();
+        } catch (e) {
+            logger.critical('Error while setting up shadow DOM observer', e);
+            this.shadowDOMObserver = null;
+        }
+    }
+};
+
+DeadClickTracker.prototype.stopTracking = function() {
+    if (!this.isTracking) {
+        return;
+    }
+
+    this.isTracking = false;
+    this.pendingClicks = [];
+    this.lastChangeEventTimestamp = 0;
+    this.processingActive = false;
+
+    if (this.processingTimeout) {
+        clearTimeout(this.processingTimeout);
+        this.processingTimeout = null;
+    }
+
+    // Remove all event listeners
+    for (var i = 0; i < this.eventListeners.length; i++) {
+        var listener = this.eventListeners[i];
+        try {
+            listener.target.removeEventListener(listener.event, listener.handler, listener.options);
+        } catch (e) {
+            logger.critical('Error while removing event listener', e);
+        }
+    }
+    this.eventListeners = [];
+
+    if (this.mutationObserver) {
+        try {
+            this.mutationObserver.disconnect();
+        } catch (e) {
+            logger.critical('Error while disconnecting mutation observer', e);
+        }
+        this.mutationObserver = null;
+    }
+
+    if (this.shadowDOMObserver) {
+        try {
+            this.shadowDOMObserver.stop();
+        } catch (e) {
+            logger.critical('Error while stopping shadow DOM observer', e);
+        }
+        this.shadowDOMObserver = null;
+    }
+};
+
+export {
+    DeadClickTracker,
+    DEFAULT_DEAD_CLICK_TIMEOUT_MS
+};