@v-tilt/browser 1.0.5 → 1.0.7

package/lib/utils/user-agent-utils.js

@@ -0,0 +1,423 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectDeviceType = exports.detectDevice = exports.detectOS = exports.detectBrowserVersion = exports.detectBrowser = void 0;
+/**
+ * this device detection code is (at time of writing) about 3% of the size of the entire library
+ * this is mostly because the identifiers user in regexes and results can't be minified away since
+ * they have meaning
+ *
+ * so, there are some pre-uglifying choices in the code to help reduce the size
+ * e.g. many repeated strings are stored as variables and then old-fashioned concatenated together
+ *
+ * TL;DR here be dragons
+ */
+const FACEBOOK = "Facebook";
+const MOBILE = "Mobile";
+const IOS = "iOS";
+const ANDROID = "Android";
+const TABLET = "Tablet";
+const ANDROID_TABLET = ANDROID + " " + TABLET;
+const IPAD = "iPad";
+const APPLE = "Apple";
+const APPLE_WATCH = APPLE + " Watch";
+const SAFARI = "Safari";
+const BLACKBERRY = "BlackBerry";
+const SAMSUNG = "Samsung";
+const SAMSUNG_BROWSER = SAMSUNG + "Browser";
+const SAMSUNG_INTERNET = SAMSUNG + " Internet";
+const CHROME = "Chrome";
+const CHROME_OS = CHROME + " OS";
+const CHROME_IOS = CHROME + " " + IOS;
+const INTERNET_EXPLORER = "Internet Explorer";
+const INTERNET_EXPLORER_MOBILE = INTERNET_EXPLORER + " " + MOBILE;
+const OPERA = "Opera";
+const OPERA_MINI = OPERA + " Mini";
+const EDGE = "Edge";
+const MICROSOFT_EDGE = "Microsoft " + EDGE;
+const FIREFOX = "Firefox";
+const FIREFOX_IOS = FIREFOX + " " + IOS;
+const NINTENDO = "Nintendo";
+const PLAYSTATION = "PlayStation";
+const XBOX = "Xbox";
+const ANDROID_MOBILE = ANDROID + " " + MOBILE;
+const MOBILE_SAFARI = MOBILE + " " + SAFARI;
+const WINDOWS = "Windows";
+const WINDOWS_PHONE = WINDOWS + " Phone";
+const NOKIA = "Nokia";
+const OUYA = "Ouya";
+const GENERIC = "Generic";
+const GENERIC_MOBILE = GENERIC + " " + MOBILE.toLowerCase();
+const GENERIC_TABLET = GENERIC + " " + TABLET.toLowerCase();
+const KONQUEROR = "Konqueror";
+const BROWSER_VERSION_REGEX_SUFFIX = "(\\d+(\\.\\d+)?)";
+const DEFAULT_BROWSER_VERSION_REGEX = new RegExp("Version/" + BROWSER_VERSION_REGEX_SUFFIX);
+const XBOX_REGEX = new RegExp(XBOX, "i");
+const PLAYSTATION_REGEX = new RegExp(PLAYSTATION + " \\w+", "i");
+const NINTENDO_REGEX = new RegExp(NINTENDO + " \\w+", "i");
+const BLACKBERRY_REGEX = new RegExp(BLACKBERRY + "|PlayBook|BB10", "i");
+const windowsVersionMap = {
+    "NT3.51": "NT 3.11",
+    "NT4.0": "NT 4.0",
+    "5.0": "2000",
+    "5.1": "XP",
+    "5.2": "XP",
+    "6.0": "Vista",
+    "6.1": "7",
+    "6.2": "8",
+    "6.3": "8.1",
+    "6.4": "10",
+    "10.0": "10",
+};
+/**
+ * Helper function to check if string includes substring (case-insensitive)
+ */
+function includes(str, substr) {
+    return str.toLowerCase().includes(substr.toLowerCase());
+}
+/**
+ * Safari detection turns out to be complicated. For e.g. https://stackoverflow.com/a/29696509
+ * We can be slightly loose because some options have been ruled out (e.g. firefox on iOS)
+ * before this check is made
+ */
+function isSafari(userAgent) {
+    return (includes(userAgent, SAFARI) &&
+        !includes(userAgent, CHROME) &&
+        !includes(userAgent, ANDROID));
+}
+const safariCheck = (ua, vendor) => (vendor && includes(vendor, APPLE)) || isSafari(ua);
+/**
+ * This function detects which browser is running this script.
+ * The order of the checks are important since many user agents
+ * include keywords used in later checks.
+ */
+const detectBrowser = function (user_agent, vendor) {
+    vendor = vendor || ""; // vendor is undefined for at least IE9
+    if (includes(user_agent, " OPR/") && includes(user_agent, "Mini")) {
+        return OPERA_MINI;
+    }
+    else if (includes(user_agent, " OPR/")) {
+        return OPERA;
+    }
+    else if (BLACKBERRY_REGEX.test(user_agent)) {
+        return BLACKBERRY;
+    }
+    else if (includes(user_agent, "IE" + MOBILE) ||
+        includes(user_agent, "WPDesktop")) {
+        return INTERNET_EXPLORER_MOBILE;
+    }
+    else if (includes(user_agent, SAMSUNG_BROWSER)) {
+        return SAMSUNG_INTERNET;
+    }
+    else if (includes(user_agent, EDGE) || includes(user_agent, "Edg/")) {
+        return MICROSOFT_EDGE;
+    }
+    else if (includes(user_agent, "FBIOS")) {
+        return FACEBOOK + " " + MOBILE;
+    }
+    else if (includes(user_agent, "UCWEB") ||
+        includes(user_agent, "UCBrowser")) {
+        return "UC Browser";
+    }
+    else if (includes(user_agent, "CriOS")) {
+        return CHROME_IOS;
+    }
+    else if (includes(user_agent, "CrMo")) {
+        return CHROME;
+    }
+    else if (includes(user_agent, CHROME)) {
+        return CHROME;
+    }
+    else if (includes(user_agent, ANDROID) && includes(user_agent, SAFARI)) {
+        return ANDROID_MOBILE;
+    }
+    else if (includes(user_agent, "FxiOS")) {
+        return FIREFOX_IOS;
+    }
+    else if (includes(user_agent.toLowerCase(), KONQUEROR.toLowerCase())) {
+        return KONQUEROR;
+    }
+    else if (safariCheck(user_agent, vendor)) {
+        return includes(user_agent, MOBILE) ? MOBILE_SAFARI : SAFARI;
+    }
+    else if (includes(user_agent, FIREFOX)) {
+        return FIREFOX;
+    }
+    else if (includes(user_agent, "MSIE") || includes(user_agent, "Trident/")) {
+        return INTERNET_EXPLORER;
+    }
+    else if (includes(user_agent, "Gecko")) {
+        return FIREFOX;
+    }
+    return "";
+};
+exports.detectBrowser = detectBrowser;
+const versionRegexes = {
+    [INTERNET_EXPLORER_MOBILE]: [
+        new RegExp("rv:" + BROWSER_VERSION_REGEX_SUFFIX),
+    ],
+    [MICROSOFT_EDGE]: [new RegExp(EDGE + "?\\/" + BROWSER_VERSION_REGEX_SUFFIX)],
+    [CHROME]: [
+        new RegExp("(" + CHROME + "|CrMo)\\/" + BROWSER_VERSION_REGEX_SUFFIX),
+    ],
+    [CHROME_IOS]: [new RegExp("CriOS\\/" + BROWSER_VERSION_REGEX_SUFFIX)],
+    "UC Browser": [
+        new RegExp("(UCBrowser|UCWEB)\\/" + BROWSER_VERSION_REGEX_SUFFIX),
+    ],
+    [SAFARI]: [DEFAULT_BROWSER_VERSION_REGEX],
+    [MOBILE_SAFARI]: [DEFAULT_BROWSER_VERSION_REGEX],
+    [OPERA]: [
+        new RegExp("(" + OPERA + "|OPR)\\/" + BROWSER_VERSION_REGEX_SUFFIX),
+    ],
+    [FIREFOX]: [new RegExp(FIREFOX + "\\/" + BROWSER_VERSION_REGEX_SUFFIX)],
+    [FIREFOX_IOS]: [new RegExp("FxiOS\\/" + BROWSER_VERSION_REGEX_SUFFIX)],
+    [KONQUEROR]: [
+        new RegExp("Konqueror[:/]?" + BROWSER_VERSION_REGEX_SUFFIX, "i"),
+    ],
+    // not every blackberry user agent has the version after the name
+    [BLACKBERRY]: [
+        new RegExp(BLACKBERRY + " " + BROWSER_VERSION_REGEX_SUFFIX),
+        DEFAULT_BROWSER_VERSION_REGEX,
+    ],
+    [ANDROID_MOBILE]: [
+        new RegExp("android\\s" + BROWSER_VERSION_REGEX_SUFFIX, "i"),
+    ],
+    [SAMSUNG_INTERNET]: [
+        new RegExp(SAMSUNG_BROWSER + "\\/" + BROWSER_VERSION_REGEX_SUFFIX),
+    ],
+    [INTERNET_EXPLORER]: [
+        new RegExp("(rv:|MSIE )" + BROWSER_VERSION_REGEX_SUFFIX),
+    ],
+    Mozilla: [new RegExp("rv:" + BROWSER_VERSION_REGEX_SUFFIX)],
+};
+/**
+ * This function detects which browser version is running this script,
+ * parsing major and minor version (e.g., 42.1). User agent strings from:
+ * http://www.useragentstring.com/pages/useragentstring.php
+ *
+ * `navigator.vendor` is passed in and used to help with detecting certain browsers
+ * NB `navigator.vendor` is deprecated and not present in every browser
+ */
+const detectBrowserVersion = function (userAgent, vendor) {
+    const browser = (0, exports.detectBrowser)(userAgent, vendor);
+    const regexes = versionRegexes[browser];
+    if (regexes === undefined) {
+        return null;
+    }
+    for (let i = 0; i < regexes.length; i++) {
+        const regex = regexes[i];
+        const matches = userAgent.match(regex);
+        if (matches) {
+            return parseFloat(matches[matches.length - 2]);
+        }
+    }
+    return null;
+};
+exports.detectBrowserVersion = detectBrowserVersion;
+/**
+ * Helper to check if value is a function (type guard)
+ */
+function isFunction(value) {
+    return typeof value === "function";
+}
+// to avoid repeating regexes or calling them twice, we have an array of matches
+// the first regex that matches uses its matcher function to return the result
+const osMatchers = [
+    [
+        new RegExp(XBOX + "; " + XBOX + " (.*?)[);]", "i"),
+        (match) => {
+            return [XBOX, (match && match[1]) || ""];
+        },
+    ],
+    [new RegExp(NINTENDO, "i"), [NINTENDO, ""]],
+    [new RegExp(PLAYSTATION, "i"), [PLAYSTATION, ""]],
+    [BLACKBERRY_REGEX, [BLACKBERRY, ""]],
+    [
+        new RegExp(WINDOWS, "i"),
+        (_, user_agent) => {
+            if (/Phone/.test(user_agent) || /WPDesktop/.test(user_agent)) {
+                return [WINDOWS_PHONE, ""];
+            }
+            // not all JS versions support negative lookbehind, so we need two checks here
+            if (new RegExp(MOBILE).test(user_agent) &&
+                !/IEMobile\b/.test(user_agent)) {
+                return [WINDOWS + " " + MOBILE, ""];
+            }
+            const match = /Windows NT ([0-9.]+)/i.exec(user_agent);
+            if (match && match[1]) {
+                const version = match[1];
+                let osVersion = windowsVersionMap[version] || "";
+                if (/arm/i.test(user_agent)) {
+                    osVersion = "RT";
+                }
+                return [WINDOWS, osVersion];
+            }
+            return [WINDOWS, ""];
+        },
+    ],
+    [
+        /((iPhone|iPad|iPod).*?OS (\d+)_(\d+)_?(\d+)?|iPhone)/,
+        (match) => {
+            if (match && match[3]) {
+                const versionParts = [match[3], match[4], match[5] || "0"];
+                return [IOS, versionParts.join(".")];
+            }
+            return [IOS, ""];
+        },
+    ],
+    [
+        /(watch.*\/(\d+\.\d+\.\d+)|watch os,(\d+\.\d+),)/i,
+        (match) => {
+            // e.g. Watch4,3/5.3.8 (16U680)
+            let version = "";
+            if (match && match.length >= 3) {
+                version = match[2] === undefined ? match[3] : match[2];
+            }
+            return ["watchOS", version];
+        },
+    ],
+    [
+        new RegExp("(" + ANDROID + " (\\d+)\\.(\\d+)\\.?(\\d+)?|" + ANDROID + ")", "i"),
+        (match) => {
+            if (match && match[2]) {
+                const versionParts = [match[2], match[3], match[4] || "0"];
+                return [ANDROID, versionParts.join(".")];
+            }
+            return [ANDROID, ""];
+        },
+    ],
+    [
+        /Mac OS X (\d+)[_.](\d+)[_.]?(\d+)?/i,
+        (match) => {
+            const result = ["Mac OS X", ""];
+            if (match && match[1]) {
+                const versionParts = [match[1], match[2], match[3] || "0"];
+                result[1] = versionParts.join(".");
+            }
+            return result;
+        },
+    ],
+    [
+        /Mac/i,
+        // mop up a few non-standard UAs that should match mac
+        ["Mac OS X", ""],
+    ],
+    [/CrOS/, [CHROME_OS, ""]],
+    [/Linux|debian/i, ["Linux", ""]],
+];
+const detectOS = function (user_agent) {
+    for (let i = 0; i < osMatchers.length; i++) {
+        const [rgex, resultOrFn] = osMatchers[i];
+        const match = rgex.exec(user_agent);
+        if (match) {
+            let result;
+            if (isFunction(resultOrFn)) {
+                result = resultOrFn(match, user_agent);
+            }
+            else {
+                result = resultOrFn;
+            }
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return ["", ""];
+};
+exports.detectOS = detectOS;
+const detectDevice = function (user_agent) {
+    if (NINTENDO_REGEX.test(user_agent)) {
+        return NINTENDO;
+    }
+    else if (PLAYSTATION_REGEX.test(user_agent)) {
+        return PLAYSTATION;
+    }
+    else if (XBOX_REGEX.test(user_agent)) {
+        return XBOX;
+    }
+    else if (new RegExp(OUYA, "i").test(user_agent)) {
+        return OUYA;
+    }
+    else if (new RegExp("(" + WINDOWS_PHONE + "|WPDesktop)", "i").test(user_agent)) {
+        return WINDOWS_PHONE;
+    }
+    else if (/iPad/.test(user_agent)) {
+        return IPAD;
+    }
+    else if (/iPod/.test(user_agent)) {
+        return "iPod Touch";
+    }
+    else if (/iPhone/.test(user_agent)) {
+        return "iPhone";
+    }
+    else if (/(watch)(?: ?os[,/]|\d,\d\/)[\d.]+/i.test(user_agent)) {
+        return APPLE_WATCH;
+    }
+    else if (BLACKBERRY_REGEX.test(user_agent)) {
+        return BLACKBERRY;
+    }
+    else if (/(kobo)\s(ereader|touch)/i.test(user_agent)) {
+        return "Kobo";
+    }
+    else if (new RegExp(NOKIA, "i").test(user_agent)) {
+        return NOKIA;
+    }
+    else if (
+    // Kindle Fire without Silk / Echo Show
+    /(kf[a-z]{2}wi|aeo[c-r]{2})( bui|\))/i.test(user_agent) ||
+        // Kindle Fire HD
+        /(kf[a-z]+)( bui|\)).+silk\//i.test(user_agent)) {
+        return "Kindle Fire";
+    }
+    else if (/(Android|ZTE)/i.test(user_agent)) {
+        if (!new RegExp(MOBILE).test(user_agent) ||
+            /(9138B|TB782B|Nexus [97]|pixel c|HUAWEISHT|BTV|noble nook|smart ultra 6)/i.test(user_agent)) {
+            if ((/pixel[\daxl ]{1,6}/i.test(user_agent) &&
+                !/pixel c/i.test(user_agent)) ||
+                /(huaweimed-al00|tah-|APA|SM-G92|i980|zte|U304AA)/i.test(user_agent) ||
+                (/lmy47v/i.test(user_agent) && !/QTAQZ3/i.test(user_agent))) {
+                return ANDROID;
+            }
+            return ANDROID_TABLET;
+        }
+        else {
+            return ANDROID;
+        }
+    }
+    else if (new RegExp("(pda|" + MOBILE + ")", "i").test(user_agent)) {
+        return GENERIC_MOBILE;
+    }
+    else if (new RegExp(TABLET, "i").test(user_agent) &&
+        !new RegExp(TABLET + " pc", "i").test(user_agent)) {
+        return GENERIC_TABLET;
+    }
+    else {
+        return "";
+    }
+};
+exports.detectDevice = detectDevice;
+const detectDeviceType = function (user_agent) {
+    const device = (0, exports.detectDevice)(user_agent);
+    if (device === IPAD ||
+        device === ANDROID_TABLET ||
+        device === "Kobo" ||
+        device === "Kindle Fire" ||
+        device === GENERIC_TABLET) {
+        return TABLET;
+    }
+    else if (device === NINTENDO ||
+        device === XBOX ||
+        device === PLAYSTATION ||
+        device === OUYA) {
+        return "Console";
+    }
+    else if (device === APPLE_WATCH) {
+        return "Wearable";
+    }
+    else if (device) {
+        return MOBILE;
+    }
+    else {
+        return "Desktop";
+    }
+};
+exports.detectDeviceType = detectDeviceType;

package/lib/vtilt.d.ts

@@ -1,14 +1,59 @@
 import { VTiltConfig, EventPayload } from "./types";
+import { TrackingManager } from "./tracking";
+import { HistoryAutocapture } from "./extensions/history-autocapture";
 export declare class VTilt {
     private configManager;
-    private trackingManager;
+    trackingManager: TrackingManager;
     private webVitalsManager;
-    private initialized;
+    historyAutocapture?: HistoryAutocapture;
+    __loaded: boolean;
+    private _initialPageviewCaptured;
+    private _visibilityStateListener;
     constructor(config?: Partial<VTiltConfig>);
     /**
-     * Initialize VTilt tracking
+     * Initializes a new instance of the VTilt tracking object.
+     *
+     * @remarks
+     * All new instances are added to the main vt object as sub properties (such as
+     * `vt.library_name`) and also returned by this function.
+     *
+     * @example
+     * ```js
+     * // basic initialization
+     * vt.init('<project_id>', {
+     *     api_host: '<client_api_host>'
+     * })
+     * ```
+     *
+     * @example
+     * ```js
+     * // multiple instances
+     * vt.init('<project_id>', {}, 'project1')
+     * vt.init('<project_id>', {}, 'project2')
+     * ```
+     *
+     * @public
+     *
+     * @param projectId - Your VTilt project ID
+     * @param config - A dictionary of config options to override
+     * @param name - The name for the new VTilt instance that you want created
+     *
+     * @returns The newly initialized VTilt instance
+     */
+    init(projectId: string, config?: Partial<VTiltConfig>, name?: string): VTilt;
+    /**
+     * Handles the actual initialization logic for a VTilt instance.
+     * This internal method should only be called by `init()`.
+     * Follows the PostHog convention of using a private `_init()` method for instance setup.
+     */
+    private _init;
+    /**
+     * Returns a string representation of the instance name (PostHog-style)
+     * Used for debugging and logging
+     *
+     * @internal
      */
-    init(): void;
+    toString(): string;
     /**
      * Track a custom event
      */
@@ -100,17 +145,10 @@ export declare class VTilt {
      */
     createAlias(alias: string, original?: string): void;
     /**
-     * Setup page tracking with history API support
-     */
-    private setupPageTracking;
-    /**
-     * Track page hit
-     */
-    private trackPageHit;
-    /**
-     * Setup visibility change tracking for prerendered pages
+     * Capture initial pageview with visibility check
+     * Based on PostHog's _captureInitialPageview implementation
      */
-    private setupVisibilityTracking;
+    private _captureInitialPageview;
     /**
      * Get current configuration
      */
@@ -124,11 +162,11 @@ export declare class VTilt {
      */
     updateConfig(config: Partial<VTiltConfig>): void;
     /**
-     * _execute_array() deals with processing any VTilt function
-     * calls that were called before the VTilt library was loaded
+     * _execute_array() deals with processing any vTilt function
+     * calls that were called before the vTilt library was loaded
      * (and are thus stored in an array so they can be called later)
      *
-     * Note: we fire off all the VTilt function calls BEFORE we fire off
+     * Note: we fire off all the vTilt function calls BEFORE we fire off
      * tracking calls. This is so identify/setUserProperties/updateConfig calls
      * can properly modify early tracking calls.
      *
@@ -141,12 +179,12 @@ export declare class VTilt {
     _dom_loaded(): void;
 }
 /**
- * Initialize VTilt as a module (similar to PostHog's init_as_module)
- * Returns an uninitialized VTilt instance that the user must call init() on
+ * Initialize vTilt as a module (similar to PostHog's init_as_module)
+ * Returns an uninitialized vTilt instance that the user must call init() on
  */
 export declare function init_as_module(): VTilt;
 /**
- * Initialize VTilt from snippet (similar to PostHog's init_from_snippet)
+ * Initialize vTilt from snippet (similar to PostHog's init_from_snippet)
  * Processes queued calls from the snippet stub and replaces it with real instance
  *
  * The snippet uses some clever tricks to allow deferred loading of array.js (this code)