instantsearch.js 4.45.1 → 4.46.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [4.46.0](https://github.com/algolia/instantsearch.js/compare/v4.45.1...v4.46.0) (2022-09-12)
+
+
+### Features
+
+* **html:** deprecate Hogan.js and string-based templates ([#5095](https://github.com/algolia/instantsearch.js/issues/5095)) ([a06ddf5](https://github.com/algolia/instantsearch.js/commit/a06ddf55f1ffd1a93cddab2fcf95d2be3220a423))
+* **html:** introduce `html` templating ([#5081](https://github.com/algolia/instantsearch.js/issues/5081)) ([e55e224](https://github.com/algolia/instantsearch.js/commit/e55e2245256193d27f2c85f24b8aab7c9048c554))
+
+
+
 ## [4.45.1](https://github.com/algolia/instantsearch.js/compare/v4.45.0...v4.45.1) (2022-09-06)
 
 

package/cjs/components/Hits/Hits.js

@@ -25,6 +25,7 @@ var Hits = function Hits(_ref) {
   var results = _ref.results,
       hits = _ref.hits,
       bindEvent = _ref.bindEvent,
+      sendEvent = _ref.sendEvent,
       cssClasses = _ref.cssClasses,
       templateProps = _ref.templateProps;
 
@@ -53,7 +54,8 @@ var Hits = function Hits(_ref) {
       data: _objectSpread(_objectSpread({}, hit), {}, {
         __hitIndex: index
       }),
-      bindEvent: bindEvent
+      bindEvent: bindEvent,
+      sendEvent: sendEvent
     }));
   })));
 };

package/cjs/components/InfiniteHits/InfiniteHits.js

@@ -25,6 +25,7 @@ var InfiniteHits = function InfiniteHits(_ref) {
   var results = _ref.results,
       hits = _ref.hits,
       bindEvent = _ref.bindEvent,
+      sendEvent = _ref.sendEvent,
       hasShowPrevious = _ref.hasShowPrevious,
       showPrevious = _ref.showPrevious,
       showMore = _ref.showMore,
@@ -66,7 +67,8 @@ var InfiniteHits = function InfiniteHits(_ref) {
       data: _objectSpread(_objectSpread({}, hit), {}, {
         __hitIndex: position
       }),
-      bindEvent: bindEvent
+      bindEvent: bindEvent,
+      sendEvent: sendEvent
     }));
   })), (0, _preact.h)(_Template.default, _extends({}, templateProps, {
     templateKey: "showMoreText",

package/cjs/components/Template/Template.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,6 +11,8 @@ var _index = require("../../lib/utils/index.js");
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -63,6 +63,11 @@ var Template = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this = this;
+
+      process.env.NODE_ENV === 'development' ? (0, _index.warning)(Object.keys(this.props.templates).every(function (key) {
+        return typeof _this.props.templates[key] === 'function';
+      }), "Hogan.js and string-based templates are deprecated and will not be supported in InstantSearch.js 5.x.\n\nYou can replace them with function-form templates and use either the provided `html` function or JSX templates.\n\nSee: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-templates") : void 0;
       var RootTagName = this.props.rootTagName;
       var useCustomCompileOptions = this.props.useCustomCompileOptions[this.props.templateKey];
       var compileOptions = useCustomCompileOptions ? this.props.templatesConfig.compileOptions : {};
@@ -72,7 +77,8 @@ var Template = /*#__PURE__*/function (_Component) {
         compileOptions: compileOptions,
         helpers: this.props.templatesConfig.helpers,
         data: this.props.data,
-        bindEvent: this.props.bindEvent
+        bindEvent: this.props.bindEvent,
+        sendEvent: this.props.sendEvent
       });
 
       if (content === null) {
@@ -81,6 +87,10 @@ var Template = /*#__PURE__*/function (_Component) {
         return null;
       }
 
+      if (_typeof(content) === 'object') {
+        return (0, _preact.h)(RootTagName, this.props.rootProps, content);
+      }
+
       return (0, _preact.h)(RootTagName, _extends({}, this.props.rootProps, {
         dangerouslySetInnerHTML: {
           __html: content

package/cjs/lib/createHelpers.js

@@ -7,6 +7,8 @@ exports.default = hoganHelpers;
 
 var _index = require("../helpers/index.js");
 
+var _formatNumber2 = require("./formatNumber.js");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -17,7 +19,7 @@ function hoganHelpers(_ref) {
   var numberLocale = _ref.numberLocale;
   return {
     formatNumber: function formatNumber(value, render) {
-      return Number(render(value)).toLocaleString(numberLocale);
+      return (0, _formatNumber2.formatNumber)(Number(render(value)), numberLocale);
     },
     highlight: function highlight(options, render) {
       try {

package/cjs/lib/formatNumber.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatNumber = formatNumber;
+
+function formatNumber(value, numberLocale) {
+  return value.toLocaleString(numberLocale);
+}

package/cjs/lib/utils/cx.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cx = cx;
+
+function cx(cssClasses) {
+  return Array.isArray(cssClasses) ? cssClasses.filter(Boolean).join(' ') : cssClasses || '';
+}

package/cjs/lib/utils/index.js

@@ -56,7 +56,8 @@ var _exportNames = {
   serializePayload: true,
   deserializePayload: true,
   getWidgetAttribute: true,
-  safelyRunOnBrowser: true
+  safelyRunOnBrowser: true,
+  cx: true
 };
 Object.defineProperty(exports, "capitalize", {
   enumerable: true,
@@ -376,6 +377,12 @@ Object.defineProperty(exports, "safelyRunOnBrowser", {
     return _safelyRunOnBrowser.safelyRunOnBrowser;
   }
 });
+Object.defineProperty(exports, "cx", {
+  enumerable: true,
+  get: function get() {
+    return _cx.cx;
+  }
+});
 
 var _capitalize = _interopRequireDefault(require("./capitalize.js"));
 
@@ -495,4 +502,6 @@ var _getWidgetAttribute = require("./getWidgetAttribute.js");
 
 var _safelyRunOnBrowser = require("./safelyRunOnBrowser.js");
 
+var _cx = require("./cx.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cjs/lib/utils/renderTemplate.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _hogan = _interopRequireDefault(require("hogan.js"));
 
+var _index = require("../../helpers/components/index.js");
+
+var _preact = require("htm/preact");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -46,7 +50,8 @@ function renderTemplate(_ref) {
       compileOptions = _ref.compileOptions,
       helpers = _ref.helpers,
       data = _ref.data,
-      bindEvent = _ref.bindEvent;
+      bindEvent = _ref.bindEvent,
+      sendEvent = _ref.sendEvent;
   var template = templates[templateKey];
 
   if (typeof template !== 'string' && typeof template !== 'function') {
@@ -54,7 +59,17 @@ function renderTemplate(_ref) {
   }
 
   if (typeof template === 'function') {
-    return template(data, bindEvent);
+    // @MAJOR no longer pass bindEvent when string templates are removed
+    var params = bindEvent || {};
+    params.html = _preact.html;
+    params.sendEvent = sendEvent;
+    params.components = {
+      Highlight: _index.Highlight,
+      ReverseHighlight: _index.ReverseHighlight,
+      Snippet: _index.Snippet,
+      ReverseSnippet: _index.ReverseSnippet
+    };
+    return template(data, params);
   }
 
   var transformedHelpers = transformHelpersToHogan(helpers, compileOptions, data);

package/cjs/lib/version.js

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

package/cjs/widgets/answers/defaultTemplates.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var defaultTemplates = {
-  header: '',
-  loader: '',
+  header: function header() {
+    return '';
+  },
+  loader: function loader() {
+    return '';
+  },
   item: function item(_item) {
     return JSON.stringify(_item);
   }

package/cjs/widgets/breadcrumb/defaultTemplates.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var defaultTemplates = {
-  home: 'Home',
-  separator: '>'
+  home: function home() {
+    return 'Home';
+  },
+  separator: function separator() {
+    return '>';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/clear-refinements/defaultTemplates.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var defaultTemplates = {
-  resetLabel: 'Clear refinements'
+  resetLabel: function resetLabel() {
+    return 'Clear refinements';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/geo-search/createHTMLMarker.js

@@ -1,12 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _preact = require("preact");
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -29,7 +31,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
-/* global google EventListener */
 var createHTMLMarker = function createHTMLMarker(googleReference) {
   var HTMLMarker = /*#__PURE__*/function (_googleReference$maps) {
     _inherits(HTMLMarker, _googleReference$maps);
@@ -73,7 +74,12 @@ var createHTMLMarker = function createHTMLMarker(googleReference) {
       _this.element = document.createElement('div');
       _this.element.className = className;
       _this.element.style.position = 'absolute';
-      _this.element.innerHTML = template;
+
+      if (_typeof(template) === 'object') {
+        (0, _preact.render)(template, _this.element);
+      } else {
+        _this.element.innerHTML = template;
+      }
 
       _this.setMap(map);
 

package/cjs/widgets/geo-search/defaultTemplates.js

@@ -4,11 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _preact = require("preact");
+
+/** @jsx h */
+var _ref = (0, _preact.h)("p", null, "Your custom HTML Marker");
+
 var defaultTemplates = {
-  HTMLMarker: '<p>Your custom HTML Marker</p>',
-  reset: 'Clear the map refinement',
-  toggle: 'Search as I move the map',
-  redo: 'Redo search here'
+  HTMLMarker: function HTMLMarker() {
+    return _ref;
+  },
+  reset: function reset() {
+    return 'Clear the map refinement';
+  },
+  toggle: function toggle() {
+    return 'Search as I move the map';
+  },
+  redo: function redo() {
+    return 'Redo search here';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/hierarchical-menu/defaultTemplates.js

@@ -4,9 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _preact = require("preact");
+
+var _formatNumber = require("../../lib/formatNumber.js");
+
+var _index = require("../../lib/utils/index.js");
+
+/** @jsx h */
 var defaultTemplates = {
-  item: '<a class="{{cssClasses.link}}" href="{{url}}">' + '<span class="{{cssClasses.label}}">{{label}}</span>' + '<span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>' + '</a>',
-  showMoreText: "\n    {{#isShowingMore}}\n      Show less\n    {{/isShowingMore}}\n    {{^isShowingMore}}\n      Show more\n    {{/isShowingMore}}\n  "
+  item: function item(_ref) {
+    var url = _ref.url,
+        label = _ref.label,
+        count = _ref.count,
+        cssClasses = _ref.cssClasses;
+    return (0, _preact.h)("a", {
+      className: (0, _index.cx)(cssClasses.link),
+      href: url
+    }, (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.label)
+    }, label), (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.count)
+    }, (0, _formatNumber.formatNumber)(count)));
+  },
+  showMoreText: function showMoreText(_ref2) {
+    var isShowingMore = _ref2.isShowingMore;
+    return isShowingMore ? 'Show less' : 'Show more';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/hits/defaultTemplates.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var defaultTemplates = {
-  empty: 'No results',
+  empty: function empty() {
+    return 'No results';
+  },
   item: function item(data) {
     return JSON.stringify(data, null, 2);
   }

package/cjs/widgets/infinite-hits/defaultTemplates.js

@@ -5,9 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var defaultTemplates = {
-  empty: 'No results',
-  showPreviousText: 'Show previous results',
-  showMoreText: 'Show more results',
+  empty: function empty() {
+    return 'No results';
+  },
+  showPreviousText: function showPreviousText() {
+    return 'Show previous results';
+  },
+  showMoreText: function showMoreText() {
+    return 'Show more results';
+  },
   item: function item(data) {
     return JSON.stringify(data, null, 2);
   }

package/cjs/widgets/menu/defaultTemplates.js

@@ -4,9 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _preact = require("preact");
+
+var _formatNumber = require("../../lib/formatNumber.js");
+
+var _index = require("../../lib/utils/index.js");
+
+/** @jsx h */
 var defaultTemplates = {
-  item: '<a class="{{cssClasses.link}}" href="{{url}}">' + '<span class="{{cssClasses.label}}">{{label}}</span>' + '<span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>' + '</a>',
-  showMoreText: "\n    {{#isShowingMore}}\n      Show less\n    {{/isShowingMore}}\n    {{^isShowingMore}}\n      Show more\n    {{/isShowingMore}}\n  "
+  item: function item(_ref) {
+    var cssClasses = _ref.cssClasses,
+        url = _ref.url,
+        label = _ref.label,
+        count = _ref.count;
+    return (0, _preact.h)("a", {
+      className: (0, _index.cx)(cssClasses.link),
+      href: url
+    }, (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.label)
+    }, label), (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.count)
+    }, (0, _formatNumber.formatNumber)(count)));
+  },
+  showMoreText: function showMoreText(_ref2) {
+    var isShowingMore = _ref2.isShowingMore;
+    return isShowingMore ? 'Show less' : 'Show more';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/menu-select/defaultTemplates.js

@@ -4,9 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _formatNumber = require("../../lib/formatNumber.js");
+
 var defaultTemplates = {
-  item: '{{label}} ({{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}})',
-  defaultOption: 'See all'
+  item: function item(_ref) {
+    var label = _ref.label,
+        count = _ref.count;
+    return "".concat(label, " (").concat((0, _formatNumber.formatNumber)(count), ")");
+  },
+  defaultOption: function defaultOption() {
+    return 'See all';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/numeric-menu/defaultTemplates.js

@@ -4,8 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _preact = require("preact");
+
+/** @jsx h */
 var defaultTemplates = {
-  item: "<label class=\"{{cssClasses.label}}\">\n  <input type=\"radio\" class=\"{{cssClasses.radio}}\" name=\"{{attribute}}\"{{#isRefined}} checked{{/isRefined}} />\n  <span class=\"{{cssClasses.labelText}}\">{{label}}</span>\n</label>"
+  item: function item(_ref) {
+    var cssClasses = _ref.cssClasses,
+        attribute = _ref.attribute,
+        label = _ref.label,
+        isRefined = _ref.isRefined;
+    return (0, _preact.h)("label", {
+      className: cssClasses.label
+    }, (0, _preact.h)("input", {
+      type: "radio",
+      className: cssClasses.radio,
+      name: attribute,
+      defaultChecked: isRefined
+    }), (0, _preact.h)("span", {
+      className: cssClasses.labelText
+    }, label));
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/range-input/range-input.js

@@ -42,8 +42,12 @@ var withUsage = (0, _index.createDocumentationMessageGenerator)({
 });
 var suit = (0, _suit.component)('RangeInput');
 var defaultTemplates = {
-  separatorText: 'to',
-  submitText: 'Go'
+  separatorText: function separatorText() {
+    return 'to';
+  },
+  submitText: function submitText() {
+    return 'Go';
+  }
 };
 
 var renderer = function renderer(_ref) {

package/cjs/widgets/rating-menu/defaultTemplates.js

@@ -4,8 +4,64 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _preact = require("preact");
+
+var _formatNumber = require("../../lib/formatNumber.js");
+
+var _index = require("../../lib/utils/index.js");
+
+/** @jsx h */
+function ItemWrapper(_ref) {
+  var children = _ref.children,
+      count = _ref.count,
+      value = _ref.value,
+      url = _ref.url,
+      cssClasses = _ref.cssClasses;
+
+  if (count) {
+    return (0, _preact.h)("a", {
+      className: (0, _index.cx)(cssClasses.link),
+      "aria-label": "".concat(value, " & up"),
+      href: url
+    }, children);
+  }
+
+  return (0, _preact.h)("div", {
+    className: (0, _index.cx)(cssClasses.link),
+    "aria-label": "".concat(value, " & up"),
+    disabled: true
+  }, children);
+}
+
 var defaultTemplates = {
-  item: "{{#count}}<a class=\"{{cssClasses.link}}\" aria-label=\"{{value}} & up\" href=\"{{url}}\">{{/count}}{{^count}}<div class=\"{{cssClasses.link}}\" aria-label=\"{{value}} & up\" disabled>{{/count}}\n  {{#stars}}<svg class=\"{{cssClasses.starIcon}} {{#.}}{{cssClasses.fullStarIcon}}{{/.}}{{^.}}{{cssClasses.emptyStarIcon}}{{/.}}\" aria-hidden=\"true\" width=\"24\" height=\"24\">\n    {{#.}}<use xlink:href=\"#ais-RatingMenu-starSymbol\"></use>{{/.}}{{^.}}<use xlink:href=\"#ais-RatingMenu-starEmptySymbol\"></use>{{/.}}\n  </svg>{{/stars}}\n  <span class=\"{{cssClasses.label}}\">& Up</span>\n  {{#count}}<span class=\"{{cssClasses.count}}\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>{{/count}}\n{{#count}}</a>{{/count}}{{^count}}</div>{{/count}}"
+  item: function item(_ref2) {
+    var count = _ref2.count,
+        value = _ref2.value,
+        url = _ref2.url,
+        stars = _ref2.stars,
+        cssClasses = _ref2.cssClasses;
+    return (0, _preact.h)(ItemWrapper, {
+      count: count,
+      value: value,
+      url: url,
+      cssClasses: cssClasses
+    }, stars.map(function (isFull, index) {
+      return (0, _preact.h)("svg", {
+        key: index,
+        className: (0, _index.cx)([(0, _index.cx)(cssClasses.starIcon), (0, _index.cx)(isFull ? cssClasses.fullStarIcon : cssClasses.emptyStarIcon)]),
+        "aria-hidden": "true",
+        width: "24",
+        height: "24"
+      }, (0, _preact.h)("use", {
+        xlinkHref: isFull ? '#ais-RatingMenu-starSymbol' : '#ais-RatingMenu-starEmptySymbol'
+      }));
+    }), (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.label)
+    }, "& Up"), count && (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.count)
+    }, (0, _formatNumber.formatNumber)(count)));
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/refinement-list/defaultTemplates.js

@@ -4,10 +4,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
+var _preact = require("preact");
+
+var _formatNumber = require("../../lib/formatNumber.js");
+
+var _index = require("../../lib/utils/index.js");
+
+/** @jsx h */
 var defaultTemplates = {
-  item: "<label class=\"{{cssClasses.label}}\">\n  <input type=\"checkbox\"\n         class=\"{{cssClasses.checkbox}}\"\n         value=\"{{value}}\"\n         {{#isRefined}}checked{{/isRefined}} />\n  <span class=\"{{cssClasses.labelText}}\">{{#isFromSearch}}{{{highlighted}}}{{/isFromSearch}}{{^isFromSearch}}{{highlighted}}{{/isFromSearch}}</span>\n  <span class=\"{{cssClasses.count}}\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>\n</label>",
-  showMoreText: "\n    {{#isShowingMore}}\n      Show less\n    {{/isShowingMore}}\n    {{^isShowingMore}}\n      Show more\n    {{/isShowingMore}}\n    ",
-  searchableNoResults: 'No results'
+  item: function item(_ref) {
+    var cssClasses = _ref.cssClasses,
+        count = _ref.count,
+        value = _ref.value,
+        highlighted = _ref.highlighted,
+        isRefined = _ref.isRefined,
+        isFromSearch = _ref.isFromSearch;
+    return (0, _preact.h)("label", {
+      className: (0, _index.cx)(cssClasses.label)
+    }, (0, _preact.h)("input", {
+      type: "checkbox",
+      className: (0, _index.cx)(cssClasses.checkbox),
+      value: value,
+      defaultChecked: isRefined
+    }), (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.labelText),
+      dangerouslySetInnerHTML: isFromSearch ? {
+        __html: highlighted
+      } : undefined
+    }, !isFromSearch && highlighted), (0, _preact.h)("span", {
+      className: (0, _index.cx)(cssClasses.count)
+    }, (0, _formatNumber.formatNumber)(count)));
+  },
+  showMoreText: function showMoreText(_ref2) {
+    var isShowingMore = _ref2.isShowingMore;
+    return isShowingMore ? 'Show less' : 'Show more';
+  },
+  searchableNoResults: function searchableNoResults() {
+    return 'No results';
+  }
 };
 var _default = defaultTemplates;
 exports.default = _default;

package/cjs/widgets/relevant-sort/defaultTemplates.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var defaultTemplates = {
-  text: '',
+  text: function text() {
+    return '';
+  },
   button: function button(_ref) {
     var isRelevantSorted = _ref.isRelevantSorted;
     return isRelevantSorted ? 'See all results' : 'See relevant results';