@appbaseio/reactivesearch-vue 1.33.1 → 1.33.3

package/dist/cjs/ReactiveBase.js

@@ -7,17 +7,18 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var configureStore = require('@appbaseio/reactivecore');
 var configureStore__default = _interopDefault(configureStore);
 require('@appbaseio/reactivecore/lib/utils/constants');
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c705cbe6.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f8b843f8.js');
 var VueTypes = _interopDefault(require('vue-types'));
 var helper = require('@appbaseio/reactivecore/lib/utils/helper');
 var styled = require('@appbaseio/vue-emotion');
 var styled__default = _interopDefault(styled);
-var vueTypes = require('./vueTypes-727b7c63.js');
+var vueTypes = require('./vueTypes-7cfc2f98.js');
 require('redux');
-var index = require('./index-08f8dfa3.js');
+var index = require('./index-30126fd0.js');
 var _mergeJSXProps = _interopDefault(require('@vue/babel-helper-vue-jsx-merge-props'));
 var analytics = require('@appbaseio/reactivecore/lib/actions/analytics');
 var Appbase = _interopDefault(require('appbase-js'));
+var AppbaseAnalytics = _interopDefault(require('@appbaseio/analytics'));
 require('url-search-params-polyfill');
 
 var Provider = {
@@ -30,21 +31,24 @@ var Provider = {
         if (!store.dispatch && !store.subscribe && !store.getState) {
           throw new Error('[reactivesearch-vue] - store provided is not a valid redux store');
         }
-
         return true;
       }
+    },
+    analyticsRef: {
+      type: Object,
+      required: true
     }
   },
   provide: function provide() {
     return {
-      $$store: this.store
+      $$store: this.store,
+      $analytics: this.analyticsRef
     };
   },
   render: function render(h) {
     if (this.$slots["default"].length > 1) {
       return h('div', this.$slots["default"]);
     }
-
     return this.$slots["default"][0];
   }
 };
@@ -54,9 +58,9 @@ var Base = {
   functional: true,
   render: function render(h, _ref) {
     var _ref$data$attrs$as = _ref.data.attrs.as,
-        T = _ref$data$attrs$as === void 0 ? 'div' : _ref$data$attrs$as,
-        props = _ref.data,
-        children = _ref.children;
+      T = _ref$data$attrs$as === void 0 ? 'div' : _ref$data$attrs$as,
+      props = _ref.data,
+      children = _ref.children;
     delete props.attrs.as;
     return h(T, _mergeJSXProps([{}, props]), [children]);
   }
@@ -76,7 +80,7 @@ var Base$1 = styled__default(Base)(_templateObject || (_templateObject = _rollup
 });
 
 var setHeaders = configureStore.Actions.setHeaders,
-    setValue = configureStore.Actions.setValue;
+  setValue = configureStore.Actions.setValue;
 var isEqual = configureStore.helper.isEqual;
 var URLParamsProvider = {
   name: 'URLParamsProvider',
@@ -89,32 +93,27 @@ var URLParamsProvider = {
   },
   mounted: function mounted() {
     var _this = this;
-
     this.init();
-
     window.onpopstate = function () {
       _this.init();
-
-      var activeComponents = Array.from(_this.params.keys()); // remove inactive components from selectedValues
-
+      var activeComponents = Array.from(_this.params.keys());
+      // remove inactive components from selectedValues
       Object.keys(_this.currentSelectedState).filter(function (item) {
         return !activeComponents.includes(item);
       }).forEach(function (component) {
         _this.setValue(component, null, undefined, undefined, undefined, undefined, undefined, undefined, 'URL');
-      }); // update active components in selectedValues
-
+      });
+      // update active components in selectedValues
       Array.from(_this.params.entries()).forEach(function (item) {
         try {
           var component = item[0],
-              value = item[1];
-
+            value = item[1];
           var _ref = _this.selectedValues[component] || {
-            label: component
-          },
-              label = _ref.label,
-              showFilter = _ref.showFilter,
-              URLParams = _ref.URLParams;
-
+              label: component
+            },
+            label = _ref.label,
+            showFilter = _ref.showFilter,
+            URLParams = _ref.URLParams;
           _this.setValue(component, JSON.parse(value), label, showFilter, URLParams, undefined, undefined, undefined, 'URL');
         } catch (e) {
           // Do not set value if JSON parsing fails.
@@ -132,7 +131,6 @@ var URLParamsProvider = {
     },
     selectedValues: function selectedValues(newVal, oldVal) {
       var _this2 = this;
-
       if (!isEqual(newVal, oldVal)) {
         this.searchString = this.$props.getSearchParams ? this.$props.getSearchParams() : window.location.search;
         this.params = new URLSearchParams(this.searchString);
@@ -142,8 +140,8 @@ var URLParamsProvider = {
         currentComponents.filter(function (component) {
           return newVal[component].URLParams;
         }).forEach(function (component) {
-          var selectedValues = newVal[component]; // prevents empty history pollution on initial load
-
+          var selectedValues = newVal[component];
+          // prevents empty history pollution on initial load
           if (_this2.hasValidValue(newVal[component]) || _this2.hasValidValue(oldVal[component])) {
             if (selectedValues.URLParams) {
               if (selectedValues.category) {
@@ -151,48 +149,41 @@ var URLParamsProvider = {
                   category: selectedValues.category,
                   value: selectedValues.value
                 }));
-
                 if (shouldUpdateHistory) {
                   shouldPushHistory = true;
                 }
               } else {
                 var _shouldUpdateHistory = _this2.setURL(component, _this2.getValue(selectedValues.value));
-
                 if (_shouldUpdateHistory) {
                   shouldPushHistory = true;
                 }
               }
             } else {
               _this2.params["delete"](component);
-
               shouldPushHistory = true;
             }
           } else if (!_this2.hasValidValue(newVal[component]) && urlComponents.includes(component)) {
             // doesn't have a valid value, but the url has a (stale) valid value set
             _this2.params["delete"](component);
-
             shouldPushHistory = true;
           }
-        }); // remove unmounted components
+        });
 
+        // remove unmounted components
         Object.keys(newVal).filter(function (component) {
           return !currentComponents.includes(component);
         }).forEach(function (component) {
           _this2.params["delete"](component);
-
           shouldPushHistory = true;
         });
-
         if (!currentComponents.length) {
           Array.from(this.params.keys()).forEach(function (item) {
             if (_this2.searchComponents && _this2.searchComponents.includes(item)) {
               _this2.params["delete"](item);
-
               shouldPushHistory = true;
             }
           });
         }
-
         if (shouldPushHistory) {
           this.pushToHistory();
         }
@@ -216,10 +207,8 @@ var URLParamsProvider = {
       // search on homepage -> route changes -> search results page with same search query
       if (window) {
         var searchString = this.$props.getSearchParams ? this.$props.getSearchParams() : window.location.search;
-
         if (searchString !== this.searchString) {
           var event;
-
           if (typeof Event === 'function') {
             event = new Event('popstate');
           } else {
@@ -227,7 +216,6 @@ var URLParamsProvider = {
             event = document.createEvent('Event');
             event.initEvent('popstate', true, true);
           }
-
           window.dispatchEvent(event);
         }
       }
@@ -239,20 +227,17 @@ var URLParamsProvider = {
     },
     getValue: function getValue(value) {
       var _this3 = this;
-
       if (Array.isArray(value) && value.length) {
         return value.map(function (item) {
           return _this3.getValue(item);
         });
       }
-
       if (value && typeof value === 'object') {
         // TODO: support for NestedList
         if (value.location) return value;
         if (value.category) return value;
         return value.label || value.key || null;
       }
-
       return value;
     },
     setURL: function setURL(component, value) {
@@ -260,21 +245,17 @@ var URLParamsProvider = {
         this.params["delete"](component);
         return true;
       }
-
       var data = JSON.stringify(value);
-
       if (data !== this.params.get(component)) {
         this.params.set(component, data);
         return true;
       }
-
       return false;
     },
     pushToHistory: function pushToHistory() {
       var paramsSting = this.params.toString() ? "?" + this.params.toString() : '';
       var base = window.location.href.split('?')[0];
       var newURL = "" + base + paramsSting;
-
       if (this.$props.setSearchParams) {
         this.$props.setSearchParams(newURL);
       } else if (window.history.pushState) {
@@ -282,7 +263,6 @@ var URLParamsProvider = {
           path: newURL
         }, '', newURL);
       }
-
       this.init();
     }
   },
@@ -297,23 +277,19 @@ var URLParamsProvider = {
     }, [children]);
   }
 };
-
 var mapStateToProps = function mapStateToProps(state) {
   return {
     selectedValues: state.selectedValues,
     searchComponents: state.components
   };
 };
-
 var mapDispatchtoProps = {
   setHeaders: setHeaders,
   setValue: setValue
 };
-
 URLParamsProvider.install = function (Vue) {
   Vue.component(URLParamsProvider.name, URLParamsProvider);
 };
-
 var URLParamsProvider$1 = index.connect(mapStateToProps, mapDispatchtoProps)(URLParamsProvider);
 
 var typography = {
@@ -347,7 +323,6 @@ function getTheme(preset) {
   if (preset === 'light') {
     return light;
   }
-
   return dark;
 }
 
@@ -364,8 +339,7 @@ var ReactiveBase = {
   },
   mounted: function mounted() {
     var enableAppbase = this.enableAppbase,
-        endpoint = this.endpoint;
-
+      endpoint = this.endpoint;
     if (!enableAppbase && endpoint) {
       console.warn('Warning(ReactiveSearch): The `endpoint` prop works only when `enableAppbase` prop is set to true.');
     }
@@ -435,15 +409,13 @@ var ReactiveBase = {
   computed: {
     getHeaders: function getHeaders() {
       var _this$$props = this.$props,
-          enableAppbase = _this$$props.enableAppbase,
-          headers = _this$$props.headers,
-          appbaseConfig = _this$$props.appbaseConfig,
-          mongodb = _this$$props.mongodb,
-          endpoint = _this$$props.endpoint;
-
+        enableAppbase = _this$$props.enableAppbase,
+        headers = _this$$props.headers,
+        appbaseConfig = _this$$props.appbaseConfig,
+        mongodb = _this$$props.mongodb,
+        endpoint = _this$$props.endpoint;
       var _ref = appbaseConfig || {},
-          enableTelemetry = _ref.enableTelemetry;
-
+        enableTelemetry = _ref.enableTelemetry;
       return _rollupPluginBabelHelpers._extends({}, enableAppbase && !mongodb && _rollupPluginBabelHelpers._extends({
         'X-Search-Client': index.X_SEARCH_CLIENT
       }, enableTelemetry === false && {
@@ -459,7 +431,6 @@ var ReactiveBase = {
     setStore: function setStore(props) {
       var credentials = props.url && props.url.trim() !== '' && !props.credentials ? null : props.credentials;
       var url = props.url && props.url.trim() !== '' ? props.url : '';
-
       if (props.enableAppbase && props.endpoint) {
         if (props.endpoint.url) {
           // eslint-disable-next-line prefer-destructuring
@@ -468,7 +439,6 @@ var ReactiveBase = {
           throw Error('Error(ReactiveSearch): The `endpoint` prop object requires `url` property.');
         }
       }
-
       var config = {
         url: url,
         app: props.app,
@@ -483,51 +453,65 @@ var ReactiveBase = {
         endpoint: props.endpoint
       };
       var queryParams = '';
-
       if (typeof window !== 'undefined') {
         queryParams = window.location.search;
       } else {
         queryParams = props.queryParams || '';
       }
-
       var params = new URLSearchParams(queryParams);
       var selectedValues = {};
       var urlValues = {};
       Array.from(params.keys()).forEach(function (key) {
         try {
           var _extends2, _extends3;
-
           var parsedParams = JSON.parse(params.get(key));
           var selectedValue = {};
-
           if (parsedParams.value) {
             selectedValue.value = parsedParams.value;
           } else {
             selectedValue.value = parsedParams;
           }
-
           if (parsedParams.category) selectedValue.category = parsedParams.category;
           selectedValue.reference = 'URL';
           selectedValues = _rollupPluginBabelHelpers._extends({}, selectedValues, (_extends2 = {}, _extends2[key] = selectedValue, _extends2));
           urlValues = _rollupPluginBabelHelpers._extends({}, urlValues, (_extends3 = {}, _extends3[key] = selectedValue.value, _extends3));
-        } catch (e) {// Do not add to selectedValues if JSON parsing fails.
+        } catch (e) {
+          // Do not add to selectedValues if JSON parsing fails.
         }
       });
       var themePreset = props.themePreset,
-          enableAppbase = props.enableAppbase,
-          endpoint = props.endpoint;
+        enableAppbase = props.enableAppbase,
+        endpoint = props.endpoint;
       var appbaseRef = Appbase(config);
-
       appbaseRef.transformRequest = function (request) {
         var modifiedRequest = enableAppbase ? helper.transformRequestUsingEndpoint(request, endpoint) : request;
         if (props.transformRequest) return props.transformRequest(modifiedRequest);
         return modifiedRequest;
       };
-
       if (this.$props.transformResponse) {
         appbaseRef.transformResponse = this.$props.transformResponse;
       }
-
+      var analyticsInitConfig = {
+        url: url && url.replace(/\/\/.*@/, '//'),
+        credentials: appbaseRef.credentials,
+        // When endpoint prop is used index is not defined, so we use _default
+        index: appbaseRef.app || '_default',
+        globalCustomEvents: this.$props.appbaseConfig && this.$props.appbaseConfig.customEvents
+      };
+      try {
+        if (this.$props.endpoint && this.$props.endpoint.url) {
+          // Remove parts between '//' and first '/' in the url
+          analyticsInitConfig.url = this.$props.endpoint.url.replace(/\/\/(.*?)\/.*/, '//$1');
+          var headerCredentials = this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
+          analyticsInitConfig.credentials = headerCredentials && headerCredentials.replace('Basic ', '');
+          // Decode the credentials
+          analyticsInitConfig.credentials = analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
+        }
+      } catch (e) {
+        console.error('Endpoint not set correctly for analytics');
+        console.error(e);
+      }
+      var analyticsRef = AppbaseAnalytics.init(analyticsInitConfig);
       var initialState = _rollupPluginBabelHelpers._extends({
         config: _rollupPluginBabelHelpers._extends({}, config, {
           initialQueriesSyncTime: props.initialQueriesSyncTime,
@@ -536,23 +520,25 @@ var ReactiveBase = {
           themePreset: themePreset
         }),
         appbaseRef: appbaseRef,
+        analyticsRef: analyticsRef,
         selectedValues: selectedValues,
         urlValues: urlValues,
         headers: this.getHeaders
       }, this.$props.initialState);
-
       this.store = configureStore__default(initialState);
+      this.analyticsRef = analyticsRef;
     }
   },
   render: function render() {
     var h = arguments[0];
     var children = this.$slots["default"];
     var _this$$props2 = this.$props,
-        style = _this$$props2.style,
-        className = _this$$props2.className;
+      style = _this$$props2.style,
+      className = _this$$props2.className;
     return h(Provider, {
       "attrs": {
-        "store": this.store
+        "store": this.store,
+        "analyticsRef": this.analyticsRef
       }
     }, [h(URLParamsProvider$1, {
       "attrs": {
@@ -566,7 +552,6 @@ var ReactiveBase = {
     }, [children])]);
   }
 };
-
 ReactiveBase.install = function (Vue) {
   Vue.component(ReactiveBase.name, ReactiveBase);
 };