mixpanel-browser 2.74.0 → 2.76.0

package/rollup.config.mjs

@@ -1,5 +1,6 @@
 import alias from '@rollup/plugin-alias';
 import closureCompiler from '@ampproject/rollup-plugin-closure-compiler';
+import commonjs from '@rollup/plugin-commonjs';
 import fs from 'fs';
 import path from 'path';
 import esbuild from 'rollup-plugin-esbuild';
@@ -7,21 +8,52 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import swc from '@rollup/plugin-swc';
 import browserTestBuilds from './tests/browser/client/rollup.config.mjs';
 
+// Capture the hash of async-loaded bundles so we can inject the correct filenames into the main build
+const asyncBundleManifest = {};
+
 const COMPILED_RRWEB_PATH = `build/rrweb-compiled.js`;
 const BUNDLED_RRWEB_PATH = `build/rrweb-bundled.js`;
 
+const ASYNC_MODULE_BUILD_PATH = `build/async-modules`;
+const RECORDER_BUNDLE_NAME = `mixpanel_recorder`;
+const RECORDER_MIN_BUNDLE_NAME = `mixpanel_recorder_min`;
+const TARGETING_BUNDLE_NAME = `mixpanel_targeting`;
+const TARGETING_MIN_BUNDLE_NAME = `mixpanel_targeting_min`;
+
+
 // Delete output files at build start so build errors don't silently use stale files
+let hasCleanedOnFull = false;
 const cleanOnRebuild = () => {
-  let outputFiles = [];
+  let filesToClean = [];
   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);
+      filesToClean = outputs.flatMap(o => {
+        if (o.file) {
+          return [o.file];
+        }
+
+        if (o.dir && o.entryFileNames) {
+          if (!fs.existsSync(o.dir)) return [];
+
+          // match against regexes like mixpanel-recorder-[hash].js to find the actual output file(s) to clean up
+          const regex = new RegExp(`^` + o.entryFileNames.replace(/\./g, `\\.`).replace(`[hash]`, `.+`));
+          return fs.readdirSync(o.dir).filter(f => regex.test(f)).map(f => path.join(o.dir, f));
+        }
+        return [];
+      });
     },
     buildStart() {
-      // Delete outputs right before this specific build runs
-      for (const file of outputFiles) {
+      if (process.env.FULL && !hasCleanedOnFull) {
+        if (fs.existsSync(`build`)) {
+          fs.rmSync(`build`, {recursive: true});
+        }
+        hasCleanedOnFull = true;
+        return;
+      }
+
+      for (const file of filesToClean) {
         if (fs.existsSync(file)) {
           fs.unlinkSync(file);
         }
@@ -30,10 +62,53 @@ const cleanOnRebuild = () => {
   };
 };
 
-const withCleanOnRebuild = (builds) => builds.map(build => ({
-  ...build,
-  plugins: [cleanOnRebuild(), ...(build.plugins || [])]
-}));
+// Capture the resolved (hashed) output filenames from recorder/targeting builds.
+// Stores them in `asyncBundleManifest` so `injectAsyncBundleNames` can inject them into the main build.
+const writeToManifest = () => ({
+  name: `write-to-manifest`,
+  generateBundle(options, bundle) {
+    for (const chunk of Object.values(bundle)) {
+      if (chunk.type === `chunk`) {
+        asyncBundleManifest[options.name] = chunk.fileName;
+      }
+    }
+  }
+});
+
+// Replace __MP_*__ placeholders in src/config.js with build-time values.
+// For the main library build (which runs after), they will be the real hashed filenames.
+const injectAsyncBundleNames = () => ({
+  name: `inject-async-bundle-names`,
+  renderChunk(code, _chunk, outputOptions) {
+    const isMinified = outputOptions.file && outputOptions.file.endsWith(`.min.js`);
+
+    let recorderBundleName = RECORDER_BUNDLE_NAME;
+    let targetingBundleName = TARGETING_BUNDLE_NAME;
+    if (isMinified) {
+      recorderBundleName = RECORDER_MIN_BUNDLE_NAME;
+      targetingBundleName = TARGETING_MIN_BUNDLE_NAME;
+    }
+
+    if (!asyncBundleManifest[recorderBundleName] || !asyncBundleManifest[targetingBundleName]) {
+      throw new Error(`Async bundle names not found in manifest. Manifest contents: ${JSON.stringify(asyncBundleManifest)}`);
+    }
+
+    const replaced = code
+      .replace(`__MP_RECORDER_FILENAME__`, asyncBundleManifest[recorderBundleName])
+      .replace(`__MP_TARGETING_FILENAME__`, asyncBundleManifest[targetingBundleName]);
+    return { code: replaced, map: null };
+  }
+});
+
+const withBasePlugins = (builds) => builds.map((build) => {
+  return {
+    ...build,
+    plugins: [
+      cleanOnRebuild(),
+      ...(build.plugins || [])
+    ]
+  };
+});
 
 const aliasRrweb = () => alias({
   entries: [
@@ -68,6 +143,96 @@ const COMMON_CLOSURE_FLAGS = {
 
 const MINIFY = process.env.MINIFY || process.env.FULL;
 
+/**
+ * Async bundles for the recorder and targeting modules.
+ *
+ * These are loaded on-demand by the main library at runtime via script injection.
+ * Filenames include a content hash so the main build can reference an exact, immutable
+ * bundle — guaranteeing the async module matches what the library expects.
+ * The hash is captured in `asyncBundleManifest` and injected into the main build
+ * via `injectAsyncBundleNames`.
+ *
+ * We also produce non-hashed "legacy" versions of each bundle for backward compatibility
+ * with customers who proxy specific filenames from the Mixpanel CDN.
+ */
+const ASYNC_BUNDLE_BUILDS = [
+  // Recorder bundle (wraps rrweb)
+  {
+    input: `src/recorder/index.js`,
+    output: [
+      {
+        dir: ASYNC_MODULE_BUILD_PATH,
+        entryFileNames: `mixpanel-recorder-[hash].js`,
+        name: RECORDER_BUNDLE_NAME,
+        format: `iife`,
+      },
+      {
+        file: `build/mixpanel-recorder.js`,
+        name: `legacy_recorder_bundle`,
+        format: `iife`,
+      },
+      ...(MINIFY
+        ? [
+          {
+            dir: ASYNC_MODULE_BUILD_PATH,
+            entryFileNames: `mixpanel-recorder-[hash].min.js`,
+            name: RECORDER_MIN_BUNDLE_NAME,
+            format: `iife`,
+            plugins: [esbuild({target: `es5`, minify: true, sourceMap: true})],
+            sourcemap: true,
+          },
+          {
+            file: `build/mixpanel-recorder.min.js`,
+            name: `legacy_recorder_min_bundle`,
+            format: `iife`,
+            plugins: [esbuild({target: `es5`, minify: true, sourceMap: true})],
+            sourcemap: true,
+          },
+        ]
+        : []),
+    ],
+    plugins: [aliasRrweb(), writeToManifest()],
+  },
+
+  // Targeting bundle (feature flags / experiments)
+  {
+    input: `src/targeting/index.js`,
+    output: [
+      {
+        dir: ASYNC_MODULE_BUILD_PATH,
+        entryFileNames: `mixpanel-targeting-[hash].js`,
+        name: TARGETING_BUNDLE_NAME,
+        format: `iife`,
+      },
+      {
+        file: `build/mixpanel-targeting.js`,
+        name: `legacy_targeting_bundle`,
+        format: `iife`,
+      },
+      ...(MINIFY
+        ? [
+          {
+            dir: ASYNC_MODULE_BUILD_PATH,
+            entryFileNames: `mixpanel-targeting-[hash].min.js`,
+            name: TARGETING_MIN_BUNDLE_NAME,
+            format: `iife`,
+            plugins: [esbuild({target: `es5`, minify: true, sourceMap: true})],
+            sourcemap: true,
+          },
+          {
+            file: `build/mixpanel-targeting.min.js`,
+            name: `legacy_targeting_min_bundle`,
+            format: `iife`,
+            plugins: [esbuild({target: `es5`, minify: true, sourceMap: true})],
+            sourcemap: true,
+          },
+        ]
+        : []),
+    ],
+    plugins: [commonjs(), nodeResolve({browser: true}), writeToManifest()],
+  },
+];
+
 // Main builds used to develop / iterate quickly
 const MAIN_BUILDS = [
   {
@@ -91,30 +256,7 @@ const MAIN_BUILDS = [
     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()],
-  },
+  ...ASYNC_BUNDLE_BUILDS,
 
   // IIFE main mixpanel build
   {
@@ -136,6 +278,7 @@ const MAIN_BUILDS = [
         : []),
     ],
     plugins: [
+      injectAsyncBundleNames(),
       nodeResolve({
         browser: true,
         main: true,
@@ -203,8 +346,7 @@ const ALL_BUILDS = [
     ],
   },
 
-
-  // Modules builds that are bundled with the recorder
+  // Modules builds that are bundled with the recorder and targeting
   {
     input: `src/loaders/loader-module.js`,
     output: [
@@ -230,6 +372,7 @@ const ALL_BUILDS = [
       },
     ],
     plugins: [
+      commonjs(),
       aliasRrweb(),
       nodeResolve({
         browser: true,
@@ -240,7 +383,6 @@ const ALL_BUILDS = [
     ],
   },
 
-
   // Alternative CJS builds without recorder
   {
     input: `src/loaders/loader-module-core.js`,
@@ -262,8 +404,14 @@ const ALL_BUILDS = [
     ],
   },
   {
-    input: `src/loaders/loader-module-with-async-recorder.js`,
+    input: `src/loaders/loader-module-with-async-modules.js`,
     output: [
+      {
+        file: `build/mixpanel-with-async-modules.cjs.js`,
+        name: `mixpanel`,
+        format: `cjs`,
+      },
+      // Backward compatibility: keep old output filename for existing users
       {
         file: `build/mixpanel-with-async-recorder.cjs.js`,
         name: `mixpanel`,
@@ -271,6 +419,7 @@ const ALL_BUILDS = [
       },
     ],
     plugins: [
+      injectAsyncBundleNames(),
       aliasRrweb(),
       nodeResolve({
         browser: true,
@@ -280,9 +429,9 @@ const ALL_BUILDS = [
       copyTypes(),
     ],
   },
-
-  ...browserTestBuilds,
 ];
 
-const builds = process.env.FULL ? ALL_BUILDS : MAIN_BUILDS;
-export default withCleanOnRebuild(builds);
+const srcBuilds = process.env.FULL ? ALL_BUILDS : MAIN_BUILDS;
+const builds = [...srcBuilds, ...browserTestBuilds];
+
+export default withBasePlugins(builds);

package/src/autocapture/index.js

@@ -1,4 +1,4 @@
-import { _, document, safewrap, safewrapClass } from '../utils';
+import { _, document, safewrap, safewrapClass, urlMatchesRegexList } from '../utils';
 import { window } from '../window';
 import {
     getPolyfillScrollEndFunction, getPropsForDOMEvent, logger, minDOMApisSupported,
@@ -112,27 +112,15 @@ Autocapture.prototype.getConfig = function(key) {
 };
 
 Autocapture.prototype.currentUrlBlocked = function() {
-    var i;
     var currentUrl = _.info.currentUrl();
 
     var allowUrlRegexes = this.getConfig(CONFIG_ALLOW_URL_REGEXES) || [];
     if (allowUrlRegexes.length) {
         // we're using an allowlist, only track if current URL matches
-        var allowed = false;
-        for (i = 0; i < allowUrlRegexes.length; i++) {
-            var allowRegex = allowUrlRegexes[i];
-            try {
-                if (currentUrl.match(allowRegex)) {
-                    allowed = true;
-                    break;
-                }
-            } catch (err) {
-                logger.critical('Error while checking block URL regex: ' + allowRegex, err);
-                return true;
-            }
-        }
-        if (!allowed) {
-            // wasn't allowed by any regex
+        try {
+            return !urlMatchesRegexList(currentUrl, allowUrlRegexes);
+        } catch (err) {
+            logger.critical('Error while checking block URL regexes: ', err);
             return true;
         }
     }
@@ -142,17 +130,12 @@ Autocapture.prototype.currentUrlBlocked = function() {
         return false;
     }
 
-    for (i = 0; i < blockUrlRegexes.length; i++) {
-        try {
-            if (currentUrl.match(blockUrlRegexes[i])) {
-                return true;
-            }
-        } catch (err) {
-            logger.critical('Error while checking block URL regex: ' + blockUrlRegexes[i], err);
-            return true;
-        }
+    try {
+        return urlMatchesRegexList(currentUrl, blockUrlRegexes);
+    } catch (err) {
+        logger.critical('Error while checking block URL regexes: ', err);
+        return true;
     }
-    return false;
 };
 
 Autocapture.prototype.pageviewTrackingConfig = function() {

package/src/config.js

@@ -1,6 +1,12 @@
-var Config = {
+export var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.74.0'
+    LIB_VERSION: '2.76.0'
 };
 
-export default Config;
+// Window global names for async modules
+export var TARGETING_GLOBAL_NAME = '__mp_targeting';
+export var RECORDER_GLOBAL_NAME = '__mp_recorder';
+
+// Constants that are injected at build-time for the names of async modules.
+export var RECORDER_FILENAME = '__MP_RECORDER_FILENAME__';
+export var TARGETING_FILENAME = '__MP_TARGETING_FILENAME__';