instantsearch.js 4.35.0 → 4.36.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [4.36.0](https://github.com/algolia/instantsearch.js/compare/v4.35.0...v4.36.0) (2021-12-16)
+
+
+### Features
+
+* **dynamicWidgets:** send facets * and maxValuesPerFacet by default ([#4968](https://github.com/algolia/instantsearch.js/issues/4968)) ([969ae89](https://github.com/algolia/instantsearch.js/commit/969ae8980f7c8a055bb4c6c5967d04744644f555))
+* **DynamicWidgets:** throw when transformItems returns anything that isn't an array ([#4975](https://github.com/algolia/instantsearch.js/issues/4975)) ([5c328c8](https://github.com/algolia/instantsearch.js/commit/5c328c85428eb9a5c1450fd01154751f4e0ea2fa))
+
+
+
 # [4.35.0](https://github.com/algolia/instantsearch.js/compare/v4.34.0...v4.35.0) (2021-12-13)
 
 

package/cjs/connectors/dynamic-widgets/connectDynamicWidgets.js

@@ -19,12 +19,17 @@ var withUsage = (0, _utils.createDocumentationMessageGenerator)({
   name: 'dynamic-widgets',
   connector: true
 });
+var MAX_WILDCARD_FACETS = 20;
 
 var connectDynamicWidgets = function connectDynamicWidgets(renderFn) {
   var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _utils.noop;
   (0, _utils.checkRendering)(renderFn, withUsage());
   return function (widgetParams) {
     var widgets = widgetParams.widgets,
+        _widgetParams$maxValu = widgetParams.maxValuesPerFacet,
+        maxValuesPerFacet = _widgetParams$maxValu === void 0 ? 20 : _widgetParams$maxValu,
+        _widgetParams$facets = widgetParams.facets,
+        facets = _widgetParams$facets === void 0 ? ['*'] : _widgetParams$facets,
         _widgetParams$transfo = widgetParams.transformItems,
         transformItems = _widgetParams$transfo === void 0 ? function (items) {
       return items;
@@ -37,6 +42,10 @@ var connectDynamicWidgets = function connectDynamicWidgets(renderFn) {
       throw new Error(withUsage('The `widgets` option expects an array of widgets.'));
     }
 
+    if (!(Array.isArray(facets) && facets.length <= 1 && (facets[0] === '*' || facets[0] === undefined))) {
+      throw new Error(withUsage("The `facets` option only accepts [] or [\"*\"], you passed ".concat(JSON.stringify(facets))));
+    }
+
     var localWidgets = new Map();
     return {
       $$type: 'ais.dynamicWidgets',
@@ -116,6 +125,14 @@ var connectDynamicWidgets = function connectDynamicWidgets(renderFn) {
         parent.removeWidgets(toRemove);
         unmountFn();
       },
+      getWidgetSearchParameters: function getWidgetSearchParameters(state) {
+        // broadening the scope of facets to avoid conflict between never and *
+        return facets.reduce(function (acc, curr) {
+          return acc.addFacet(curr);
+        }, state.setQueryParameters({
+          maxValuesPerFacet: Math.max(maxValuesPerFacet || 0, state.maxValuesPerFacet || 0)
+        }));
+      },
       getRenderState: function getRenderState(renderState, renderOptions) {
         return _objectSpread(_objectSpread({}, renderState), {}, {
           dynamicWidgets: this.getWidgetRenderState(renderOptions)
@@ -124,7 +141,8 @@ var connectDynamicWidgets = function connectDynamicWidgets(renderFn) {
       getWidgetRenderState: function getWidgetRenderState(_ref4) {
         var _results$renderingCon, _results$renderingCon2, _results$renderingCon3, _results$renderingCon4;
 
-        var results = _ref4.results;
+        var results = _ref4.results,
+            state = _ref4.state;
 
         if (!results) {
           return {
@@ -133,11 +151,18 @@ var connectDynamicWidgets = function connectDynamicWidgets(renderFn) {
           };
         }
 
-        var attributesToRender = (_results$renderingCon = (_results$renderingCon2 = results.renderingContent) === null || _results$renderingCon2 === void 0 ? void 0 : (_results$renderingCon3 = _results$renderingCon2.facetOrdering) === null || _results$renderingCon3 === void 0 ? void 0 : (_results$renderingCon4 = _results$renderingCon3.facets) === null || _results$renderingCon4 === void 0 ? void 0 : _results$renderingCon4.order) !== null && _results$renderingCon !== void 0 ? _results$renderingCon : [];
+        var attributesToRender = transformItems((_results$renderingCon = (_results$renderingCon2 = results.renderingContent) === null || _results$renderingCon2 === void 0 ? void 0 : (_results$renderingCon3 = _results$renderingCon2.facetOrdering) === null || _results$renderingCon3 === void 0 ? void 0 : (_results$renderingCon4 = _results$renderingCon3.facets) === null || _results$renderingCon4 === void 0 ? void 0 : _results$renderingCon4.order) !== null && _results$renderingCon !== void 0 ? _results$renderingCon : [], {
+          results: results
+        });
+
+        if (!Array.isArray(attributesToRender)) {
+          throw new Error(withUsage('The `transformItems` option expects a function that returns an Array.'));
+        }
+
+        process.env.NODE_ENV === 'development' ? (0, _utils.warning)(maxValuesPerFacet >= (state.maxValuesPerFacet || 0), "The maxValuesPerFacet set by dynamic widgets (".concat(maxValuesPerFacet, ") is smaller than one of the limits set by a widget (").concat(state.maxValuesPerFacet, "). This causes a mismatch in query parameters and thus an extra network request when that widget is mounted.")) : void 0;
+        process.env.NODE_ENV === 'development' ? (0, _utils.warning)(attributesToRender.length <= MAX_WILDCARD_FACETS || widgetParams.facets !== undefined, "More than ".concat(MAX_WILDCARD_FACETS, " facets are requested to be displayed without explicitly setting which facets to retrieve. This could have a performance impact. Set \"facets\" to [] to do two smaller network requests, or explicitly to ['*'] to avoid this warning.")) : void 0;
         return {
-          attributesToRender: transformItems(attributesToRender, {
-            results: results
-          }),
+          attributesToRender: attributesToRender,
           widgetParams: widgetParams
         };
       }

package/cjs/lib/version.js

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

package/cjs/widgets/dynamic-widgets/dynamic-widgets.js

@@ -19,6 +19,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var withUsage = (0, _utils.createDocumentationMessageGenerator)({
   name: 'dynamic-widgets'
 });
@@ -36,9 +40,9 @@ function createContainer(rootContainer) {
 var dynamicWidgets = function dynamicWidgets(widgetParams) {
   var _ref = widgetParams || {},
       containerSelector = _ref.container,
-      transformItems = _ref.transformItems,
       widgets = _ref.widgets,
-      fallbackWidget = _ref.fallbackWidget;
+      fallbackWidget = _ref.fallbackWidget,
+      otherWidgetParams = _objectWithoutProperties(_ref, ["container", "widgets", "fallbackWidget"]);
 
   if (!containerSelector) {
     throw new Error(withUsage('The `container` option is required.'));
@@ -73,8 +77,7 @@ var dynamicWidgets = function dynamicWidgets(widgetParams) {
   }, function () {
     userContainer.removeChild(rootContainer);
   });
-  var widget = makeWidget({
-    transformItems: transformItems,
+  var widget = makeWidget(_objectSpread(_objectSpread({}, otherWidgetParams), {}, {
     widgets: connectorWidgets,
     fallbackWidget: typeof fallbackWidget === 'function' ? function (_ref3) {
       var attribute = _ref3.attribute;
@@ -85,7 +88,7 @@ var dynamicWidgets = function dynamicWidgets(widgetParams) {
         container: container
       });
     } : undefined
-  });
+  }));
   return _objectSpread(_objectSpread({}, widget), {}, {
     init: function init(initOptions) {
       widgets.forEach(function (cb) {

package/dist/instantsearch.development.d.ts

@@ -1101,6 +1101,20 @@ declare type DynamicWidgetsConnectorParams = {
     transformItems?(items: string[], metadata: {
         results: SearchResults;
     }): string[];
+    /**
+     * To prevent unneeded extra network requests when widgets mount or unmount,
+     * we request all facet values.
+     *
+     * @default ['*']
+     */
+    facets?: ['*'] | never[];
+    /**
+     * If you have more than 20 facet values pinned, you need to increase the
+     * maxValuesPerFacet to at least that value.
+     *
+     * @default 20
+     */
+    maxValuesPerFacet?: number;
 };
 
 declare type DynamicWidgetsRenderState = {

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.35.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
+/*! InstantSearch.js 4.36.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) :
@@ -8483,7 +8483,7 @@
     instantSearchInstance.renderState = _objectSpread2(_objectSpread2({}, instantSearchInstance.renderState), {}, _defineProperty({}, parentIndexName, _objectSpread2(_objectSpread2({}, instantSearchInstance.renderState[parentIndexName]), renderState)));
   }
 
-  var version$1 = '4.35.0';
+  var version$1 = '4.36.0';
 
   var NAMESPACE = 'ais';
   var component = function component(componentName) {
@@ -15221,12 +15221,17 @@
     name: 'dynamic-widgets',
     connector: true
   });
+  var MAX_WILDCARD_FACETS = 20;
 
   var connectDynamicWidgets = function connectDynamicWidgets(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     checkRendering(renderFn, withUsage$r());
     return function (widgetParams) {
       var widgets = widgetParams.widgets,
+          _widgetParams$maxValu = widgetParams.maxValuesPerFacet,
+          maxValuesPerFacet = _widgetParams$maxValu === void 0 ? 20 : _widgetParams$maxValu,
+          _widgetParams$facets = widgetParams.facets,
+          facets = _widgetParams$facets === void 0 ? ['*'] : _widgetParams$facets,
           _widgetParams$transfo = widgetParams.transformItems,
           transformItems = _widgetParams$transfo === void 0 ? function (items) {
         return items;
@@ -15239,6 +15244,10 @@
         throw new Error(withUsage$r('The `widgets` option expects an array of widgets.'));
       }
 
+      if (!(Array.isArray(facets) && facets.length <= 1 && (facets[0] === '*' || facets[0] === undefined))) {
+        throw new Error(withUsage$r("The `facets` option only accepts [] or [\"*\"], you passed ".concat(JSON.stringify(facets))));
+      }
+
       var localWidgets = new Map();
       return {
         $$type: 'ais.dynamicWidgets',
@@ -15318,6 +15327,14 @@
           parent.removeWidgets(toRemove);
           unmountFn();
         },
+        getWidgetSearchParameters: function getWidgetSearchParameters(state) {
+          // broadening the scope of facets to avoid conflict between never and *
+          return facets.reduce(function (acc, curr) {
+            return acc.addFacet(curr);
+          }, state.setQueryParameters({
+            maxValuesPerFacet: Math.max(maxValuesPerFacet || 0, state.maxValuesPerFacet || 0)
+          }));
+        },
         getRenderState: function getRenderState(renderState, renderOptions) {
           return _objectSpread2(_objectSpread2({}, renderState), {}, {
             dynamicWidgets: this.getWidgetRenderState(renderOptions)
@@ -15326,7 +15343,8 @@
         getWidgetRenderState: function getWidgetRenderState(_ref4) {
           var _results$renderingCon, _results$renderingCon2, _results$renderingCon3, _results$renderingCon4;
 
-          var results = _ref4.results;
+          var results = _ref4.results,
+              state = _ref4.state;
 
           if (!results) {
             return {
@@ -15335,11 +15353,18 @@
             };
           }
 
-          var attributesToRender = (_results$renderingCon = (_results$renderingCon2 = results.renderingContent) === null || _results$renderingCon2 === void 0 ? void 0 : (_results$renderingCon3 = _results$renderingCon2.facetOrdering) === null || _results$renderingCon3 === void 0 ? void 0 : (_results$renderingCon4 = _results$renderingCon3.facets) === null || _results$renderingCon4 === void 0 ? void 0 : _results$renderingCon4.order) !== null && _results$renderingCon !== void 0 ? _results$renderingCon : [];
+          var attributesToRender = transformItems((_results$renderingCon = (_results$renderingCon2 = results.renderingContent) === null || _results$renderingCon2 === void 0 ? void 0 : (_results$renderingCon3 = _results$renderingCon2.facetOrdering) === null || _results$renderingCon3 === void 0 ? void 0 : (_results$renderingCon4 = _results$renderingCon3.facets) === null || _results$renderingCon4 === void 0 ? void 0 : _results$renderingCon4.order) !== null && _results$renderingCon !== void 0 ? _results$renderingCon : [], {
+            results: results
+          });
+
+          if (!Array.isArray(attributesToRender)) {
+            throw new Error(withUsage$r('The `transformItems` option expects a function that returns an Array.'));
+          }
+
+           _warning(maxValuesPerFacet >= (state.maxValuesPerFacet || 0), "The maxValuesPerFacet set by dynamic widgets (".concat(maxValuesPerFacet, ") is smaller than one of the limits set by a widget (").concat(state.maxValuesPerFacet, "). This causes a mismatch in query parameters and thus an extra network request when that widget is mounted.")) ;
+           _warning(attributesToRender.length <= MAX_WILDCARD_FACETS || widgetParams.facets !== undefined, "More than ".concat(MAX_WILDCARD_FACETS, " facets are requested to be displayed without explicitly setting which facets to retrieve. This could have a performance impact. Set \"facets\" to [] to do two smaller network requests, or explicitly to ['*'] to avoid this warning.")) ;
           return {
-            attributesToRender: transformItems(attributesToRender, {
-              results: results
-            }),
+            attributesToRender: attributesToRender,
             widgetParams: widgetParams
           };
         }
@@ -16211,9 +16236,9 @@
   var dynamicWidgets = function dynamicWidgets(widgetParams) {
     var _ref = widgetParams || {},
         containerSelector = _ref.container,
-        transformItems = _ref.transformItems,
         widgets = _ref.widgets,
-        fallbackWidget = _ref.fallbackWidget;
+        fallbackWidget = _ref.fallbackWidget,
+        otherWidgetParams = _objectWithoutProperties(_ref, ["container", "widgets", "fallbackWidget"]);
 
     if (!containerSelector) {
       throw new Error(withUsage$x('The `container` option is required.'));
@@ -16248,8 +16273,7 @@
     }, function () {
       userContainer.removeChild(rootContainer);
     });
-    var widget = makeWidget({
-      transformItems: transformItems,
+    var widget = makeWidget(_objectSpread2(_objectSpread2({}, otherWidgetParams), {}, {
       widgets: connectorWidgets,
       fallbackWidget: typeof fallbackWidget === 'function' ? function (_ref3) {
         var attribute = _ref3.attribute;
@@ -16260,7 +16284,7 @@
           container: container
         });
       } : undefined
-    });
+    }));
     return _objectSpread2(_objectSpread2({}, widget), {}, {
       init: function init(initOptions) {
         widgets.forEach(function (cb) {