make itemComponent required in js

Author: raed667

examples/js/getting-started/src/app.js

@@ -65,6 +65,11 @@ export function App() {
                   facetName="brand"
                   limit={6}
                   layoutComponent={Carousel}
+                  itemComponent={({ item }) => (
+                    <div>
+                      {item.facetName}:{item.facetValue}
+                    </div>
+                  )}
                 />
               </div>
             </div>

examples/react/getting-started/src/App.tsx

@@ -12,8 +12,8 @@ import type {
   RecordWithObjectID,
   Renderer,
   SendEventForHits,
+  TrendingFacetHit,
 } from '../types';
-import type { TrendingFacetHit } from 'algoliasearch';
 
 export type CarouselProps<
   TObject,

packages/instantsearch-ui-components/src/components/Carousel.tsx

@@ -5,7 +5,6 @@ import { cx } from '../lib';
 import {
   createDefaultEmptyComponent,
   createDefaultHeaderComponent,
-  createDefaultItemComponent,
 } from './recommend-shared';
 
 import type {
@@ -18,8 +17,8 @@ import type {
   RecordWithObjectID,
   Renderer,
   SendEventForHits,
+  TrendingFacetHit,
 } from '../types';
-import type { TrendingFacetHit } from 'algoliasearch';
 
 type TrendingFacetLayoutProps<TClassNames extends Record<string, string>> = {
   classNames: TClassNames;
@@ -33,7 +32,7 @@ type TrendingFacetLayoutProps<TClassNames extends Record<string, string>> = {
 export type TrendingFacetsComponentProps<
   TComponentProps extends Record<string, unknown> = Record<string, unknown>
 > = {
-  itemComponent?: (
+  itemComponent: (
     props: RecommendItemComponentProps<TrendingFacetHit> & TComponentProps
   ) => JSX.Element;
   items: TrendingFacetHit[];
@@ -69,10 +68,7 @@ export function createTrendingFacetsComponent({
         createElement,
         Fragment,
       }),
-      itemComponent: ItemComponent = createDefaultItemComponent({
-        createElement,
-        Fragment,
-      }),
+      itemComponent: ItemComponent,
       layout: Layout = createListComponent({ createElement, Fragment }),
       items,
       status,

packages/instantsearch-ui-components/src/components/TrendingFacets.tsx

@@ -100,3 +100,21 @@ export type RecommendItemComponentProps<TObject> = {
 
 // @TODO: use instantsearch status instead
 export type RecommendStatus = 'idle' | 'loading' | 'stalled' | 'error';
+
+// for convenience, redefined here from instantsearch
+export type TrendingFacetHit = {
+  /**
+   * Recommendation score.
+   */
+  _score: number;
+
+  /**
+   * Facet attribute. To be used in combination with `facetValue`. If specified, only recommendations matching the facet filter will be returned.
+   */
+  facetName: string;
+
+  /**
+   * Facet value. To be used in combination with `facetName`. If specified, only recommendations matching the facet filter will be returned.
+   */
+  facetValue: string;
+};

packages/instantsearch-ui-components/src/types/Recommend.ts

@@ -99,7 +99,7 @@ function createRenderer({
             />
           );
         }
-      : undefined;
+      : () => <div></div>;
 
     const emptyComponent = (
       templates.empty
@@ -180,11 +180,6 @@ export type TrendingFacetsTemplates = Partial<{
     > & { cssClasses: RecommendClassNames }
   >;
 
-  /**
-   * Template to use for each result. This template will receive an object containing a single record.
-   */
-  item: TemplateWithBindEvent<TrendingFacetHit>;
-
   /**
    * Template to use to wrap all items.
    */
@@ -201,7 +196,9 @@ export type TrendingFacetsTemplates = Partial<{
       cssClasses: Pick<TrendingFacetsCSSClasses, 'list' | 'item'>;
     }
   >;
-}>;
+}> & {
+  item: TemplateWithBindEvent<TrendingFacetHit>;
+};
 
 type TrendingFacetsWidgetParams = {
   /**
@@ -212,7 +209,7 @@ type TrendingFacetsWidgetParams = {
   /**
    * Templates to customize the widget.
    */
-  templates?: TrendingFacetsTemplates;
+  templates: TrendingFacetsTemplates;
 
   /**
    * CSS classes to add to the widget elements.
@@ -238,7 +235,7 @@ export default (function trendingFacets(
     threshold,
     escapeHTML,
     transformItems,
-    templates = {},
+    templates,
     cssClasses = {},
   } = widgetParams || {};
 

packages/instantsearch.js/src/widgets/trending-facets/trending-facets.tsx

@@ -1,5 +1,5 @@
 import { createTrendingFacetsComponent } from 'instantsearch-ui-components';
-import React, { createElement, Fragment, useMemo } from 'react';
+import React, { createElement, Fragment } from 'react';
 import { useInstantSearch, useTrendingFacets } from 'react-instantsearch-core';
 
 import type {
@@ -24,7 +24,7 @@ export type TrendingFacetsProps = Omit<
   keyof UiProps
 > &
   UseTrendingFacetsProps & {
-    itemComponent?: TrendingFacetsUiComponentProps['itemComponent'];
+    itemComponent: TrendingFacetsUiComponentProps['itemComponent'];
     headerComponent?: TrendingFacetsUiComponentProps['headerComponent'];
     emptyComponent?: TrendingFacetsUiComponentProps['emptyComponent'];
     layoutComponent?: TrendingFacetsUiComponentProps['layout'];
@@ -70,17 +70,9 @@ export function TrendingFacets({
         })
     : undefined;
 
-  const _itemComponent: typeof itemComponent = useMemo(
-    () =>
-      itemComponent
-        ? (itemProps) => itemComponent({ ...itemProps })
-        : undefined,
-    [itemComponent]
-  );
-
   const uiProps: UiProps = {
     items,
-    itemComponent: _itemComponent,
+    itemComponent,
     headerComponent,
     emptyComponent,
     layout,