mixpanel-browser 2.61.2 → 2.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.61.2",
+  "version": "2.63.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "module": "dist/mixpanel.module.js",
@@ -33,7 +33,11 @@
   },
   "homepage": "https://github.com/mixpanel/mixpanel-js",
   "devDependencies": {
+    "@ampproject/rollup-plugin-closure-compiler": "0.27.0",
+    "@rollup/plugin-alias": "5.1.1",
     "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-swc": "0.4.0",
+    "@swc/core": "1.11.7",
     "babel": "6.5.2",
     "babel-core": "6.7.2",
     "babel-preset-es2015": "6.6.0",
@@ -54,13 +58,13 @@
     "morgan": "1.9.1",
     "rdme": "7.5.0",
     "request": "2.88.0",
-    "rollup": "2.79.1",
-    "rollup-plugin-esbuild": "4.10.3",
+    "rollup": "4.34.9",
+    "rollup-plugin-esbuild": "6.2.1",
     "sinon": "8.1.1",
     "sinon-chai": "3.5.0",
     "webpack": "1.12.2"
   },
   "dependencies": {
-    "rrweb": "2.0.0-alpha.13"
+    "rrweb": "2.0.0-alpha.18"
   }
 }

package/rollup.config.mjs

@@ -0,0 +1,223 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+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';
+
+const COMPILED_RRWEB_PATH = 'build/rrweb-compiled.js';
+
+const aliasRrweb = () => alias({
+    entries: [
+        { find: 'rrweb', replacement: COMPILED_RRWEB_PATH },
+    ]
+});
+
+const COMMON_CLOSURE_FLAGS = {
+    compilation_level: 'ADVANCED_OPTIMIZATIONS',
+    language_in: 'ECMASCRIPT5',
+    externs: ['src/externs.js'],
+};
+
+const MINIFY = process.env.MINIFY || process.env.FULL;
+
+// Main builds used to develop / iterate quickly
+const MAIN_BUILDS = [
+    // compile rrweb first to es5 with swc, we'll replace the import later on
+    {
+        'input': 'rrweb',
+        'output': [
+            {
+                file: COMPILED_RRWEB_PATH,
+            }
+        ],
+        plugins: [nodeResolve({browser: true}), swc({swc: {jsc: {target: 'es5'}}})]
+    },
+
+    // IIFE recorder bundle that is loaded asynchronously
+    // rrweb uses esbuild to minify, so do that here as well
+    {
+        input: 'src/recorder/index.js',
+        output: [
+            {
+                file: 'build/mixpanel-recorder.js',
+                name: 'mixpanel_recorder',
+                format: 'iife',
+            },
+            ...(MINIFY
+                ? [
+                    {
+                      file: 'build/mixpanel-recorder.min.js',
+                      name: 'mixpanel_recorder',
+                      format: 'iife',
+                      plugins: [esbuild({target: 'es5', minify: true, sourceMap: true})],
+                      sourcemap: true,
+                    },
+                  ]
+                : []),
+        ],
+        plugins: [aliasRrweb()],
+    },
+
+    // IIFE main mixpanel build
+    {
+        input: 'src/loaders/loader-globals.js',
+        output: [
+            {
+                file: 'build/mixpanel.globals.js',
+                name: 'mixpanel',
+                format: 'iife',
+            },
+            ...(MINIFY
+                ? [
+                    {
+                      file: 'build/mixpanel.min.js',
+                      format: 'iife',
+                      plugins: [closureCompiler(COMMON_CLOSURE_FLAGS)],
+                    },
+                  ]
+                : []),
+        ],
+        plugins: [
+            nodeResolve({
+                browser: true,
+                main: true,
+                jsnext: true,
+            })
+        ]
+    },
+]
+
+const ALL_BUILDS = [
+    ...MAIN_BUILDS,
+    // Minified snippets for loading mixpanel
+    {
+        input: 'src/loaders/mixpanel-jslib-snippet.js',
+        output: [
+            {
+                file: 'build/mixpanel-jslib-snippet.min.js',
+                plugins: [closureCompiler(COMMON_CLOSURE_FLAGS)]
+            },
+            {
+                file: 'build/mixpanel-jslib-snippet.min.test.js',
+                plugins: [closureCompiler({...COMMON_CLOSURE_FLAGS, define: 'MIXPANEL_LIB_URL="../build/mixpanel.min.js"'})],
+            }
+        ],
+    },
+
+    // IIFE mixpanel snippet loader
+    {
+        input: 'src/loaders/mixpanel-js-wrapper.js',
+        output: [
+            {
+                file: 'build/mixpanel-js-wrapper.js',
+            },
+            {
+                file: 'build/mixpanel-js-wrapper.min.js',
+                plugins: [closureCompiler(COMMON_CLOSURE_FLAGS)],
+            }
+        ],
+    },
+
+    // IIFE mixpanel core with bundled recorder
+    {
+        input: 'src/loaders/loader-globals-with-recorder.js',
+        output: [
+            {
+                file: 'build/mixpanel-with-recorder.js',
+                name: 'mixpanel',
+                format: 'iife',
+            },
+            {
+                file: 'build/mixpanel-with-recorder.min.js',
+                name: 'mixpanel',
+                format: 'iife',
+                plugins: [esbuild({target: 'es5', minify: true, sourceMap: true})],
+            },
+        ],
+        plugins: [
+            aliasRrweb(),
+            nodeResolve({
+                browser: true,
+                main: true,
+                jsnext: true,
+            })
+        ],
+    },
+
+
+    // Modules builds that are bundled with the recorder
+    {
+        input: 'src/loaders/loader-module.js',
+        output: [
+            {
+                file: 'build/mixpanel.cjs.js',
+                name: 'mixpanel',
+                format: 'cjs',
+            },
+            {
+                file: 'build/mixpanel.amd.js',
+                name: 'mixpanel',
+                format: 'amd',
+            },
+            {
+                file: 'build/mixpanel.umd.js',
+                name: 'mixpanel',
+                format: 'umd',
+            },
+            {
+                file: 'build/mixpanel.module.js',
+                name: 'mixpanel',
+                format: 'es',
+            },
+        ],
+        plugins: [
+            aliasRrweb(),
+            nodeResolve({
+                browser: true,
+                main: true,
+                jsnext: true,
+            })
+        ],
+    },
+
+
+    // Alternative CJS builds without recorder
+    {
+        input: 'src/loaders/loader-module-core.js',
+        output: [
+            {
+                file: 'build/mixpanel-core.cjs.js',
+                name: 'mixpanel',
+                format: 'cjs',
+            },
+        ],
+        plugins: [
+            aliasRrweb(),
+            nodeResolve({
+                browser: true,
+                main: true,
+                jsnext: true,
+            })
+        ],
+    },
+    {
+        input: 'src/loaders/loader-module-with-async-recorder.js',
+        output: [
+            {
+                file: 'build/mixpanel-with-async-recorder.cjs.js',
+                name: 'mixpanel',
+                format: 'cjs',
+            },
+        ],
+        plugins: [
+            aliasRrweb(),
+            nodeResolve({
+                browser: true,
+                main: true,
+                jsnext: true,
+            })
+        ],
+    }
+];
+
+export default process.env.FULL ? ALL_BUILDS : MAIN_BUILDS;

package/src/config.js

@@ -1,6 +1,6 @@
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.61.2'
+    LIB_VERSION: '2.63.0'
 };
 
 export default Config;

package/src/loaders/loader-globals-with-recorder.js

@@ -0,0 +1,7 @@
+/* eslint camelcase: "off" */
+import '../recorder';
+
+import { init_from_snippet } from '../mixpanel-core';
+import { loadNoop } from './bundle-loaders';
+
+init_from_snippet(loadNoop);

package/src/mixpanel-core.js

@@ -1,6 +1,6 @@
 /* eslint camelcase: "off" */
 import Config from './config';
-import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NOOP_FUNC } from './utils';
+import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NOOP_FUNC, JSONStringify } from './utils';
 import { isRecordingExpired } from './recorder/utils';
 import { window } from './window';
 import { Autocapture } from './autocapture';
@@ -932,7 +932,7 @@ MixpanelLib.prototype.disable = function(events) {
 };
 
 MixpanelLib.prototype._encode_data_for_request = function(data) {
-    var encoded_data = _.JSONEncode(data);
+    var encoded_data = JSONStringify(data);
     if (this.get_config('api_payload_format') === PAYLOAD_TYPE_BASE64) {
         encoded_data = _.base64Encode(encoded_data);
     }

package/src/mixpanel-persistence.js

@@ -9,7 +9,7 @@ import {
     REMOVE_ACTION,
     UNION_ACTION
 } from './api-actions';
-import { _, console } from './utils';
+import { _, console, JSONStringify } from './utils';
 
 /*
  * Constants
@@ -125,7 +125,7 @@ MixpanelPersistence.prototype.save = function() {
 
     this.storage.set(
         this.name,
-        _.JSONEncode(this['props']),
+        JSONStringify(this['props']),
         this.expire_days,
         this.cross_subdomain,
         this.secure,

package/src/recorder/session-recording.js

@@ -1,5 +1,5 @@
 import { window } from '../window';
-import { IncrementalSource, EventType } from '@rrweb/types';
+import { IncrementalSource, EventType } from 'rrweb';
 import { MAX_RECORDING_MS, MAX_VALUE_FOR_MIN_RECORDING_MS, console_with_prefix, NOOP_FUNC, _, localStorageSupported} from '../utils'; // eslint-disable-line camelcase
 import { IDBStorageWrapper, RECORDING_EVENTS_STORE_NAME } from '../storage/indexed-db';
 import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
@@ -187,6 +187,7 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         this.idleTimeoutId = setTimeout(this._onIdleTimeout, idleTimeoutMs);
         this.idleExpires = new Date().getTime() + idleTimeoutMs;
     }.bind(this);
+    resetIdleTimeout();
 
     var blockSelector = this.getConfig('record_block_selector');
     if (blockSelector === '' || blockSelector === null) {
@@ -196,6 +197,10 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
     try {
         this._stopRecording = this._rrwebRecord({
             'emit': function (ev) {
+                if (this.idleExpires && this.idleExpires < ev.timestamp) {
+                    this._onIdleTimeout();
+                    return;
+                }
                 if (isUserEvent(ev)) {
                     if (this.batcher.stopped && new Date().getTime() - this.replayStartTime >= this.recordMinMs) {
                         // start flushing again after user activity
@@ -232,8 +237,6 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         return;
     }
 
-    resetIdleTimeout();
-
     var maxTimeoutMs = this.maxExpires - new Date().getTime();
     this.maxTimeoutId = setTimeout(this._onMaxLengthReached.bind(this), maxTimeoutMs);
 };
@@ -412,7 +415,7 @@ SessionRecording.prototype._flushEvents = addOptOutCheckMixpanelLib(function (da
             'replay_start_url': this.replayStartUrl,
             'seq': this.seqNo
         };
-        var eventsJson = _.JSONEncode(data);
+        var eventsJson = JSON.stringify(data);
 
         // send ID management props if they exist
         var deviceId = this._mixpanel.get_property('$device_id');

package/src/storage/local-storage.js

@@ -1,11 +1,12 @@
 import { Promise } from '../promise-polyfill';
 import { _, JSONParse, JSONStringify } from '../utils'; // eslint-disable-line camelcase
+import { window } from '../window';
 
 /**
  * @type {import('./wrapper').StorageWrapper}
  */
 var LocalStorageWrapper = function (storageOverride) {
-    this.storage = storageOverride || localStorage;
+    this.storage = storageOverride || window.localStorage;
 };
 
 LocalStorageWrapper.prototype.init = function () {

package/src/utils.js

@@ -839,71 +839,27 @@ _.utf8Encode = function(string) {
     return utftext;
 };
 
-_.UUID = (function() {
-
-    // Time-based entropy
-    var T = function() {
-        var time = 1 * new Date(); // cross-browser version of Date.now()
-        var ticks;
-        if (window.performance && window.performance.now) {
-            ticks = window.performance.now();
-        } else {
-            // fall back to busy loop
-            ticks = 0;
-
-            // this while loop figures how many browser ticks go by
-            // before 1*new Date() returns a new number, ie the amount
-            // of ticks that go by per millisecond
-            while (time == 1 * new Date()) {
-                ticks++;
-            }
-        }
-        return time.toString(16) + Math.floor(ticks).toString(16);
-    };
-
-    // Math.Random entropy
-    var R = function() {
-        return Math.random().toString(16).replace('.', '');
-    };
-
-    // User agent entropy
-    // This function takes the user agent string, and then xors
-    // together each sequence of 8 bytes.  This produces a final
-    // sequence of 8 bytes which it returns as hex.
-    var UA = function() {
-        var ua = userAgent,
-            i, ch, buffer = [],
-            ret = 0;
-
-        function xor(result, byte_array) {
-            var j, tmp = 0;
-            for (j = 0; j < byte_array.length; j++) {
-                tmp |= (buffer[j] << j * 8);
-            }
-            return result ^ tmp;
-        }
-
-        for (i = 0; i < ua.length; i++) {
-            ch = ua.charCodeAt(i);
-            buffer.unshift(ch & 0xFF);
-            if (buffer.length >= 4) {
-                ret = xor(ret, buffer);
-                buffer = [];
-            }
-        }
-
-        if (buffer.length > 0) {
-            ret = xor(ret, buffer);
+_.UUID = function() {
+    try {
+        // use native Crypto API when available
+        return window['crypto']['randomUUID']();
+    } catch (err) {
+        // fall back to generating our own UUID
+        // based on https://gist.github.com/scwood/3bff42cc005cc20ab7ec98f0d8e1d59d
+        var uuid = new Array(36);
+        for (var i = 0; i < 36; i++) {
+            uuid[i] = Math.floor(Math.random() * 16);
         }
-
-        return ret.toString(16);
-    };
-
-    return function() {
-        var se = (screen.height * screen.width).toString(16);
-        return (T() + '-' + R() + '-' + UA() + '-' + se + '-' + T());
-    };
-})();
+        uuid[14] = 4; // set bits 12-15 of time-high-and-version to 0100
+        uuid[19] = uuid[19] &= ~(1 << 2); // set bit 6 of clock-seq-and-reserved to zero
+        uuid[19] = uuid[19] |= (1 << 3); // set bit 7 of clock-seq-and-reserved to one
+        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+
+        return _.map(uuid, function(x) {
+            return x.toString(16);
+        }).join('');
+    }
+};
 
 // _.isBlockedUA()
 // This is to block various web spiders from executing our JS and

package/src/window.js

@@ -5,6 +5,7 @@ if (typeof(window) === 'undefined') {
         hostname: ''
     };
     win = {
+        crypto: {randomUUID: function() {throw Error('unsupported');}},
         navigator: { userAgent: '', onLine: true },
         document: {
             createElement: function() { return {}; },

package/rollup.config.js

@@ -1,11 +0,0 @@
-import nodeResolve from '@rollup/plugin-node-resolve';
-
-export default {
-    plugins: [
-        nodeResolve({
-            browser: true,
-            main: true,
-            jsnext: true,
-        })
-    ]
-};

package/src/recorder/rollup.config.js

@@ -1,20 +0,0 @@
-import esbuild from 'rollup-plugin-esbuild';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-
-export default {
-    input: 'index.js',
-    output: [
-        {
-            file: 'build/mixpanel-recorder.js',
-            format: 'esm'
-        },
-        {
-            file: 'build/mixpanel-recorder.min.js',
-            format: 'esm',
-            name: 'version',
-            plugins: [esbuild({minify: true, sourceMap: true})],
-            sourcemap: true,
-        }
-    ],
-    plugins: [nodeResolve({browser: true})],
-};