posthog-js 1.29.1 → 1.30.0

package/dist/module.d.ts

@@ -1,8 +1,95 @@
-import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { record } from 'rrweb';
-import { listenerHandler, eventWithTime } from 'rrweb/typings/types';
 import { Integration, EventProcessor, Hub } from '@sentry/types';
 
+declare enum NodeType {
+    Document = 0,
+    DocumentType = 1,
+    Element = 2,
+    Text = 3,
+    CDATA = 4,
+    Comment = 5
+}
+declare type documentNode = {
+    type: NodeType.Document;
+    childNodes: serializedNodeWithId[];
+    compatMode?: string;
+};
+declare type documentTypeNode = {
+    type: NodeType.DocumentType;
+    name: string;
+    publicId: string;
+    systemId: string;
+};
+declare type attributes = {
+    [key: string]: string | number | boolean;
+};
+declare type elementNode = {
+    type: NodeType.Element;
+    tagName: string;
+    attributes: attributes;
+    childNodes: serializedNodeWithId[];
+    isSVG?: true;
+    needBlock?: boolean;
+};
+declare type textNode = {
+    type: NodeType.Text;
+    textContent: string;
+    isStyle?: true;
+};
+declare type cdataNode = {
+    type: NodeType.CDATA;
+    textContent: '';
+};
+declare type commentNode = {
+    type: NodeType.Comment;
+    textContent: string;
+};
+declare type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
+    rootId?: number;
+    isShadowHost?: boolean;
+    isShadow?: boolean;
+};
+declare type serializedNodeWithId = serializedNode & {
+    id: number;
+};
+interface INode extends Node {
+    __sn: serializedNodeWithId;
+}
+declare type idNodeMap = {
+    [key: number]: INode;
+};
+declare type MaskInputOptions = Partial<{
+    color: boolean;
+    date: boolean;
+    'datetime-local': boolean;
+    email: boolean;
+    month: boolean;
+    number: boolean;
+    range: boolean;
+    search: boolean;
+    tel: boolean;
+    text: boolean;
+    time: boolean;
+    url: boolean;
+    week: boolean;
+    textarea: boolean;
+    select: boolean;
+    password: boolean;
+}>;
+declare type SlimDOMOptions = Partial<{
+    script: boolean;
+    comment: boolean;
+    headFavicon: boolean;
+    headWhitespace: boolean;
+    headMetaDescKeywords: boolean;
+    headMetaSocial: boolean;
+    headMetaRobots: boolean;
+    headMetaHttpEquiv: boolean;
+    headMetaAuthorship: boolean;
+    headMetaVerification: boolean;
+}>;
+declare type MaskTextFn = (text: string) => string;
+declare type MaskInputFn = (text: string) => string;
+
 declare class CaptureMetrics {
     enabled: boolean;
     metrics: Record<string, number>;
@@ -101,6 +188,11 @@ interface PostHogConfig {
     _onCapture: (eventName: string, eventData: CaptureResult) => void;
     _capture_metrics: boolean;
     _capture_performance: boolean;
+    bootstrap: {
+        distinctID?: string;
+        isIdentifiedID?: boolean;
+        featureFlags?: Record<string, boolean | string>;
+    };
 }
 interface OptInOutCapturingOptions {
     capture: (event: string, properties: Properties, options: CaptureOptions) => void;
@@ -331,11 +423,348 @@ declare class PostHogFeatureFlags {
         send_event?: boolean;
     }): boolean;
     addFeatureFlagsHandler(handler: FeatureFlagsCallback): void;
-    receivedFeatureFlags(response: DecideResponse): void;
+    receivedFeatureFlags(response: Partial<DecideResponse>): void;
     override(flags: boolean | string[] | Record<string, string | boolean>): void;
     onFeatureFlags(callback: FeatureFlagsCallback): void;
 }
 
+declare type PackFn = (event: eventWithTime) => string;
+
+declare enum EventType {
+    DomContentLoaded = 0,
+    Load = 1,
+    FullSnapshot = 2,
+    IncrementalSnapshot = 3,
+    Meta = 4,
+    Custom = 5,
+    Plugin = 6
+}
+declare type domContentLoadedEvent = {
+    type: EventType.DomContentLoaded;
+    data: {};
+};
+declare type loadedEvent = {
+    type: EventType.Load;
+    data: {};
+};
+declare type fullSnapshotEvent = {
+    type: EventType.FullSnapshot;
+    data: {
+        node: serializedNodeWithId;
+        initialOffset: {
+            top: number;
+            left: number;
+        };
+    };
+};
+declare type incrementalSnapshotEvent = {
+    type: EventType.IncrementalSnapshot;
+    data: incrementalData;
+};
+declare type metaEvent = {
+    type: EventType.Meta;
+    data: {
+        href: string;
+        width: number;
+        height: number;
+    };
+};
+declare type customEvent<T = unknown> = {
+    type: EventType.Custom;
+    data: {
+        tag: string;
+        payload: T;
+    };
+};
+declare type pluginEvent<T = unknown> = {
+    type: EventType.Plugin;
+    data: {
+        plugin: string;
+        payload: T;
+    };
+};
+declare enum IncrementalSource {
+    Mutation = 0,
+    MouseMove = 1,
+    MouseInteraction = 2,
+    Scroll = 3,
+    ViewportResize = 4,
+    Input = 5,
+    TouchMove = 6,
+    MediaInteraction = 7,
+    StyleSheetRule = 8,
+    CanvasMutation = 9,
+    Font = 10,
+    Log = 11,
+    Drag = 12,
+    StyleDeclaration = 13
+}
+declare type mutationData = {
+    source: IncrementalSource.Mutation;
+} & mutationCallbackParam;
+declare type mousemoveData = {
+    source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag;
+    positions: mousePosition[];
+};
+declare type mouseInteractionData = {
+    source: IncrementalSource.MouseInteraction;
+} & mouseInteractionParam;
+declare type scrollData = {
+    source: IncrementalSource.Scroll;
+} & scrollPosition;
+declare type viewportResizeData = {
+    source: IncrementalSource.ViewportResize;
+} & viewportResizeDimension;
+declare type inputData = {
+    source: IncrementalSource.Input;
+    id: number;
+} & inputValue;
+declare type mediaInteractionData = {
+    source: IncrementalSource.MediaInteraction;
+} & mediaInteractionParam;
+declare type styleSheetRuleData = {
+    source: IncrementalSource.StyleSheetRule;
+} & styleSheetRuleParam;
+declare type styleDeclarationData = {
+    source: IncrementalSource.StyleDeclaration;
+} & styleDeclarationParam;
+declare type canvasMutationData = {
+    source: IncrementalSource.CanvasMutation;
+} & canvasMutationParam;
+declare type fontData = {
+    source: IncrementalSource.Font;
+} & fontParam;
+declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData | styleDeclarationData;
+declare type event = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | customEvent | pluginEvent;
+declare type eventWithTime = event & {
+    timestamp: number;
+    delay?: number;
+};
+declare type blockClass = string | RegExp;
+declare type maskTextClass = string | RegExp;
+declare type SamplingStrategy = Partial<{
+    mousemove: boolean | number;
+    mousemoveCallback: number;
+    mouseInteraction: boolean | Record<string, boolean | undefined>;
+    scroll: number;
+    media: number;
+    input: 'all' | 'last';
+}>;
+declare type RecordPlugin<TOptions = unknown> = {
+    name: string;
+    observer?: (cb: Function, win: IWindow, options: TOptions) => listenerHandler;
+    eventProcessor?: <TExtend>(event: eventWithTime) => eventWithTime & TExtend;
+    options: TOptions;
+};
+declare type recordOptions<T> = {
+    emit?: (e: T, isCheckout?: boolean) => void;
+    checkoutEveryNth?: number;
+    checkoutEveryNms?: number;
+    blockClass?: blockClass;
+    blockSelector?: string;
+    ignoreClass?: string;
+    maskTextClass?: maskTextClass;
+    maskTextSelector?: string;
+    maskAllInputs?: boolean;
+    maskInputOptions?: MaskInputOptions;
+    maskInputFn?: MaskInputFn;
+    maskTextFn?: MaskTextFn;
+    slimDOMOptions?: SlimDOMOptions | 'all' | true;
+    inlineStylesheet?: boolean;
+    hooks?: hooksParam;
+    packFn?: PackFn;
+    sampling?: SamplingStrategy;
+    recordCanvas?: boolean;
+    userTriggeredOnInput?: boolean;
+    collectFonts?: boolean;
+    inlineImages?: boolean;
+    plugins?: RecordPlugin[];
+    mousemoveWait?: number;
+    keepIframeSrcFn?: KeepIframeSrcFn;
+};
+declare type hooksParam = {
+    mutation?: mutationCallBack;
+    mousemove?: mousemoveCallBack;
+    mouseInteraction?: mouseInteractionCallBack;
+    scroll?: scrollCallback;
+    viewportResize?: viewportResizeCallback;
+    input?: inputCallback;
+    mediaInteaction?: mediaInteractionCallback;
+    styleSheetRule?: styleSheetRuleCallback;
+    styleDeclaration?: styleDeclarationCallback;
+    canvasMutation?: canvasMutationCallback;
+    font?: fontCallback;
+};
+declare type textMutation = {
+    id: number;
+    value: string | null;
+};
+declare type styleAttributeValue = {
+    [key: string]: styleValueWithPriority | string | false;
+};
+declare type styleValueWithPriority = [string, string];
+declare type attributeMutation = {
+    id: number;
+    attributes: {
+        [key: string]: string | styleAttributeValue | null;
+    };
+};
+declare type removedNodeMutation = {
+    parentId: number;
+    id: number;
+    isShadow?: boolean;
+};
+declare type addedNodeMutation = {
+    parentId: number;
+    previousId?: number | null;
+    nextId: number | null;
+    node: serializedNodeWithId;
+};
+declare type mutationCallbackParam = {
+    texts: textMutation[];
+    attributes: attributeMutation[];
+    removes: removedNodeMutation[];
+    adds: addedNodeMutation[];
+    isAttachIframe?: true;
+};
+declare type mutationCallBack = (m: mutationCallbackParam) => void;
+declare type mousemoveCallBack = (p: mousePosition[], source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag) => void;
+declare type mousePosition = {
+    x: number;
+    y: number;
+    id: number;
+    timeOffset: number;
+};
+declare enum MouseInteractions {
+    MouseUp = 0,
+    MouseDown = 1,
+    Click = 2,
+    ContextMenu = 3,
+    DblClick = 4,
+    Focus = 5,
+    Blur = 6,
+    TouchStart = 7,
+    TouchMove_Departed = 8,
+    TouchEnd = 9,
+    TouchCancel = 10
+}
+declare enum CanvasContext {
+    '2D' = 0,
+    WebGL = 1,
+    WebGL2 = 2
+}
+declare type mouseInteractionParam = {
+    type: MouseInteractions;
+    id: number;
+    x: number;
+    y: number;
+};
+declare type mouseInteractionCallBack = (d: mouseInteractionParam) => void;
+declare type scrollPosition = {
+    id: number;
+    x: number;
+    y: number;
+};
+declare type scrollCallback = (p: scrollPosition) => void;
+declare type styleSheetAddRule = {
+    rule: string;
+    index?: number | number[];
+};
+declare type styleSheetDeleteRule = {
+    index: number | number[];
+};
+declare type styleSheetRuleParam = {
+    id: number;
+    removes?: styleSheetDeleteRule[];
+    adds?: styleSheetAddRule[];
+};
+declare type styleSheetRuleCallback = (s: styleSheetRuleParam) => void;
+declare type styleDeclarationParam = {
+    id: number;
+    index: number[];
+    set?: {
+        property: string;
+        value: string | null;
+        priority: string | undefined;
+    };
+    remove?: {
+        property: string;
+    };
+};
+declare type styleDeclarationCallback = (s: styleDeclarationParam) => void;
+declare type canvasMutationCommand = {
+    property: string;
+    args: Array<unknown>;
+    setter?: true;
+};
+declare type canvasMutationParam = {
+    id: number;
+    type: CanvasContext;
+    commands: canvasMutationCommand[];
+} | ({
+    id: number;
+    type: CanvasContext;
+} & canvasMutationCommand);
+declare type canvasMutationCallback = (p: canvasMutationParam) => void;
+declare type fontParam = {
+    family: string;
+    fontSource: string;
+    buffer: boolean;
+    descriptors?: FontFaceDescriptors;
+};
+declare type fontCallback = (p: fontParam) => void;
+declare type viewportResizeDimension = {
+    width: number;
+    height: number;
+};
+declare type viewportResizeCallback = (d: viewportResizeDimension) => void;
+declare type inputValue = {
+    text: string;
+    isChecked: boolean;
+    userTriggered?: boolean;
+};
+declare type inputCallback = (v: inputValue & {
+    id: number;
+}) => void;
+declare const enum MediaInteractions {
+    Play = 0,
+    Pause = 1,
+    Seeked = 2,
+    VolumeChange = 3
+}
+declare type mediaInteractionParam = {
+    type: MediaInteractions;
+    id: number;
+    currentTime?: number;
+    volume?: number;
+    muted?: boolean;
+};
+declare type mediaInteractionCallback = (p: mediaInteractionParam) => void;
+declare type Mirror = {
+    map: idNodeMap;
+    getId: (n: INode) => number;
+    getNode: (id: number) => INode | null;
+    removeNodeFromMap: (n: INode) => void;
+    has: (id: number) => boolean;
+    reset: () => void;
+};
+declare type listenerHandler = () => void;
+declare type KeepIframeSrcFn = (src: string) => boolean;
+declare global {
+    interface Window {
+        FontFace: typeof FontFace;
+    }
+}
+declare type IWindow = Window & typeof globalThis;
+
+declare function record<T = eventWithTime>(options?: recordOptions<T>): listenerHandler | undefined;
+declare namespace record {
+    var addCustomEvent: <T>(tag: string, payload: T) => void;
+    var freezePage: () => void;
+    var takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
+    var mirror: Mirror;
+}
+
 declare class SessionRecording {
     instance: PostHog;
     captureStarted: boolean;
@@ -501,6 +930,7 @@ declare class PostHog {
      * @param {Array} array
      */
     _execute_array(array: SnippetArrayItem[]): void;
+    _hasBootstrappedFeatureFlags(): boolean;
     /**
      * push() keeps the standard async-array-push
      * behavior around after the lib is loaded.

package/dist/module.js

@@ -885,7 +885,7 @@ var LZString = {
   }
 };
 
-var version = "1.29.1";
+var version = "1.30.0";
 
 // e.g.     Config.DEBUG = Config.DEBUG || instance.get_config('debug')
 
@@ -3294,6 +3294,7 @@ var PostHogFeatureFlags = /*#__PURE__*/function () {
   }, {
     key: "receivedFeatureFlags",
     value: function receivedFeatureFlags(response) {
+      this.instance.decideEndpointWasHit = true;
       parseFeatureFlagDecideResponse(response, this.instance.persistence);
       var flags = this.getFlags();
       var variants = this.getFlagVariants();
@@ -3971,8 +3972,9 @@ var Decide = /*#__PURE__*/function () {
   function Decide(instance) {
     _classCallCheck(this, Decide);
 
-    this.instance = instance;
-    this.instance.decideEndpointWasHit = false;
+    this.instance = instance; // don't need to wait for `decide` to return if flags were provided on initialisation
+
+    this.instance.decideEndpointWasHit = this.instance._hasBootstrappedFeatureFlags();
   }
 
   _createClass(Decide, [{
@@ -4345,19 +4347,27 @@ var RequestQueue = /*#__PURE__*/function (_RequestQueueScaffold) {
   }, {
     key: "unload",
     value: function unload() {
+      var _this3 = this;
+
       clearTimeout(this._poller);
       var requests = this._event_queue.length > 0 ? this.formatQueue() : {};
       this._event_queue.length = 0;
-
-      for (var key in requests) {
-        var _requests$key3 = requests[key],
-            _url2 = _requests$key3.url,
-            _data2 = _requests$key3.data,
-            _options = _requests$key3.options;
-        this.handlePollRequest(_url2, _data2, _objectSpread2(_objectSpread2({}, _options), {}, {
+      var requestValues = Object.values(requests); // Always force events to be sent before recordings, as events are more important, and recordings are bigger and thus less likely to arrive
+
+      var sortedRequests = [].concat(_toConsumableArray(requestValues.filter(function (r) {
+        return r.url.indexOf('/e') === 0;
+      })), _toConsumableArray(requestValues.filter(function (r) {
+        return r.url.indexOf('/e') !== 0;
+      })));
+      sortedRequests.map(function (_ref) {
+        var url = _ref.url,
+            data = _ref.data,
+            options = _ref.options;
+
+        _this3.handlePollRequest(url, data, _objectSpread2(_objectSpread2({}, options), {}, {
           transport: 'sendBeacon'
         }));
-      }
+      });
     }
   }, {
     key: "formatQueue",
@@ -5950,7 +5960,8 @@ var defaultConfig = function defaultConfig() {
     _capture_metrics: false,
     _capture_performance: false,
     name: 'posthog',
-    callback_fn: 'posthog._jsc'
+    callback_fn: 'posthog._jsc',
+    bootstrap: {}
   };
 };
 /**
@@ -6099,6 +6110,8 @@ var PostHog = /*#__PURE__*/function () {
   }, {
     key: "_init",
     value: function _init(token) {
+      var _config$bootstrap;
+
       var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var name = arguments.length > 2 ? arguments[2] : undefined;
       this.__loaded = true;
@@ -6123,19 +6136,49 @@ var PostHog = /*#__PURE__*/function () {
 
       this._gdpr_init();
 
+      if (((_config$bootstrap = config.bootstrap) === null || _config$bootstrap === void 0 ? void 0 : _config$bootstrap.distinctID) !== undefined) {
+        var _config$bootstrap2;
+
+        var uuid = this.get_config('get_device_id')(_UUID());
+        var deviceID = (_config$bootstrap2 = config.bootstrap) !== null && _config$bootstrap2 !== void 0 && _config$bootstrap2.isIdentifiedID ? uuid : config.bootstrap.distinctID;
+        this.register({
+          distinct_id: config.bootstrap.distinctID,
+          $device_id: deviceID
+        });
+      }
+
+      if (this._hasBootstrappedFeatureFlags()) {
+        var _config$bootstrap3;
+
+        var activeFlags = Object.keys(((_config$bootstrap3 = config.bootstrap) === null || _config$bootstrap3 === void 0 ? void 0 : _config$bootstrap3.featureFlags) || {}).filter(function (flag) {
+          var _config$bootstrap4, _config$bootstrap4$fe;
+
+          return !!((_config$bootstrap4 = config.bootstrap) !== null && _config$bootstrap4 !== void 0 && (_config$bootstrap4$fe = _config$bootstrap4.featureFlags) !== null && _config$bootstrap4$fe !== void 0 && _config$bootstrap4$fe[flag]);
+        }).reduce(function (res, key) {
+          var _config$bootstrap5, _config$bootstrap5$fe;
+
+          return res[key] = ((_config$bootstrap5 = config.bootstrap) === null || _config$bootstrap5 === void 0 ? void 0 : (_config$bootstrap5$fe = _config$bootstrap5.featureFlags) === null || _config$bootstrap5$fe === void 0 ? void 0 : _config$bootstrap5$fe[key]) || false, res;
+        }, {});
+        this.featureFlags.receivedFeatureFlags({
+          featureFlags: activeFlags
+        });
+      }
+
       if (!this.get_distinct_id()) {
         // There is no need to set the distinct id
         // or the device id if something was already stored
         // in the persitence
-        var uuid = this.get_config('get_device_id')(_UUID());
+        var _uuid = this.get_config('get_device_id')(_UUID());
+
         this.register_once({
-          distinct_id: uuid,
-          $device_id: uuid
+          distinct_id: _uuid,
+          $device_id: _uuid
         }, '');
-      } // Set up the window close event handler "unload"
+      } // Set up event handler for pageleave
+      // Use `onpagehide` if available, see https://calendar.perfplanet.com/2020/beaconing-in-practice/#beaconing-reliability-avoiding-abandons
 
 
-      win.addEventListener && win.addEventListener('unload', this._handle_unload.bind(this));
+      win.addEventListener && win.addEventListener('onpagehide' in self ? 'pagehide' : 'unload', this._handle_unload.bind(this));
     } // Private methods
 
   }, {
@@ -6410,6 +6453,13 @@ var PostHog = /*#__PURE__*/function () {
       execute(other_calls, this);
       execute(capturing_calls, this);
     }
+  }, {
+    key: "_hasBootstrappedFeatureFlags",
+    value: function _hasBootstrappedFeatureFlags() {
+      var _this$config$bootstra, _this$config$bootstra2;
+
+      return ((_this$config$bootstra = this.config.bootstrap) === null || _this$config$bootstra === void 0 ? void 0 : _this$config$bootstra.featureFlags) && Object.keys((_this$config$bootstra2 = this.config.bootstrap) === null || _this$config$bootstra2 === void 0 ? void 0 : _this$config$bootstra2.featureFlags).length > 0 || false;
+    }
     /**
      * push() keeps the standard async-array-push
      * behavior around after the lib is loaded.