instantsearch.js 4.33.0 → 4.35.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [4.35.0](https://github.com/algolia/instantsearch.js/compare/v4.34.0...v4.35.0) (2021-12-13)
+
+
+### Features
+
+* **events:** move to @algolia/events ([#4961](https://github.com/algolia/instantsearch.js/issues/4961)) ([1c56726](https://github.com/algolia/instantsearch.js/commit/1c5672640c65d7ed6f6e381a3162e508bdda44f3))
+
+### Bug Fixes
+
+* **deps:** Add missing peer dependency ([#4950](https://github.com/algolia/instantsearch.js/issues/4950)) ([468578da9](https://github.com/algolia/instantsearch.js/commit/468578da948a12224c892fd12cba4c880aa7b25f))
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* **connectNumericMenu:** allow option for same start/end values ([#4951](https://github.com/algolia/instantsearch.js/issues/4951)) ([18da714](https://github.com/algolia/instantsearch.js/commit/18da714574fa98957d29014add3123e9c377551f))
+
+
+
+## [4.33.1](https://github.com/algolia/instantsearch.js/compare/v4.33.0...v4.33.1) (2021-11-02)
+
+
+### Bug Fixes
+
+* **getUiState:** support `initialUiState` ([#4948](https://github.com/algolia/instantsearch.js/issues/4948)) ([532474d](https://github.com/algolia/instantsearch.js/commit/532474dfaf49446ab59a2a27424ca220947dd5bd))
+
+
+
 # [4.33.0](https://github.com/algolia/instantsearch.js/compare/v4.32.0...v4.33.0) (2021-10-26)
 
 

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)
@@ -102,6 +103,28 @@ npm install instantsearch.js algoliasearch
 yarn add instantsearch.js algoliasearch
 ```
 
+### TypeScript users
+
+To use InstantSearch.js in a TypeScript environment, depending on your [`algoliasearch`](https://github.com/algolia/algoliasearch-client-javascript) version, you need to import different types.
+
+>You still need to import these types even if you don't use InstantSearch.js with [`algoliasearch`](https://github.com/algolia/algoliasearch-client-javascript).
+
+#### `algoliasearch` v4.x
+
+This version uses types provided by both `algoliasearch` and `@algolia/client-search`.
+
+```bash
+yarn add algoliasearch@4 @algolia/client-search
+```
+
+#### `algoliasearch` v3.x
+
+```bash
+yarn add @types/algoliasearch@3
+```
+
+>v3.x is deprecated and will soon no longer be supported.
+
 ## Documentation
 
 The documentation is available on the [Algolia website](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).
@@ -110,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/numeric-menu/connectNumericMenu.js

@@ -242,6 +242,8 @@ function isRefined(state, attribute, option) {
   if (option.start !== undefined && option.end !== undefined) {
     if (option.start === option.end) {
       return hasNumericRefinement(currentRefinements, '=', option.start);
+    } else {
+      return hasNumericRefinement(currentRefinements, '>=', option.start) && hasNumericRefinement(currentRefinements, '<=', option.end);
     }
   }
 
@@ -295,17 +297,17 @@ function getRefinedState(state, attribute, facetValue) {
   if (refinedOption.start !== undefined) {
     if (hasNumericRefinement(currentRefinements, '>=', refinedOption.start)) {
       resolvedState = resolvedState.removeNumericRefinement(attribute, '>=', refinedOption.start);
-    } else {
-      resolvedState = resolvedState.addNumericRefinement(attribute, '>=', refinedOption.start);
     }
+
+    resolvedState = resolvedState.addNumericRefinement(attribute, '>=', refinedOption.start);
   }
 
   if (refinedOption.end !== undefined) {
     if (hasNumericRefinement(currentRefinements, '<=', refinedOption.end)) {
       resolvedState = resolvedState.removeNumericRefinement(attribute, '<=', refinedOption.end);
-    } else {
-      resolvedState = resolvedState.addNumericRefinement(attribute, '<=', refinedOption.end);
     }
+
+    resolvedState = resolvedState.addNumericRefinement(attribute, '<=', refinedOption.end);
   }
 
   if (typeof resolvedState.page === 'number') {

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _algoliasearchHelper = _interopRequireDefault(require("algoliasearch-helper"));
 
-var _events = _interopRequireDefault(require("events"));
+var _events = _interopRequireDefault(require("@algolia/events"));
 
 var _index = _interopRequireWildcard(require("../widgets/index/index"));
 
@@ -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.0';
+var _default = '4.35.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;
@@ -555,7 +573,7 @@ var index = function index(widgetParams) {
       localUiState = getLocalWidgetsUiState(localWidgets, {
         searchParameters: this.getHelper().state,
         helper: this.getHelper()
-      });
+      }, localUiState);
     }
   };
 };

package/dist/instantsearch.development.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="google.maps" />
-/// <reference types="node" />
 
 import type algoliasearch from 'algoliasearch/lite';
 import type { AlgoliaSearchHelper } from 'algoliasearch-helper';
 import type * as ClientSearch from '@algolia/client-search';
-import EventEmitter from 'events';
+import EventEmitter from '@algolia/events';
 import type { InsightsClient as InsightsClient_2 } from 'search-insights';
 import type { InsightsMethodMap } from 'search-insights';
 import type * as Places from 'places.js';
@@ -2194,6 +2193,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 +2264,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'];