instantsearch.js 4.33.2 → 4.34.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [4.34.0](https://github.com/algolia/instantsearch.js/compare/v4.33.2...v4.34.0) (2021-12-07)
+
+
+### Features
+
+* rely on `state` in `getWidgetRenderState` ([#4960](https://github.com/algolia/instantsearch.js/issues/4960)) ([5006841](https://github.com/algolia/instantsearch.js/commit/50068417e5e7211802bc717b582946f6e630d7ac))
+* support initial results (experimental) ([#4967](https://github.com/algolia/instantsearch.js/issues/4967)) ([db11c13](https://github.com/algolia/instantsearch.js/commit/db11c13ea55433491f5e924633bff12a303c1bc6))
+
+
+
 ## [4.33.2](https://github.com/algolia/instantsearch.js/compare/v4.33.1...v4.33.2) (2021-11-16)
 
 

package/README.md

@@ -29,6 +29,7 @@ InstantSearch.js is a vanilla JavaScript library that lets you create an instant
 - [Why](#why)
 - [Getting started](#getting-started)
 - [Installation](#installation)
+  - [TypeScript users](#typescript-users)
 - [Documentation](#documentation)
 - [Demos](#demos)
 - [Playground](#playground)
@@ -132,7 +133,7 @@ The documentation is available on the [Algolia website](https://www.algolia.com/
 
 | E-commerce                                                                                                                                                                                                                   | Media                                                                                                                                                                                                         | Travel                                                                                                                                                                                                              |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <a href="https://instantsearchjs.netlify.com/examples/e-commerce/"><img src="https://www.algolia.com/doc/assets/images/build-search-ui/demos/e-commerce-2c7ed6b6.png" width="250" alt="E-commerce demo preview"></a> | <a href="https://instantsearchjs.netlify.com/examples/media/"><img src="https://instantsearchjs.netlify.com/examples/media/capture.png" width="250" alt="Media demo preview"></a> | <a href="https://instantsearchjs.netlify.com/examples/tourism/"><img src="https://instantsearchjs.netlify.com/examples/tourism/capture.png" width="250" alt="Tourism demo preview"></a> |
+| <a href="https://instantsearchjs.netlify.com/examples/e-commerce/"><img src="https://www.algolia.com/doc/assets/images/build-search-ui/demos/e-commerce-2c7ed6b6.png" width="250" alt="E-commerce demo preview"></a> | <a href="https://instantsearchjs.netlify.com/examples/media/"><img src="./examples/media/capture.png" width="250" alt="Media demo preview"></a> | <a href="https://instantsearchjs.netlify.com/examples/tourism/"><img src="https://instantsearchjs.netlify.com/examples/tourism/capture.png" width="250" alt="Tourism demo preview"></a> |
 
 See more demos [on the website](https://www.algolia.com/doc/guides/building-search-ui/resources/demos/js/).
 

package/cjs/connectors/autocomplete/connectAutocomplete.js

@@ -60,6 +60,7 @@ var connectAutocomplete = function connectAutocomplete(renderFn) {
         var _this = this;
 
         var helper = _ref4.helper,
+            state = _ref4.state,
             scopedResults = _ref4.scopedResults,
             instantSearchInstance = _ref4.instantSearchInstance;
 
@@ -87,7 +88,7 @@ var connectAutocomplete = function connectAutocomplete(renderFn) {
           };
         });
         return {
-          currentRefinement: helper.state.query || '',
+          currentRefinement: state.query || '',
           indices: indices,
           refine: connectorState.refine,
           widgetParams: widgetParams

package/cjs/connectors/infinite-hits/connectInfiniteHits.js

@@ -173,7 +173,7 @@ var connectInfiniteHits = function connectInfiniteHits(renderFn) {
             index: helper.getIndex(),
             widgetType: this.$$type
           });
-          isFirstPage = helper.state.page === undefined || getFirstReceivedPage(helper.state, cachedHits) === 0;
+          isFirstPage = state.page === undefined || getFirstReceivedPage(state, cachedHits) === 0;
         } else {
           var _state$page3 = state.page,
               _page = _state$page3 === void 0 ? 0 : _state$page3;

package/cjs/connectors/pagination/connectPagination.js

@@ -89,6 +89,7 @@ var connectPagination = function connectPagination(renderFn) {
       getWidgetRenderState: function getWidgetRenderState(_ref6) {
         var results = _ref6.results,
             helper = _ref6.helper,
+            state = _ref6.state,
             createURL = _ref6.createURL;
 
         if (!connectorState.refine) {
@@ -99,14 +100,13 @@ var connectPagination = function connectPagination(renderFn) {
         }
 
         if (!connectorState.createURL) {
-          connectorState.createURL = function (state) {
+          connectorState.createURL = function (helperState) {
             return function (page) {
-              return createURL(state.setPage(page));
+              return createURL(helperState.setPage(page));
             };
           };
         }
 
-        var state = helper.state;
         var page = state.page || 0;
         var nbPages = getMaxPage(results || {
           nbPages: 0

package/cjs/connectors/search-box/connectSearchBox.js

@@ -71,11 +71,12 @@ var connectSearchBox = function connectSearchBox(renderFn) {
       },
       getWidgetRenderState: function getWidgetRenderState(_ref3) {
         var helper = _ref3.helper,
-            searchMetadata = _ref3.searchMetadata;
+            searchMetadata = _ref3.searchMetadata,
+            state = _ref3.state;
 
         if (!_refine) {
           var setQueryAndSearch = function setQueryAndSearch(query) {
-            if (query !== helper.state.query) {
+            if (query !== state.query) {
               helper.setQuery(query).search();
             }
           };
@@ -92,7 +93,7 @@ var connectSearchBox = function connectSearchBox(renderFn) {
 
         _clear = clear(helper);
         return {
-          query: helper.state.query || '',
+          query: state.query || '',
           refine: _refine,
           clear: _cachedClear,
           widgetParams: widgetParams,

package/cjs/connectors/sort-by/connectSortBy.js

@@ -72,6 +72,7 @@ var connectSortBy = function connectSortBy(renderFn) {
       getWidgetRenderState: function getWidgetRenderState(_ref3) {
         var results = _ref3.results,
             helper = _ref3.helper,
+            state = _ref3.state,
             parent = _ref3.parent;
 
         if (!connectorState.initialIndex && parent) {
@@ -85,7 +86,7 @@ var connectSortBy = function connectSortBy(renderFn) {
         }
 
         return {
-          currentRefinement: helper.state.index,
+          currentRefinement: state.index,
           options: transformItems(items),
           refine: connectorState.setIndex,
           hasNoResults: results ? results.nbHits === 0 : true,

package/cjs/connectors/stats/connectStats.js

@@ -50,18 +50,18 @@ var connectStats = function connectStats(renderFn) {
       },
       getWidgetRenderState: function getWidgetRenderState(_ref) {
         var results = _ref.results,
-            helper = _ref.helper;
+            state = _ref.state;
 
         if (!results) {
           return {
-            hitsPerPage: helper.state.hitsPerPage,
+            hitsPerPage: state.hitsPerPage,
             nbHits: 0,
             nbSortedHits: undefined,
             areHitsSorted: false,
             nbPages: 0,
-            page: helper.state.page || 0,
+            page: state.page || 0,
             processingTimeMS: -1,
-            query: helper.state.query || '',
+            query: state.query || '',
             widgetParams: widgetParams
           };
         }

package/cjs/connectors/toggle-refinement/connectToggleRefinement.js

@@ -185,7 +185,7 @@ var connectToggleRefinement = function connectToggleRefinement(renderFn) {
             createURL = _ref6.createURL,
             instantSearchInstance = _ref6.instantSearchInstance;
         var isRefined = results ? on.every(function (v) {
-          return helper.state.isDisjunctiveFacetRefined(attribute, v);
+          return state.isDisjunctiveFacetRefined(attribute, v);
         }) : on.every(function (v) {
           return state.isDisjunctiveFacetRefined(attribute, v);
         });

package/cjs/lib/InstantSearch.js

@@ -112,6 +112,8 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
 
     _defineProperty(_assertThisInitialized(_this), "_initialUiState", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "_initialResults", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "_createURL", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "_searchFunction", void 0);
@@ -216,6 +218,7 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
     _this._isSearchStalled = false;
     _this._createURL = defaultCreateURL;
     _this._initialUiState = initialUiState;
+    _this._initialResults = null;
 
     if (searchFunction) {
       _this._searchFunction = searchFunction;
@@ -458,9 +461,27 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
         parent: null,
         uiState: this._initialUiState
       });
-      this.scheduleSearch(); // Keep the previous reference for legacy purpose, some pattern use
+
+      if (this._initialResults) {
+        var originalScheduleSearch = this.scheduleSearch; // We don't schedule a first search when initial results are provided
+        // because we already have the results to render. This skips the initial
+        // network request on the browser on `start`.
+
+        this.scheduleSearch = (0, _utils.defer)(_utils.noop); // We also skip the initial network request when widgets are dynamically
+        // added in the first tick (that's the case in all the framework-based flavors).
+        // When we add a widget to `index`, it calls `scheduleSearch`. We can rely
+        // on our `defer` util to restore the original `scheduleSearch` value once
+        // widgets are added to hook back to the regular lifecycle.
+
+        (0, _utils.defer)(function () {
+          _this3.scheduleSearch = originalScheduleSearch;
+        })();
+      } else {
+        this.scheduleSearch();
+      } // Keep the previous reference for legacy purpose, some pattern use
       // the direct Helper access `search.helper` (e.g multi-index).
 
+
       this.helper = this.mainIndex.getHelper(); // track we started the search if we add more widgets,
       // to init them directly after add
 

package/cjs/lib/version.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = '4.33.2';
+var _default = '4.34.0';
 exports.default = _default;

package/cjs/widgets/index/index.js

@@ -289,7 +289,8 @@ var index = function index(widgetParams) {
       return this;
     },
     init: function init(_ref2) {
-      var _this3 = this;
+      var _this3 = this,
+          _instantSearchInstanc;
 
       var instantSearchInstance = _ref2.instantSearchInstance,
           parent = _ref2.parent,
@@ -347,11 +348,21 @@ var index = function index(widgetParams) {
 
       derivedHelper = mainHelper.derive(function () {
         return _utils.mergeSearchParameters.apply(void 0, _toConsumableArray((0, _utils.resolveSearchParameters)(_this3)));
-      }); // Subscribe to the Helper state changes for the page before widgets
+      });
+      var indexInitialResults = (_instantSearchInstanc = instantSearchInstance._initialResults) === null || _instantSearchInstanc === void 0 ? void 0 : _instantSearchInstanc[this.getIndexId()];
+
+      if (indexInitialResults) {
+        // We restore the shape of the results provided to the instance to respect
+        // the helper's structure.
+        var results = new _algoliasearchHelper.default.SearchResults(new _algoliasearchHelper.default.SearchParameters(indexInitialResults.state), indexInitialResults.results);
+        derivedHelper.lastResults = results;
+        helper.lastResults = results;
+      } // Subscribe to the Helper state changes for the page before widgets
       // are initialized. This behavior mimics the original one of the Helper.
       // It makes sense to replicate it at the `init` step. We have another
       // listener on `change` below, once `init` is done.
 
+
       helper.on('change', function (_ref3) {
         var isPageReset = _ref3.isPageReset;
 
@@ -452,6 +463,13 @@ var index = function index(widgetParams) {
           instantSearchInstance.onInternalStateChange();
         }
       });
+
+      if (indexInitialResults) {
+        // If there are initial results, we're not notified of the next results
+        // because we don't trigger an initial search. We therefore need to directly
+        // schedule a render that will render the results injected on the helper.
+        instantSearchInstance.scheduleRender();
+      }
     },
     render: function render(_ref5) {
       var _this4 = this;

package/dist/instantsearch.development.d.ts

@@ -2194,6 +2194,13 @@ declare type InfiniteHitsWidgetParams = {
     cache?: InfiniteHitsCache;
 };
 
+declare type InitialResult = {
+    state: PlainSearchParameters;
+    results: SearchResults['_rawResults'];
+};
+
+declare type InitialResults = Record<string, InitialResult>;
+
 declare type InitOptions = SharedRenderOptions & {
     uiState: UiState;
     results?: undefined;
@@ -2258,6 +2265,7 @@ declare class InstantSearch<TUiState extends UiState = UiState, TRouteState = TU
     _searchStalledTimer: any;
     _isSearchStalled: boolean;
     _initialUiState: UiState;
+    _initialResults: InitialResults | null;
     _createURL: CreateURL<UiState>;
     _searchFunction?: InstantSearchOptions['searchFunction'];
     _mainHelperSearch?: AlgoliaSearchHelper['search'];

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.33.2 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
+/*! InstantSearch.js 4.34.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -8186,7 +8186,8 @@
         return this;
       },
       init: function init(_ref2) {
-        var _this3 = this;
+        var _this3 = this,
+            _instantSearchInstanc;
 
         var instantSearchInstance = _ref2.instantSearchInstance,
             parent = _ref2.parent,
@@ -8244,11 +8245,21 @@
 
         derivedHelper = mainHelper.derive(function () {
           return merge$1.apply(void 0, _toConsumableArray(resolveSearchParameters(_this3)));
-        }); // Subscribe to the Helper state changes for the page before widgets
+        });
+        var indexInitialResults = (_instantSearchInstanc = instantSearchInstance._initialResults) === null || _instantSearchInstanc === void 0 ? void 0 : _instantSearchInstanc[this.getIndexId()];
+
+        if (indexInitialResults) {
+          // We restore the shape of the results provided to the instance to respect
+          // the helper's structure.
+          var results = new algoliasearchHelper_1.SearchResults(new algoliasearchHelper_1.SearchParameters(indexInitialResults.state), indexInitialResults.results);
+          derivedHelper.lastResults = results;
+          helper.lastResults = results;
+        } // Subscribe to the Helper state changes for the page before widgets
         // are initialized. This behavior mimics the original one of the Helper.
         // It makes sense to replicate it at the `init` step. We have another
         // listener on `change` below, once `init` is done.
 
+
         helper.on('change', function (_ref3) {
           var isPageReset = _ref3.isPageReset;
 
@@ -8349,6 +8360,13 @@
             instantSearchInstance.onInternalStateChange();
           }
         });
+
+        if (indexInitialResults) {
+          // If there are initial results, we're not notified of the next results
+          // because we don't trigger an initial search. We therefore need to directly
+          // schedule a render that will render the results injected on the helper.
+          instantSearchInstance.scheduleRender();
+        }
       },
       render: function render(_ref5) {
         var _this4 = this;
@@ -8465,7 +8483,7 @@
     instantSearchInstance.renderState = _objectSpread2(_objectSpread2({}, instantSearchInstance.renderState), {}, _defineProperty({}, parentIndexName, _objectSpread2(_objectSpread2({}, instantSearchInstance.renderState[parentIndexName]), renderState)));
   }
 
-  var version$1 = '4.33.2';
+  var version$1 = '4.34.0';
 
   var NAMESPACE = 'ais';
   var component = function component(componentName) {
@@ -9962,6 +9980,8 @@
 
       _defineProperty(_assertThisInitialized(_this), "_initialUiState", void 0);
 
+      _defineProperty(_assertThisInitialized(_this), "_initialResults", void 0);
+
       _defineProperty(_assertThisInitialized(_this), "_createURL", void 0);
 
       _defineProperty(_assertThisInitialized(_this), "_searchFunction", void 0);
@@ -10066,6 +10086,7 @@
       _this._isSearchStalled = false;
       _this._createURL = defaultCreateURL;
       _this._initialUiState = initialUiState;
+      _this._initialResults = null;
 
       if (searchFunction) {
         _this._searchFunction = searchFunction;
@@ -10308,9 +10329,27 @@
           parent: null,
           uiState: this._initialUiState
         });
-        this.scheduleSearch(); // Keep the previous reference for legacy purpose, some pattern use
+
+        if (this._initialResults) {
+          var originalScheduleSearch = this.scheduleSearch; // We don't schedule a first search when initial results are provided
+          // because we already have the results to render. This skips the initial
+          // network request on the browser on `start`.
+
+          this.scheduleSearch = defer(noop); // We also skip the initial network request when widgets are dynamically
+          // added in the first tick (that's the case in all the framework-based flavors).
+          // When we add a widget to `index`, it calls `scheduleSearch`. We can rely
+          // on our `defer` util to restore the original `scheduleSearch` value once
+          // widgets are added to hook back to the regular lifecycle.
+
+          defer(function () {
+            _this3.scheduleSearch = originalScheduleSearch;
+          })();
+        } else {
+          this.scheduleSearch();
+        } // Keep the previous reference for legacy purpose, some pattern use
         // the direct Helper access `search.helper` (e.g multi-index).
 
+
         this.helper = this.mainIndex.getHelper(); // track we started the search if we add more widgets,
         // to init them directly after add
 
@@ -11563,7 +11602,7 @@
               index: helper.getIndex(),
               widgetType: this.$$type
             });
-            isFirstPage = helper.state.page === undefined || getFirstReceivedPage(helper.state, cachedHits) === 0;
+            isFirstPage = state.page === undefined || getFirstReceivedPage(state, cachedHits) === 0;
           } else {
             var _state$page3 = state.page,
                 _page = _state$page3 === void 0 ? 0 : _state$page3;
@@ -12291,6 +12330,7 @@
         getWidgetRenderState: function getWidgetRenderState(_ref6) {
           var results = _ref6.results,
               helper = _ref6.helper,
+              state = _ref6.state,
               createURL = _ref6.createURL;
 
           if (!connectorState.refine) {
@@ -12301,14 +12341,13 @@
           }
 
           if (!connectorState.createURL) {
-            connectorState.createURL = function (state) {
+            connectorState.createURL = function (helperState) {
               return function (page) {
-                return createURL(state.setPage(page));
+                return createURL(helperState.setPage(page));
               };
             };
           }
 
-          var state = helper.state;
           var page = state.page || 0;
           var nbPages = getMaxPage(results || {
             nbPages: 0
@@ -13028,11 +13067,12 @@
         },
         getWidgetRenderState: function getWidgetRenderState(_ref3) {
           var helper = _ref3.helper,
-              searchMetadata = _ref3.searchMetadata;
+              searchMetadata = _ref3.searchMetadata,
+              state = _ref3.state;
 
           if (!_refine) {
             var setQueryAndSearch = function setQueryAndSearch(query) {
-              if (query !== helper.state.query) {
+              if (query !== state.query) {
                 helper.setQuery(query).search();
               }
             };
@@ -13049,7 +13089,7 @@
 
           _clear = clear(helper);
           return {
-            query: helper.state.query || '',
+            query: state.query || '',
             refine: _refine,
             clear: _cachedClear,
             widgetParams: widgetParams,
@@ -13135,6 +13175,7 @@
         getWidgetRenderState: function getWidgetRenderState(_ref3) {
           var results = _ref3.results,
               helper = _ref3.helper,
+              state = _ref3.state,
               parent = _ref3.parent;
 
           if (!connectorState.initialIndex && parent) {
@@ -13148,7 +13189,7 @@
           }
 
           return {
-            currentRefinement: helper.state.index,
+            currentRefinement: state.index,
             options: transformItems(items),
             refine: connectorState.setIndex,
             hasNoResults: results ? results.nbHits === 0 : true,
@@ -13492,18 +13533,18 @@
         },
         getWidgetRenderState: function getWidgetRenderState(_ref) {
           var results = _ref.results,
-              helper = _ref.helper;
+              state = _ref.state;
 
           if (!results) {
             return {
-              hitsPerPage: helper.state.hitsPerPage,
+              hitsPerPage: state.hitsPerPage,
               nbHits: 0,
               nbSortedHits: undefined,
               areHitsSorted: false,
               nbPages: 0,
-              page: helper.state.page || 0,
+              page: state.page || 0,
               processingTimeMS: -1,
-              query: helper.state.query || '',
+              query: state.query || '',
               widgetParams: widgetParams
             };
           }
@@ -13696,7 +13737,7 @@
               createURL = _ref6.createURL,
               instantSearchInstance = _ref6.instantSearchInstance;
           var isRefined = results ? on.every(function (v) {
-            return helper.state.isDisjunctiveFacetRefined(attribute, v);
+            return state.isDisjunctiveFacetRefined(attribute, v);
           }) : on.every(function (v) {
             return state.isDisjunctiveFacetRefined(attribute, v);
           });
@@ -14464,6 +14505,7 @@
           var _this = this;
 
           var helper = _ref4.helper,
+              state = _ref4.state,
               scopedResults = _ref4.scopedResults,
               instantSearchInstance = _ref4.instantSearchInstance;
 
@@ -14491,7 +14533,7 @@
             };
           });
           return {
-            currentRefinement: helper.state.query || '',
+            currentRefinement: state.query || '',
             indices: indices,
             refine: connectorState.refine,
             widgetParams: widgetParams