posthog-js 1.32.4 → 1.34.0

package/dist/module.d.ts

@@ -275,8 +275,9 @@ interface DecideResponse {
         endpoint?: string;
         consoleLogRecordingEnabled?: boolean;
     };
-    editorParams: EditorParams;
-    toolbarVersion: 'toolbar'; /** deprecated, moved to editorParams */
+    toolbarParams: ToolbarParams;
+    editorParams?: ToolbarParams; /** @deprecated, renamed to toolbarParams, still present on older API responses */
+    toolbarVersion: 'toolbar'; /** @deprecated, moved to toolbarParams */
     isAuthenticated: boolean;
     siteApps: {
         id: number;
@@ -316,10 +317,23 @@ interface PersistentStore {
 }
 declare type Breaker = {};
 declare type EventHandler = (event: Event) => boolean | void;
-interface EditorParams {
-    jsURL?: string;
+declare type ToolbarUserIntent = 'add-action' | 'edit-action';
+declare type ToolbarSource = 'url' | 'localstorage';
+declare type ToolbarVersion = 'toolbar';
+interface ToolbarParams {
     apiURL?: string;
-    toolbarVersion?: 'toolbar';
+    jsURL?: string;
+    token?: string; /** public posthog-js token */
+    temporaryToken?: string; /** private temporary user token */
+    actionId?: number;
+    userIntent?: ToolbarUserIntent;
+    source?: ToolbarSource;
+    toolbarVersion?: ToolbarVersion;
+    instrument?: boolean;
+    distinctId?: string;
+    userEmail?: string;
+    dataAttributes?: string[];
+    featureFlags?: Record<string, string | boolean>;
 }
 interface PostData {
     buffer?: BlobPart;
@@ -801,12 +815,16 @@ declare class Toolbar {
     constructor(instance: PostHog);
     afterDecideResponse(response: DecideResponse): void;
     /**
-     * To load the visual editor, we need an access token and other state. That state comes from one of three places:
-     * 1. In the URL hash params if the customer is using an old snippet
-     * 2. From session storage under the key `editorParams` if the editor was initialized on a previous page
+     * To load the toolbar, we need an access token and other state. That state comes from one of three places:
+     * 1. In the URL hash params
+     * 2. From session storage under the key `toolbarParams` if the toolbar was initialized on a previous page
      */
+    maybeLoadToolbar(location?: Location, localStorage?: Storage | undefined, history?: History): boolean;
+    loadToolbar(params?: ToolbarParams): boolean;
+    /** @deprecated Use "loadToolbar" instead. */
+    _loadEditor(params: ToolbarParams): boolean;
+    /** @deprecated Use "maybeLoadToolbar" instead. */
     maybeLoadEditor(location?: Location, localStorage?: Storage | undefined, history?: History): boolean;
-    _loadEditor(editorParams: EditorParams): boolean;
 }
 
 declare class RequestQueue extends RequestQueueScaffold {
@@ -1264,6 +1282,11 @@ declare class PostHog {
      * is currently running
      */
     sessionRecordingStarted(): boolean;
+    /**
+     * returns a boolean indicating whether the toolbar loaded
+     * @param toolbarParams
+     */
+    loadToolbar(params: ToolbarParams): boolean;
     /**
      * returns the current config object for the library.
      */
@@ -1408,4 +1431,4 @@ declare class PostHog {
 
 declare const posthog: PostHog;
 
-export { AutoCaptureCustomProperty, Breaker, CaptureCallback, CaptureOptions, CaptureResult, Compression, CompressionData, DecideResponse, EditorParams, EventHandler, FeatureFlagsCallback, GDPROptions, JSC, OptInOutCapturingOptions, PersistentStore, PostData, PostHog, PostHogConfig, Properties, Property, QueuedRequestData, RequestCallback, RetryQueueElement, SessionRecordingOptions, SnippetArrayItem, XHROptions, XHRParams, posthog as default, isFeatureEnabledOptions, posthog };
+export { AutoCaptureCustomProperty, Breaker, CaptureCallback, CaptureOptions, CaptureResult, Compression, CompressionData, DecideResponse, EventHandler, FeatureFlagsCallback, GDPROptions, JSC, OptInOutCapturingOptions, PersistentStore, PostData, PostHog, PostHogConfig, Properties, Property, QueuedRequestData, RequestCallback, RetryQueueElement, SessionRecordingOptions, SnippetArrayItem, ToolbarParams, ToolbarSource, ToolbarUserIntent, ToolbarVersion, XHROptions, XHRParams, posthog as default, isFeatureEnabledOptions, posthog };

package/dist/module.js

@@ -124,6 +124,42 @@ function _isNativeReflectConstruct() {
   }
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -885,7 +921,7 @@ var LZString = {
   }
 };
 
-var version = "1.32.4";
+var version = "1.34.0";
 
 // e.g.     Config.DEBUG = Config.DEBUG || instance.get_config('debug')
 
@@ -1645,6 +1681,11 @@ var _info = {
 
     return parseFloat(matches[matches.length - 2]);
   },
+  browserLanguage: function browserLanguage() {
+    return navigator.language || // Any modern browser
+    navigator.userLanguage // IE11
+    ;
+  },
   os: function os() {
     var a = userAgent;
 
@@ -1720,6 +1761,7 @@ var _info = {
       $host: window.location.host,
       $pathname: window.location.pathname,
       $browser_version: _info.browserVersion(userAgent, navigator.vendor, window.opera),
+      $browser_language: _info.browserLanguage(),
       $screen_height: window.screen.height,
       $screen_width: window.screen.width,
       $viewport_height: window.innerHeight,
@@ -4101,6 +4143,9 @@ var Decide = /*#__PURE__*/function () {
   return Decide;
 }();
 
+var POSTHOG_MANAGED_HOSTS = ['https://app.posthog.com', 'https://eu.posthog.com'];
+
+var _excluded = ["source"];
 var Toolbar = /*#__PURE__*/function () {
   function Toolbar(instance) {
     _classCallCheck(this, Toolbar);
@@ -4111,25 +4156,25 @@ var Toolbar = /*#__PURE__*/function () {
   _createClass(Toolbar, [{
     key: "afterDecideResponse",
     value: function afterDecideResponse(response) {
-      var editorParams = response['editorParams'] || (response['toolbarVersion'] ? {
+      var toolbarParams = response['toolbarParams'] || response['editorParams'] || (response['toolbarVersion'] ? {
         toolbarVersion: response['toolbarVersion']
       } : {});
 
-      if (response['isAuthenticated'] && editorParams['toolbarVersion'] && editorParams['toolbarVersion'].indexOf('toolbar') === 0) {
-        this._loadEditor(_objectSpread2(_objectSpread2({}, editorParams), {}, {
+      if (response['isAuthenticated'] && toolbarParams['toolbarVersion'] && toolbarParams['toolbarVersion'].indexOf('toolbar') === 0) {
+        this.loadToolbar(_objectSpread2(_objectSpread2({}, toolbarParams), {}, {
           apiURL: this.instance.get_config('api_host')
         }));
       }
     }
     /**
-     * To load the visual editor, we need an access token and other state. That state comes from one of three places:
-     * 1. In the URL hash params if the customer is using an old snippet
-     * 2. From session storage under the key `editorParams` if the editor was initialized on a previous page
+     * To load the toolbar, we need an access token and other state. That state comes from one of three places:
+     * 1. In the URL hash params
+     * 2. From session storage under the key `toolbarParams` if the toolbar was initialized on a previous page
      */
 
   }, {
-    key: "maybeLoadEditor",
-    value: function maybeLoadEditor() {
+    key: "maybeLoadToolbar",
+    value: function maybeLoadToolbar() {
       var location = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.location;
       var localStorage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
       var history = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.history;
@@ -4151,16 +4196,15 @@ var Toolbar = /*#__PURE__*/function () {
         var stateHash = _getHashParam(location.hash, '__posthog') || _getHashParam(location.hash, 'state');
 
         var state = stateHash ? JSON.parse(decodeURIComponent(stateHash)) : null;
-        var parseFromUrl = state && (state['action'] === 'mpeditor' || state['action'] === 'ph_authorize');
-        var editorParams;
+        var parseFromUrl = state && state['action'] === 'ph_authorize';
+        var toolbarParams;
 
         if (parseFromUrl) {
-          // happens if they are initializing the editor using an old snippet
-          editorParams = state;
-
-          if (editorParams && Object.keys(editorParams).length > 0) {
-            localStorage.setItem('_postHogEditorParams', JSON.stringify(editorParams));
+          // happens if they are initializing the toolbar using an old snippet
+          toolbarParams = state;
+          toolbarParams.source = 'url';
 
+          if (toolbarParams && Object.keys(toolbarParams).length > 0) {
             if (state['desiredHash']) {
               // hash that was in the url before the redirect
               location.hash = state['desiredHash'];
@@ -4172,19 +4216,19 @@ var Toolbar = /*#__PURE__*/function () {
           }
         } else {
           // get credentials from localStorage from a previous initialzation
-          editorParams = JSON.parse(localStorage.getItem('_postHogEditorParams') || '{}'); // delete "add-action" or other intent from editorParams, otherwise we'll have the same intent
+          toolbarParams = JSON.parse(localStorage.getItem('_postHogToolbarParams') || '{}');
+          toolbarParams.source = 'localstorage'; // delete "add-action" or other intent from toolbarParams, otherwise we'll have the same intent
           // every time we open the page (e.g. you just visiting your own site an hour later)
 
-          delete editorParams.userIntent;
+          delete toolbarParams.userIntent;
         }
 
-        if (!editorParams.apiURL) {
-          editorParams.apiURL = this.instance.get_config('api_host');
+        if (!toolbarParams.apiURL) {
+          toolbarParams.apiURL = this.instance.get_config('api_host');
         }
 
-        if (editorParams['token'] && this.instance.get_config('token') === editorParams['token']) {
-          this._loadEditor(editorParams);
-
+        if (toolbarParams['token'] && this.instance.get_config('token') === toolbarParams['token']) {
+          this.loadToolbar(toolbarParams);
           return true;
         } else {
           return false;
@@ -4194,33 +4238,61 @@ var Toolbar = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "_loadEditor",
-    value: function _loadEditor(editorParams) {
+    key: "loadToolbar",
+    value: function loadToolbar(params) {
       var _this = this;
 
-      if (!window['_postHogToolbarLoaded']) {
-        window['_postHogToolbarLoaded'] = true;
-        var host = editorParams['jsURL'] || editorParams['apiURL'] || this.instance.get_config('api_host');
-        var toolbarScript = 'toolbar.js';
-        var editorUrl = host + (host.endsWith('/') ? '' : '/') + 'static/' + toolbarScript + '?_ts=' + new Date().getTime();
-        var disableToolbarMetrics = this.instance.get_config('api_host') !== 'https://app.posthog.com' && this.instance.get_config('advanced_disable_toolbar_metrics');
-        editorParams = _objectSpread2(_objectSpread2({}, editorParams), disableToolbarMetrics ? {
-          instrument: false
-        } : {});
-        loadScript(editorUrl, function () {
-          window['ph_load_editor'](editorParams, _this.instance);
-        }); // Turbolinks doesn't fire an onload event but does replace the entire page, including the toolbar
-
-        _register_event(window, 'turbolinks:load', function () {
-          window['_postHogToolbarLoaded'] = false;
-
-          _this._loadEditor(editorParams);
-        });
+      if (window['_postHogToolbarLoaded']) {
+        return false;
+      } // only load the toolbar once, even if there are multiple instances of PostHogLib
+      window['_postHogToolbarLoaded'] = true;
+      var host = (params === null || params === void 0 ? void 0 : params['jsURL']) || (params === null || params === void 0 ? void 0 : params['apiURL']) || this.instance.get_config('api_host');
+      var toolbarUrl = "".concat(host).concat(host.endsWith('/') ? '' : '/', "static/toolbar.js?_ts=").concat(new Date().getTime());
+      var disableToolbarMetrics = !POSTHOG_MANAGED_HOSTS.includes(this.instance.get_config('api_host')) && this.instance.get_config('advanced_disable_toolbar_metrics');
+
+      var toolbarParams = _objectSpread2(_objectSpread2({
+        apiURL: host,
+        // defaults to api_host from the instance config if nothing else set
+        jsURL: host,
+        // defaults to api_host from the instance config if nothing else set
+        token: this.instance.get_config('token')
+      }, params), disableToolbarMetrics ? {
+        instrument: false
+      } : {});
 
-        return true;
-      }
+      toolbarParams.source;
+          var paramsToPersist = _objectWithoutProperties(toolbarParams, _excluded); // eslint-disable-line
 
-      return false;
+
+      window.localStorage.setItem('_postHogToolbarParams', JSON.stringify(paramsToPersist));
+      loadScript(toolbarUrl, function () {
+        (window['ph_load_toolbar'] || window['ph_load_editor'])(toolbarParams, _this.instance);
+      }); // Turbolinks doesn't fire an onload event but does replace the entire page, including the toolbar
+
+      _register_event(window, 'turbolinks:load', function () {
+        window['_postHogToolbarLoaded'] = false;
+
+        _this.loadToolbar(toolbarParams);
+      });
+
+      return true;
+    }
+    /** @deprecated Use "loadToolbar" instead. */
+
+  }, {
+    key: "_loadEditor",
+    value: function _loadEditor(params) {
+      return this.loadToolbar(params);
+    }
+    /** @deprecated Use "maybeLoadToolbar" instead. */
+
+  }, {
+    key: "maybeLoadEditor",
+    value: function maybeLoadEditor() {
+      var location = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.location;
+      var localStorage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+      var history = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.history;
+      return this.maybeLoadToolbar(location, localStorage, history);
     }
   }]);
 
@@ -6083,7 +6155,7 @@ var create_mplib = function create_mplib(token, config, name) {
 
   instance._init(token, config, name);
 
-  instance.toolbar.maybeLoadEditor();
+  instance.toolbar.maybeLoadToolbar();
   instance.sessionRecording = new SessionRecording(instance);
   instance.sessionRecording.startRecordingIfEnabled();
   instance.__autocapture_enabled = instance.get_config('autocapture');
@@ -7294,6 +7366,16 @@ var PostHog = /*#__PURE__*/function () {
 
       return !!((_this$sessionRecordin = this.sessionRecording) !== null && _this$sessionRecordin !== void 0 && _this$sessionRecordin.started());
     }
+    /**
+     * returns a boolean indicating whether the toolbar loaded
+     * @param toolbarParams
+     */
+
+  }, {
+    key: "loadToolbar",
+    value: function loadToolbar(params) {
+      return this.toolbar.loadToolbar(params);
+    }
     /**
      * returns the current config object for the library.
      */