feat(ts): convert stats, connectStats (#4681)

* feat(ts): convert stats, connectStats

* Add type for `Relevant Sort` response

Co-authored-by: Haroen Viaene <hello@haroen.me>

Author: shortcuts

src/components/Stats/Stats.js

@@ -0,0 +1,53 @@
+/** @jsx h */
+
+import { h } from 'preact';
+import cx from 'classnames';
+import { StatsCSSClasses, StatsTemplates } from '../../widgets/stats/stats';
+import Template from '../Template/Template';
+
+type StatsProps = {
+  cssClasses: StatsCSSClasses;
+  templateProps: {
+    [key: string]: any;
+    templates: StatsTemplates;
+  };
+  hitsPerPage: number | undefined;
+  nbHits: number;
+  nbSortedHits: number | undefined;
+  areHitsSorted: boolean;
+  nbPages: number;
+  page: number;
+  processingTimeMS: number;
+  query: string;
+};
+
+const Stats = ({
+  nbHits,
+  nbSortedHits,
+  cssClasses,
+  templateProps,
+  ...rest
+}: StatsProps) => (
+  <div className={cx(cssClasses.root)}>
+    <Template
+      {...templateProps}
+      templateKey="text"
+      rootTagName="span"
+      rootProps={{ className: cssClasses.text }}
+      data={{
+        hasManySortedResults: nbSortedHits && nbSortedHits > 1,
+        hasNoSortedResults: nbSortedHits === 0,
+        hasOneSortedResults: nbSortedHits === 1,
+        hasManyResults: nbHits > 1,
+        hasNoResults: nbHits === 0,
+        hasOneResult: nbHits === 1,
+        nbHits,
+        nbSortedHits,
+        cssClasses,
+        ...rest,
+      }}
+    />
+  </div>
+);
+
+export default Stats;

src/components/Stats/Stats.tsx

@@ -5,6 +5,8 @@ import { mount } from 'enzyme';
 import Stats from '../Stats';
 import defaultTemplates from '../../../widgets/stats/defaultTemplates';
 import createHelpers from '../../../lib/createHelpers';
+import { render } from '@testing-library/preact';
+import { ReactElementLike } from 'prop-types';
 
 describe('Stats', () => {
   const cssClasses = {
@@ -14,7 +16,12 @@ describe('Stats', () => {
 
   it('should render <Template data= />', () => {
     const wrapper = mount(
-      <Stats {...getProps()} templateProps={{ templates: defaultTemplates }} />
+      (
+        <Stats
+          {...getProps()}
+          templateProps={{ templates: defaultTemplates }}
+        />
+      ) as ReactElementLike
     );
 
     const defaultProps = {
@@ -25,25 +32,46 @@ describe('Stats', () => {
     };
 
     expect(wrapper.find('Template').props().data).toMatchObject(defaultProps);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper).toMatchInlineSnapshot(`
+      Array [
+        <div
+          className="root"
+        >
+          Array [
+            <span
+              className="text"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "results found in 42ms",
+                }
+              }
+            />,
+          ]
+        </div>,
+      ]
+    `);
   });
 
   it('should render <Stats /> with custom CSS classes', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Stats
+        {...getProps()}
         templateProps={{
           templates: defaultTemplates,
         }}
-        nbHits={1}
-        cssClasses={cssClasses}
+        cssClasses={{
+          root: 'customRoot',
+          text: 'customText',
+        }}
       />
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container.querySelector('.customRoot')).toBeInTheDocument();
+    expect(container.querySelector('.customText')).toBeInTheDocument();
   });
 
   it('should render sorted hits', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Stats
         {...getProps({ nbSortedHits: 150, areHitsSorted: true })}
         templateProps={{
@@ -54,20 +82,17 @@ describe('Stats', () => {
         }}
       />
     );
-    expect(wrapper.find('.text')).toMatchInlineSnapshot(`
+    expect(container.querySelector('.text')).toMatchInlineSnapshot(`
       <span
-        className="text"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "150 relevant results sorted out of 1,234 found in 42ms",
-          }
-        }
-      />
+        class="text"
+      >
+        150 relevant results sorted out of 1,234 found in 42ms
+      </span>
     `);
   });
 
   it('should render 1 sorted hit', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Stats
         {...getProps({ nbSortedHits: 1, areHitsSorted: true })}
         templateProps={{
@@ -78,22 +103,19 @@ describe('Stats', () => {
         }}
       />
     );
-    expect(wrapper.find('.text')).toMatchInlineSnapshot(`
+    expect(container.querySelector('.text')).toMatchInlineSnapshot(`
       <span
-        className="text"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "1 relevant result sorted out of 1,234 found in 42ms",
-          }
-        }
-      />
+        class="text"
+      >
+        1 relevant result sorted out of 1,234 found in 42ms
+      </span>
     `);
   });
 
   it('should render 0 sorted hit', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Stats
-        {...getProps({ nbSortedHits: 0, areHitsSorted: true })}
+        {...getProps({ areHitsSorted: true })}
         templateProps={{
           templates: defaultTemplates,
           templatesConfig: {
@@ -102,21 +124,20 @@ describe('Stats', () => {
         }}
       />
     );
-    expect(wrapper.find('.text')).toMatchInlineSnapshot(`
+    expect(container.querySelector('.text')).toMatchInlineSnapshot(`
       <span
-        className="text"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "No relevant results sorted out of 1,234 found in 42ms",
-          }
-        }
-      />
+        class="text"
+      >
+        No relevant results sorted out of 1,234 found in 42ms
+      </span>
     `);
   });
 
   function getProps(extraProps = {}) {
     return {
       cssClasses,
+      areHitsSorted: false,
+      nbSortedHits: 0,
       hitsPerPage: 10,
       nbHits: 1234,
       nbPages: 124,

src/components/Stats/__tests__/Stats-test.js src/components/Stats/__tests__/Stats-test.tsx

@@ -21,19 +21,20 @@ describe('connectStats', () => {
       index: 'indexName',
     });
 
-    widget.init(
+    widget.init!(
       createInitOptions({
         helper,
         state: helper.state,
       })
     );
 
-    return [widget, helper];
+    return [widget, helper] as const;
   };
 
   describe('Usage', () => {
     it('throws without render function', () => {
       expect(() => {
+        // @ts-expect-error
         connectStats()({});
       }).toThrowErrorMatchingInlineSnapshot(`
 "The render function is not valid (received type Undefined).
@@ -42,6 +43,15 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
 `);
     });
 
+    it('accepts not being passed widgetParams', () => {
+      const render = jest.fn();
+      const unmount = jest.fn();
+
+      const customStats = connectStats(render, unmount);
+      // @ts-expect-error
+      expect(() => customStats()).not.toThrow();
+    });
+
     it('is a widget', () => {
       const render = jest.fn();
       const unmount = jest.fn();
@@ -65,13 +75,13 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
       const createStats = connectStats(renderFn, unmountFn);
-      const stats = createStats();
+      const stats = createStats({});
       const helper = jsHelper(createSearchClient(), 'indexName', {
         index: 'indexName',
       });
 
       const renderState = stats.getRenderState(
-        { stats: {} },
+        {},
         createInitOptions({ helper })
       );
 
@@ -92,7 +102,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
       const [stats, helper] = getInitializedWidget();
 
       const renderState = stats.getRenderState(
-        { stats: {} },
+        {},
         createRenderOptions({
           helper,
           state: helper.state,
@@ -119,7 +129,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
       const [stats, helper] = getInitializedWidget();
 
       const renderState = stats.getRenderState(
-        { stats: {} },
+        {},
         createRenderOptions({
           helper,
           state: helper.state,
@@ -158,7 +168,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
       const createStats = connectStats(renderFn, unmountFn);
-      const stats = createStats();
+      const stats = createStats({});
       const helper = jsHelper(createSearchClient(), 'indexName', {
         index: 'indexName',
       });
@@ -332,14 +342,10 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
       foo: 'bar', // dummy param to test `widgetParams`
     });
 
-    const helper = jsHelper({});
+    const helper = jsHelper(createSearchClient(), '');
     helper.search = jest.fn();
 
-    widget.init({
-      helper,
-      state: helper.state,
-      createURL: () => '#',
-    });
+    widget.init!(createInitOptions());
 
     {
       // should call the rendering once with isFirstRendering to true
@@ -367,22 +373,28 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
       expect(widgetParams).toEqual({ foo: 'bar' });
     }
 
-    widget.render({
-      results: new SearchResults(helper.state, [
-        {
-          hits: [{ One: 'record' }],
-          nbPages: 1,
-          nbHits: 1,
-          hitsPerPage: helper.state.hitsPerPage,
-          page: helper.state.page,
-          query: '',
-          processingTimeMS: 12,
-        },
-      ]),
-      state: helper.state,
-      helper,
-      createURL: () => '#',
-    });
+    widget.render!(
+      createRenderOptions({
+        createURL: () => '#',
+        state: helper.state,
+        helper,
+        results: new SearchResults(helper.state, [
+          createSingleSearchResponse({
+            hits: [
+              {
+                objectID: 'string',
+              },
+            ],
+            nbPages: 1,
+            nbHits: 1,
+            hitsPerPage: helper.state.hitsPerPage,
+            page: helper.state.page,
+            query: '',
+            processingTimeMS: 12,
+          }),
+        ]),
+      })
+    );
 
     {
       // Should call the rendering a second time, with isFirstRendering to false
@@ -400,10 +412,10 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
         processingTimeMS,
         query,
       } = rendering.mock.calls[rendering.mock.calls.length - 1][0];
-      expect(hitsPerPage).toBe(helper.state.hitsPerPage);
+      expect(hitsPerPage).toBe(20);
       expect(nbHits).toBe(1);
       expect(nbPages).toBe(1);
-      expect(page).toBe(helper.state.page);
+      expect(page).toBe(0);
       expect(processingTimeMS).toBe(12);
       expect(query).toBe('');
     }
@@ -413,7 +425,9 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/#c
     const rendering = () => {};
     const makeWidget = connectStats(rendering);
     const widget = makeWidget({});
-    const helper = jsHelper({});
-    expect(() => widget.dispose({ helper, state: helper.state })).not.toThrow();
+    const helper = jsHelper(createSearchClient(), '');
+    expect(() =>
+      widget.dispose!({ helper, state: helper.state })
+    ).not.toThrow();
   });
 });

src/components/Stats/__tests__/__snapshots__/Stats-test.js.snap

@@ -3,58 +3,67 @@ import {
   createDocumentationMessageGenerator,
   noop,
 } from '../../lib/utils';
+import { Connector } from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
   name: 'stats',
   connector: true,
 });
 
-/**
- * @typedef {Object} StatsRenderingOptions
- * @property {number} hitsPerPage The maximum number of hits per page returned by Algolia.
- * @property {number} nbHits The number of hits in the result set.
- * @property {number} nbPages The number of pages computed for the result set.
- * @property {number} page The current page.
- * @property {number} processingTimeMS The time taken to compute the results inside the Algolia engine.
- * @property {string} query The query used for the current search.
- * @property {object} widgetParams All original `CustomStatsWidgetParams` forwarded to the `renderFn`.
- */
-
-/**
- * @typedef {Object} CustomStatsWidgetParams
- */
-
 /**
  * **Stats** connector provides the logic to build a custom widget that will displays
  * search statistics (hits number and processing time).
- *
- * @type {Connector}
- * @param {function(StatsRenderingOptions, boolean)} renderFn Rendering function for the custom **Stats** widget.
- * @param {function} unmountFn Unmount function called when the widget is disposed.
- * @return {function(CustomStatsWidgetParams)} Re-usable widget factory for a custom **Stats** widget.
- * @example
- * // custom `renderFn` to render the custom Stats widget
- * function renderFn(StatsRenderingOptions, isFirstRendering) {
- *   if (isFirstRendering) return;
- *
- *   StatsRenderingOptions.widgetParams.containerNode
- *     .html(StatsRenderingOptions.nbHits + ' results found in ' + StatsRenderingOptions.processingTimeMS);
- * }
- *
- * // connect `renderFn` to Stats logic
- * var customStatsWidget = instantsearch.connectors.connectStats(renderFn);
- *
- * // mount widget on the page
- * search.addWidgets([
- *   customStatsWidget({
- *     containerNode: $('#custom-stats-container'),
- *   })
- * ]);
  */
-export default function connectStats(renderFn, unmountFn = noop) {
+
+export type StatsRendererOptions = {
+  /**
+   * The maximum number of hits per page returned by Algolia.
+   */
+  hitsPerPage?: number;
+  /**
+   * The number of hits in the result set.
+   */
+  nbHits: number;
+  /**
+   * The number of sorted hits in the result set (when using Relevant sort).
+   */
+  nbSortedHits?: number;
+  /**
+   * Indicates whether the index is currently using Relevant sort and is displaying only sorted hits.
+   */
+  areHitsSorted: boolean;
+  /**
+   * The number of pages computed for the result set.
+   */
+  nbPages: number;
+  /**
+   * The current page.
+   */
+  page: number;
+  /**
+   * The time taken to compute the results inside the Algolia engine.
+   */
+  processingTimeMS: number;
+  /**
+   * The query used for the current search.
+   */
+  query: string;
+};
+
+export type StatsConnectorParams = Record<string, unknown>;
+
+export type StatsConnector = Connector<
+  StatsRendererOptions,
+  StatsConnectorParams
+>;
+
+const connectStats: StatsConnector = function connectStats(
+  renderFn,
+  unmountFn = noop
+) {
   checkRendering(renderFn, withUsage());
 
-  return (widgetParams = {}) => ({
+  return widgetParams => ({
     $$type: 'ais.stats',
 
     init(initOptions) {
@@ -123,4 +132,6 @@ export default function connectStats(renderFn, unmountFn = noop) {
       };
     },
   });
-}
+};
+
+export default connectStats;

src/connectors/stats/__tests__/connectStats-test.js src/connectors/stats/__tests__/connectStats-test.ts

@@ -17,6 +17,11 @@ type SearchForFacetValuesResponseV3 = AlgoliaSearch.SearchForFacetValues.Respons
 /** @ts-ignore */
 type SearchForFacetValuesResponseV4 = ClientSearch.SearchForFacetValuesResponse;
 
+type RelevantSortResponse = {
+  appliedRelevancyStrictness?: number;
+  nbSortedHits?: number;
+};
+
 type DummySearchClientV4 = {
   readonly transporter: any;
 };
@@ -38,7 +43,7 @@ export type SearchResponse<
   THit
 > = DefaultSearchClient extends DummySearchClientV4
   ? SearchResponseV4<THit>
-  : SearchResponseV3<THit> & { appliedRelevancyStrictness?: number };
+  : SearchResponseV3<THit> & RelevantSortResponse;
 
 export type SearchForFacetValuesResponse = DefaultSearchClient extends DummySearchClientV4
   ? SearchForFacetValuesResponseV4

src/connectors/stats/connectStats.js src/connectors/stats/connectStats.ts

@@ -83,6 +83,10 @@ import {
   RefinementListRendererOptions,
   RefinementListConnectorParams,
 } from '../connectors/refinement-list/connectRefinementList';
+import {
+  StatsConnectorParams,
+  StatsRendererOptions,
+} from '../connectors/stats/connectStats';
 
 export type ScopedResult = {
   indexId: string;
@@ -353,6 +357,7 @@ export type IndexRenderState = Partial<{
     RelevantSortRendererOptions,
     RelevantSortConnectorParams
   >;
+  stats: WidgetRenderState<StatsRendererOptions, StatsConnectorParams>;
 }>;
 
 export type WidgetRenderState<

src/types/algoliasearch.ts

@@ -0,0 +1,162 @@
+import { render as preactRender } from 'preact';
+import stats from '../stats';
+import { castToJestMock } from '../../../../test/utils/castToJestMock';
+
+const render = castToJestMock(preactRender);
+jest.mock('preact', () => {
+  const module = jest.requireActual('preact');
+  module.render = jest.fn();
+  return module;
+});
+
+const instantSearchInstance = { templatesConfig: undefined };
+
+describe('Usage', () => {
+  it('throws without container', () => {
+    expect(() => {
+      // @ts-expect-error
+      stats({ container: undefined });
+    }).toThrowErrorMatchingInlineSnapshot(`
+"The \`container\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/"
+`);
+  });
+});
+
+describe('stats()', () => {
+  let container;
+  let widget;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    widget = stats({ container, cssClasses: { text: ['text', 'cx'] } });
+
+    widget.init({
+      helper: { state: {} },
+      instantSearchInstance,
+    });
+
+    render.mockClear();
+  });
+
+  it('calls twice render(<Stats props />, container)', () => {
+    const results = {
+      hits: [{}, {}],
+      nbHits: 20,
+      page: 0,
+      nbPages: 10,
+      hitsPerPage: 2,
+      processingTimeMS: 42,
+      query: 'a query',
+    };
+    widget.render({ results, instantSearchInstance });
+    widget.render({ results, instantSearchInstance });
+
+    const [firstRender, secondRender] = render.mock.calls;
+
+    expect(render).toHaveBeenCalledTimes(2);
+    // @ts-expect-error
+    expect(firstRender[0].props).toMatchInlineSnapshot(`
+      Object {
+        "areHitsSorted": false,
+        "cssClasses": Object {
+          "root": "ais-Stats",
+          "text": "ais-Stats-text text cx",
+        },
+        "hitsPerPage": 2,
+        "nbHits": 20,
+        "nbPages": 10,
+        "nbSortedHits": undefined,
+        "page": 0,
+        "processingTimeMS": 42,
+        "query": "a query",
+        "templateProps": Object {
+          "templates": Object {
+            "text": "
+          {{#areHitsSorted}}
+            {{#hasNoSortedResults}}No relevant results{{/hasNoSortedResults}}
+            {{#hasOneSortedResults}}1 relevant result{{/hasOneSortedResults}}
+            {{#hasManySortedResults}}{{#helpers.formatNumber}}{{nbSortedHits}}{{/helpers.formatNumber}} relevant results{{/hasManySortedResults}}
+            sorted out of {{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}}
+          {{/areHitsSorted}}
+          {{^areHitsSorted}}
+            {{#hasNoResults}}No results{{/hasNoResults}}
+            {{#hasOneResult}}1 result{{/hasOneResult}}
+            {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}
+          {{/areHitsSorted}}
+          found in {{processingTimeMS}}ms",
+          },
+          "templatesConfig": undefined,
+          "useCustomCompileOptions": Object {
+            "text": false,
+          },
+        },
+      }
+    `);
+    expect(firstRender[1]).toEqual(container);
+    // @ts-expect-error
+    expect(secondRender[0].props).toMatchInlineSnapshot(`
+      Object {
+        "areHitsSorted": false,
+        "cssClasses": Object {
+          "root": "ais-Stats",
+          "text": "ais-Stats-text text cx",
+        },
+        "hitsPerPage": 2,
+        "nbHits": 20,
+        "nbPages": 10,
+        "nbSortedHits": undefined,
+        "page": 0,
+        "processingTimeMS": 42,
+        "query": "a query",
+        "templateProps": Object {
+          "templates": Object {
+            "text": "
+          {{#areHitsSorted}}
+            {{#hasNoSortedResults}}No relevant results{{/hasNoSortedResults}}
+            {{#hasOneSortedResults}}1 relevant result{{/hasOneSortedResults}}
+            {{#hasManySortedResults}}{{#helpers.formatNumber}}{{nbSortedHits}}{{/helpers.formatNumber}} relevant results{{/hasManySortedResults}}
+            sorted out of {{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}}
+          {{/areHitsSorted}}
+          {{^areHitsSorted}}
+            {{#hasNoResults}}No results{{/hasNoResults}}
+            {{#hasOneResult}}1 result{{/hasOneResult}}
+            {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}
+          {{/areHitsSorted}}
+          found in {{processingTimeMS}}ms",
+          },
+          "templatesConfig": undefined,
+          "useCustomCompileOptions": Object {
+            "text": false,
+          },
+        },
+      }
+    `);
+    expect(secondRender[1]).toEqual(container);
+  });
+
+  it('renders sorted hits', () => {
+    const results = {
+      hits: [{}, {}],
+      nbHits: 20,
+      nbSortedHits: 16,
+      appliedRelevancyStrictness: 20,
+      page: 0,
+      nbPages: 10,
+      hitsPerPage: 2,
+      processingTimeMS: 42,
+      query: 'second query',
+    };
+    widget.render({ results, instantSearchInstance });
+
+    const [firstRender] = render.mock.calls;
+    // @ts-expect-error
+    expect(firstRender[0].props).toEqual(
+      expect.objectContaining({
+        areHitsSorted: true,
+        nbSortedHits: 16,
+      })
+    );
+  });
+});

src/types/widget.ts

@@ -0,0 +1 @@
+export { defaultTemplates as default } from './stats';

src/widgets/stats/__tests__/__snapshots__/stats-test.js.snap

@@ -0,0 +1,171 @@
+/** @jsx h */
+
+import { h, render } from 'preact';
+import cx from 'classnames';
+import Stats from '../../components/Stats/Stats';
+import connectStats, {
+  StatsConnectorParams,
+  StatsRendererOptions,
+} from '../../connectors/stats/connectStats';
+import {
+  prepareTemplateProps,
+  getContainerNode,
+  createDocumentationMessageGenerator,
+} from '../../lib/utils';
+import { component } from '../../lib/suit';
+import { Renderer, Template, WidgetFactory } from '../../types';
+
+const withUsage = createDocumentationMessageGenerator({ name: 'stats' });
+const suit = component('Stats');
+
+export type StatsCSSClasses = {
+  /**
+   * CSS class to add to the root element.
+   */
+  root: string | string[];
+
+  /**
+   * CSS class to add to the text span element.
+   */
+  text: string | string[];
+};
+
+export type StatsTemplates = {
+  /**
+   * Text template, provided with `hasManyResults`, `hasNoResults`, `hasOneResult`, `hitsPerPage`, `nbHits`, `nbSortedHits`, `nbPages`, `areHitsSorted`, `page`, `processingTimeMS`, `query`.
+   */
+  text: Template<
+    {
+      hasManyResults: boolean;
+      hasNoResults: boolean;
+      hasOneResult: boolean;
+    } & StatsRendererOptions
+  >;
+};
+
+export type StatsWidgetParams = {
+  /**
+   * CSS Selector or HTMLElement to insert the widget.
+   */
+  container: string | HTMLElement;
+
+  /**
+   * Templates to use for the widget.
+   */
+  templates?: Partial<StatsTemplates>;
+
+  /**
+   * CSS classes to add.
+   */
+  cssClasses?: Partial<StatsCSSClasses>;
+};
+
+export type StatsWidget = WidgetFactory<
+  StatsRendererOptions,
+  StatsConnectorParams,
+  StatsWidgetParams
+>;
+
+export const defaultTemplates: StatsTemplates = {
+  text: `
+    {{#areHitsSorted}}
+      {{#hasNoSortedResults}}No relevant results{{/hasNoSortedResults}}
+      {{#hasOneSortedResults}}1 relevant result{{/hasOneSortedResults}}
+      {{#hasManySortedResults}}{{#helpers.formatNumber}}{{nbSortedHits}}{{/helpers.formatNumber}} relevant results{{/hasManySortedResults}}
+      sorted out of {{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}}
+    {{/areHitsSorted}}
+    {{^areHitsSorted}}
+      {{#hasNoResults}}No results{{/hasNoResults}}
+      {{#hasOneResult}}1 result{{/hasOneResult}}
+      {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} results{{/hasManyResults}}
+    {{/areHitsSorted}}
+    found in {{processingTimeMS}}ms`,
+};
+
+const renderer = ({
+  renderState,
+  cssClasses,
+  containerNode,
+  templates,
+}): Renderer<StatsRendererOptions, Partial<StatsWidgetParams>> => (
+  {
+    hitsPerPage,
+    nbHits,
+    nbSortedHits,
+    areHitsSorted,
+    nbPages,
+    page,
+    processingTimeMS,
+    query,
+    instantSearchInstance,
+  },
+  isFirstRendering
+) => {
+  if (isFirstRendering) {
+    renderState.templateProps = prepareTemplateProps({
+      defaultTemplates,
+      templatesConfig: instantSearchInstance.templatesConfig,
+      templates,
+    });
+
+    return;
+  }
+
+  render(
+    <Stats
+      cssClasses={cssClasses}
+      hitsPerPage={hitsPerPage}
+      nbHits={nbHits}
+      nbSortedHits={nbSortedHits}
+      areHitsSorted={areHitsSorted}
+      nbPages={nbPages}
+      page={page}
+      processingTimeMS={processingTimeMS}
+      query={query}
+      templateProps={renderState.templateProps}
+    />,
+    containerNode
+  );
+};
+
+/**
+ * The `stats` widget is used to display useful insights about the current results.
+ *
+ * By default, it will display the **number of hits** and the time taken to compute the
+ * results inside the engine.
+ */
+const stats: StatsWidget = widgetParams => {
+  const {
+    container,
+    cssClasses: userCssClasses = {} as StatsCSSClasses,
+    templates = defaultTemplates,
+  } = widgetParams || {};
+  if (!container) {
+    throw new Error(withUsage('The `container` option is required.'));
+  }
+
+  const containerNode = getContainerNode(container);
+
+  const cssClasses: StatsCSSClasses = {
+    root: cx(suit(), userCssClasses.root),
+    text: cx(suit({ descendantName: 'text' }), userCssClasses.text),
+  };
+
+  const specializedRenderer = renderer({
+    containerNode,
+    cssClasses,
+    templates,
+    renderState: {},
+  });
+
+  const makeWidget = connectStats(specializedRenderer, () =>
+    render(null, containerNode)
+  );
+
+  return {
+    ...makeWidget({}),
+    $$widgetType: 'ais.stats',
+  };
+};
+
+export default stats;