mixpanel-browser 2.73.0 → 2.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.73.0",
+  "version": "2.74.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "module": "dist/mixpanel.module.js",
@@ -9,17 +9,29 @@
   },
   "scripts": {
     "build": "./build.sh",
+    "build-watch": "npx rollup -c rollup.config.mjs -w",
+    "build-watch:full": "FULL=1 npx rollup -c rollup.config.mjs -w",
     "build-dist": "DIST=1 ./build.sh",
     "build-full": "FULL=1 ./build.sh",
     "build-test-polyfill": "webpack tests/vendor/core-js-polyfills.src.js  tests/vendor/core-js-polyfills.js",
+    "build-browser-tests": "npx rollup -c tests/browser/client/rollup.config.mjs -w",
     "dox": "node doc/build-docs.js",
     "dox-publish": "rdme docs:single doc/readme.io/javascript-full-api-reference.md --key=$RDME_API_KEY --version=$RDME_DOC_VERSION",
-    "integration_test": "echo 'Browse to localhost:3000/tests' && node testServer.js",
+    "test-server": "echo 'Browse to localhost:3001/tests' && node testServer.js",
+    "test-server:background": "screen -S testServer -X stuff $^C; screen -X -S testServer quit; screen -d -m -S testServer bash -c 'npm run test-server; exec bash' && wait-on --timeout 10000 http://localhost:3001/tests",
     "lint": "eslint ./src",
+    "lint-fix": "eslint --fix ./src && eslint --fix ./tests/browser",
     "prepublishOnly": "npm run build-dist",
     "start": "pushd examples; python -m SimpleHTTPServer; popd",
     "test": "npm run lint && npm run unit-test",
+    "test:ci": "npm run lint && npm run unit-test:ci",
     "unit-test": "BABEL_ENV=test mocha --require babel-core/register tests/unit/*.js",
+    "unit-test:ci": "BABEL_ENV=test mocha --require babel-core/register tests/unit/*.js --reporter json --reporter-option output=tests/unit/results/results.json",
+    "integration-test:local": "wdio run tests/browser/wdio.local.mjs",
+    "integration-test:local:watch": "wdio run tests/browser/wdio.local.mjs --watch",
+    "integration-test:sauce": "wdio run tests/browser/wdio.sauce.mjs",
+    "integration-test": "DEV=1 npm run integration-test:local:watch",
+    "integration-test:full": "npm run integration-test:local:watch",
     "validate": "npm ls"
   },
   "types": "./src/index.d.ts",
@@ -33,36 +45,49 @@
     "url": "https://github.com/mixpanel/mixpanel-js/issues"
   },
   "homepage": "https://github.com/mixpanel/mixpanel-js",
+  "engines": {
+    "node": ">=20 <26"
+  },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "0.27.0",
     "@rollup/plugin-alias": "5.1.1",
+    "@rollup/plugin-commonjs": "28.0.3",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-swc": "0.4.0",
     "@swc/core": "1.11.7",
-    "babel": "6.5.2",
+    "@wdio/cli": "9.12.0",
+    "@wdio/junit-reporter": "9.12.2",
+    "@wdio/local-runner": "9.12.0",
+    "@wdio/mocha-framework": "9.11.0",
+    "@wdio/sauce-service": "9.21.0",
+    "@wdio/spec-reporter": "9.11.0",
     "babel-core": "6.7.2",
     "babel-preset-es2015": "6.6.0",
     "babelify": "6.1.2",
     "browserify": "10.2.4",
     "chai": "4.0.0",
+    "chromedriver": "134.0.3",
     "cookie-parser": "1.3.4",
     "core-js": "3.6.5",
     "dox": "0.9.0",
     "eslint": "4.18.2",
-    "express": "4.12.2",
+    "express": "5.2.1",
     "fake-indexeddb": "6.0.0",
     "jsdom": "16.5.0",
     "jsdom-global": "3.0.2",
     "localStorage": "1.0.4",
     "lodash": "4.17.21",
-    "mocha": "7.1.1",
+    "mocha": "11.1.0",
     "morgan": "1.9.1",
+    "pug": "3.0.3",
     "rdme": "7.5.0",
     "request": "2.88.0",
     "rollup": "4.34.9",
     "rollup-plugin-esbuild": "6.2.1",
     "sinon": "8.1.1",
     "sinon-chai": "3.5.0",
+    "wait-on": "8.0.3",
+    "wdio-ctrf-json-reporter": "0.0.13",
     "webpack": "1.12.2"
   },
   "dependencies": {

package/rollup.config.mjs

@@ -1,258 +1,288 @@
-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';
 import fs from 'fs';
 import path from 'path';
+import esbuild from 'rollup-plugin-esbuild';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import swc from '@rollup/plugin-swc';
+import browserTestBuilds from './tests/browser/client/rollup.config.mjs';
+
+const COMPILED_RRWEB_PATH = `build/rrweb-compiled.js`;
+const BUNDLED_RRWEB_PATH = `build/rrweb-bundled.js`;
 
-const COMPILED_RRWEB_PATH = 'build/rrweb-compiled.js';
-const BUNDLED_RRWEB_PATH = 'build/rrweb-bundled.js';
+// Delete output files at build start so build errors don't silently use stale files
+const cleanOnRebuild = () => {
+  let outputFiles = [];
+  return {
+    name: `clean-on-rebuild`,
+    options(opts) {
+      const outputs = Array.isArray(opts.output) ? opts.output : [opts.output];
+      outputFiles = outputs.map(o => o && o.file).filter(Boolean);
+    },
+    buildStart() {
+      // Delete outputs right before this specific build runs
+      for (const file of outputFiles) {
+        if (fs.existsSync(file)) {
+          fs.unlinkSync(file);
+        }
+      }
+    }
+  };
+};
+
+const withCleanOnRebuild = (builds) => builds.map(build => ({
+  ...build,
+  plugins: [cleanOnRebuild(), ...(build.plugins || [])]
+}));
 
 const aliasRrweb = () => alias({
-    entries: [
-        { find: /rrweb-entrypoint(?:\.js)?$/, replacement: COMPILED_RRWEB_PATH },
-    ]
+  entries: [
+    { find: /rrweb-entrypoint(?:\.js)?$/, replacement: COMPILED_RRWEB_PATH },
+  ]
 });
 
 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);
-            }
+  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;
-        }
+    } catch (err) {
+      console.warn(`Could not copy type files:`, err.message);
+      throw err;
     }
+  }
 });
 
 const COMMON_CLOSURE_FLAGS = {
-    compilation_level: 'ADVANCED_OPTIMIZATIONS',
-    language_in: 'ECMASCRIPT5',
-    externs: ['src/externs.js'],
+  compilation_level: `ADVANCED_OPTIMIZATIONS`,
+  language_in: `ECMASCRIPT5`,
+  externs: [`src/externs.js`],
+  create_source_map: true,
 };
 
 const MINIFY = process.env.MINIFY || process.env.FULL;
 
 // Main builds used to develop / iterate quickly
 const MAIN_BUILDS = [
-    {
-        'input': 'src/recorder/rrweb-entrypoint.js',
-        'output': [
-            {
-                file: BUNDLED_RRWEB_PATH,
-                format: 'es',
-            }
-        ],
-        plugins: [nodeResolve({browser: true})]
-    },
-    {
-        'input': BUNDLED_RRWEB_PATH,
-        'output': [
-            {
-                file: COMPILED_RRWEB_PATH,
-                format: 'es',
-            }
-        ],
-        plugins: [swc({swc: {jsc: {target: 'es5'}}})]
-    },
+  {
+    'input': `src/recorder/rrweb-entrypoint.js`,
+    'output': [
+      {
+        file: BUNDLED_RRWEB_PATH,
+        format: `es`,
+      }
+    ],
+    plugins: [nodeResolve({browser: true})]
+  },
+  {
+    'input': BUNDLED_RRWEB_PATH,
+    'output': [
+      {
+        file: COMPILED_RRWEB_PATH,
+        format: `es`,
+      }
+    ],
+    plugins: [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 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,
-            })
+  // 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"'})],
-            }
-        ],
-    },
+  ...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 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,
-            }),
-            copyTypes(),
-        ],
-    },
+  // 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,
+      }),
+      copyTypes(),
+    ],
+  },
 
 
-    // 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,
-            }),
-            copyTypes(),
-        ],
-    },
+  // 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,
+      }),
+      copyTypes(),
+    ],
+  },
 
 
-    // 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,
-            }),
-            copyTypes(),
-        ],
-    },
-    {
-        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,
-            }),
-            copyTypes(),
-        ],
-    }
+  // 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,
+      }),
+      copyTypes(),
+    ],
+  },
+  {
+    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,
+      }),
+      copyTypes(),
+    ],
+  },
+
+  ...browserTestBuilds,
 ];
 
-export default process.env.FULL ? ALL_BUILDS : MAIN_BUILDS;
+const builds = process.env.FULL ? ALL_BUILDS : MAIN_BUILDS;
+export default withCleanOnRebuild(builds);

package/src/autocapture/utils.js

@@ -505,6 +505,18 @@ function shouldTrackDomEvent(el, ev) {
     }
 }
 
+function elementLooksSensitive(el) {
+    var name = (el.name || el.id || '').toString().toLowerCase();
+    if (typeof name === 'string') { // it's possible for el.name or el.id to be a DOM element if el is a form with a child input[name="name"]
+        var sensitiveNameRegex = /^cc|cardnum|ccnum|creditcard|csc|cvc|cvv|exp|pass|pwd|routing|seccode|securitycode|securitynum|socialsec|socsec|ssn/i;
+        if (sensitiveNameRegex.test(name.replace(/[^a-zA-Z0-9]/g, ''))) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 /*
  * Check whether a DOM element should be "tracked" or if it may contain sensitive data
  * using a variety of heuristics.
@@ -557,13 +569,8 @@ function shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors)
         }
     }
 
-    // filter out data from fields that look like sensitive fields
-    var name = el.name || el.id || '';
-    if (typeof name === 'string') { // it's possible for el.name or el.id to be a DOM element if el is a form with a child input[name="name"]
-        var sensitiveNameRegex = /^cc|cardnum|ccnum|creditcard|csc|cvc|cvv|exp|pass|pwd|routing|seccode|securitycode|securitynum|socialsec|socsec|ssn/i;
-        if (sensitiveNameRegex.test(name.replace(/[^a-zA-Z0-9]/g, ''))) {
-            return false;
-        }
+    if (elementLooksSensitive(el)) {
+        return false;
     }
 
     return true;
@@ -775,6 +782,7 @@ function getClickEventTargetElement(event) {
 export {
     EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_INPUT, EV_LOAD,EV_MP_LOCATION_CHANGE, EV_POPSTATE,
     EV_SCROLL, EV_SCROLLEND, EV_SELECT, EV_SUBMIT, EV_TOGGLE, EV_VISIBILITYCHANGE,
+    elementLooksSensitive,
     getClickEventComposedPath,
     getClickEventTargetElement,
     getPolyfillScrollEndFunction,

package/src/config.js

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