mixpanel-browser 2.62.0 → 2.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.62.0",
+  "version": "2.64.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/autocapture/index.js

@@ -160,7 +160,8 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
         blockElementCallback: this.getConfig(CONFIG_BLOCK_ELEMENT_CALLBACK),
         blockSelectors: this.getConfig(CONFIG_BLOCK_SELECTORS),
         captureExtraAttrs: this.getConfig(CONFIG_CAPTURE_EXTRA_ATTRS),
-        captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT)
+        captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT),
+        capturedForHeatMap: mpEventName === MP_EV_CLICK && !this.getConfig(CONFIG_TRACK_CLICK) && this.mp.is_recording_heatmap_data(),
     });
     if (props) {
         _.extend(props, DEFAULT_PROPS);
@@ -171,13 +172,13 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
 Autocapture.prototype.initClickTracking = function() {
     window.removeEventListener(EV_CLICK, this.listenerClick);
 
-    if (!this.getConfig(CONFIG_TRACK_CLICK)) {
+    if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.get_config('record_heatmap_data')) {
         return;
     }
     logger.log('Initializing click tracking');
 
     this.listenerClick = window.addEventListener(EV_CLICK, function(ev) {
-        if (!this.getConfig(CONFIG_TRACK_CLICK)) {
+        if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.is_recording_heatmap_data()) {
             return;
         }
         this.trackDomEvent(ev, MP_EV_CLICK);

package/src/autocapture/utils.js

@@ -114,6 +114,7 @@ function getPropsForDOMEvent(ev, config) {
     var blockSelectors = config.blockSelectors || [];
     var captureTextContent = config.captureTextContent || false;
     var captureExtraAttrs = config.captureExtraAttrs || [];
+    var capturedForHeatMap = config.capturedForHeatMap || false;
 
     // convert array to set every time, as the config may have changed
     var blockAttrsSet = {};
@@ -192,6 +193,9 @@ function getPropsForDOMEvent(ev, config) {
                         props['$' + prop] = ev[prop];
                     }
                 });
+                if (capturedForHeatMap) {
+                    props['$captured_for_heatmap'] = true;
+                }
                 target = guessRealClickTarget(ev);
             }
             // prioritize text content from "real" click target if different from original target

package/src/config.js

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

package/src/flags/index.js

@@ -0,0 +1,191 @@
+import { _, console_with_prefix, safewrapClass } from '../utils'; // eslint-disable-line camelcase
+import { window } from '../window';
+
+var fetch = window['fetch'];
+var logger = console_with_prefix('flags');
+
+var FLAGS_CONFIG_KEY = 'flags';
+
+var CONFIG_CONTEXT = 'context';
+var CONFIG_DEFAULTS = {};
+CONFIG_DEFAULTS[CONFIG_CONTEXT] = {};
+
+/**
+ * FeatureFlagManager: support for Mixpanel's feature flagging product
+ * @constructor
+ */
+var FeatureFlagManager = function(initOptions) {
+    this.getMpConfig = initOptions.getConfigFunc;
+    this.getDistinctId = initOptions.getDistinctIdFunc;
+    this.track = initOptions.trackingFunc;
+};
+
+FeatureFlagManager.prototype.init = function() {
+    if (!minApisSupported()) {
+        logger.critical('Feature Flags unavailable: missing minimum required APIs');
+        return;
+    }
+
+    this.flags = null;
+    this.fetchFlags();
+
+    this.trackedFeatures = new Set();
+};
+
+FeatureFlagManager.prototype.getFullConfig = function() {
+    var ffConfig = this.getMpConfig(FLAGS_CONFIG_KEY);
+    if (!ffConfig) {
+        // flags are completely off
+        return {};
+    } else if (_.isObject(ffConfig)) {
+        return _.extend({}, CONFIG_DEFAULTS, ffConfig);
+    } else {
+        // config is non-object truthy value, return default
+        return CONFIG_DEFAULTS;
+    }
+};
+
+FeatureFlagManager.prototype.getConfig = function(key) {
+    return this.getFullConfig()[key];
+};
+
+FeatureFlagManager.prototype.isEnabled = function() {
+    return !!this.getMpConfig(FLAGS_CONFIG_KEY);
+};
+
+FeatureFlagManager.prototype.areFeaturesReady = function() {
+    if (!this.isEnabled()) {
+        logger.error('Feature Flags not enabled');
+    }
+    return !!this.flags;
+};
+
+FeatureFlagManager.prototype.fetchFlags = function() {
+    if (!this.isEnabled()) {
+        return;
+    }
+
+    var distinctId = this.getDistinctId();
+    logger.log('Fetching flags for distinct ID: ' + distinctId);
+    var reqParams = {
+        'context': _.extend({'distinct_id': distinctId}, this.getConfig(CONFIG_CONTEXT))
+    };
+    this.fetchPromise = window['fetch'](this.getMpConfig('api_host') + '/' + this.getMpConfig('api_routes')['flags'], {
+        'method': 'POST',
+        'headers': {
+            'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
+            'Content-Type': 'application/octet-stream'
+        },
+        'body': JSON.stringify(reqParams)
+    }).then(function(response) {
+        return response.json().then(function(responseBody) {
+            var responseFlags = responseBody['flags'];
+            if (!responseFlags) {
+                throw new Error('No flags in API response');
+            }
+            var flags = new Map();
+            _.each(responseFlags, function(data, key) {
+                flags.set(key, {
+                    'key': data['variant_key'],
+                    'data': data['variant_value']
+                });
+            });
+            this.flags = flags;
+        }.bind(this)).catch(function(error) {
+            logger.error(error);
+        });
+    }.bind(this)).catch(function() {});
+};
+
+FeatureFlagManager.prototype.getFeature = function(featureName, fallback) {
+    if (!this.fetchPromise) {
+        return new Promise(function(resolve) {
+            logger.critical('Feature Flags not initialized');
+            resolve(fallback);
+        });
+    }
+
+    return this.fetchPromise.then(function() {
+        return this.getFeatureSync(featureName, fallback);
+    }.bind(this)).catch(function(error) {
+        logger.error(error);
+        return fallback;
+    });
+};
+
+FeatureFlagManager.prototype.getFeatureSync = function(featureName, fallback) {
+    if (!this.areFeaturesReady()) {
+        logger.log('Flags not loaded yet');
+        return fallback;
+    }
+    var feature = this.flags.get(featureName);
+    if (!feature) {
+        logger.log('No flag found: "' + featureName + '"');
+        return fallback;
+    }
+    this.trackFeatureCheck(featureName, feature);
+    return feature;
+};
+
+FeatureFlagManager.prototype.getFeatureData = function(featureName, fallbackValue) {
+    return this.getFeature(featureName, {'data': fallbackValue}).then(function(feature) {
+        return feature['data'];
+    }).catch(function(error) {
+        logger.error(error);
+        return fallbackValue;
+    });
+};
+
+FeatureFlagManager.prototype.getFeatureDataSync = function(featureName, fallbackValue) {
+    return this.getFeatureSync(featureName, {'data': fallbackValue})['data'];
+};
+
+FeatureFlagManager.prototype.isFeatureEnabled = function(featureName, fallbackValue) {
+    return this.getFeatureData(featureName).then(function() {
+        return this.isFeatureEnabledSync(featureName, fallbackValue);
+    }.bind(this)).catch(function(error) {
+        logger.error(error);
+        return fallbackValue;
+    });
+};
+
+FeatureFlagManager.prototype.isFeatureEnabledSync = function(featureName, fallbackValue) {
+    fallbackValue = fallbackValue || false;
+    var val = this.getFeatureDataSync(featureName, fallbackValue);
+    if (val !== true && val !== false) {
+        logger.error('Feature flag "' + featureName + '" value: ' + val + ' is not a boolean; returning fallback value: ' + fallbackValue);
+        val = fallbackValue;
+    }
+    return val;
+};
+
+FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature) {
+    if (this.trackedFeatures.has(featureName)) {
+        return;
+    }
+    this.trackedFeatures.add(featureName);
+    this.track('$experiment_started', {
+        'Experiment name': featureName,
+        'Variant name': feature['key'],
+        '$experiment_type': 'feature_flag'
+    });
+};
+
+function minApisSupported() {
+    return !!fetch &&
+      typeof Promise !== 'undefined' &&
+      typeof Map !== 'undefined' &&
+      typeof Set !== 'undefined';
+}
+
+safewrapClass(FeatureFlagManager);
+
+FeatureFlagManager.prototype['are_features_ready'] = FeatureFlagManager.prototype.areFeaturesReady;
+FeatureFlagManager.prototype['get_feature'] = FeatureFlagManager.prototype.getFeature;
+FeatureFlagManager.prototype['get_feature_data'] = FeatureFlagManager.prototype.getFeatureData;
+FeatureFlagManager.prototype['get_feature_data_sync'] = FeatureFlagManager.prototype.getFeatureDataSync;
+FeatureFlagManager.prototype['get_feature_sync'] = FeatureFlagManager.prototype.getFeatureSync;
+FeatureFlagManager.prototype['is_feature_enabled'] = FeatureFlagManager.prototype.isFeatureEnabled;
+FeatureFlagManager.prototype['is_feature_enabled_sync'] = FeatureFlagManager.prototype.isFeatureEnabledSync;
+
+export { FeatureFlagManager };

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

@@ -4,6 +4,7 @@ import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice, NO
 import { isRecordingExpired } from './recorder/utils';
 import { window } from './window';
 import { Autocapture } from './autocapture';
+import { FeatureFlagManager } from './flags';
 import { FormTracker, LinkTracker } from './dom-trackers';
 import { RequestBatcher } from './request-batcher';
 import { MixpanelGroup } from './mixpanel-group';
@@ -86,10 +87,11 @@ if (navigator['sendBeacon']) {
 }
 
 var DEFAULT_API_ROUTES = {
-    'track': 'track/',
+    'track':  'track/',
     'engage': 'engage/',
     'groups': 'groups/',
-    'record': 'record/'
+    'record': 'record/',
+    'flags':  'flags/'
 };
 
 /*
@@ -107,6 +109,7 @@ var DEFAULT_CONFIG = {
     'cross_site_cookie':                 false,
     'cross_subdomain_cookie':            true,
     'error_reporter':                    NOOP_FUNC,
+    'flags':                             false,
     'persistence':                       'cookie',
     'persistence_name':                  '',
     'cookie_domain':                     '',
@@ -147,6 +150,7 @@ var DEFAULT_CONFIG = {
     'record_block_selector':             'img, video',
     'record_canvas':                     false,
     'record_collect_fonts':              false,
+    'record_heatmap_data':               false,
     'record_idle_timeout_ms':            30 * 60 * 1000, // 30 minutes
     'record_mask_text_class':            new RegExp('^(mp-mask|fs-mask|amp-mask|rr-mask|ph-mask)$'),
     'record_mask_text_selector':         '*',
@@ -362,6 +366,14 @@ MixpanelLib.prototype._init = function(token, config, name) {
         }, '');
     }
 
+    this.flags = new FeatureFlagManager({
+        getConfigFunc: _.bind(this.get_config, this),
+        getDistinctIdFunc: _.bind(this.get_distinct_id, this),
+        trackingFunc: _.bind(this.track, this)
+    });
+    this.flags.init();
+    this['flags'] = this.flags;
+
     this.autocapture = new Autocapture(this);
     this.autocapture.init();
 
@@ -487,6 +499,10 @@ MixpanelLib.prototype.resume_session_recording = function () {
     }
 };
 
+MixpanelLib.prototype.is_recording_heatmap_data = function () {
+    return this._get_session_replay_id() && this.get_config('record_heatmap_data');
+};
+
 MixpanelLib.prototype.get_session_recording_properties = function () {
     var props = {};
     var replay_id = this._get_session_replay_id();
@@ -1568,6 +1584,11 @@ MixpanelLib.prototype.identify = function(
             '$anon_distinct_id': previous_distinct_id
         }, {skip_hooks: true});
     }
+
+    // check feature flags again if distinct id has changed
+    if (new_distinct_id !== previous_distinct_id) {
+        this.flags.fetchFlags();
+    }
 };
 
 /**
@@ -1842,7 +1863,7 @@ MixpanelLib.prototype.set_config = function(config) {
         }
         Config.DEBUG = Config.DEBUG || this.get_config('debug');
 
-        if ('autocapture' in config && this.autocapture) {
+        if (('autocapture' in config || 'record_heatmap_data' in config) && this.autocapture) {
             this.autocapture.init();
         }
     }

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';

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/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})],
-};