@appbaseio/reactivesearch-vue 2.0.0-alpha.3 → 3.0.0-alpha.0

package/dist/es/ReactiveBase.js

@@ -1,15 +1,16 @@
 import configureStore, { Actions, helper } from '@appbaseio/reactivecore';
-import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-76660dab.js';
-import VueTypes from 'vue-types';
 import '@appbaseio/reactivecore/lib/utils/constants';
+import { _ as _taggedTemplateLiteralLoose, a as _extends } from './_rollupPluginBabelHelpers-ded08042.js';
+import { h, createVNode, isVNode } from 'vue';
+import VueTypes from 'vue-types';
 import { isEqual as isEqual$1, transformRequestUsingEndpoint } from '@appbaseio/reactivecore/lib/utils/helper';
-import styled from '@appbaseio/vue-emotion';
-import { t as types } from './vueTypes-b8146772.js';
+import { styled, createCache } from '@appbaseio/vue-emotion';
+import { t as types } from './vueTypes-f1923c72.js';
 import 'redux';
-import { c as connect, e as composeThemeObject, X as X_SEARCH_CLIENT } from './index-7788a843.js';
-import _mergeJSXProps from '@vue/babel-helper-vue-jsx-merge-props';
+import { c as connect, e as composeThemeObject, X as X_SEARCH_CLIENT } from './index-4520a598.js';
 import { updateAnalyticsConfig } from '@appbaseio/reactivecore/lib/actions/analytics';
 import Appbase from 'appbase-js';
+import AppbaseAnalytics from '@appbaseio/analytics';
 import 'url-search-params-polyfill';
 
 var Provider = {
@@ -22,53 +23,64 @@ 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: false
     }
   },
   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"]);
+  render: function render() {
+    if (this.$slots["default"]().length > 1) {
+      return h('div', this.$slots["default"]());
     }
-
-    return this.$slots["default"][0];
+    return this.$slots["default"]()[0];
   }
 };
 
 var _templateObject;
-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;
-    delete props.attrs.as;
-    return h(T, _mergeJSXProps([{}, props]), [children]);
-  }
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+var Base = function Base(_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;
+  var propsVar = props;
+  delete propsVar.attrs.as;
+  return createVNode(T, props, _isSlot(children) ? children : {
+    "default": function _default() {
+      return [children];
+    }
+  });
 };
 var Base$1 = styled(Base)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tcolor: ", ";\n\twidth: 100%;\n\n\tinput,\n\tbutton,\n\ttextarea,\n\tselect {\n\t\tfont-family: ", ";\n\t}\n\n\t*,\n\t*:before,\n\t*:after {\n\t\tbox-sizing: border-box;\n\t}\n"])), function (_ref2) {
   var theme = _ref2.theme;
-  return theme.typography.fontFamily;
+  return theme && theme.typography ? theme.typography.fontFamily : 'unset';
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.typography.fontSize;
+  return theme && theme.typography ? theme.typography.fontSize : 'unset';
 }, function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.textColor;
+  return theme && theme.colors ? theme.colors.textColor : 'unset';
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.typography.fontFamily;
+  return theme && theme.typography ? theme.typography.fontFamily : 'unset';
 });
 
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
 var setHeaders = Actions.setHeaders,
-    setValue = Actions.setValue;
+  setValue = Actions.setValue;
 var isEqual = helper.isEqual;
 var URLParamsProvider = {
   name: 'URLParamsProvider',
@@ -81,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.
@@ -124,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);
@@ -134,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) {
@@ -143,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();
         }
@@ -208,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 {
@@ -219,7 +216,6 @@ var URLParamsProvider = {
             event = document.createEvent('Event');
             event.initEvent('popstate', true, true);
           }
-
           window.dispatchEvent(event);
         }
       }
@@ -231,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) {
@@ -252,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) {
@@ -274,38 +263,34 @@ var URLParamsProvider = {
           path: newURL
         }, '', newURL);
       }
-
       this.init();
     }
   },
   render: function render() {
-    var h = arguments[0];
-    var children = this.$slots["default"];
-    return h(Base$1, {
-      "attrs": {
-        "as": this.$props.as
-      },
+    var children = this.$slots["default"]();
+    return createVNode(Base$1, {
+      "as": this.$props.as,
       "class": this.$props.className
-    }, [children]);
+    }, _isSlot$1(children) ? children : {
+      "default": function _default() {
+        return [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 = connect(mapStateToProps, mapDispatchtoProps)(URLParamsProvider);
 
 var typography = {
@@ -339,10 +324,12 @@ function getTheme(preset) {
   if (preset === 'light') {
     return light;
   }
-
   return dark;
 }
 
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
 var ReactiveBase = {
   name: 'ReactiveBase',
   data: function data() {
@@ -354,25 +341,10 @@ var ReactiveBase = {
   created: function created() {
     this.setStore(this.$props);
   },
-  mounted: function mounted() {
-    var analyticsConfig = this.analyticsConfig,
-        enableAppbase = this.enableAppbase,
-        endpoint = this.endpoint; // TODO: Remove in 2.0
-
-    if (analyticsConfig !== undefined) {
-      console.warn('Warning(ReactiveSearch): The `analyticsConfig` prop has been marked as deprecated, please use the `appbaseConfig` prop instead.');
-    }
-
-    if (!enableAppbase && endpoint) {
-      console.warn('Warning(ReactiveSearch): The `endpoint` prop works only when `enableAppbase` prop is set to true.');
-    }
-  },
   props: {
     app: types.string,
     analytics: VueTypes.bool,
-    analyticsConfig: types.analyticsConfig,
-    appbaseConfig: types.appbaseConfig,
-    enableAppbase: VueTypes.bool.def(false),
+    reactivesearchAPIConfig: types.reactivesearchAPIConfig,
     credentials: types.string,
     headers: types.headers,
     queryParams: types.string,
@@ -390,12 +362,17 @@ var ReactiveBase = {
     getSearchParams: types.func,
     setSearchParams: types.func,
     mongodb: types.mongodb,
-    endpoint: types.endpointConfig
+    endpoint: types.endpointConfig,
+    preferences: VueTypes.object
   },
   provide: function provide() {
     return {
       theme_reactivesearch: composeThemeObject(getTheme(this.$props.themePreset), this.$props.theme),
-      store: this.store
+      store: this.store,
+      $searchPreferences: this.preferences,
+      $emotionCache: this.$parent && this.$parent.$emotionCache || createCache({
+        key: 'css'
+      })
     };
   },
   watch: {
@@ -417,14 +394,7 @@ var ReactiveBase = {
     headers: function headers() {
       this.updateState(this.$props);
     },
-    analyticsConfig: function analyticsConfig(newVal, oldVal) {
-      if (!isEqual$1(newVal, oldVal)) {
-        if (this.store) {
-          this.store.dispatch(updateAnalyticsConfig(newVal));
-        }
-      }
-    },
-    appbaseConfig: function appbaseConfig(newVal, oldVal) {
+    reactivesearchAPIConfig: function reactivesearchAPIConfig(newVal, oldVal) {
       if (!isEqual$1(newVal, oldVal)) {
         if (this.store) {
           this.store.dispatch(updateAnalyticsConfig(newVal));
@@ -438,20 +408,17 @@ 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;
-
-      var _ref = appbaseConfig || {},
-          enableTelemetry = _ref.enableTelemetry;
-
-      return _extends({}, enableAppbase && !mongodb && _extends({
+        headers = _this$$props.headers,
+        reactivesearchAPIConfig = _this$$props.reactivesearchAPIConfig,
+        mongodb = _this$$props.mongodb,
+        endpoint = _this$$props.endpoint;
+      var _ref = reactivesearchAPIConfig || {},
+        enableTelemetry = _ref.enableTelemetry;
+      return _extends({}, !mongodb && _extends({
         'X-Search-Client': X_SEARCH_CLIENT
       }, enableTelemetry === false && {
         'X-Enable-Telemetry': false
-      }), headers, enableAppbase && endpoint && endpoint.headers && _extends({}, endpoint.headers));
+      }), headers, endpoint && endpoint.headers && _extends({}, endpoint.headers));
     }
   },
   methods: {
@@ -461,12 +428,8 @@ var ReactiveBase = {
     },
     setStore: function setStore(props) {
       var credentials = props.url && props.url.trim() !== '' && !props.credentials ? null : props.credentials;
-
-      var appbaseConfig = _extends({}, props.analyticsConfig, props.appbaseConfig);
-
       var url = props.url && props.url.trim() !== '' ? props.url : '';
-
-      if (props.enableAppbase && props.endpoint) {
+      if (props.endpoint) {
         if (props.endpoint.url) {
           // eslint-disable-next-line prefer-destructuring
           url = props.endpoint.url;
@@ -474,7 +437,6 @@ var ReactiveBase = {
           throw Error('Error(ReactiveSearch): The `endpoint` prop object requires `url` property.');
         }
       }
-
       var config = {
         url: url,
         app: props.app,
@@ -482,58 +444,74 @@ var ReactiveBase = {
         type: props.type ? props.type : '*',
         transformRequest: props.transformRequest,
         transformResponse: props.transformResponse,
-        enableAppbase: props.enableAppbase,
-        analytics: props.appbaseConfig ? props.appbaseConfig.recordAnalytics : props.analytics,
-        analyticsConfig: appbaseConfig,
+        enableAppbase: true,
+        analytics: props.reactivesearchAPIConfig ? props.reactivesearchAPIConfig.recordAnalytics : props.analytics,
+        analyticsConfig: props.reactivesearchAPIConfig,
         mongodb: props.mongodb,
         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 = _extends({}, selectedValues, (_extends2 = {}, _extends2[key] = selectedValue, _extends2));
           urlValues = _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;
+        endpoint = props.endpoint;
       var appbaseRef = Appbase(config);
-
       appbaseRef.transformRequest = function (request) {
-        var modifiedRequest = enableAppbase ? transformRequestUsingEndpoint(request, endpoint) : request;
+        var modifiedRequest = transformRequestUsingEndpoint(request, endpoint);
         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.reactivesearchAPIConfig && this.$props.reactivesearchAPIConfig.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 = null;
+      if (config.analytics) {
+        analyticsRef = AppbaseAnalytics.init(analyticsInitConfig);
+      }
       var initialState = _extends({
         config: _extends({}, config, {
           initialQueriesSyncTime: props.initialQueriesSyncTime,
@@ -542,37 +520,42 @@ var ReactiveBase = {
           themePreset: themePreset
         }),
         appbaseRef: appbaseRef,
+        analyticsRef: analyticsRef,
         selectedValues: selectedValues,
         urlValues: urlValues,
         headers: this.getHeaders
       }, this.$props.initialState);
-
       this.store = configureStore(initialState);
+      this.analyticsRef = analyticsRef;
     }
   },
   render: function render() {
-    var h = arguments[0];
-    var children = this.$slots["default"];
+    var _this = this;
+    var children = this.$slots["default"]();
     var _this$$props2 = this.$props,
-        style = _this$$props2.style,
-        className = _this$$props2.className;
-    return h(Provider, {
-      "attrs": {
-        "store": this.store
+      style = _this$$props2.style,
+      className = _this$$props2.className;
+    return createVNode(Provider, {
+      "store": this.store,
+      "analyticsRef": this.analyticsRef
+    }, {
+      "default": function _default() {
+        return [createVNode(URLParamsProvider$1, {
+          "as": _this.$props.as,
+          "headers": _this.getHeaders,
+          "style": style,
+          "className": className,
+          "getSearchParams": _this.getSearchParams,
+          "setSearchParams": _this.setSearchParams
+        }, _isSlot$2(children) ? children : {
+          "default": function _default() {
+            return [children];
+          }
+        })];
       }
-    }, [h(URLParamsProvider$1, {
-      "attrs": {
-        "as": this.$props.as,
-        "headers": this.getHeaders,
-        "className": className,
-        "getSearchParams": this.getSearchParams,
-        "setSearchParams": this.setSearchParams
-      },
-      "style": style
-    }, [children])]);
+    });
   }
 };
-
 ReactiveBase.install = function (Vue) {
   Vue.component(ReactiveBase.name, ReactiveBase);
 };