instantsearch.js 4.66.1 → 4.68.0

package/es/components/Template/Template.js

@@ -42,7 +42,7 @@ var RawHtml = /*#__PURE__*/function (_Component) {
       var fragment = new DocumentFragment();
       var root = document.createElement('div');
       root.innerHTML = this.props.content;
-      this.nodes = _toConsumableArray(root.children);
+      this.nodes = _toConsumableArray(root.childNodes);
       this.nodes.forEach(function (node) {
         return fragment.appendChild(node);
       });
@@ -52,8 +52,17 @@ var RawHtml = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.nodes.forEach(function (node) {
-        return node.outerHTML = '';
+        if (node instanceof Element) {
+          node.outerHTML = '';
+          return;
+        }
+        node.nodeValue = '';
       });
+      // if there is one TextNode first and one TextNode last, the
+      // last one's nodeValue will be assigned to the first.
+      if (this.nodes[0].nodeValue) {
+        this.nodes[0].nodeValue = '';
+      }
     }
   }, {
     key: "render",

package/es/connectors/hits/connectHits.d.ts

@@ -1,6 +1,7 @@
 import type { SendEventForHits, BindEventForHits } from '../../lib/utils';
 import type { TransformItems, Connector, Hit, WidgetRenderState, BaseHit } from '../../types';
 import type { SearchResults } from 'algoliasearch-helper';
+type Banner = NonNullable<NonNullable<Required<SearchResults<Hit>['renderingContent']>>['widgets']['banners']>[number];
 export type HitsRenderState<THit extends BaseHit = BaseHit> = {
     /**
      * The matched hits from Algolia API.
@@ -10,6 +11,10 @@ export type HitsRenderState<THit extends BaseHit = BaseHit> = {
      * The response from the Algolia API.
      */
     results?: SearchResults<Hit<THit>>;
+    /**
+     * The banner to display above the hits.
+     */
+    banner?: Banner;
     /**
      * Sends an event to the Insights middleware.
      */

package/es/connectors/hits/connectHits.js

@@ -42,6 +42,7 @@ var connectHits = function connectHits(renderFn) {
         });
       },
       getWidgetRenderState: function getWidgetRenderState(_ref2) {
+        var _results$renderingCon, _results$renderingCon2, _results$renderingCon3;
         var results = _ref2.results,
           helper = _ref2.helper,
           instantSearchInstance = _ref2.instantSearchInstance;
@@ -67,6 +68,7 @@ var connectHits = function connectHits(renderFn) {
           return {
             hits: [],
             results: undefined,
+            banner: undefined,
             sendEvent: sendEvent,
             bindEvent: bindEvent,
             widgetParams: widgetParams
@@ -80,9 +82,11 @@ var connectHits = function connectHits(renderFn) {
         var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID, {
           results: results
         });
+        var banner = (_results$renderingCon = results.renderingContent) === null || _results$renderingCon === void 0 ? void 0 : (_results$renderingCon2 = _results$renderingCon.widgets) === null || _results$renderingCon2 === void 0 ? void 0 : (_results$renderingCon3 = _results$renderingCon2.banners) === null || _results$renderingCon3 === void 0 ? void 0 : _results$renderingCon3[0];
         return {
           hits: transformedHits,
           results: results,
+          banner: banner,
           sendEvent: sendEvent,
           bindEvent: bindEvent,
           widgetParams: widgetParams

package/es/lib/InstantSearch.js

@@ -384,7 +384,7 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
         // under the hood, we have a different implementation. It should be
         // completely transparent for the rest of the codebase. Only this module
         // is impacted.
-        return mainHelper.searchOnlyWithDerivedHelpers();
+        return mainHelper.searchOnlyWithDerivedHelpers() && mainHelper.recommend();
       };
       if (this._searchFunction) {
         // this client isn't used to actually search, but required for the helper

package/es/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "4.66.1";
+declare const _default: "4.68.0";
 export default _default;

package/es/lib/version.js

@@ -1 +1 @@
-export default '4.66.1';
+export default '4.68.0';

package/es/types/widget.d.ts

@@ -3,7 +3,7 @@ import type { InstantSearch } from './instantsearch';
 import type { IndexRenderState, WidgetRenderState } from './render-state';
 import type { IndexUiState, UiState } from './ui-state';
 import type { Expand, RequiredKeys } from './utils';
-import type { AlgoliaSearchHelper as Helper, SearchParameters, SearchResults } from 'algoliasearch-helper';
+import type { AlgoliaSearchHelper as Helper, SearchParameters, SearchResults, RecommendParameters } from 'algoliasearch-helper';
 export type ScopedResult = {
     indexId: string;
     results: SearchResults;
@@ -30,6 +30,9 @@ export type InitOptions = SharedRenderOptions & {
     uiState: UiState;
     results?: undefined;
 };
+export type ShouldRenderOptions = {
+    instantSearchInstance: InstantSearch;
+};
 export type RenderOptions = SharedRenderOptions & {
     results: SearchResults;
 };
@@ -51,6 +54,18 @@ export type WidgetDescription = {
     indexRenderState?: Record<string, unknown>;
     indexUiState?: Record<string, unknown>;
 };
+type SearchWidgetLifeCycle<TWidgetDescription extends WidgetDescription> = {
+    dependsOn?: 'search';
+    getWidgetParameters?: (state: SearchParameters, widgetParametersOptions: {
+        uiState: Expand<Partial<TWidgetDescription['indexUiState'] & IndexUiState>>;
+    }) => SearchParameters;
+};
+type RecommendWidgetLifeCycle<TWidgetDescription extends WidgetDescription> = {
+    dependsOn?: 'recommend';
+    getWidgetParameters: (state: RecommendParameters, widgetParametersOptions: {
+        uiState: Expand<Partial<TWidgetDescription['indexUiState'] & IndexUiState>>;
+    }) => RecommendParameters;
+};
 type RequiredWidgetLifeCycle<TWidgetDescription extends WidgetDescription> = {
     /**
      * Identifier for connectors and widgets.
@@ -60,6 +75,10 @@ type RequiredWidgetLifeCycle<TWidgetDescription extends WidgetDescription> = {
      * Called once before the first search.
      */
     init?: (options: InitOptions) => void;
+    /**
+     * Whether `render` should be called
+     */
+    shouldRender?: (options: ShouldRenderOptions) => boolean;
     /**
      * Called after each search response has been received.
      */
@@ -116,7 +135,7 @@ type RequiredUiStateLifeCycle<TWidgetDescription extends WidgetDescription> = {
     getWidgetSearchParameters: (state: SearchParameters, widgetSearchParametersOptions: {
         uiState: Expand<Partial<TWidgetDescription['indexUiState'] & IndexUiState>>;
     }) => SearchParameters;
-};
+} & (SearchWidgetLifeCycle<TWidgetDescription> | RecommendWidgetLifeCycle<TWidgetDescription>);
 type UiStateLifeCycle<TWidgetDescription extends WidgetDescription> = TWidgetDescription extends RequiredKeys<WidgetDescription, 'indexUiState'> ? RequiredUiStateLifeCycle<TWidgetDescription> : Partial<RequiredUiStateLifeCycle<TWidgetDescription>>;
 type RequiredRenderStateLifeCycle<TWidgetDescription extends WidgetDescription & WidgetParams> = {
     /**

package/es/widgets/hits/defaultTemplates.d.ts

@@ -1,3 +1,3 @@
 import type { HitsTemplates } from './hits';
-declare const defaultTemplates: Required<HitsTemplates>;
+declare const defaultTemplates: HitsTemplates;
 export default defaultTemplates;

package/es/widgets/hits/hits.d.ts

@@ -1,5 +1,5 @@
 
-import type { HitsConnectorParams, HitsWidgetDescription } from '../../connectors/hits/connectHits';
+import type { HitsConnectorParams, HitsRenderState, HitsWidgetDescription } from '../../connectors/hits/connectHits';
 import type { Template, TemplateWithBindEvent, Hit, WidgetFactory } from '../../types';
 import type { SearchResults } from 'algoliasearch-helper';
 import type { HitsClassNames as HitsUiComponentClassNames } from 'instantsearch-ui-components';
@@ -20,6 +20,13 @@ export type HitsTemplates = Partial<{
         /** @deprecated the index in the hits array, use __position instead, which is the absolute position */
         __hitIndex: number;
     }>;
+    /**
+     * Template to use for the banner.
+     */
+    banner: Template<{
+        banner: Required<HitsRenderState['banner']>;
+        className: string;
+    }>;
 }>;
 export type HitsWidgetParams = {
     /**

package/es/widgets/hits/hits.js

@@ -36,7 +36,8 @@ var renderer = function renderer(_ref) {
       instantSearchInstance = _ref2.instantSearchInstance,
       insights = _ref2.insights,
       bindEvent = _ref2.bindEvent,
-      sendEvent = _ref2.sendEvent;
+      sendEvent = _ref2.sendEvent,
+      banner = _ref2.banner;
     if (isFirstRendering) {
       renderState.templateProps = prepareTemplateProps({
         defaultTemplates: defaultTemplates,
@@ -54,7 +55,8 @@ var renderer = function renderer(_ref) {
       return h(TemplateComponent, _extends({}, renderState.templateProps, {
         rootProps: rootProps,
         templateKey: "empty",
-        data: results
+        data: results,
+        rootTagName: "fragment"
       }));
     };
 
@@ -87,12 +89,21 @@ var renderer = function renderer(_ref) {
         sendEvent: sendEvent
       }));
     };
+    var bannerComponent = function bannerComponent(props) {
+      return h(TemplateComponent, _extends({}, renderState.templateProps, {
+        templateKey: "banner",
+        data: props,
+        rootTagName: "fragment"
+      }));
+    };
     render(h(Hits, {
       hits: receivedHits,
       itemComponent: itemComponent,
       sendEvent: sendEvent,
       classNames: cssClasses,
-      emptyComponent: emptyComponent
+      emptyComponent: emptyComponent,
+      banner: banner,
+      bannerComponent: templates.banner ? bannerComponent : undefined
     }), containerNode);
   };
 };

package/es/widgets/index/index.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["initialSearchParameters"];
+var _excluded = ["initialSearchParameters"],
+  _excluded2 = ["initialRecommendParameters"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -25,6 +26,7 @@ var withUsage = createDocumentationMessageGenerator({
  */
 function privateHelperSetState(helper, _ref) {
   var state = _ref.state,
+    recommendState = _ref.recommendState,
     isPageReset = _ref.isPageReset,
     _uiState = _ref._uiState;
   if (state !== helper.state) {
@@ -36,7 +38,14 @@ function privateHelperSetState(helper, _ref) {
       _uiState: _uiState
     });
   }
+  if (recommendState !== helper.recommendState) {
+    helper.recommendState = recommendState;
+
+    // eslint-disable-next-line no-warning-comments
+    // TODO: emit "change" event when events for Recommend are implemented
+  }
 }
+
 function getLocalWidgetsUiState(widgets, widgetStateOptions) {
   var initialUiState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return widgets.reduce(function (uiState, widget) {
@@ -55,15 +64,26 @@ function getLocalWidgetsUiState(widgets, widgetStateOptions) {
 function getLocalWidgetsSearchParameters(widgets, widgetSearchParametersOptions) {
   var initialSearchParameters = widgetSearchParametersOptions.initialSearchParameters,
     rest = _objectWithoutProperties(widgetSearchParametersOptions, _excluded);
-  return widgets.filter(function (widget) {
-    return !isIndexWidget(widget);
-  }).reduce(function (state, widget) {
-    if (!widget.getWidgetSearchParameters) {
+  return widgets.reduce(function (state, widget) {
+    if (!widget.getWidgetSearchParameters || isIndexWidget(widget)) {
       return state;
     }
+    if (widget.dependsOn === 'search' && widget.getWidgetParameters) {
+      return widget.getWidgetParameters(state, rest);
+    }
     return widget.getWidgetSearchParameters(state, rest);
   }, initialSearchParameters);
 }
+function getLocalWidgetsRecommendParameters(widgets, widgetRecommendParametersOptions) {
+  var initialRecommendParameters = widgetRecommendParametersOptions.initialRecommendParameters,
+    rest = _objectWithoutProperties(widgetRecommendParametersOptions, _excluded2);
+  return widgets.reduce(function (state, widget) {
+    if (!isIndexWidget(widget) && widget.dependsOn === 'recommend' && widget.getWidgetParameters) {
+      return widget.getWidgetParameters(state, rest);
+    }
+    return state;
+  }, initialRecommendParameters);
+}
 function resetPageFromWidgets(widgets) {
   var indexWidgets = widgets.filter(isIndexWidget);
   if (indexWidgets.length === 0) {
@@ -73,6 +93,7 @@ function resetPageFromWidgets(widgets) {
     var widgetHelper = widget.getHelper();
     privateHelperSetState(widgetHelper, {
       state: widgetHelper.state.resetPage(),
+      recommendState: widgetHelper.recommendState,
       isPageReset: true
     });
     resetPageFromWidgets(widget.getWidgets());
@@ -131,9 +152,18 @@ var index = function index(widgetParams) {
     },
     getScopedResults: function getScopedResults() {
       var widgetParent = this.getParent();
-
-      // If the widget is the root, we consider itself as the only sibling.
-      var widgetSiblings = widgetParent ? widgetParent.getWidgets() : [this];
+      var widgetSiblings;
+      if (widgetParent) {
+        widgetSiblings = widgetParent.getWidgets();
+      } else if (indexName.length === 0) {
+        // The widget is the root but has no index name:
+        // we resolve results from its children index widgets
+        widgetSiblings = this.getWidgets();
+      } else {
+        // The widget is the root and has an index name:
+        // we consider itself as the only sibling
+        widgetSiblings = [this];
+      }
       return resolveScopedResultsFromWidgets(widgetSiblings);
     },
     getParent: function getParent() {
@@ -168,6 +198,10 @@ var index = function index(widgetParams) {
             uiState: localUiState,
             initialSearchParameters: helper.state
           }),
+          recommendState: getLocalWidgetsRecommendParameters(localWidgets, {
+            uiState: localUiState,
+            initialRecommendParameters: helper.recommendState
+          }),
           _uiState: localUiState
         });
 
@@ -264,11 +298,16 @@ var index = function index(widgetParams) {
           index: indexName
         })
       });
+      var recommendParameters = getLocalWidgetsRecommendParameters(localWidgets, {
+        uiState: localUiState,
+        initialRecommendParameters: new algoliasearchHelper.RecommendParameters()
+      });
 
       // This Helper is only used for state management we do not care about the
       // `searchClient`. Only the "main" Helper created at the `InstantSearch`
       // level is aware of the client.
       helper = algoliasearchHelper({}, parameters.index, parameters);
+      helper.recommendState = recommendParameters;
 
       // We forward the call to `search` to the "main" instance of the Helper
       // which is responsible for managing the queries (it's the only one that is
@@ -299,6 +338,8 @@ var index = function index(widgetParams) {
       };
       derivedHelper = mainHelper.derive(function () {
         return mergeSearchParameters.apply(void 0, [mainHelper.state].concat(_toConsumableArray(resolveSearchParameters(_this3))));
+      }, function () {
+        return _this3.getHelper().recommendState;
       });
       var indexInitialResults = (_instantSearchInstanc = instantSearchInstance._initialResults) === null || _instantSearchInstanc === void 0 ? void 0 : _instantSearchInstanc[this.getIndexId()];
       if (indexInitialResults) {
@@ -347,6 +388,21 @@ var index = function index(widgetParams) {
         lastValidSearchParameters = results === null || results === void 0 ? void 0 : results._state;
       });
 
+      // eslint-disable-next-line no-warning-comments
+      // TODO: listen to "result" event when events for Recommend are implemented
+      derivedHelper.on('recommend:result', function (_ref5) {
+        var recommend = _ref5.recommend;
+        // The index does not render the results it schedules a new render
+        // to let all the other indices emit their own results. It allows us to
+        // run the render process in one pass.
+        instantSearchInstance.scheduleRender();
+
+        // the derived helper is the one which actually searches, but the helper
+        // which is exposed e.g. via instance.helper, doesn't search, and thus
+        // does not have access to lastRecommendResults.
+        helper.lastRecommendResults = recommend.results;
+      });
+
       // We compute the render state before calling `init` in a separate loop
       // to construct the whole render state object that is then passed to
       // `init`.
@@ -397,9 +453,9 @@ var index = function index(widgetParams) {
         instantSearchInstance.scheduleRender();
       }
     },
-    render: function render(_ref5) {
+    render: function render(_ref6) {
       var _this4 = this;
-      var instantSearchInstance = _ref5.instantSearchInstance;
+      var instantSearchInstance = _ref6.instantSearchInstance;
       // we can't attach a listener to the error event of search, as the error
       // then would no longer be thrown for global handlers.
       if (instantSearchInstance.status === 'error' && !instantSearchInstance.mainHelper.hasPendingRequests() && lastValidSearchParameters) {
@@ -409,6 +465,14 @@ var index = function index(widgetParams) {
       // We only render index widgets if there are no results.
       // This makes sure `render` is never called with `results` being `null`.
       var widgetsToRender = this.getResults() ? localWidgets : localWidgets.filter(isIndexWidget);
+      widgetsToRender = widgetsToRender.filter(function (widget) {
+        if (!widget.shouldRender) {
+          return true;
+        }
+        return widget.shouldRender({
+          instantSearchInstance: instantSearchInstance
+        });
+      });
       widgetsToRender.forEach(function (widget) {
         if (widget.getRenderState) {
           var renderState = widget.getRenderState(instantSearchInstance.renderState[_this4.getIndexId()] || {}, createRenderArgs(instantSearchInstance, _this4));
@@ -467,8 +531,8 @@ var index = function index(widgetParams) {
       process.env.NODE_ENV === 'development' ? warning(false, 'The `getWidgetState` method is renamed `getWidgetUiState` and will no longer exist under that name in InstantSearch.js 5.x. Please use `getWidgetUiState` instead.') : void 0;
       return this.getWidgetUiState(uiState);
     },
-    getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref6) {
-      var uiState = _ref6.uiState;
+    getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref7) {
+      var uiState = _ref7.uiState;
       return getLocalWidgetsSearchParameters(localWidgets, {
         uiState: uiState,
         initialSearchParameters: searchParameters
@@ -489,10 +553,10 @@ var index = function index(widgetParams) {
   };
 };
 export default index;
-function storeRenderState(_ref7) {
-  var renderState = _ref7.renderState,
-    instantSearchInstance = _ref7.instantSearchInstance,
-    parent = _ref7.parent;
+function storeRenderState(_ref8) {
+  var renderState = _ref8.renderState,
+    instantSearchInstance = _ref8.instantSearchInstance,
+    parent = _ref8.parent;
   var parentIndexName = parent ? parent.getIndexId() : instantSearchInstance.mainIndex.getIndexId();
   instantSearchInstance.renderState = _objectSpread(_objectSpread({}, instantSearchInstance.renderState), {}, _defineProperty({}, parentIndexName, _objectSpread(_objectSpread({}, instantSearchInstance.renderState[parentIndexName]), renderState)));
 }

package/es/widgets/panel/panel.d.ts

@@ -80,7 +80,7 @@ export type PanelWidgetParams<TWidgetFactory extends AnyWidgetFactory> = {
      */
     cssClasses?: PanelCSSClasses;
 };
-type AugmentedWidget<TWidgetFactory extends AnyWidgetFactory, TOverriddenKeys extends keyof Widget = 'init' | 'render' | 'dispose'> = Omit<ReturnType<TWidgetFactory>, TOverriddenKeys> & Pick<Required<Widget>, TOverriddenKeys>;
+type AugmentedWidget<TWidgetFactory extends AnyWidgetFactory, TOverriddenKeys extends keyof Widget = 'init' | 'render' | 'dispose'> = Omit<ReturnType<TWidgetFactory>, TOverriddenKeys | 'dependsOn' | 'getWidgetParameters'> & Pick<Required<Widget>, TOverriddenKeys>;
 export type PanelWidget = <TWidgetFactory extends AnyWidgetFactory>(panelWidgetParams?: PanelWidgetParams<TWidgetFactory>) => (widgetFactory: TWidgetFactory) => (widgetParams: Parameters<TWidgetFactory>[0]) => AugmentedWidget<TWidgetFactory>;
 /**
  * The panel widget wraps other widgets in a consistent panel design.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch.js",
-  "version": "4.66.1",
+  "version": "4.68.0",
   "description": "InstantSearch.js is a JavaScript library for building performant and instant search experiences with Algolia.",
   "homepage": "https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/",
   "types": "es/index.d.ts",
@@ -31,10 +31,10 @@
     "@types/google.maps": "^3.45.3",
     "@types/hogan.js": "^3.0.0",
     "@types/qs": "^6.5.3",
-    "algoliasearch-helper": "3.17.0",
+    "algoliasearch-helper": "3.19.0",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",
-    "instantsearch-ui-components": "0.4.0",
+    "instantsearch-ui-components": "0.5.0",
     "preact": "^10.10.0",
     "qs": "^6.5.1 < 6.10",
     "search-insights": "^2.13.0"
@@ -56,15 +56,15 @@
     "watch:es": "yarn --silent build:es:base --watch"
   },
   "devDependencies": {
-    "@instantsearch/mocks": "1.40.0",
-    "@instantsearch/tests": "1.40.0",
-    "@instantsearch/testutils": "1.29.0",
+    "@instantsearch/mocks": "1.42.0",
+    "@instantsearch/tests": "1.42.0",
+    "@instantsearch/testutils": "1.31.0",
     "@storybook/html": "5.3.9",
     "@types/scriptjs": "0.0.2",
-    "algoliasearch": "4.22.1",
+    "algoliasearch": "4.23.2",
     "places.js": "1.17.1",
     "scriptjs": "2.5.9",
     "webpack": "4.47.0"
   },
-  "gitHead": "d309ca3333476a842be080fcb01b8be925aad204"
+  "gitHead": "68fe2ee8544096eff8c2fbafe01a50a8acbca2b9"
 }